/* ===========================================================
   ADC Appointment — Premium (LatePoint-like) UI
   Scope: only inside .adc-container
   Load after theme (enqueue priority 999)
   =========================================================== */

:root {
  /* Light defaults */
  --adc-surface: #ffffff;
  --adc-text: #0f172a;
  --adc-muted: #5b6b80;
  --adc-line: rgba(15,23,42,.12);

  --adc-brand: #5b6ef5;        /* Primary */
  --adc-brand-2: #2bc7f4;      /* Accent for gradient */
  --adc-success: #10b981;
  --adc-danger: #ef4444;
  --adc-warning: #f59e0b;

  --adc-radius: 16px;
  --adc-radius-sm: 12px;
  --adc-ring: 0 0 0 5px rgba(91,110,245,.16);
  --adc-shadow-lg: 0 18px 60px rgba(2,6,23,.14);
  --adc-shadow-sm: 0 10px 28px rgba(2,6,23,.10);
  --adc-gradient: linear-gradient(135deg, var(--adc-brand) 0%, var(--adc-brand-2) 100%);

  --adc-glass: rgba(255,255,255,.55);
  --adc-glass-line: rgba(15,23,42,.08);
}

/* Auto dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --adc-surface: #0f172a;
    --adc-text: #e5e7eb;
    --adc-muted: #9aa7bb;
    --adc-line: rgba(148,163,184,.18);
    --adc-shadow-lg: 0 18px 60px rgba(0,0,0,.45);
    --adc-shadow-sm: 0 10px 28px rgba(0,0,0,.38);
    --adc-glass: rgba(17,25,40,.55);
    --adc-glass-line: rgba(255,255,255,.06);
  }
}

/* Manual dark override: add .adc-theme-dark to .adc-container if needed */
body .adc-container.adc-theme-dark {
  --adc-surface: #0f172a;
  --adc-text: #e5e7eb;
  --adc-muted: #9aa7bb;
  --adc-line: rgba(148,163,184,.18);
  --adc-shadow-lg: 0 18px 60px rgba(0,0,0,.45);
  --adc-shadow-sm: 0 10px 28px rgba(0,0,0,.38);
  --adc-glass: rgba(17,25,40,.55);
  --adc-glass-line: rgba(255,255,255,.06);
}

/* Base typography */
body .adc-container,
body .adc-container .card,
body .adc-container .form-control,
body .adc-container .btn {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
  letter-spacing: .1px;
}
body .adc-container {
  color: var(--adc-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Card */
body .adc-container .card {
  background: var(--adc-surface) !important;
  border: 1px solid var(--adc-line) !important;
  border-radius: var(--adc-radius) !important;
  box-shadow: var(--adc-shadow-lg) !important;
  overflow: clip;
  backdrop-filter: saturate(180%) blur(6px);
}

/* Header */
body .adc-container .card-header {
  background: var(--adc-gradient) !important;
  color: #fff !important;
  border: none !important;
  padding: 1.15rem 1.25rem !important;
}
body .adc-container .card-header h3,
body .adc-container .card-header h4 {
  margin: 0 !important;
  font-weight: 800 !important;
  font-size: 1.35rem !important;
  display: flex; align-items: center; gap: .65rem;
}
body .adc-container .card-header h3::after,
body .adc-container .card-header h4::after {
  content: "";
  height: 3px; width: 52px; border-radius: 999px;
  background: rgba(255,255,255,.9);
  opacity: .85;
}

/* Content spacing */
body .adc-container .card-body { padding: 1.4rem 1.4rem 1.6rem !important; }

/* Step transitions */
body .adc-container .adc-step { transition: opacity .28s ease, transform .28s ease; }
body .adc-container .adc-step.d-none { opacity: 0; transform: translateY(12px); }
body .adc-container .adc-step:not(.d-none) { animation: adc-fade-in .34s ease; }
@keyframes adc-fade-in { from {opacity:0; transform:translateY(12px);} to {opacity:1; transform:translateY(0);} }

/* Questions group */
body .adc-container #adc-questions {
  border: 1px solid var(--adc-line);
  border-radius: var(--adc-radius-sm);
  padding: 12px 12px;
  background: linear-gradient(180deg, rgba(148,163,184,.08), transparent 60%);
  margin-top: .35rem;
}

/* Labels */
body .adc-container #adc-form .form-label {
  font-weight: 700 !important;
  color: var(--adc-text) !important;
  margin-bottom: .35rem !important;
}

/* Inputs/selects */
body .adc-container #adc-form .form-control,
body .adc-container #adc-form .form-select {
  border-radius: 12px !important;
  border: 1px solid var(--adc-line) !important;
  background: #fff !important;
  color: var(--adc-text) !important;
  padding: .72rem 1rem !important;
  font-size: 1.03rem !important;
}
@media (prefers-color-scheme: dark) {
  body .adc-container #adc-form .form-control,
  body .adc-container #adc-form .form-select {
    background: #101826 !important;
  }
}
body .adc-container #adc-form .form-control:focus,
body .adc-container #adc-form .form-select:focus {
  border-color: var(--adc-brand) !important;
  box-shadow: var(--adc-ring) !important;
  outline: 0 !important;
}
body .adc-container input[type="date"].form-control,
body .adc-container input[type="time"].form-control { min-height: 46px !important; }

/* Radio pill style (no HTML changes needed) */
body .adc-container #adc-questions .form-check { position: relative; padding-left: 0 !important; margin: .5rem 0 !important; }
body .adc-container #adc-questions .form-check-input { position: absolute; opacity: 0; }
body .adc-container #adc-questions .form-check-label {
  display: block; width: 100%; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--adc-line);
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.90));
  color: var(--adc-text); padding: .78rem 1rem;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
@media (prefers-color-scheme: dark) {
  body .adc-container #adc-questions .form-check-label {
    background: linear-gradient(180deg, rgba(16,24,38,.85), rgba(16,24,38,.95));
  }
}
body .adc-container #adc-questions .form-check-label:hover { transform: translateY(-1px); box-shadow: var(--adc-shadow-sm); }
body .adc-container #adc-questions .form-check-input:checked + .form-check-label {
  border-color: transparent; background: var(--adc-gradient); color: #fff;
  box-shadow: 0 10px 28px rgba(91,110,245,.35);
}

/* Fee / notice box */
body .adc-container .adc-fee-box,
body .adc-container #adc-fee-box {
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px dashed rgba(16,185,129,.45) !important;
  background: linear-gradient(180deg, rgba(16,185,129,.10), rgba(16,185,129,.06)) !important;
  color: var(--adc-text) !important;
}

/* Buttons */
body .adc-container #adc-next,
body .adc-container #adc-back {
  border-radius: 12px !important;
  padding: .78rem 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
body .adc-container #adc-next {
  background-image: var(--adc-gradient) !important;
  border: none !important; color: #fff !important;
  box-shadow: var(--adc-shadow-sm) !important;
}
body .adc-container #adc-next:hover { transform: translateY(-1px); filter: brightness(1.05); }
body .adc-container #adc-next:active { transform: translateY(0); }
body .adc-container #adc-back {
  background: transparent !important; color: var(--adc-text) !important;
  border: 2px solid rgba(148,163,184,.55) !important;
}
body .adc-container #adc-back:hover { background: rgba(148,163,184,.12) !important; }

/* Busy state for Pay button */
body .adc-container #adc-next.is-busy { position: relative; pointer-events: none; opacity:.95; }
body .adc-container #adc-next.is-busy::after {
  content: ""; position: absolute; right: .9rem; top: 50%;
  width: 1rem; height: 1rem; margin-top: -.5rem; border-radius: 50%;
  border: 2px solid #fff; border-top-color: transparent; animation: adc-spin .8s linear infinite;
}
@keyframes adc-spin { to { transform: rotate(360deg); } }

/* Alerts */
body .adc-container #adc-alert {
  border-radius: 12px !important;
  border: 1px solid var(--adc-line) !important;
  box-shadow: var(--adc-shadow-sm) !important;
  font-size: 1rem !important;
}
body .adc-container #adc-alert.alert-success { background: rgba(16,185,129,.12) !important; color: #065f46 !important; }
body .adc-container #adc-alert.alert-danger,
body .adc-container #adc-alert.alert-error { background: rgba(239,68,68,.12) !important; color: #7f1d1d !important; }

/* Mobile */
@media (max-width: 576px) {
  body .adc-container .card-body { padding: 1rem !important; }
  body .adc-container .btn { width: 100% !important; }
  body .adc-container .d-flex.justify-content-between { gap: .6rem !important; }
}

/* ===== Base Flatpickr theme (fallback) ===== */
.adc-container .flatpickr-calendar {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
  border: 1px solid var(--adc-line);
  box-shadow: var(--adc-shadow-sm);
  border-radius: 12px;
  overflow: hidden;
  z-index: 99999; /* on top of theme headers/menus */
}
.adc-container .flatpickr-months,
.adc-container .flatpickr-weekdays {
  background: linear-gradient(135deg, var(--adc-brand), var(--adc-brand-2));
  color: #fff;
}
.adc-container .flatpickr-months .flatpickr-month,
.adc-container .flatpickr-weekday { color: #fff; font-weight: 700; }
.adc-container .flatpickr-day.selected,
.adc-container .flatpickr-day.startRange,
.adc-container .flatpickr-day.endRange,
.adc-container .flatpickr-day.selected:hover {
  background: linear-gradient(135deg, var(--adc-brand), var(--adc-brand-2));
  border-color: transparent; color: #fff;
}
.adc-container .flatpickr-time input { color: var(--adc-text); }

@media (prefers-color-scheme: dark) {
  .adc-container .flatpickr-calendar {
    background: #0f172a; color: var(--adc-text); border-color: var(--adc-line);
  }
  .adc-container .flatpickr-time input { background: #101826; color: var(--adc-text); }
}

/* Timepicker hover focus */
.flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time input:hover {
  background: #1591EA !important;
  color: #fff !important;
}

/* Custom select caret (when using select.form-control style elsewhere) */
body .adc-container select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='gray'><polygon points='0,0 20,0 10,10'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
}

/* Allow calendar to overflow cards on phones */
@media (max-width: 576px) {
  body .adc-container .card { overflow: visible !important; }
}


/* ================================
   ADC Flatpickr — final, enforced
   ================================ */
.flatpickr-calendar.adc-fp{
  --adc-fp-bg:#0f172a;        /* panel */
  --adc-fp-card:#111827;      /* calendar body */
  --adc-fp-text:#f9fafb;      /* text */
  --adc-fp-muted:#cbd5e1;     /* subtle text */
  --adc-fp-accent:#7c3aed;    /* violet */
  --adc-fp-ring:#a78bfa;      /* ring */

  background:var(--adc-fp-card);
  border-radius:16px;                     /* premium */
  box-shadow:0 18px 48px rgba(8,25,88,.28);
  overflow: visible !important;           /* never crop header pills */
  z-index: 2147483647 !important;         /* always on top */
  width: clamp(330px, 94vw, 420px);       /* fluid width */
}

/* Make inner containers match width -> no right gutter */
.flatpickr-calendar.adc-fp .flatpickr-days,
.flatpickr-calendar.adc-fp .dayContainer,
.flatpickr-calendar.adc-fp .flatpickr-rContainer{
  width:100% !important;
  max-width:100% !important;
}

/* ---------- Header (month + year) ---------- */
.flatpickr-calendar.adc-fp .flatpickr-months{
  background: var(--adc-fp-card);
  color: var(--adc-fp-text);
  padding: 16px 16px;                     /* tall enough: no clip */
  min-height: 72px;                       /* <- fixes crop on phones too */
  border-bottom: 1px solid #2b3242;
}
.flatpickr-calendar.adc-fp .flatpickr-months .flatpickr-month{
  position: relative;
  background: var(--adc-fp-card);
  padding: 0 54px 10px;                   /* room for arrows */
  width: 100%;
  height: auto;
  line-height: 1.2;
}
.flatpickr-calendar.adc-fp .flatpickr-current-month{
  display:flex; align-items:center; justify-content:center;
  gap:10px; color:var(--adc-fp-text) !important;
  opacity:1 !important; visibility:visible !important;
}
.flatpickr-calendar.adc-fp .flatpickr-current-month .cur-month{
  background: var(--adc-fp-bg);
  color: var(--adc-fp-text) !important;
  padding: 6px 12px; border-radius: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 64%;
}

/* We use our own year <select>. Hide native numeric year completely */
.flatpickr-calendar.adc-fp .numInputWrapper{ display:none !important; }

/* Our injected year dropdown */
.flatpickr-calendar.adc-fp .adc-year-select{
  background: var(--adc-fp-bg);
  color: var(--adc-fp-text);
  border: 1px solid var(--adc-fp-ring);
  border-radius: 12px;
  height: 36px; line-height: 36px; padding: 0 10px;
  font: inherit;
}

/* Arrows */
.flatpickr-calendar.adc-fp .flatpickr-prev-month,
.flatpickr-calendar.adc-fp .flatpickr-next-month{
  top: 16px; height: 38px; width: 38px;
  display:grid; place-items:center;
  border-radius:12px;
}
.flatpickr-calendar.adc-fp .flatpickr-prev-month{ left: 8px; }
.flatpickr-calendar.adc-fp .flatpickr-next-month{ right: 8px; }
.flatpickr-calendar.adc-fp .flatpickr-prev-month:hover,
.flatpickr-calendar.adc-fp .flatpickr-next-month:hover{
  background: rgba(124,58,237,.18);
}
.flatpickr-calendar.adc-fp .flatpickr-prev-month svg,
.flatpickr-calendar.adc-fp .flatpickr-next-month svg{ fill: var(--adc-fp-text); }

/* ---------- Weekdays ---------- */
.flatpickr-calendar.adc-fp .flatpickr-weekdays{
  background: var(--adc-fp-bg);
  border-bottom: 1px solid #2b3242;
}
.flatpickr-calendar.adc-fp .flatpickr-weekday{
  color: var(--adc-fp-text) !important;
  font-weight: 800; font-size: 12px; letter-spacing: .02em;
  padding: 6px 8px; text-transform: uppercase;
}

/* ---------- Days grid ---------- */
.flatpickr-calendar.adc-fp .dayContainer{ padding: 12px 14px 16px; }
.flatpickr-calendar.adc-fp .flatpickr-day{
  color: var(--adc-fp-text);
  height: 44px; line-height: 44px; border-radius: 12px;
  box-sizing: border-box;
}
.flatpickr-calendar.adc-fp .flatpickr-day:hover{
  background: rgba(124,58,237,.22);
  border-color: var(--adc-fp-accent);
}
.flatpickr-calendar.adc-fp .flatpickr-day.selected,
.flatpickr-calendar.adc-fp .flatpickr-day.startRange,
.flatpickr-calendar.adc-fp .flatpickr-day.endRange{
  background: var(--adc-fp-accent);
  border-color: var(--adc-fp-accent);
  color:#fff;
}

/* Today ring (when not selected) */
.flatpickr-calendar.adc-fp .flatpickr-day.today:not(.selected):not(.disabled):not(.flatpickr-disabled){
  box-shadow: inset 0 0 0 2px var(--adc-fp-accent);
}

/* ---------- Disabled & past days: VERY obvious + unclickable ---------- */
.flatpickr-calendar.adc-fp .flatpickr-day.disabled,
.flatpickr-calendar.adc-fp .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.adc-fp .flatpickr-day.prevMonthDay,
.flatpickr-calendar.adc-fp .flatpickr-day.nextMonthDay{
  color:#64748b !important;
  opacity:.32 !important;
  background:transparent !important;
  border-color:transparent !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}

/* Mobile tweaks */
@media (max-width:480px){
  .flatpickr-calendar.adc-fp{ width: min(96vw, 420px); }
  .flatpickr-calendar.adc-fp .flatpickr-months{ min-height: 72px; padding: 16px; }
  .flatpickr-calendar.adc-fp .flatpickr-day{ height: 50px; line-height: 50px; }
}

/* Desktop-only: make the month dropdown readable */
@media (min-width: 600px){
  .flatpickr-calendar.adc-fp .flatpickr-monthDropdown-months{
    color: var(--adc-fp-text) !important;
    background-color: var(--adc-fp-bg) !important;
    border: 1px solid var(--adc-fp-ring);
    border-radius: 12px;
    padding: 6px 12px;
    min-width: 140px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  /* Force the open list to use dark bg + light text */
  .flatpickr-calendar.adc-fp .flatpickr-monthDropdown-months option{
    background-color: var(--adc-fp-bg) !important;
    color: var(--adc-fp-text) !important;
  }
  .flatpickr-calendar.adc-fp .flatpickr-monthDropdown-months option:disabled{
    color: #94a3b8 !important; /* softer for disabled months */
  }
  /* Focus ring so it’s obvious */
  .flatpickr-calendar.adc-fp .flatpickr-monthDropdown-months:focus{
    outline: 2px solid var(--adc-fp-ring);
    outline-offset: 2px;
  }
}