/* ===== MAIN COLOR SETTINGS ===== */
/* These are the main colors used throughout the form in light mode */
    :root {
       --background-color: #fff; 
      /* --background-color: radial-gradient(circle, #05668d, #eef8fb); */
      --text-color: #084c61;
      --captcha-button-color: #f8fafc;
      --input-bg-color: #f8fafc;
      --input-border-color: #ccd6df;
      --input-focus-border-color: #0072AE;
      --input-focus-bg-color: #eef8fb;
      --button-bg-gradient: linear-gradient(90deg, #0072AE 50%, #66aace 100%);
      --button-hover-bg-gradient: linear-gradient(90deg, #00669c 50%, #66aace 100%);
      --header-bg-color: #ffffff;
      --header-text-color: #000000;
      --footer-bg-color: #b9b9b927;
      --footer-text-color: #417b96;
      --box-shadow-color: rgba(42, 62, 88, 0.14);
      --fo-he-bg-color: #c7cfd800;
      --xcontainer-bg-color: #81838600;
      --hint-box-background-color: #0072AE;
      --hint-box-shadow-color: rgba(74, 115, 168, 0.493);
      --hint-box-font-color: #ffffff;
      --hyperlink-font-color: #000000a4;
      --checkbox-focus-background: #eef8fb85;
      --sig-background-color: #e1ebf394;
      --star-color: #0750bd;
      --font-family: Leitfaden, Arial, 'Segoe UI', sans-serif;
    }

    /* ===== DARK MODE SETTINGS ===== */
/* These colors are used when your device is set to dark mode */
    @media (prefers-color-scheme: dark) {
      :root {
        --background-color: #292f36;
        --text-color: #e3e4e5;
        --captcha-button-color: #f8fafc;
        --input-bg-color: #3a3f47;
        --input-border-color: #5a5f67;
        --input-focus-border-color: #40c9c4;
        --input-focus-bg-color: #354049;
        --button-bg-gradient: linear-gradient(90deg, #3aa8a5d5 40%, #05668d 100%);
        --button-hover-bg-gradient: linear-gradient(90deg, #035071 40%, #3aa8a5d5 100%);
        --header-bg-color: #292f36;
        --header-text-color: #a9cbd1;
        --footer-bg-color: #292f36;
        --footer-text-color: #72a3af;
        --box-shadow-color: rgba(0, 0, 0, 0.7);
        --fo-he-bg-color: #292f36;
        --xcontainer-bg-color: #292f3600;
        --hint-box-background-color: #293446;
        --hint-box-shadow-color: #40c9c4;
        --hint-box-font-color: #fefefe;
        --hyperlink-font-color: #fefefe;
        --checkbox-focus-background: #e3e4e554;
        --star-color: #fbff2dc2;
        --sig-background-color: #e3e4e58c;
      }
    }

    body {
      margin: 0;
      padding: 20px;
      /* background: #f0f4f8; */
      /* background: radial-gradient(circle, #66aace, #eef8fb);*/
      background: linear-gradient(90deg, #f6fbff 0%, #d5e1eb 50%, #f6fbff 100%);
      font-family: var(--font-family);
    }

    @media (prefers-color-scheme: dark) {
      body {
        /* background: #1a1f26; */
        background: radial-gradient(circle, #034058, #056d96);
      }
    }

    body.dark-mode {
      /* background: #1a1f26; */
      background: radial-gradient(circle, #034058, #056d96);
    }
    /* ===== HYPERLINKS ==== */
    .xm-form.modern a, a {
    color: var(--hyperlink-font-color) !important;
    text-decoration: underline var(--hyperlink-font-color) !important;
    transition: background-color 0.2s, color 0.2s;
    }
    a:visited,
    a:hover {
    border-bottom-color: #005fa3; /* darker on hover */
    text-decoration-style: double;
    }
    a:active {
    color: var(--text-color) !important;
    text-decoration-style: double; 
    }
    /* ===== FORM CONTAINER ===== */
/* These styles control the main form's appearance */
    form {
      max-width: 540px;
      margin: 2em auto;
      padding: 2em 1.5em;
      background: var(--background-color);
      border-radius: 12px;
      box-shadow: 0 3px 16px var(--box-shadow-color);
      font-family: var(--font-family);
      color: var(--text-color);
    }
    .body .xm-form.modern, FORM.xm-form {
        margin-top: 2%;
        vertical-align: baseline;
        font-size: 12px;
        padding: 2%;
        hyphens: manual;
        letter-spacing: 0.05em;
    }

    /* ===== FORM HEADER ===== */
/* These styles control the top section of the form with the title and logos */
    .modern .XHeader:not(:empty), .XHeader {
      max-width: 540px;
      margin: 0 auto;
      align-items: center;
      background: var(--header-bg-color);
      border-radius: 10px 10px 8px 8px;
      padding: 1em 1.5em;
      color: var(--header-text-color);
      box-shadow: 0 3px 26px var(--box-shadow-color);
      min-height: 80px;
      box-sizing: border-box;
      vertical-align: top !important;
    }
    .cheader1 {
    width: 100%;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
    }
    .header-img-left,
    .header-img-right {
      max-height: 48px;
      width: 50%;
    }
    .header-img-left, 
    .chead_pic_left {
      /* margin-right: 1em; */
      width: 25%;
      text-align: left;
    }
    .header-img-right, 
    .chead_pic_right {
      /* margin-left: 1em; */
      width: 25%;
      text-align: right;
    }
    .header-title {
      flex: 1;
      font-size: 1.5em;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.03em;
      color: var(--header-text-color);
    }

    .modern .XPage, .XPage , .modern .CXPage{
      background: var(--background-color);
      border-radius: 12px;
      box-shadow: 0 3px 16px var(--box-shadow-color);
      padding-left: 5px;
    }
    #xi-txt-3-xc {
      vertical-align: top;
    }
    #xi-header-1-xc {
      padding-left: 0px;
      padding-right: 0px;
    }
    /* ===== FORM LABELS ===== */
/* These styles control how the text labels above form fields look */
    .modern .xm-item-div label, label {
      font-weight: 600;
      color: var(--text-color);
      margin-bottom: 0.4em;
    }
    .modern .xm-item-div .XSpan, .modern .XFieldSet legend, DIV.xm-item-div {
    color: var(--header-text-color);
    }
    .XSpanHint
    {
    background-color: var(--hint-box-background-color);
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 3px 16px var(--hint-box-shadow-color);
    color: var(--hint-box-font-color) !important;
    }
    .XItem LABEL.label-left
    {
    padding-right: 0;
    display: table-cell;
    vertical-align: middle;
    }
    .xm-help-container.label-left {
    outline: 0;
    vertical-align: top !important;
    /* padding-top: 1%; */
    }
    .xm-help-container.label-top {
    outline: 0;
    vertical-align: top !important;
    padding-top: 2%;
    }

    /* ===== FORM INPUT FIELDS ===== */
/* These styles control how text fields, dropdowns, and text areas look */
    .modern .XInput, input,
    .modern .XSelect, select,
    .modern .XTexterea, textarea {
      display: block;
      width: 100%;
      padding: 0.75em;
      margin-bottom: 1.25em;
      border: 1.5px solid var(--input-border-color);
      border-radius: 7px;
      background: var(--input-bg-color);
      transition: border 0.2s, background 0.2s;
      font-size: 1em;
      color: var(--text-color) !important;
      box-sizing: border-box;
    }
    .modern .XItem:focus:not(:disabled),
    .modern .XInput:focus, input:focus,
    .modern .XSelect:focus, select:focus,
    .modern .XTextarea:focus, textarea:focus {
      border-color: var(--input-focus-border-color);
      background: var(--input-focus-bg-color);
      outline: none;
      box-shadow: 0 0 0 2px var(--input-focus-border-color);
    }

    .opt-div Input {
    display: table-cell;
    margin-right: 20px;
    }

    FORM.xm-form * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: inherit;
    font-family: var(--font-family);
  }
  .modern .XTextArea, .XTextArea {
    font-size: 16px;
    resize: vertical !important;
  }

    /* ===== FORM REQUIRED STAR ===== */
/* These styles control only the required star */
    .modern .xm-item-div SPAN.required-star , .required-star {
        color: #e00000;
        padding-left: 0.3em;
        font-size: 0.9em;
        vertical-align: top !important;
    }

    /* ===== FORM RADIOFIELDS ===== */
    .XRadio {
      padding-top: 2%;
    }
    input[type="radio"]:focus {
    outline: none; /* Removes the focus ring */
    box-shadow: none;
    }
    .modern .xm-item-div input[type=radio], .XSelect.XRadio:focus-within {
    border: 1px solid #3455db;
    background-color: var(--checkbox-focus-background) !important;
    border-radius: 3px;
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
    }

    /* ===== FORM CHECKBOXES ===== */
    input[type="checkbox"]:focus {
    outline: none; /* Removes the focus ring */
    box-shadow: none;
    }
    .modern .xm-item-div input[type=checkbox], .XSelect.XCheckbox:focus-within, .CXCheckbox:focus-within {
    border: 1px solid #3455db;
    background-color: var(--checkbox-focus-background) !important;
    border-radius: 3px;
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
    }
    .XCheckbox {
      padding: 2px;
    }
    .label-right {
      padding-left: 10px;
    }
   /* ==== COLORS FOR RADIO AND CHECKBOX ==== */
    input[type="radio"],
    input[type="checkbox"] {
      accent-color: #0072AE; /* light mode: blue */
    }

    @media (prefers-color-scheme: dark) {
      input[type="radio"],
      input[type="checkbox"] {
        accent-color: #40c9c4; /* dark mode: teal */
      }
    }

    /* ===== DISABLED RADIO & CHECKBOX - PRESERVE CHECKED COLOR ===== */
    input[type="radio"]:disabled,
    input[type="checkbox"]:disabled {
      accent-color: var(--input-focus-border-color);
      opacity: 0.7; /* slightly faded to still signal "disabled" */
    }


    /* ===== SIGNATUREFIELDS ===== */
    .XSignature {
      background-color: var(--sig-background-color);
    }

    /* ===== BUTTONS ===== */
/* These styles control how all form buttons appear */
    .modern .XButtonList.XItem:focus:not(:disabled), .modern .XButtonList, XButton, button {
      background: var(--button-bg-gradient);
      color: #fff;
      padding: 0.75em 2em;
      border: none;
      border-radius: 7px;
      font-size: 1em;
      cursor: pointer;
      font-weight: 600;
      transition: background 0.16s, box-shadow 0.14s;
      box-shadow: 0 1px 4px rgba(33, 44, 71, 0.17);
    }
    .modern .XButtonList:focus, XButton:focus, button:focus,
    .modern .XButtonList:hover, XButton:hover, button:hover {
      background: var(--button-hover-bg-gradient);
    }
    
    /* ===== SCREEN READER TEXT ===== */
/* This hides text visually but keeps it available for screen readers (for accessibility) */
    .sr-only {
      position: absolute !important;
      height: 1px; width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      white-space: nowrap;
    }

    /* ===== FOOTER ===== */
/* These styles control the bottom section of the form */
    .XFooter {
      background: var(--footer-bg-color);
      /* border-radius: 0 0 10px 10px;
      padding: 1.1em 1.5em; */
      text-align: center;
      font-size: 1em;
      color: var(--footer-text-color);
      margin-top: 2em;
    }

    .modern .CXFooter, .CXFooter, .modern .CXHeader, .CXHeader {
      background: var(--fo-he-bg-color);
    }
    /* .CXContainer, .XContainer, .XItem {
      background: var(--container-bg-color);
    } */
    .XContainer {
      background: var(--xcontainer-bg-color) !important;
    }
    .modern .xm-footer-hint, .xm-footer-hint, .modern xm-header-hint, .xm-header-hint {
    font-size: 10px;
    padding: 10px;
    }

    /* ===== DISABLED FIELDS ==== */
    .XItem:disabled, .XItem[readonly], .XAppointment[readonly]+DIV, .XAppointment:disabled+DIV, .appointment-container .ui-datepicker.ui-state-disabled, 
    .modern .XItem:disabled, .modern .XItem[readonly], .XAppointment[readonly]+DIV, .XAppointment:disabled+DIV, .appointment-container .ui-datepicker.ui-state-disabled {
    background: repeating-linear-gradient(45deg, transparent, transparent 2px, #0071ae81 2px, #f1f1f16c 3px) !important;
    color: var(--text-color)
    }
    /* ===== CAPTCHA BUTTON ==== */
    .XCaptchaRefresh, .XCaptchaAudio {
      color: var(--captcha-button-color)

    }

    /* ==== XRATING ==== */
    .XRatingContainer .star.hover I {
      color: var(--star-color) !important;
    }
    .XRatingContainer .star.active I {
    color: var(--star-color);
    }

    /* ===== CONTACT DATA ===== */
    .modern .XItem.XContactData, div.xm-item-div.CXContactData {
    color: var(--hyperlink-font-color);
    }
    .XContactOpen {
      margin-top: 14px;
    }

    /* ===== MAP ==== */
    .leaflet-touch .leaflet-bar a:first-child, .leaflet-touch .leaflet-bar a:last-child {
      color: #000000 !important;
    }

    /* ===== UPLOAD BUTTON ==== */
    .modern .XUpload-Modern .XUpload.XItem
    {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 39px;
    font-size: 0;
    }
    .modern .XUpload-Modern .xm-upl-input-label {
    order: 2;
    box-sizing: border-box;
    text-align: center;
    color: var(--text-color);
    background-color: var(--button-bg-gradient);
    font-size: 16px;
    padding: 7px 19px 11px;
    border-color: #ccc;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    width: 195px;
    margin-right: 10px;
    font-weight: 400;
    height: 39px;
    }
    .modern .xm-item-div .xm-upl-wrapper span.xm-upl-label
    {
    font-weight: 400;
    color: var(--header-text-color);
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    }

    /* ===== EPAYMENT ===== */
    .CXOrderItemContent {
    background: #ffffff23;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    padding: 10px;
    }
    .CXOrderItemContent.ordered
    {
    background-color: #ffffff23;
    border: 1px solid #cbcbcb;
    }

    /* ===== MOBILE RESPONSIVE STYLES ===== */
/* These styles adjust the form's appearance on smaller screens like phones */
    @media (max-width: 600px) {
      .XHeader,
      .XFooter {
        flex-direction: column;
        text-align: center;
        padding: 0.9em 0.6em;
      }
      .chead_pic_left
      {
        margin: 0 0 0.4em 0;
        max-height: 36px;
        width: 100%;
        text-align: center;
      }
      .chead_pic_right
      {
        display: none !important;
      }
      .header-title {
        font-size: 1.15em;
        margin: 0.7em 0;
      }
      form {
        padding: 1em 0.4em;
      }
    }

    /* ===== PLACEHOLDER IMAGE ===== */
/* This is a temporary image that appears while the actual logo is loading */
    .placeholder-img {
      width: 48px;
      height: 48px;
      background: rgba(255,255,255,0.2);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }


    /* ===== FOR PRINTING ==== */
@media print {
  * {
    background: none !important;
    color: #000 !important; /* make all text black */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* nav,
  footer {
    display: none; */ /* Hide navigation and footer when printing */
  /* } */
}