/* RevClick branding for Easy!Appointments (book.revclick.com).
 * Palette/type per revclick-repo/STYLE.md. Linked from booking_layout.php
 * and message_layout.php AFTER the company-color style block. */

@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/dm-mono-400.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/dm-mono-500.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:500 600;font-display:swap;src:url('/assets/fonts/fraunces-italic.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/fraunces-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/inter.woff2') format('woff2')}

:root,
[data-bs-theme="light"]{
  --rc-navy:#0f2438;
  --rc-navy-2:#152d44;
  --rc-cream:#f3ecdf;
  --rc-cream-2:#e9dfc9;
  --rc-gold:#c9a15a;
  --rc-gold-deep:#8a6a34;
  --rc-ink:#12212f;

  --bs-primary:#0f2438;
  --bs-primary-rgb:15,36,56;
  --bs-link-color:#8a6a34;
  --bs-link-color-rgb:138,106,52;
  --bs-link-hover-color:#0f2438;
  --bs-link-hover-color-rgb:15,36,56;
  --bs-body-font-family:'Inter',system-ui,sans-serif;
  --bs-body-color:#12212f;
  --bs-focus-ring-color:rgba(201,161,90,.35);
  --ea-primary-hover:#152d44;
  --ea-primary-active:#0b1a29;
}

body{
  background:var(--rc-cream) !important;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--rc-ink);
}

/* Card */
#book-appointment-wizard{
  background:#fbf8f1 !important;
  border:1px solid rgba(18,33,47,.14);
  border-radius:4px !important;
  box-shadow:none !important;
}

/* Header */
#book-appointment-wizard #header{
  background:var(--rc-navy) !important;
  border-bottom:3px solid var(--rc-gold);
}
#company-logo{max-height:40px !important;width:auto}
#company-name{font-family:'DM Mono',monospace;font-size:13px !important;letter-spacing:.04em;text-transform:none}
#company-name > span:not(.display-booking-selection){display:none} /* logo already carries the name */
#company-name .display-booking-selection{color:#aebbc4 !important;font-family:'DM Mono',monospace;font-size:11.5px}

/* Step indicators */
#book-appointment-wizard .book-step.active-step{background:var(--rc-gold) !important;border-radius:3px !important}
#book-appointment-wizard .book-step.active-step strong{color:var(--rc-navy) !important;font-family:'DM Mono',monospace}
#book-appointment-wizard .book-step:not(.active-step){background:rgba(243,236,223,.12) !important;border-radius:3px !important}
#book-appointment-wizard .book-step:not(.active-step) strong{color:#8fa0ad !important;font-family:'DM Mono',monospace}

/* Headings: sentence-case editorial, per STYLE.md */
.frame-title{
  font-family:'Fraunces',serif;
  font-weight:500 !important;
  color:var(--rc-navy) !important;
  letter-spacing:-.005em;
}
label,.form-label,label strong{font-family:'DM Mono',monospace;font-size:12px !important;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--rc-gold-deep)}
label strong{font-size:12px !important}

/* Inputs */
.form-control,.form-select{
  background-color:#fff;
  border:1px solid rgba(18,33,47,.3);
  border-radius:3px;
  color:var(--rc-ink);
}
.form-control:focus,.form-select:focus{
  border-color:var(--rc-gold);
  box-shadow:0 0 0 .2rem rgba(201,161,90,.3);
}

/* Buttons: gold primary action, navy outline for back */
.btn{
  font-family:'DM Mono',monospace;
  font-size:12.5px;
  letter-spacing:.02em;
  border-radius:3px;
  padding:.65rem 1.2rem;
  box-shadow:none !important;
  background-image:none !important;
}
.btn-dark,.btn-primary,.button-next,#book-appointment-submit{
  --bs-btn-bg:#c9a15a;--bs-btn-border-color:#c9a15a;--bs-btn-color:#0f2438;
  --bs-btn-hover-bg:#d6b274;--bs-btn-hover-border-color:#d6b274;--bs-btn-hover-color:#0f2438;
  --bs-btn-active-bg:#b88f49;--bs-btn-active-border-color:#b88f49;--bs-btn-active-color:#0f2438;
  background-color:#c9a15a !important;border-color:#c9a15a !important;color:#0f2438 !important;
}
.btn-dark:hover,.btn-primary:hover,.button-next:hover,#book-appointment-submit:hover{
  background-color:#d6b274 !important;border-color:#d6b274 !important;
}
.btn-outline-secondary,.btn-light,.button-back{
  background:transparent !important;
  border:1px solid rgba(18,33,47,.3) !important;
  color:var(--rc-navy) !important;
}

/* Calendar (flatpickr) */
.flatpickr-calendar{box-shadow:none !important;border:1px solid rgba(18,33,47,.14)}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.endRange{
  background:var(--rc-navy) !important;border-color:var(--rc-navy) !important;color:var(--rc-cream) !important;
}
.flatpickr-day.today{border-color:var(--rc-gold) !important}
.flatpickr-day:hover{background:var(--rc-cream-2) !important;border-color:var(--rc-cream-2) !important}
.flatpickr-months .flatpickr-month,.flatpickr-weekdays,span.flatpickr-weekday{background:transparent !important;color:var(--rc-navy) !important}
.flatpickr-current-month,.flatpickr-current-month .cur-month{font-family:'Fraunces',serif;color:var(--rc-navy)}

/* Time slots */
#book-appointment-wizard #available-hours .available-hour{
  font-family:'DM Mono',monospace;
  background:#fff !important;
  border:1px solid rgba(18,33,47,.3) !important;
  color:var(--rc-navy) !important;
  border-radius:3px;
}
#book-appointment-wizard #available-hours .available-hour:hover{border-color:var(--rc-gold) !important}
#book-appointment-wizard #available-hours .selected-hour{
  background:var(--rc-navy) !important;border-color:var(--rc-navy) !important;color:var(--rc-cream) !important;
}

/* Confirmation summary + misc */
#appointment-details,#customer-details{background:var(--rc-cream-2);border-radius:3px;padding:1rem}
a{text-decoration-thickness:1px;text-underline-offset:3px}
.alert{border-radius:3px}

/* Footer */
#frame-footer{font-family:'DM Mono',monospace;font-size:11.5px;color:#7c8d98 !important}
#frame-footer a{color:var(--rc-gold-deep)}

@media (max-width:760px){
  #book-appointment-wizard{border-left:0;border-right:0;border-radius:0 !important}
  #company-logo{max-height:34px !important}
}