/* ── Shared base for all public pages ── */
/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS — change these to retheme all public pages
════════════════════════════════════════════════════════════════ */
:root {
  --orange:    #E8891C;   /* brand primary — buttons, accents, links */
  --orange-dk: #C4720E;   /* hover / focus state */
  --orange-lt: #FFF3E0;   /* light tint — icon backgrounds, hover fills */
  --orange-md: #FDE8C8;   /* medium tint — ring, badge backgrounds */
  --text:      #1a1a1a;   /* body / heading text */
  --muted:     #6b7280;   /* secondary text */
  --light:     #f9fafb;   /* subtle section backgrounds */
  --border:    #e5e7eb;   /* borders and dividers */
  --white:     #ffffff;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
body { font-family: 'Poppins', sans-serif; }

@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body { opacity: 0; animation: pageIn 0.2s ease forwards; }
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity 0.45s ease, transform 0.45s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── Global footer ── */
#footer { background: #0f0f14; border-top: 1px solid rgba(255,255,255,0.07); }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 52px 48px 44px; display: grid; grid-template-columns: 1.6fr 1fr 1.5fr; gap: 48px; }
.footer-logo-link { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-logo-img { height: 34px; width: 34px; object-fit: contain; }
.footer-logo-name { font-size: 1rem; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.01em; }
.footer-logo-sub { font-size: 0.58rem; font-weight: 500; color: rgba(255,255,255,0.4); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 1px; }
.footer-desc { font-size: 0.8rem; color: rgba(255,255,255,0.45); line-height: 1.75; max-width: 300px; }
.footer-col-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-links li { font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.footer-links a { font-size: 0.82rem; color: rgba(255,255,255,0.55); transition: color 0.2s ease; }
.footer-links a:hover { color: #fff; }
.footer-booknow { color: #D97706 !important; font-weight: 600; transition: color 0.2s ease, opacity 0.2s ease !important; }
.footer-booknow:hover { color: #F59E0B !important; opacity: 0.85; }.footer-info { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.footer-info li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; }
.footer-info svg { width: 14px; height: 14px; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }
.footer-info li span, .footer-info li a { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.55; transition: color 0.2s ease; }
.footer-info li a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding: 18px 48px; text-align: center; }
.footer-line { font-size: 0.72rem; color: rgba(255,255,255,0.3); }

@media (max-width: 991.98px) {
  .footer-inner { padding: 44px 28px 36px; grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-desc { max-width: none; }
  .footer-bottom { padding: 16px 28px; }
}
@media (max-width: 540px) {
  .footer-inner { padding: 36px 20px 28px; grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { padding: 16px 20px; }
}

/* ════════════════════════════════════════════════════════════════
   UNIFIED BUTTON HOVER — same block at the end of global.css (app) and
   public.css (website), so every button behaves the same everywhere:
   • lifts 1px on hover (subtle), settles back on press
   • solid (filled) buttons fade slightly lighter (opacity), never darker
   The lift uses the standalone `translate` property rather than
   `transform`, so it stacks with any button's own transform (press
   scale, centering) instead of replacing it. Selectors are wrapped in
   :where() (zero specificity) so each button's own colors still apply;
   the transition is !important only so inline-styled buttons built in
   JS get the same smooth motion.
   Excluded: things that are buttons in markup but not "buttons" to the
   eye — tabs, select triggers, cards, password eyes, video/carousel/
   photo-viewer controls, menu toggles and plain text links.
════════════════════════════════════════════════════════════════ */
:where(button, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning, .btn-disapprove, .btn-icon, .btn-solid, .btn-outline, .nav-book, .cta-btn, .about-cta-btn, .btn-submit, .footer-booknow, .auth-back-link):not(
  .ac-btn, .ac-dot, .ac-lb-btn, .vid-btn, .vid-center-btn, .vid-skip, .vid-speed-opt,
  .navbar-toggler, .nav-toggle, .topbar-toggle,
  .lf-pw-eye, .fp-pw-eye, .dob-picker-select, .dob-picker-icon-btn,
  .reg-input, .form-input, .cust-select-trigger, .pub-select-trigger,
  .filter-tab, .sched-tab, .ptab-btn, .pat-doc-tab, [role="tab"], [role="option"],
  .pref-card, .doctor-sel-card, .doc-card, .appt-type-card, .pick-person-row,
  .nav-profile-btn, .nav-profile-dropdown-item, .nav-profile-logout,
  .fp-back-link, .fp-resend-link, .notify-mark-read, .gal-del-btn,
  [onclick*="togglePwVisibility"], [onclick*="togglePw"]
) {
  transition:
    translate .2s ease,
    filter .2s ease, opacity .2s ease, box-shadow .2s ease,
    background-color .2s ease, border-color .2s ease, color .2s ease,
    transform .15s ease !important;
}
@media (hover: hover) {
:where(button, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning, .btn-disapprove, .btn-icon, .btn-solid, .btn-outline, .nav-book, .cta-btn, .about-cta-btn, .btn-submit, .footer-booknow, .auth-back-link):not(
  .ac-btn, .ac-dot, .ac-lb-btn, .vid-btn, .vid-center-btn, .vid-skip, .vid-speed-opt,
  .navbar-toggler, .nav-toggle, .topbar-toggle,
  .lf-pw-eye, .fp-pw-eye, .dob-picker-select, .dob-picker-icon-btn,
  .reg-input, .form-input, .cust-select-trigger, .pub-select-trigger,
  .filter-tab, .sched-tab, .ptab-btn, .pat-doc-tab, [role="tab"], [role="option"],
  .pref-card, .doctor-sel-card, .doc-card, .appt-type-card, .pick-person-row,
  .nav-profile-btn, .nav-profile-dropdown-item, .nav-profile-logout,
  .fp-back-link, .fp-resend-link, .notify-mark-read, .gal-del-btn,
  [onclick*="togglePwVisibility"], [onclick*="togglePw"]
):hover:not(:disabled, [aria-disabled="true"]) {
  translate: 0 -1px;
}
}
:where(button, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning, .btn-disapprove, .btn-icon, .btn-solid, .btn-outline, .nav-book, .cta-btn, .about-cta-btn, .btn-submit, .footer-booknow, .auth-back-link):active:not(:disabled) {
  translate: 0 0;
}
/* Solid buttons: a soft fade toward white on hover — never darker, never brighter/more saturated. */
@media (hover: hover) {
:where(.btn-primary, .btn-danger, .lf-btn, .fp-btn-primary, .reg-next-btn,
       .btn-solid, .nav-book, .cta-btn, .btn-submit):hover:not(:disabled, [aria-disabled="true"]) {
  opacity: .88;
}
}
@media (prefers-reduced-motion: reduce) {
  :where(button, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning, .btn-disapprove, .btn-icon, .btn-solid, .btn-outline, .nav-book, .cta-btn, .about-cta-btn, .btn-submit, .footer-booknow, .auth-back-link):hover {
    translate: none;
  }
}

/* Website solid buttons — same look as the app's Sign In button (12px
   corners, soft orange shadow on hover). On hover the orange is mixed
   toward WHITE rather than faded with opacity: several of these sit on
   the dark hero photo, where an opacity fade lets the dark image show
   through and reads as darker/muddy. :is() + :not() keeps these above
   each page's own .x:hover rules, which load after this file. */
:is(.btn-solid, .cta-btn, .btn-submit, .nav-book):hover:not(:disabled, [aria-disabled="true"]) {
  opacity: 1;
  background-color: color-mix(in srgb, var(--orange) 82%, #fff);
  box-shadow: 0 3px 10px rgba(232,137,28,.3);
}

/* The floating back-to-top button (public-nav.js) fades away while a
   full-screen layer is open — the mobile menu drawer or the home page's
   photo viewer — instead of floating on top of it. !important beats the
   inline opacity/transform its scroll handler sets. */
.nav-drawer-open .scroll-top-btn,
.ac-viewer-open .scroll-top-btn {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  pointer-events: none !important;
}