/*
 * style-v1.css — Global styles for MDLink v1 design system
 * Loaded AFTER style.css so v1 rules win over old Bootstrap styles
 * within .home-v1 contexts.
 */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════
   CSS VARIABLES  (on .home-v1 root)
   ═══════════════════════════════════════════════════ */
.home-v1 {
  --navy: #00243C;
  --navy-2: #08344F;
  --green: #3C9C84;
  --green-light: #54C09C;
  --green-deep: #246C6C;
  --green-tint: #EAF5F0;
  --green-badge-bg: #DCF4E7;
  --green-badge-tx: #15795B;
  --accent: #F02400;
  --accent-600: #D11F00;
  --ink: #1A2E33;
  --muted: #5C7177;
  --line: #E7ECEC;
  --gray: #F4F5F6;
  --white: #fff;
  --r: 22px;
  --r-sm: 14px;
  --shadow: 0 12px 34px -16px rgba(0, 36, 60, .22);
  --shadow-lg: 0 28px 70px -24px rgba(0, 36, 60, .32);
  --maxw: 1200px;

  font-family: 'Sora', system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.home-v1 * { box-sizing: border-box; }

/* ── Layout ── */
.home-v1 section { background: #fff; padding: 30px 0; }
.home-v1 .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ── Typography ── */
.home-v1 h1,
.home-v1 h2,
.home-v1 h3,
.home-v1 h4 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
  line-height: 1.08;
}
.home-v1 a { text-decoration: none; color: inherit; }
.home-v1 label {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  color: var(--navy);
}
.home-v1 p { margin: 0 0 .6rem; }

/* ── Eyebrow / badge ── */
.home-v1 .eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-deep);
}

/* ══════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════ */
.home-v1 .btn-v1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: .9rem 2rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: background .18s, transform .18s;
  white-space: nowrap;
  text-decoration: none;
}
.home-v1 .btn-v1-primary {
  background: var(--accent, #F02400);
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(240,36,0,.5);
}
.home-v1 .btn-v1-primary:hover { background: var(--accent-600, #D11F00); transform: translateY(-2px); }
.home-v1 .btn-v1-navy {
  background: var(--navy);
  color: #fff;
}
.home-v1 .btn-v1-navy:hover { background: #062c44; transform: translateY(-2px); }
.home-v1 .btn-v1-green {
  background: var(--green);
  color: #fff;
}
.home-v1 .btn-v1-green:hover { background: var(--green-deep); transform: translateY(-2px); }
.home-v1 .btn-v1-ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--line);
}
.home-v1 .btn-v1-ghost:hover { border-color: var(--green); color: var(--green-deep); }
.home-v1 .btn-v1-sm { padding: .55rem 1.2rem; font-size: .88rem; }
.home-v1 .btn-v1-block { width: 100%; justify-content: center; }

/* ══════════════════════════════════════════════════
   HERO SECTION PATTERN  (matches /p/create-appointment)
   All page heroes use this light radial style.
   ══════════════════════════════════════════════════ */
.home-v1 .page-hero {
  background: radial-gradient(900px 380px at 80% -10%, rgba(84, 192, 156, .13), transparent 60%), #fff;
  padding: 36px 0 28px;
}
.home-v1 .page-hero h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--navy);
  margin-bottom: .4rem;
}
.home-v1 .page-hero p {
  color: var(--muted);
  font-size: 1rem;
  max-width: 52ch;
}

/* ══════════════════════════════════════════════════
   BREADCRUMB PATTERN
   ══════════════════════════════════════════════════ */
.home-v1 .v1-crumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.home-v1 .v1-crumb a { color: var(--muted); font-weight: 600; }
.home-v1 .v1-crumb a:hover { color: var(--green-deep); }

/* ══════════════════════════════════════════════════
   SECTION SCAFFOLDING
   ══════════════════════════════════════════════════ */
.home-v1 .sec-pad { padding: 50px 0; }
.home-v1 .sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.home-v1 .sec-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.home-v1 .sec-head .see-all { font-weight: 700; color: var(--green-deep); font-size: .95rem; white-space: nowrap; }
.home-v1 .v1-sub { color: var(--muted); font-size: 1rem; max-width: 52ch; margin: 0; }

/* ══════════════════════════════════════════════════
   CARD PATTERN
   ══════════════════════════════════════════════════ */
.home-v1 .v1-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
}
.home-v1 .v1-card--hover {
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.home-v1 .v1-card--hover:hover {
  box-shadow: var(--shadow);
  border-color: var(--green);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════
   FORM CONTROLS  (override Bootstrap inside .home-v1)
   ══════════════════════════════════════════════════ */
.home-v1 .form-control {
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  padding: .65rem 1rem !important;
  font-family: 'Sora', system-ui, sans-serif !important;
  font-size: .9rem !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  background: #fff !important;
  transition: border-color .18s !important;
  height: auto !important;
  line-height: 1.5 !important;
}
.home-v1 .form-control:focus {
  border-color: var(--green) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.home-v1 .form-control.is-invalid { border-color: #F02400 !important; }

.home-v1 label.v1-label,
.home-v1 .green-label {
  font-size: .85rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-bottom: .4rem !important;
  font-family: 'Sora', system-ui, sans-serif !important;
  display: block !important;
}

/* ── v-select inside .home-v1 ── */
.home-v1 .v-select .vs__dropdown-toggle {
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 0 .85rem !important;
  font-family: 'Sora', system-ui, sans-serif !important;
  font-size: .9rem !important;
  background: #fff !important;
  box-shadow: none !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
}
.home-v1 .v-select.vs--open .vs__dropdown-toggle {
  border-color: var(--green) !important;
  border-radius: 12px 12px 0 0 !important;
}
.home-v1 .v-select .vs__dropdown-menu {
  border: 1.5px solid var(--green) !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .09) !important;
  font-family: 'Sora', system-ui, sans-serif !important;
  font-size: .9rem !important;
  z-index: 9999 !important;
}
.home-v1 .v-select .vs__dropdown-option {
  padding: .6rem 1rem !important;
  color: var(--ink) !important;
  white-space: normal !important;
}
.home-v1 .v-select .vs__dropdown-option--highlight {
  background: var(--green) !important;
  color: #fff !important;
}
.home-v1 .v-select .vs__selected {
  font-family: 'Sora', system-ui, sans-serif !important;
  font-size: .9rem !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  line-height: 1.4 !important;
}
.home-v1 .v-select .vs__search,
.home-v1 .v-select .vs__search:focus {
  font-family: 'Sora', system-ui, sans-serif !important;
  font-size: .9rem !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.home-v1 .v-select .vs__open-indicator,
.home-v1 .v-select .vs__clear { color: var(--muted) !important; }

/* ── mx-datepicker ── */
.home-v1 .mx-input {
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  font-family: 'Sora', system-ui, sans-serif !important;
  font-size: .9rem !important;
  height: 46px !important;
  box-shadow: none !important;
}
.home-v1 .mx-input:focus { border-color: var(--green) !important; box-shadow: none !important; }
.home-v1 .mx-calendar { font-family: 'Sora', system-ui, sans-serif !important; }
.home-v1 .mx-table-date td.active .cell,
.home-v1 .mx-calendar-content .cell.active {
  background: var(--green) !important;
  border-radius: 8px !important;
}
.home-v1 .mx-table-date td.today .cell { color: var(--green-deep) !important; font-weight: 800 !important; }

/* ── Error text ── */
.home-v1 .text-danger { font-size: .8rem !important; font-weight: 600 !important; color: #D94C0A !important; margin-top: 4px !important; }
.home-v1 .invalid-feedback { font-size: .8rem !important; display: block !important; }
.home-v1 .is-invalid .vs__dropdown-toggle { border-color: #F02400 !important; }

/* ══════════════════════════════════════════════════
   STATUS CHIPS  (reusable)
   ══════════════════════════════════════════════════ */
.home-v1 .chip-confirmed { background: #DCF4E7; color: #15795B; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 700; }
.home-v1 .chip-pending   { background: #FFF3CD; color: #856404; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 700; }
.home-v1 .chip-cancelled { background: #FFE8E3; color: #C0392B; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 700; }
.home-v1 .chip-green     { background: var(--green-badge-bg); color: var(--green-badge-tx); border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 700; }

/* ══════════════════════════════════════════════════
   APPOINTMENT BOOKING  —  global overrides
   These complement the appt-v1 namespace in AppointmentV1Page.vue
   ══════════════════════════════════════════════════ */

/* Neutralise old style.css .bg-lighter-box rules */
.appt-v1 .bg-lighter-box {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── Step header row (title left, badge right) ── */
.appt-v1 #step1 > .mt-3.mb-4,
.appt-v1 #step2 > .mt-3.mb-4 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.6rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1.5px solid var(--line, #E7ECEC) !important;
}
.appt-v1 .sub-title {
  font-family: 'Sora', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  color: var(--navy, #00243C) !important;
  margin: 0 !important;
}
/* "Step N of 3" badge */
.appt-v1 .pull-right.app-status,
.appt-v1 span.pull-right {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  background: var(--gray, #F4F5F6) !important;
  color: var(--navy, #00243C) !important;
  border-radius: 999px !important;
  padding: .35rem .85rem !important;
  white-space: nowrap !important;
}

/* Back button inside step badge */
.appt-v1 .next-step-btn.back-btn {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  margin: 0 !important;
}
.appt-v1 .next-step-btn.back-btn img {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  opacity: .7 !important;
}
.appt-v1 .next-step-btn.back-btn:hover img { opacity: 1 !important; }

/* ── "At Home?" inline switch — Yes/No right-aligned ── */
.appt-v1 .inline-switch {
  background: var(--gray, #F4F5F6) !important;
  border: 1.5px solid var(--line, #E7ECEC) !important;
  border-radius: 12px !important;
  padding: .75rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--navy, #00243C) !important;
  margin-bottom: 1rem !important;
}
/* The <label class="float-right"> that wraps radio inputs */
.appt-v1 .inline-switch label.float-right,
.appt-v1 .inline-switch > label {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 1.2rem !important;
  margin: 0 !important;
  font-weight: 600 !important;
  color: var(--muted, #5C7177) !important;
  cursor: pointer !important;
}
/* Individual radio+label pairs inside the switch */
.appt-v1 .inline-switch label.float-right input[type="radio"],
.appt-v1 .inline-switch > label input[type="radio"] {
  accent-color: var(--green, #3C9C84) !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: .3rem !important;
  cursor: pointer !important;
}

/* ── Calendar section card ── */
.appt-v1 .blank-card.calander-card {
  border: 1.5px solid var(--line, #E7ECEC) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background: #fff !important;
  margin-bottom: 0 !important;
}
.appt-v1 .blank-card.calander-card.card { border: 0 !important; }
.appt-v1 .blank-card.calander-card .card-header {
  background: var(--gray, #F4F5F6) !important;
  border-bottom: 1px solid var(--line, #E7ECEC) !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  border-radius: 0 !important;
}
/* Calendar header icon */
.appt-v1 .blank-card.calander-card .card-header .green-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--green-tint, #EAF5F0) !important;
  border-radius: 8px !important;
  flex: none !important;
}
.appt-v1 .blank-card.calander-card .card-header .green-icon img {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}
.appt-v1 .blank-card.calander-card .card-header .sub-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--navy, #00243C) !important;
  margin: 0 !important;
}
.appt-v1 .blank-card.calander-card .card-body {
  padding: 20px !important;
  background: #fff !important;
}

/* ── Patient edit card (step 2) ── */
.appt-v1 .patient-edit-card {
  border: 1.5px solid var(--line, #E7ECEC) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  margin-bottom: 1.4rem !important;
}
.appt-v1 .patient-edit-card .card-header {
  background: var(--gray, #F4F5F6) !important;
  border-bottom: 1px solid var(--line, #E7ECEC) !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
}
/* Patient card header icon (FontAwesome fa-user-o) */
.appt-v1 .patient-edit-card .card-header .green-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--green-tint, #EAF5F0) !important;
  border-radius: 8px !important;
  flex: none !important;
  color: var(--green-deep, #246C6C) !important;
  font-size: 1rem !important;
}
.appt-v1 .patient-edit-card .card-body { padding: 20px !important; }

/* ── Appointment-for radio boxes (You / Someone Else) ── */
.appt-v1 .gender-box,
.appt-v1 .appointment-for {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 1.2rem !important;
  padding: 0 !important;
}
.appt-v1 .gndr-bx {
  border: 1.5px solid var(--line, #E7ECEC) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: .18s !important;
  min-width: 120px !important;
  text-align: center !important;
  padding: 16px 12px !important;
  position: relative !important;
  flex: 1 !important;
  max-width: 160px !important;
}
.appt-v1 .gndr-bx:hover { border-color: var(--green, #3C9C84) !important; }
.appt-v1 .gndr-bx input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  visibility: visible !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  margin: 0 !important;
}
.appt-v1 .gndr-bx:has(input:checked) {
  border-color: var(--green, #3C9C84) !important;
  background: var(--green-tint, #EAF5F0) !important;
}
.appt-v1 .gndr-bx .icon-img { font-size: 1.6rem; color: var(--green-deep, #246C6C); margin-bottom: .4rem; }
.appt-v1 .gndr-bx .icon-img .fa { color: var(--green-deep, #246C6C) !important; }
.appt-v1 .gndr-text {
  font-size: .85rem !important;
  font-weight: 700 !important;
  color: var(--navy, #00243C) !important;
  display: block !important;
  margin-top: 4px !important;
}

/* ── Time slot rows ── */
.appt-v1 .timeslot-list .form-group > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: .55rem .9rem !important;
  border: 1.5px solid var(--line, #E7ECEC) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
  background: #fff !important;
  gap: .6rem !important;
}
.appt-v1 .timeslot-list .form-group > div:hover {
  border-color: var(--green, #3C9C84) !important;
  background: #F9FFFD !important;
}
/* Time label – left */
.appt-v1 .timeslot-list .form-check-label {
  font-weight: 600 !important;
  color: var(--navy, #00243C) !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex: 1 !important;
  font-size: .85rem !important;
}
/* Radio – right */
.appt-v1 .timeslot-list input[type="radio"].float-right,
.appt-v1 .timeslot-list input[type="radio"].custom-checkbox {
  float: none !important;
  accent-color: var(--green, #3C9C84) !important;
  width: 17px !important;
  height: 17px !important;
  cursor: pointer !important;
  flex: none !important;
  order: 2 !important;
}

/* Timeslot list: override old fixed 205px height */
.appt-v1 .timeslot-list {
  height: auto !important;
  max-height: 340px !important;
  overflow-y: auto !important;
}

/* dark-theme-border: remove old teal border on calendar/any card */
.appt-v1 .dark-theme-border { border: 0 !important; }

/* gndr-bx float neutralise (flex parent handles layout, but explicit is safer) */
.appt-v1 .gndr-bx { float: none !important; }

/* ── Pharmacy / lab search with adornment icon ── */
.appt-v1 .custom-group.adon-left { position: relative !important; }
.appt-v1 .custom-group.adon-left > .vp-field > div,
.appt-v1 .custom-group.adon-left [data-vv-as] > div,
.appt-v1 .custom-group.adon-left span > div { position: relative !important; }
.appt-v1 .custom-group.adon-left .input-group-text {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.appt-v1 .custom-group.adon-left .input-group-text img {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  opacity: .5 !important;
}
.appt-v1 .custom-group.adon-left .v-select .vs__dropdown-toggle { padding-left: 42px !important; }

/* ── Doctor cards ── */
.appt-v1 .doctor-select-list .row { margin: 0 -6px !important; }
.appt-v1 .doctor-select-list [class*="col-"] { padding: 0 6px 12px !important; }
.appt-v1 .doctor-select-list .app-user-card {
  border: 1.5px solid var(--line, #E7ECEC) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: border-color .18s, box-shadow .18s !important;
  background: #fff !important;
  margin: 0 !important;
  height: 100% !important;
  min-height: 80px !important;
}
.appt-v1 .doctor-select-list .app-user-card:hover {
  border-color: var(--green, #3C9C84) !important;
  box-shadow: 0 4px 14px rgba(60, 156, 132, .1) !important;
}
.appt-v1 .doctor-select-list .app-user-card.selected {
  border-color: var(--green, #3C9C84) !important;
  background: var(--green-tint, #EAF5F0) !important;
  box-shadow: 0 0 0 3px rgba(60, 156, 132, .15) !important;
}
.appt-v1 .doctor-select-list .left-img { position: relative !important; flex: none !important; }
.appt-v1 .doctor-select-list .left-img img {
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}
.appt-v1 .doctor-select-list .online-indicator {
  width: 11px !important; height: 11px !important;
  border-radius: 50% !important;
  background: var(--green, #3C9C84) !important;
  border: 2px solid #fff !important;
  position: absolute !important;
  bottom: 1px !important; right: 1px !important;
}
.appt-v1 .doctor-select-list .app-user {
  font-weight: 800 !important;
  font-size: .95rem !important;
  color: var(--navy, #00243C) !important;
  line-height: 1.3 !important;
}
.appt-v1 .doctor-select-list .man-speciality { font-size: .82rem !important; color: var(--muted, #5C7177) !important; }
.appt-v1 .doctor-select-list .review { font-size: .82rem !important; color: var(--muted, #5C7177) !important; }

/* ── Form input wrapper .app-user-card (NOT doctor card) ── */
.appt-v1 .appointment-row .app-user-card,
.appt-v1 .custom-group .app-user-card {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
  box-shadow: none !important;
  cursor: default !important;
  margin: 0 !important;
  gap: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* ── Empty/no-doctor state ── */
.appt-v1 .blank-card.text-center:not(.calander-card) {
  background: var(--gray, #F4F5F6) !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 2rem !important;
  color: var(--muted, #5C7177) !important;
  font-size: .9rem !important;
}

/* ── Continue button ── */
.appt-v1 .btn-primary,
.appt-v1 button.btn-primary {
  background: var(--navy, #00243C) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: 'Sora', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: .95rem !important;
  padding: .75rem 2.4rem !important;
  color: #fff !important;
  transition: background .18s !important;
  cursor: pointer !important;
}
.appt-v1 .btn-primary:hover,
.appt-v1 button.btn-primary:hover { background: var(--green-deep, #246C6C) !important; }
.appt-v1 .form-group.text-center { text-align: center !important; margin-top: 2rem !important; }

/* ── Google Maps autocomplete ── */
.pac-container {
  z-index: 99999 !important;
  border-radius: 12px !important;
  font-family: 'Sora', system-ui, sans-serif !important;
  border: 1.5px solid var(--line, #E7ECEC) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .09) !important;
}

/* ── Loading overlay ── */
#overlay_div { display: none !important; }

/* ══════════════════════════════════════════════════
   GREEN COLOR CONSISTENCY
   Ensure primary green is always #3C9C84 across v1
   ══════════════════════════════════════════════════ */
.home-v1 .text-green    { color: var(--green, #3C9C84) !important; }
.home-v1 .text-green-deep { color: var(--green-deep, #246C6C) !important; }
.home-v1 .bg-green-tint { background: var(--green-tint, #EAF5F0) !important; }
.home-v1 .border-green  { border-color: var(--green, #3C9C84) !important; }

/* Override old "theme-text" green which may differ */
.home-v1 .theme-text { color: var(--green-deep, #246C6C) !important; }
.home-v1 .text-success { color: var(--green-badge-tx, #15795B) !important; }

/* ══════════════════════════════════════════════════
   APPOINTMENT — residual style.css colour overrides
   These fix specific old rules not covered above
   ══════════════════════════════════════════════════ */

/* .green-label inside appt: old style.css sets blue and #34d0d0 */
.appt-v1 .green-label,
.appt-v1 label.green-label { color: #00243C !important; }

/* .app-status and .status-confirmed set to wrong cyan by old style.css */
.appt-v1 .app-status,
.appt-v1 .status-confirmed { color: #00243C !important; }

/* .app-user-card used as generic section wrapper: remove shadow/padding */
.appt-v1 .app-user-card:not(.doctor-select-list .app-user-card) {
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Inline-switch: old style.css adds line-height:30px that collapses flex */
.appt-v1 .inline-switch { line-height: 1.4 !important; }