:root{
  /* Brand */
  --aaos-purple: #6A2C91;
  --aaos-purple-deep: #4B1E6A;
  --aaos-purple-soft: #8A4DB3;

  --aaos-pink: #E85A9C;
  --aaos-pink-soft: #FCE7F2;

  --aaos-gold: #C9A14A;
  --aaos-gold-light: #E6C77A;
  --aaos-gold-hover: #B48B3E;

  /* Neutrals */
  --aaos-white: #FFFFFF;
  --aaos-offwhite: #FBFAFD;
  --aaos-gray-100: #F2EFF7;
  --aaos-border: #E5E1EE;

  --aaos-text: #1E1B22;
  --aaos-muted: #5D5668;

  /* Gradients */
  --aaos-gradient: linear-gradient(135deg, #6A2C91 0%, #E85A9C 55%, #C9A14A 100%);
  --aaos-gradient-soft: linear-gradient(135deg, #6A2C91 0%, #E85A9C 100%);
  --aaos-gold-gradient: linear-gradient(135deg, #E6C77A 0%, #C9A14A 100%);
}

/* Layout shell */
.thar-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
  font-family: Inter, "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--aaos-text);
}

.thar-card{
  background: var(--aaos-white);
  border: 1px solid var(--aaos-border);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 18px 34px rgba(30, 27, 34, 0.08);
}

.thar-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }

.thar-title{
  margin:0;
  font-size: 24px;
  line-height: 1.2;
  color: var(--aaos-purple);
  font-weight: 700;
  font-family: Poppins, Inter, "Open Sans", system-ui, sans-serif;
}

.thar-subtitle{ margin: 6px 0 0; color: var(--aaos-muted); font-size: 14px; }

/* Progress stepper (matches provided design direction) */
.thar-progress{ margin: 18px 0 10px; }

.thar-progress-list{
  list-style:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.thar-step{
  position: relative;
  flex: 1;
  min-width: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  padding: 6px 6px 0;
  color: var(--aaos-muted);
  font-size: 12px;
  text-align: center;
}

.thar-step::after{
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--aaos-border);
  z-index: 0;
}

.thar-step:last-child::after{ display:none; }

.thar-step-dot{
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid var(--aaos-border);
  background: var(--aaos-white);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 16px rgba(30, 27, 34, 0.08);
}

/* default number per step (via data-step attr) */
.thar-step-dot::before{
  content: attr(data-n);
  font-weight: 800;
  font-size: 12px;
  color: var(--aaos-muted);
}

.thar-step.is-active{ color: var(--aaos-purple); }
.thar-step.is-active .thar-step-dot{ border-color: var(--aaos-pink); box-shadow: 0 0 0 6px rgba(232, 90, 156, 0.15); }
.thar-step.is-active .thar-step-dot::before{ color: var(--aaos-purple-deep); }

.thar-step.is-done{ color: var(--aaos-purple-deep); }
.thar-step.is-done::after{ background: rgba(201, 161, 74, 0.55); }
.thar-step.is-done .thar-step-dot{
  border-color: var(--aaos-gold);
  background: var(--aaos-gold);
}
.thar-step.is-done .thar-step-dot::before{
  content: "✓";
  color: var(--aaos-white);
  font-size: 14px;
}

.thar-step-label{ font-weight: 600; }

@media (max-width: 720px){
  .thar-progress-list{ gap: 6px; }
  .thar-step{ font-size: 11px; }
  .thar-step-label{ display:none; }
  .thar-step::after{ top: 14px; }
}

/* Panels */
.thar-app{ margin-top: 10px; }
.thar-step-panel{ padding: 8px 0; }

.thar-h3{
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--aaos-purple);
  font-weight: 700;
  font-family: Poppins, Inter, "Open Sans", system-ui, sans-serif;
}

.thar-h4{
  margin: 14px 0 10px;
  font-size: 15px;
  color: var(--aaos-purple-deep);
  font-weight: 700;
}

.thar-muted{ color: var(--aaos-muted); font-size: 13px; margin: 0 0 10px; }

/* Alerts / notices */
.thar-alert{
  background: var(--aaos-gray-100);
  border: 1px solid var(--aaos-border);
  color: var(--aaos-purple-deep);
  padding: 12px 14px;
  border-radius: 16px;
  margin: 10px 0;
  font-size: 13px;
}

/* Calendar time-zone note */
.thar-note{
  background: #FFF4DD;
  border: 1px solid rgba(201, 161, 74, 0.45);
  color: #7A5A17;
  padding: 12px 14px;
  border-radius: 16px;
  margin: 10px 0 16px;
  font-size: 13px;
  line-height: 1.35;
}
.thar-note strong{ color: var(--aaos-purple-deep); }
.thar-note__sub{ margin-top: 6px; color: var(--aaos-muted); }

/* Grid of services */
/* Force 4 / 2 / 1 columns even if theme CSS tries to override. */
.thar-step-panel .thar-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 1024px){
  .thar-step-panel .thar-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px){
  .thar-step-panel .thar-grid{ grid-template-columns: 1fr !important; }
}

.thar-card-option{
  display:block;
  position: relative;
  border: 1px solid var(--aaos-border);
  border-radius: 20px;
  padding: 18px;
  cursor:pointer;
  background: var(--aaos-white);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.thar-card-option:hover{
  border-color: rgba(106, 44, 145, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(30, 27, 34, 0.08);
  background: var(--aaos-white);
}

/* Keep text colors stable on hover (avoid theme hover styles turning text white) */
.thar-card-option:hover .thar-card-option__title{ color: var(--aaos-purple-deep) !important; }
.thar-card-option:hover .thar-card-option__desc{ color: var(--aaos-muted) !important; }

.thar-card-option.is-selected{
  border-color: var(--aaos-gold);
  box-shadow: 0 0 0 6px rgba(201, 161, 74, 0.18);
}

.thar-radio{ display:none !important; }

/* Selected tick (gold) */
.thar-card-option__tick{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--aaos-gold);
  color: var(--aaos-white);
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 10px 18px rgba(30, 27, 34, 0.12);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .15s ease, transform .15s ease;
}

.thar-card-option.is-selected .thar-card-option__tick{
  opacity: 1;
  transform: scale(1);
}

.thar-card-option__title{ display:block; font-weight: 800; margin-bottom: 6px; color: var(--aaos-purple-deep); }
.thar-card-option__desc{ display:block; color: var(--aaos-muted); font-size: 13px; }

.thar-card-option.is-selected .thar-card-option__title{ color: var(--aaos-purple-deep) !important; }
.thar-card-option.is-selected .thar-card-option__desc{ color: var(--aaos-muted) !important; }

/* Month controls */
.thar-monthbar{ display:flex; align-items:center; justify-content:space-between; margin: 12px 0 10px; }
.thar-monthtitle{ font-weight: 800; color: var(--aaos-purple-deep); }

.thar-icon-btn{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--aaos-border);
  background: var(--aaos-white);
  cursor:pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--aaos-purple-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 18px rgba(30, 27, 34, 0.06);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.thar-icon-btn:hover{ border-color: rgba(106, 44, 145, 0.35); background: var(--aaos-offwhite); transform: translateY(-1px); box-shadow: 0 14px 22px rgba(30, 27, 34, 0.08); }
.thar-icon-btn:focus{ outline:none; box-shadow: 0 0 0 4px rgba(106, 44, 145, 0.18); }

/* Calendar */
.thar-calendar-grid{ border:1px solid var(--aaos-border); border-radius: 20px; overflow:hidden; background: var(--aaos-white); }
.thar-calendar-header{ display:grid; grid-template-columns: repeat(7, 1fr); background: var(--aaos-offwhite); }
.thar-cal-h{ padding: 10px 8px; font-size: 12px; color: var(--aaos-muted); text-align:center; border-bottom: 1px solid var(--aaos-border); }

.thar-calendar-cells{ display:grid; grid-template-columns: repeat(7, 1fr); }
.thar-cal-cell{
  border: 0;
  border-bottom: 1px solid var(--aaos-border);
  border-right: 1px solid var(--aaos-border);
  background: var(--aaos-white);
  height: 44px;
  cursor:pointer;
  font-size: 13px;
  color: var(--aaos-text);
}
.thar-cal-cell:nth-child(7n){ border-right: 0; }
.thar-cal-cell.is-empty{ background: var(--aaos-white); cursor: default; }
.thar-cal-cell.is-disabled{ background: var(--aaos-offwhite); color: rgba(93, 86, 104, 0.55); cursor: not-allowed; }
.thar-cal-cell:not(.is-disabled):not(.is-empty):hover{ background: rgba(106, 44, 145, 0.06); }
.thar-cal-cell.is-selected{ background: var(--aaos-purple); color: var(--aaos-white); font-weight: 800; }
.thar-cal-cell:focus{ outline:none; box-shadow: inset 0 0 0 2px rgba(106, 44, 145, 0.35); }

.thar-cal-cell:hover{ color: var(--aaos-gold-hover) !important;}

/* Times */
.thar-times{ margin-top: 14px; }
.thar-timeslots{ display:flex; flex-wrap:wrap; gap: 10px; }

.thar-chip{
  border: 1px solid rgba(106, 44, 145, 0.35);
  background: var(--aaos-white);
  border-radius: 999px;
  padding: 10px 14px;
  cursor:pointer;
  font-size: 13px;
  min-height: 40px;
  color: var(--aaos-purple-deep);
  font-weight: 700;
}

.thar-chip:hover{ border-color: var(--aaos-purple); }

.thar-chip.is-selected{
  border-color: var(--aaos-purple);
  background: var(--aaos-purple);
  color: var(--aaos-white);
}

.thar-chip:disabled{ opacity: .55; cursor: not-allowed; border-color: var(--aaos-border); color: var(--aaos-muted); }

/* Form */
.thar-form{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
@media (max-width: 720px){ .thar-form{ grid-template-columns: 1fr; } }

.thar-field label, .thar-label{ display:block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--aaos-purple-deep); }

.thar-field input,
.thar-field textarea,
.thar-field select,
.thar-select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--aaos-border);
  font-size: 14px;
  color: var(--aaos-text);
  background: var(--aaos-white);
}

.thar-field textarea{
  min-height: 110px;
  resize: vertical;
  font-family: inherit;
}

.thar-field input:focus,
.thar-field textarea:focus,
.thar-field select:focus,
.thar-select:focus{
  outline:none;
  border-color: rgba(106, 44, 145, 0.35);
  box-shadow: 0 0 0 4px rgba(106, 44, 145, 0.15);
}

.thar-field--full{ grid-column: 1 / -1; }

/* Toggle buttons */
.thar-toggle{ display:flex; gap: 10px; }
.thar-toggle-btn{
  flex: 1;
  border-radius: 14px;
  border: 1px solid var(--aaos-border);
  background: var(--aaos-white);
  padding: 12px 14px 12px 44px;
  cursor:pointer;
  font-weight: 800;
  color: var(--aaos-purple-deep);
  position: relative;
  text-align: center;
}

/* Patient type indicator (circle + check like screenshot)
   - Inactive: outlined circle
   - Active: gold filled circle with white check
*/
.thar-toggle-btn::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(106, 44, 145, 0.28);
  background: var(--aaos-white);
}
.thar-toggle-btn::after{
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translate(4px, -58%);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: var(--aaos-white);
  opacity: 0;
}

.thar-toggle-btn:hover{ border-color: rgba(106, 44, 145, 0.35); }

.thar-toggle-btn.is-active{
  border-color: var(--aaos-purple);
  background: var(--aaos-purple);
  color: var(--aaos-white);
}

.thar-toggle-btn.is-active::before{
  border-color: var(--aaos-gold);
  background: var(--aaos-gold);
  box-shadow: 0 0 0 4px rgba(201, 161, 74, 0.22);
}
.thar-toggle-btn.is-active::after{ opacity: 1; }

.thar-toggle-btn.is-active::before{
  border-color: var(--aaos-gold);
  background: var(--aaos-gold);
  box-shadow: 0 0 0 4px rgba(201, 161, 74, 0.22);
}
.thar-toggle-btn.is-active::after{ opacity: 1; }

/* Buttons */
.thar-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 16px; flex-wrap:wrap; }
.thar-actions:hover{ color: var(--aaos-gold-hover) !important;}


/* Centered layouts (Review + Confirmation screens) */
.thar-step-panel--center{ text-align: center; }
.thar-step-panel--center .thar-actions{ justify-content: center; }
.thar-step-panel--center .thar-summary{
  max-width: 680px;
  margin: 14px auto 0;
  text-align: left;
}
.thar-step-panel--center .thar-disclaimer,
.thar-step-panel--center .thar-callout,
.thar-step-panel--center .thar-whatnext{
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.thar-step-panel--center .thar-chipline{ justify-content:center; }

.thar-btn{
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 12px 16px;
  font-weight: 800;
  cursor:pointer;
  min-height: 44px;
}

/* Primary CTA = Gold */
.thar-btn--primary{
  background: var(--aaos-gold);
  color: var(--aaos-white);
  box-shadow: 0 10px 18px rgba(201, 161, 74, 0.22);
}
.thar-btn--primary:hover{ background: var(--aaos-gold-hover); }
.thar-btn--primary:focus{ outline:none; box-shadow: 0 0 0 4px rgba(201, 161, 74, 0.35); }

/* Secondary = Outline Purple */
.thar-btn--secondary{
  background: var(--aaos-white);
  border-color: rgba(106, 44, 145, 0.35);
  color: var(--aaos-purple);
}
.thar-btn--secondary:hover{ color: var(--aaos-gold-hover);  border-color: var(--aaos-purple); background: var(--aaos-offwhite); }
.thar-btn--secondary:focus{ outline:none; box-shadow: 0 0 0 4px rgba(106, 44, 145, 0.18); }

.thar-btn:disabled{ opacity:.8; cursor:not-allowed; box-shadow: none; filter: grayscale(0.1); }

/* Summary */
.thar-summary{ border:1px solid var(--aaos-border); border-radius: 20px; padding: 14px; background: var(--aaos-offwhite); }
.thar-summary-row{ display:flex; justify-content:space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--aaos-border); }
.thar-summary-row:last-child{ border-bottom: 0; }
.thar-summary-label{ color: var(--aaos-muted); font-size: 13px; }
.thar-summary-value{ color: var(--aaos-text); font-weight: 800; font-size: 13px; text-align:right; }

.thar-disclaimer{
  margin-top: 12px;
  border: 1px solid rgba(232, 90, 156, 0.25);
  background: var(--aaos-pink-soft);
  border-radius: 20px;
  padding: 12px 14px;
  color: var(--aaos-purple-deep);
  font-size: 13px;
}

/* Success */
.thar-success{ text-align:left; }
/* When used inside the centered confirmation/review panels, override to center
   the headline + reference block like the provided design. */
.thar-step-panel--center .thar-success{ text-align:center; }
.thar-step-panel--center .thar-success-badge{ margin-left:auto; margin-right:auto; }
.thar-success-badge{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--aaos-gradient);
  color: var(--aaos-white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  margin-bottom: 10px;
  box-shadow: 0 14px 22px rgba(106, 44, 145, 0.18);
}

.thar-callout{ margin-top: 12px; border: 1px solid var(--aaos-border); background: var(--aaos-white); border-radius: 20px; padding: 12px 14px; }
.thar-chipline{ margin: 10px 0 0; }

.thar-whatnext ul{ margin: 8px 0 0; padding-left: 18px; color: var(--aaos-text); }
.thar-whatnext li{ margin: 6px 0; }

.thar-footer-note{ margin-top: 12px; color: var(--aaos-muted); font-size: 12px; }


/* Honeypot field (anti-spam): visually hidden */
.thar-hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

.thar-hidden{ display:none !important; }


.thar-select{
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--aaos-border);
  padding: 12px;
  background: var(--aaos-white);
  color: var(--aaos-text);
  font-size: 14px;
}

.thar-payment-options{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.thar-payment-panel{
  margin-top: 10px;
}

.thar-payment-actions{
  margin: 14px 0;
}

.thar-checkline{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
  font-weight: 700;
  color: var(--aaos-purple-deep);
}

.thar-checkline input{
  width: 18px;
  height: 18px;
}

@media (max-width: 720px){
  .thar-payment-options{ grid-template-columns: 1fr; }
}


.thar-payment-step{ padding-top: 4px; }
.thar-payment-choice{ min-height: 88px; padding: 18px 20px 18px 50px; }
.thar-payment-choice__title{ display:block; font-size: 18px; font-weight: 800; line-height: 1.2; }
.thar-payment-choice__sub{ display:block; margin-top: 6px; font-size: 12px; font-weight: 500; opacity: .9; }
.thar-payment-choice.is-active .thar-payment-choice__sub{ color: rgba(255,255,255,.88); }
.thar-payment-card{ border:1px solid var(--aaos-border); border-radius: 22px; background: var(--aaos-offwhite); padding: 18px; box-shadow: 0 10px 22px rgba(30,27,34,.04); }
.thar-payment-card__header{ display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; margin-bottom: 10px; }
.thar-payment-card__header .thar-h4{ margin:0 0 4px; }
.thar-payment-card__header .thar-muted{ margin:0; }
.thar-payment-price{ display:inline-flex; align-items:center; justify-content:center; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: var(--aaos-gold); color: var(--aaos-white); font-weight: 800; white-space: nowrap; }
.thar-payment-panel .thar-alert,
.thar-payment-panel .thar-callout{ margin-top: 14px; }
.thar-payment-actions{ margin: 16px 0 12px; }
.thar-checkline{ padding: 12px 14px; border:1px solid var(--aaos-border); border-radius: 16px; background: var(--aaos-white); }
@media (max-width: 720px){
  .thar-payment-card__header{ flex-direction: column; }
  .thar-payment-choice{ min-height: 74px; }
}