/* ==========================================================================
   Medical Assistant (MA) – Contact Us page (contact-us.html)
   --------------------------------------------------------------------------
   Load AFTER style.css. All brand colours, fonts, radius and shadows come
   from the :root variables in style.css (--ma-primary, --ma-secondary …).
   Page-specific tokens are defined below and built only from those variables.

   1. Page tokens
   2. Contact cards
   3. Booking form plugins (Select2, Flatpickr) & validation states
   4. Side panel (hours, emergency, social)
   5. Map
   6. FAQ accordion
   7. Footer social colours (class based – no inline styles)
   8. Responsive
   ========================================================================== */

/* 1. Page tokens ----------------------------------------------------------- */
:root{
  --ct-card-radius:var(--ma-radius-lg);
  --ct-icon-size:58px;
  --ct-teal:var(--ma-secondary);
  --ct-teal-bg:var(--ma-secondary-soft);
  --ct-green:var(--ma-whatsapp);
  --ct-green-bg:#E6F9EE;
  --ct-purple:var(--ma-purple);
  --ct-purple-bg:#EFEBFE;
  --ct-coral:var(--ma-emergency);
  --ct-coral-bg:#FDECEA;
  --ct-map-height:460px;
}

/* 2. Contact cards ---------------------------------------------------------- */
.ct-card{position:relative;background:#fff;border:1px solid var(--ma-border);border-radius:var(--ct-card-radius);box-shadow:var(--ma-shadow);transition:var(--ma-transition);overflow:hidden}
.ct-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:24px;border-radius:var(--ct-card-radius) var(--ct-card-radius) 0 0;border-top:5px solid var(--ct-accent,var(--ct-teal))}
.ct-card:hover{transform:translateY(-6px);box-shadow:var(--ma-shadow-lg)}
.ct-card .ct-icon{width:var(--ct-icon-size);height:var(--ct-icon-size);border-radius:18px;font-size:1.5rem;color:var(--ct-accent);background:var(--ct-accent-bg)}
.ct-card .ct-label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ma-muted)}
.ct-card .ct-value{font-size:1.05rem;font-weight:600;color:var(--ma-primary);line-height:1.5}
.ct-card .ct-action{font-size:.88rem;font-weight:600;color:var(--ct-accent)}
.ct-card .ct-action:hover{color:var(--ma-primary)}
.ct-card .ct-action i{transition:var(--ma-transition)}
.ct-card .ct-action:hover i{transform:translateX(4px)}

.ct-teal{--ct-accent:var(--ct-teal);--ct-accent-bg:var(--ct-teal-bg)}
.ct-green{--ct-accent:var(--ct-green);--ct-accent-bg:var(--ct-green-bg)}
.ct-purple{--ct-accent:var(--ct-purple);--ct-accent-bg:var(--ct-purple-bg)}
.ct-coral{--ct-accent:var(--ct-coral);--ct-accent-bg:var(--ct-coral-bg)}

/* 3. Booking form plugins & validation ------------------------------------- */
.select2-container{width:100%!important}
.select2-container--default .select2-selection--single{height:54px;border:1.5px solid var(--ma-border);border-radius:14px;display:flex;align-items:center;padding:0 8px;background:#fff;transition:var(--ma-transition)}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ma-primary);font-size:.95rem;line-height:normal;padding-left:10px;padding-right:34px}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#9AA7B8}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;right:12px;top:0}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--ma-primary) transparent transparent}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single{border-color:var(--ma-secondary);box-shadow:0 0 0 4px rgba(32,178,170,.12)}
.select2-container--default.select2-container--open .select2-selection__arrow b{border-color:transparent transparent var(--ma-secondary)}
.select2-dropdown{border:1.5px solid var(--ma-secondary)!important;border-radius:14px!important;overflow:hidden;box-shadow:var(--ma-shadow);font-family:var(--ma-font);margin-top:6px}
.select2-container--open .select2-dropdown--above{margin-top:-6px}
.select2-results__option{padding:10px 16px;font-size:.92rem;color:var(--ma-primary)}
.select2-container--default .select2-results__option--selected{background:var(--ma-secondary-soft);color:var(--ma-primary)}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background:var(--ma-secondary);color:#fff}
.select2-search--dropdown .select2-search__field{border:1.5px solid var(--ma-border)!important;border-radius:10px;padding:8px 12px;outline:none}
.is-invalid + .select2 .select2-selection{border-color:var(--ma-emergency-dark)!important}

.flatpickr-input.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23003366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 16px center;padding-right:44px;cursor:pointer}
.flatpickr-calendar{font-family:var(--ma-font);border-radius:16px;box-shadow:var(--ma-shadow-lg);border:none}
.flatpickr-months .flatpickr-month,.flatpickr-current-month .flatpickr-monthDropdown-months{color:var(--ma-primary);fill:var(--ma-primary);font-weight:600}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--ma-secondary);border-color:var(--ma-secondary)}
.flatpickr-day.today{border-color:var(--ma-secondary)}
.flatpickr-day:hover{background:var(--ma-secondary-soft);border-color:var(--ma-secondary-soft)}

.phone-wrap{position:relative}
.phone-wrap .cc{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ma-primary);font-weight:600;font-size:.95rem;padding-right:10px;border-right:1.5px solid var(--ma-border);line-height:1.2;pointer-events:none}
.phone-wrap .form-control,.phone-wrap .form-control.is-invalid{padding-left:66px}
.form-control.is-invalid{background-image:none;padding-right:18px}
.flatpickr-input.form-control.is-invalid{border-color:var(--ma-emergency-dark)}
.ma-error{display:block;color:var(--ma-emergency-dark);font-size:.8rem;font-weight:500;margin-top:6px}
.ma-error::before{content:"\F33A";font-family:"bootstrap-icons";margin-right:5px;vertical-align:-1px}
.char-count{display:block;text-align:right;font-size:.75rem;color:var(--ma-muted);margin-top:4px}
.char-count.limit{color:var(--ma-emergency-dark)}
.req{color:var(--ma-emergency-dark);font-weight:700}
.opt{color:var(--ma-muted);font-weight:400;font-size:.8rem}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.ma-toast.error{border-left-color:var(--ma-emergency-dark)}
.ma-toast.error i{color:var(--ma-emergency-dark)}
.btn-submit.loading{opacity:.75;pointer-events:none}

/* 4. Side panel ------------------------------------------------------------- */
.ct-side{background:#fff;border:1px solid var(--ma-border);border-radius:var(--ct-card-radius);box-shadow:var(--ma-shadow-sm)}
.ct-side h5{font-size:1.05rem;font-weight:600}
.ct-hours li{padding:12px 0;border-bottom:1px dashed var(--ma-border);font-size:.92rem}
.ct-hours li:last-child{border-bottom:0}
.ct-hours .ct-badge{font-size:.75rem;font-weight:600;color:var(--ma-secondary-dark);background:var(--ma-secondary-soft);padding:4px 12px;border-radius:50px}
.ct-emergency{position:relative;overflow:hidden;border-radius:var(--ct-card-radius);background:var(--ma-grad-emergency);color:#fff;box-shadow:0 20px 44px rgba(242,107,91,.30)}
.ct-emergency::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.12)}
.ct-emergency .ct-em-icon{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--ma-emergency-dark);font-size:1.5rem}
.ct-emergency h5,.ct-emergency .ct-em-num{color:#fff}
.ct-emergency p{color:#FFE9E6}
.ct-emergency .ct-em-num{font-size:1.5rem;font-weight:700;position:relative;z-index:1}
.ct-emergency .btn-ma{position:relative;z-index:1}
.ct-promise li{font-size:.9rem;margin-bottom:10px}
.ct-promise li:last-child{margin-bottom:0}
.ct-promise i{color:var(--ma-secondary)}

/* 5. Map -------------------------------------------------------------------- */
.ct-map{position:relative;height:var(--ct-map-height);border-radius:var(--ct-card-radius);overflow:hidden;border:1px solid var(--ma-border);box-shadow:var(--ma-shadow);background:var(--ma-secondary-softer)}
.ct-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ct-map-card{position:absolute;left:24px;bottom:24px;max-width:360px;background:#fff;border-radius:var(--ma-radius);box-shadow:var(--ma-shadow-lg);z-index:2}
.ct-map-card .ct-icon{width:48px;height:48px;border-radius:14px;font-size:1.25rem;color:var(--ct-coral);background:var(--ct-coral-bg)}
.ct-map-card b{color:var(--ma-primary)}

/* 6. FAQ accordion -------------------------------------------------------- */
.ct-faq{
  --bs-accordion-border-color:var(--ma-border);
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-btn-focus-border-color:transparent;
  --bs-accordion-active-bg:var(--ma-secondary-softer);
  --bs-accordion-active-color:var(--ma-secondary-dark);
}
.ct-faq .accordion-item{border:1px solid var(--ma-border);border-radius:var(--ma-radius)!important;overflow:hidden;box-shadow:var(--ma-shadow-sm);transition:var(--ma-transition)}
.ct-faq .accordion-item:has(.accordion-collapse.show){border-color:rgba(32,178,170,.35);box-shadow:var(--ma-shadow)}
.ct-faq .accordion-button{font-family:var(--ma-font);font-weight:600;font-size:1rem;color:var(--ma-primary);padding:20px 24px;background:#fff;box-shadow:none;border:0}
.ct-faq .accordion-button:not(.collapsed){color:var(--ma-secondary-dark);background:var(--ma-secondary-softer);box-shadow:none}
.ct-faq .accordion-button:focus{box-shadow:none;border-color:transparent;outline:0}
.ct-faq .accordion-button:focus-visible{outline:2px solid var(--ma-secondary);outline-offset:-4px;border-radius:var(--ma-radius)}
.ct-faq .accordion-button::after{background-image:none;content:"\F64D";font-family:"bootstrap-icons";font-size:1.1rem;color:var(--ma-secondary);display:grid;place-items:center;transform:none}
.ct-faq .accordion-button:not(.collapsed)::after{content:"\F63B";transform:none}
.ct-faq .accordion-collapse{border:0}
.ct-faq .accordion-body{padding:4px 24px 24px;font-size:.93rem;line-height:1.75;color:var(--ma-text);background:var(--ma-secondary-softer)}

/* 7. Footer social colours -------------------------------------------------- */
.social .s-fb{background:#1877F2}
.social .s-ig{background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF)}
.social .s-wa{background:var(--ma-whatsapp)}

/* 8. Responsive ------------------------------------------------------------- */
@media (max-width:767.98px){
  :root{--ct-map-height:380px}
  .ct-map-card{left:12px;right:12px;bottom:12px;max-width:none}
}