/* ============================================================
   File: /assets/css/style.css
   Purpose: Global design system and reusable base styles
   Version: 2026-06-07 02:20 SAST
   Notes: PHP 7.1 friendly project
   Project scope note: 4FR Health is progressively moving newer page-level
   styling into /assets/css/style.css as part of the future move away from
   legacy /assets/css/4fr-com-styles.css.
   ============================================================ */

/* ============================================================
SECTION 1: Global Design Tokens
============================================================ */
:root {
--primary-green: #00A651; --primary-green-shade: #007f3e; --primary-green-soft: #e9f8f0; --primary-green-lux: #33c47a;
--secondary-blue: #1C75BC; --secondary-blue-shade: #155c96; --secondary-blue-soft: #edf6fc; --secondary-blue-lux: #5ca2d8;
--white: #ffffff; --black: #000000; --text: #1c1c1c; --text-soft: #4f5b66; --text-muted: #6b7280;
--bg: #f7faf9; --surface: #ffffff; --surface-soft: #f3f7f9; --border: #d8e3e8; --border-soft: #e8eef2;
--ash: #f5f5f5; --charcoal: #333333; --cerebral-grey: #cccccc; --sky-lightest: #f8fbfc; --mint: #b3e5cc;
--success: #15803d; --warning: #d97706; --danger: #dc2626;
--font-primary: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-secondary: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
--space-xxs: 0.375rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 5rem;
--radius-sm: 0.5rem; --radius-md: 0.85rem; --radius-lg: 1.2rem; --radius-xl: 1.5rem; --radius-pill: 999px;
--shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06); --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08); --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12);
--site-max: 1240px; --content-max: 1120px; --narrow-max: 840px; --page-pad: 1rem;
--transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease;
}

/* ============================================================
SECTION 2: Global Reset & Base Elements
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background-color: var(--bg); color: var(--text); font-family: var(--font-secondary); margin: 0; overflow-x: hidden; padding: 0; }
img, svg, video { display: block; height: auto; max-width: 100%; }
a { color: var(--primary-green); text-decoration: none; transition: color var(--transition-fast), opacity var(--transition-fast); }
a:hover, a:focus { color: var(--primary-green-shade); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
::selection { background: var(--secondary-blue); color: var(--white); }

/* ============================================================
SECTION 3: Base Typography
============================================================ */
h1, h2, h3, h4, h5, h6 { color: var(--text); font-family: var(--font-primary); line-height: 1.15; margin: 0 0 var(--space-md); }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; display: block; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; unicode-bidi: isolate; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); font-weight: 800; }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 700; }
p { color: var(--text-soft); line-height: 1.75; margin: 0 0 var(--space-lg); }
ul, ol { color: var(--text-soft); line-height: 1.75; margin: 0 0 var(--space-lg); padding-left: 1.4rem; }

/* ============================================================
SECTION 4: Shared Layout Utilities
============================================================ */
.section, .site-section { margin: 0 auto; max-width: 1200px; padding: 2rem 1rem; width: 100%; }
.site-section--tight { padding-bottom: var(--space-2xl); padding-top: var(--space-2xl); }
.site-shell { margin: 0 auto; max-width: var(--site-max); width: 100%; }
.site-shell--narrow { max-width: var(--narrow-max); }
.text-center { text-align: center; }
.eyebrow { background: var(--primary-green-soft); border-radius: var(--radius-pill); color: var(--primary-green-shade); display: inline-block; font-family: var(--font-primary); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; margin-bottom: var(--space-sm); padding: 0.35rem 0.8rem; text-transform: uppercase; }
.section-title { color: var(--text); margin-bottom: var(--space-sm); }
.section-intro { font-size: 1.05rem; margin: 0 auto; max-width: 68ch; }

/* ============================================================
SECTION 5A: Reusable UI Components
============================================================ */
.button-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.button-row--center { justify-content: center; }
.button { align-items: center; border: 1px solid transparent; border-radius: var(--radius-md); display: inline-flex; font-family: var(--font-primary); font-size: 0.96rem; font-weight: 700; gap: 0.5rem; justify-content: center; line-height: 1.2; min-height: 48px; padding: 0.85rem 1.25rem; text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.button:hover, .button:focus { transform: translateY(-2px); }
.button--primary { background: var(--primary-green); border-color: var(--primary-green); box-shadow: var(--shadow-sm); color: var(--white); }
.button--primary:hover, .button--primary:focus { background: var(--primary-green-shade); border-color: var(--primary-green-shade); color: var(--white); }
.button--secondary { background: var(--white); border-color: var(--secondary-blue); color: var(--secondary-blue); }
.button--secondary:hover, .button--secondary:focus { background: var(--secondary-blue); color: var(--white); }
.button--ghost { background: transparent; border-color: var(--border); color: var(--text); }
.button--ghost:hover, .button--ghost:focus { background: var(--surface-soft); border-color: var(--secondary-blue); color: var(--secondary-blue); }
.button--block { width: 100%; }
.card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.icon-chip { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text); display: inline-flex; font-size: 0.94rem; font-weight: 600; gap: 0.5rem; padding: 0.65rem 0.85rem; }
.hashtag { color: var(--secondary-blue); font-weight: 800; }
input[type="checkbox"] { accent-color: var(--primary-green); cursor: pointer; height: 1.1rem; width: 1.1rem; }
.checkbox-label { align-items: center; display: flex; font-family: var(--font-secondary); font-size: 1rem; gap: 0.5rem; margin-bottom: 1rem; }
.sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* ============================================================
SECTION 5B: Reusable Contact & Content Layout Components
Migration source: /assets/css/contact-layout.css
Affected pages: /Connect/index.php, /Connect/test.php
============================================================ */
.content-stack{display:grid;gap:2.5rem;margin:0 auto;max-width:860px;width:100%}
.content-heading{margin-bottom:.4rem;text-align:center}
.content-heading .section-title{color:var(--primary-green);font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700;margin-bottom:.35rem}
.content-heading .section-intro{color:var(--secondary-blue);font-size:1.05rem;margin-bottom:.9rem}
.content-heading .content-lead{color:var(--text-soft);margin:0 auto;max-width:62ch}
.contact-list{display:grid;gap:.2rem;list-style:none;margin:0 auto;max-width:680px;padding:0;width:100%}
.contact-list-item{align-items:center;border-radius:var(--radius-md);color:var(--text-soft);display:grid;gap:.8rem;grid-template-columns:1.4rem minmax(0,1fr);padding:.7rem .8rem;transition:background-color var(--transition-fast),transform var(--transition-fast)}
.contact-list-item:hover,.contact-list-item:focus-within{background:var(--surface-soft);transform:translateX(3px)}
.contact-list-icon{color:var(--primary-green);font-size:1rem;text-align:center}
.contact-list-item strong{color:var(--text);margin-right:.35rem}
.contact-list-item a{color:var(--secondary-blue)}
.contact-list-item a:hover,.contact-list-item a:focus{color:var(--primary-green)}
.content-panel{margin:0 auto;width:100%}
.content-panel-title{color:var(--secondary-blue);font-size:1.2rem;font-weight:600;margin-bottom:1.2rem;text-align:center}
.data-table-wrap{border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin:0 auto;max-width:760px;overflow-x:auto;width:100%}
.data-table{border-collapse:collapse;min-width:620px;width:100%}
.data-table th,.data-table td{border-bottom:1px solid var(--border-soft);padding:.95rem 1rem;text-align:center}
.data-table thead th{background:var(--mint);color:var(--text);font-weight:700}
.data-table tbody th{color:var(--text);font-weight:500}
.data-table tbody td{color:var(--text-soft)}
.data-table tbody tr:last-child th,.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--surface-soft)}
.media-frame{background:linear-gradient(135deg,rgba(0,166,81,.12),rgba(28,117,188,.08));border-radius:var(--radius-lg);margin:0 auto;max-width:760px;padding:1.5rem;width:100%}
.media-frame iframe{border:0;border-radius:var(--radius-md);display:block;min-height:400px;width:100%}
.action-row{display:flex;flex-wrap:wrap;gap:.85rem}
.action-row--center{justify-content:center}
@media(max-width:640px){.content-stack{gap:2rem}.contact-list-item{align-items:start;grid-template-columns:1.25rem minmax(0,1fr);padding:.65rem .2rem}.contact-list-item:hover,.contact-list-item:focus-within{background:transparent;transform:none}.media-frame{border-radius:var(--radius-md);padding:.75rem}.media-frame iframe{min-height:320px}}
/* Mobile overflow containment for Connect page content */
.content-stack,.content-panel,.content-heading,.contact-list,.data-table-wrap,.media-frame,.action-row{max-width:100%;min-width:0;overflow-wrap:anywhere}
.contact-list-item{min-width:0}
.contact-list-item span{min-width:0;overflow-wrap:anywhere;word-break:normal}
.media-frame{box-sizing:border-box}
.media-frame iframe{max-width:100%;min-width:0}
@media(max-width:640px){
  .site-section:has(.content-stack){padding-left:.75rem;padding-right:.75rem}
  .content-stack{gap:1.75rem;width:100%}
  .content-heading .section-title{font-size:clamp(1.55rem,8vw,2rem)}
  .contact-list{width:100%}
  .contact-list-item{gap:.65rem;grid-template-columns:1.15rem minmax(0,1fr);padding:.55rem 0}
  .data-table-wrap{border-radius:var(--radius-md);overflow-x:visible;width:100%}
  .data-table{min-width:0;table-layout:fixed;width:100%}
  .data-table th,.data-table td{font-size:.82rem;padding:.7rem .35rem;white-space:normal;word-break:normal;overflow-wrap:anywhere}
  .data-table thead th{font-size:.78rem}
  .media-frame{border-radius:var(--radius-md);padding:.55rem;width:100%}
  .media-frame iframe{height:320px;min-height:320px}
  .action-row{align-items:stretch;flex-direction:column;width:100%}
  .action-row .button{width:100%}
}
@media(max-width:380px){
  .data-table th,.data-table td{font-size:.76rem;padding:.6rem .22rem}
  .contact-list-item{font-size:.92rem}
  .media-frame iframe{height:280px;min-height:280px}
}

/* ============================================================
SECTION 5C: Reusable Secure Login Components
Migration source: /dashboard/sso/login.php inline styles
Affected pages: /dashboard/sso/login.php
============================================================ */
.secure-login-body{background:#f5f7fb;color:var(--text);font-family:'Open Sans',Arial,sans-serif}
.secure-login-page{align-items:center;display:flex;justify-content:center;min-height:calc(100vh - 72px);padding:2rem 1rem}
.secure-login-card{border:0;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.12);max-width:420px;padding:1.5rem;width:100%}
.secure-login-title{color:var(--secondary-blue);font-family:'Montserrat',Arial,sans-serif;font-size:clamp(1.65rem,6vw,1.9rem);margin:0 0 .75rem}
.secure-login-copy{line-height:1.5;margin:0 0 1.25rem}
.secure-login-note{color:#666;font-size:.82rem;line-height:1.5;margin-top:1rem}
.secure-login-alert{border-radius:10px;font-size:.9rem;line-height:1.45;margin-bottom:1rem;padding:.75rem .875rem}
.secure-login-alert--danger{background:#fff1f1;color:#b42318}
@media(min-width:600px){.secure-login-page{padding:3rem 1.5rem}.secure-login-card{padding:2rem}}

/* ============================================================
SECTION 5D: Reusable Article & Profile Components
Migration source: /assets/css/4fr-com-styles.css article rules and /About/drcolette.php inline overrides
Affected pages: /About/drcolette.php
============================================================ */
.article-wrap{animation:contentFadeIn 420ms ease-out both;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin:1rem auto;max-width:960px;padding:1rem 1.25rem}
.article-wrap--plain{background:transparent;border:0;box-shadow:none;padding-left:0;padding-right:0}
.article-header{margin:0 0 var(--space-md)}
.article-title{color:var(--primary-green);font-size:clamp(1.75rem,6vw,2.25rem);font-weight:800;line-height:1.2;margin:.25rem 0}
.article-title-secondary{color:var(--secondary-blue);display:block;font-size:clamp(1.15rem,4vw,1.5rem);font-weight:500;line-height:1.3;margin-top:.25rem}
.article-subtitle{margin-top:.25rem}
.article-hero{margin:0 0 var(--space-md)}
.article-hero--plain{background:transparent;box-shadow:none}
.article-hero img{border-radius:12px;box-shadow:0 8px 18px rgba(15,23,42,.08);display:block;height:auto;max-width:100%;transition:box-shadow var(--transition-base),transform var(--transition-base);width:100%}
.article-hero img:hover{box-shadow:0 14px 28px rgba(15,23,42,.12);transform:translateY(-4px)}
.article-hero-caption{color:var(--text-muted);font-size:.95rem;line-height:1.4;margin-top:.5rem;text-align:center}
.article-body>*+*{margin-top:1rem}
.article-body h2{color:var(--primary-green);font-size:clamp(1.45rem,4vw,1.9rem);margin-top:1.25rem}
.article-body h3{color:var(--secondary-blue);margin-top:1.1rem}
.article-body::after{clear:both;content:"";display:table}
.article-list{list-style:disc;margin:0 0 1rem 1.5rem;padding-left:1.25rem}
.article-list li{margin-bottom:.5rem}
.article-list li::marker{color:var(--primary-green);font-weight:800}
.iod-cta{margin-top:1.25rem}
.iod-cta__box{background:linear-gradient(180deg,var(--sky-lightest),var(--surface));border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.25rem;text-align:center;transition:box-shadow var(--transition-fast),transform var(--transition-fast)}
.iod-cta__box:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
@keyframes contentFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:640px){.article-wrap{margin:2rem auto;padding:1.5rem 2rem}.article-wrap--plain{padding-left:0;padding-right:0}}

/* ============================================================
SECTION 5E: Intake Vault Password Field
Scope: /intake/vault.php
Purpose: Secure password input styling for patient document vault.
============================================================ */
.vault-password-label{align-items:center;color:var(--text);display:flex;font-size:.94rem;font-weight:800;gap:.45rem;margin:.35rem 0 .55rem}
.vault-password-label i{color:var(--primary-green)}
.vault-password-shell{position:relative}
.vault-password-icon{align-items:center;background:linear-gradient(135deg,var(--primary-green),var(--secondary-blue));border-radius:999px;color:#fff;display:inline-flex;height:2.25rem;justify-content:center;left:.65rem;position:absolute;top:50%;transform:translateY(-50%);width:2.25rem;z-index:2}
.form-wrapper .vault-password-input{appearance:none;background:linear-gradient(180deg,#fff,#f8fbfc);border:1.5px solid rgba(28,117,188,.24);border-radius:999px;box-shadow:inset 0 1px 2px rgba(15,23,42,.04),0 12px 26px rgba(28,117,188,.1);color:var(--text);font-size:1.05rem;font-weight:700;letter-spacing:.055em;min-height:58px;outline:none;padding:.95rem 1.1rem .95rem 3.35rem;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;width:100%}
.form-wrapper .vault-password-input:focus{border-color:var(--secondary-blue);box-shadow:0 0 0 4px rgba(28,117,188,.14),0 16px 32px rgba(28,117,188,.13)}
.vault-password-hint{color:var(--text-muted);display:block;font-size:.88rem;line-height:1.45;margin:.55rem 0 0;text-align:center}
@media(max-width:520px){.form-wrapper .vault-password-input{font-size:1rem;min-height:54px;padding-left:3.15rem}.vault-password-icon{height:2rem;width:2rem}.vault-password-hint{text-align:left}}


/* ============================================================
SECTION 6: Reusable Background Utilities
============================================================ */
.surface-soft { background: linear-gradient(180deg, #f8fbfc 0%, #ffffff 100%); }
.surface-brand { background: radial-gradient(circle at top left, rgba(0, 166, 81, 0.08), transparent 30%), radial-gradient(circle at bottom right, rgba(28, 117, 188, 0.10), transparent 32%), linear-gradient(180deg, #f7fbfa 0%, #ffffff 100%); }

/* ============================================================
   SECTION 7A: After-hours Design Tokens & How-to Panel
   Scope: /Bookings/afterhours/
   Purpose: Page-level tokens, instructional panel, and how-to list styling.
   ============================================================ */
.afterhours-page { --ah-blue: #1f78d1; --ah-blue-dark: #125ca3; --ah-blue-soft: #f4f9ff; --ah-green: #00a651; --ah-text: #1f2a37; --ah-text-soft: #5c6b7a; --ah-border: #d9e8f7; --ah-shadow: 0 16px 40px rgba(16, 57, 104, 0.08); --ah-shadow-soft: 0 10px 24px rgba(16, 57, 104, 0.06); --ah-radius-lg: 24px; --ah-radius-md: 18px; }
.afterhours-page .howto { background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); box-shadow: var(--ah-shadow); margin: 1.75rem 0 1.85rem; max-width: 760px; overflow: hidden; padding: 1.35rem 1.35rem 1.2rem; position: relative; }
.afterhours-page .howto::before { background: linear-gradient(90deg, var(--ah-green) 0%, var(--ah-blue) 100%); content: ""; height: 5px; inset: 0 0 auto 0; position: absolute; }
.afterhours-page .howto__heading { align-items: center; color: var(--ah-blue-dark); display: flex; font-size: 1.35rem; font-weight: 800; gap: 0.65rem; letter-spacing: -0.02em; margin: 0 0 0.9rem; }
.afterhours-page .howto__heading .heading-icon { color: var(--ah-green); flex: 0 0 auto; height: 23px; width: 23px; }
.afterhours-page .howto__list { display: grid; gap: 0.72rem; list-style: none; margin: 0; padding: 0; }
.afterhours-page .howto__item { align-items: flex-start; background: rgba(255, 255, 255, 0.86); border: 1px solid #e6f0fb; border-radius: var(--ah-radius-md); box-shadow: var(--ah-shadow-soft); display: flex; gap: 0.85rem; padding: 0.86rem 0.95rem; }
.afterhours-page .howto__item:hover { border-color: #cfe4fb; box-shadow: 0 12px 24px rgba(16, 57, 104, 0.08); }
.afterhours-page .howto__num { align-items: center; background: #ffffff; border: 2px solid #8ec3f5; border-radius: 999px; color: var(--ah-blue-dark); display: inline-flex; flex: 0 0 40px; font-size: 0.95rem; font-weight: 800; height: 40px; justify-content: center; line-height: 1; width: 40px; }
.afterhours-page .howto__text { color: var(--ah-text-soft); font-size: 0.98rem; line-height: 1.62; margin: 0; padding-top: 0.12rem; }
.afterhours-page .howto__text strong { color: var(--ah-text); font-weight: 800; }

/* ============================================================
   SECTION 7B: After-hours Filter & Smart Search Input
   Scope: /Bookings/afterhours/
   Purpose: Filter container, search card, label, input field, and focus states.
   ============================================================ */
.afterhours-page .filter-main { margin-top: 1.35rem; }
.afterhours-page .filter-main-panel { margin: 1.35rem auto 1.25rem; max-width: 900px; }
.afterhours-page .filter-main-card { background: #ffffff; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); box-shadow: 0 12px 30px rgba(16, 57, 104, 0.07); overflow: visible; padding: 1.15rem 1.2rem 1rem; position: relative; }
.afterhours-page .filter-main-card::before { display: none; }
.afterhours-page .filter-main-card > * { position: relative; z-index: 1; }
.afterhours-page [data-smartsearch] { margin: 0; position: relative; }
.afterhours-page [data-smartsearch]::before { display: none; }
.afterhours-page .smartsearch-label { color: var(--ah-text); display: block; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.7rem; text-align: center; }
.afterhours-page .smartsearch-control-wrap { position: relative; }
.afterhours-page .smartsearch-control { align-items: center; background: #ffffff; border: 1.5px solid #cfe0f2; border-radius: 999px; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 22px rgba(16, 57, 104, 0.07); display: flex; gap: 0.65rem; min-height: 58px; padding: 0 0.85rem 0 1.05rem; transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; width: 100%; }
.afterhours-page .smartsearch-control:focus-within { border-color: var(--ah-blue); box-shadow: 0 0 0 4px rgba(31, 120, 209, 0.12), 0 14px 28px rgba(16, 57, 104, 0.1); }
.afterhours-page .smartsearch-icon { align-items: center; color: var(--ah-blue); display: inline-flex; flex: 0 0 auto; font-size: 0.98rem; height: auto; justify-content: center; width: auto; }
.afterhours-page .smartsearch-input, .afterhours-page [data-smartsearch-input] { -webkit-appearance: none; appearance: none; background: transparent; border: 0; box-shadow: none; color: var(--ah-text); flex: 1 1 auto; font-size: 1rem; font-weight: 500; min-height: 56px; min-width: 0; outline: none; padding: 0; transition: none; width: 100%; }
.afterhours-page .smartsearch-input::placeholder { color: #7c8b98; font-weight: 400; }
.afterhours-page .smartsearch-input:hover, .afterhours-page .smartsearch-input:focus, .afterhours-page [data-smartsearch-input]:hover, .afterhours-page [data-smartsearch-input]:focus { background: transparent; border: 0; box-shadow: none; transform: none; }

/* ============================================================
   SECTION 7C: Reusable Multigrid Result System
   Scope: shared cards/grids, including /Bookings/
   Purpose: Shared multigrid, booking tile, and hover reveal styling moved from legacy CSS.
   ============================================================ */
.multigrid * { box-sizing: border-box; margin: 0; padding: 0; }
.multigrid { padding: 2rem; unicode-bidi: isolate; width: 100%; }
.multigrid-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.multigrid-grid-filter { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.multigrid-tile { align-items: center; background: linear-gradient(180deg, rgba(248, 251, 252, 0.92), rgba(255, 255, 255, 0.86)); border: 1px solid rgba(28, 117, 188, 0.14); border-radius: 1rem; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); color: var(--text); cursor: pointer; display: flex; flex-direction: column; justify-content: center; min-height: 155px; overflow: hidden; padding: 2rem; position: relative; text-align: center; text-decoration: none; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; will-change: transform; }
.multigrid-tile-filter { background-color: var(--white); border-radius: 1rem; color: var(--text); cursor: pointer; overflow: hidden; padding: 0.35rem; position: relative; text-align: center; text-decoration: none; will-change: transform; }
.multigrid-tile:hover { border-color: rgba(0, 166, 81, 0.28); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10); transform: translateY(-6px); }
.multigrid-tile h3, .multigrid-tile-filter h3 { color: var(--secondary-blue); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }
.multigrid-tile:hover h3 { color: var(--primary-green); }
.multigrid-description { color: var(--text); display: block; font-size: 0.95rem; line-height: 1.5; margin-top: 0.5rem; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(12px); transition: max-height 0.55s ease, opacity 0.55s ease, transform 0.55s ease; }
.multigrid-tile:is(:focus-within, :focus-visible) .multigrid-description { max-height: 240px; opacity: 1; transform: translateY(0); }
.multigrid-grid .is-hidden, .multigrid .multigrid-grid [hidden] { display: none !important; }
.multigrid a:hover, .multigrid a:focus, .multigrid a:active { text-decoration: none; }
@media (hover: hover) { .multigrid-tile:hover .multigrid-description { max-height: 200px; opacity: 1; transform: translateY(0); } }
@media (hover: none) { .multigrid-tile.visible .multigrid-description, .multigrid-tile.expanded .multigrid-description { max-height: 240px; opacity: 1; transform: translateY(0); } .multigrid-tile.expanded { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); transform: translateY(-6px); } }
.multigrid-tile.expanded .multigrid-description { transition: opacity 0.6s ease, transform 0.6s ease, max-height 0.6s ease; }
.multigrid-tile--new { border-color: rgba(255, 108, 55, 0.45); }
.multigrid-tile--new:hover { border-color: rgba(255, 108, 55, 0.72); }
.multigrid-flag-new { color: #ff6c37; font-size: 1rem; font-weight: 800; letter-spacing: 0.08em; margin-bottom: 0.55rem; text-transform: uppercase; }
.new-anim { animation: newPulse 1.8s ease-in-out infinite; display: inline-block; }
@keyframes newPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.68; transform: scale(1.08); } }
.multigrid.multigrid-filter { background: transparent; border: 0; box-shadow: none; padding: 0.35rem; unicode-bidi: isolate; }
.multigrid-filter .multigrid-grid-filter { align-items: start; display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.multigrid-filter .multigrid-tile-filter { background: transparent; box-shadow: none; padding: 0.5rem; }
.multigrid-filter { --pill-accent: var(--secondary-blue); --pill-ink: #fff; }
.multigrid-filter.pills-green { --pill-accent: var(--primary-green); }
.multigrid-filter .filters-grid { display: flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; margin: 0.25rem 0 0.5rem; }
.multigrid-filter .filter-chip { align-items: center; background: transparent; border: 1.5px solid var(--pill-accent); border-radius: var(--radius-pill); color: var(--pill-accent); cursor: pointer; display: inline-flex; position: relative; transition: background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.multigrid-filter .filter-chip input[type="checkbox"] { inset: 0; opacity: 0; position: absolute; }
.multigrid-filter .filter-chip span { align-items: center; border-radius: var(--radius-pill); display: inline-flex; font-size: 0.9rem; line-height: 1.2; min-height: 34px; padding: 0.32rem 0.65rem; }
.multigrid-filter .filter-chip input[type="checkbox"]:focus-visible + span { outline: 2px solid var(--pill-accent); outline-offset: 2px; }
.multigrid-filter .filter-chip input[type="checkbox"]:checked + span { background: var(--pill-accent); box-shadow: 0 0 0 2px var(--pill-accent) inset; color: var(--pill-ink); }
.multigrid-filter .filter-chip:hover { background: var(--surface-soft); box-shadow: 0 0 0 2px var(--pill-accent) inset; }
.multigrid-filter .filters-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.multigrid-filter .btn-clear { background: transparent; border: 1.5px solid var(--pill-accent); border-radius: var(--radius-pill); color: var(--pill-accent); font-size: 0.9rem; padding: 0.32rem 0.7rem; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.multigrid-filter .btn-clear:hover { background: var(--pill-accent); color: var(--pill-ink); }
.filters-count { color: var(--charcoal); font-size: 0.85rem; }
.filters-count.flash { animation: filtersFlash 800ms ease; }
@keyframes filtersFlash { 0% { background: var(--secondary-blue-lux); border-radius: 4px; color: #fff; padding: 0 0.35rem; } 100% { background: transparent; color: inherit; padding: 0; } }

/* ============================================================
   SECTION 7D: Reusable Read More / Article Header Styles
   Scope: pages using readmore article layout, including /Bookings/
   Purpose: Legacy article header styling moved from 4fr-com-styles.css.
   ============================================================ */
.readmore-article { clear: both; display: block; margin-bottom: 3rem; position: relative; width: 100%; }
#readmore-heading { color: var(--primary-green); font-family: var(--font-primary); font-size: 1.9rem; font-weight: 600; margin-bottom: 0.5rem; }
.readmore-subtitle { color: var(--secondary-blue); font-family: var(--font-primary); font-size: 1.1rem; font-weight: 400; margin: 0.5rem 0 2rem; }
.readmore-preview { line-height: 1.5; margin-bottom: 1rem; }
.readmore-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.8s ease, opacity 0.8s ease; }
.readmore-content.show { max-height: 1000px; opacity: 1; }
.readmore-toggle { background-color: var(--primary-green); border: none; border-radius: 8px; color: var(--white); cursor: pointer; display: inline-block; font-family: var(--font-secondary); font-size: 1rem; font-weight: normal; margin-top: 0.5rem; padding: 0.6rem 1.2rem; transition: background-color 0.3s ease; }
.readmore-toggle:hover { background-color: var(--secondary-blue); }
.readmore-photo { border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); float: left; margin-bottom: 1rem; margin-right: 2rem; max-width: 40%; overflow: hidden; }
.readmore-photo img { border-radius: 0.5rem; display: block; height: auto; width: 100%; }
@media screen and (max-width: 768px) { .readmore-photo { float: none; margin: 1rem auto; max-width: 100%; } }

/* ============================================================
   SECTION 7E: After-hours Smart Search Actions & Suggestions
   Scope: /Bookings/afterhours/
   Purpose: Clear button, helper text, suggestion dropdown, suggestion rows, and result spacing.
   ============================================================ */
.afterhours-page .smartsearch-clear, .afterhours-page [data-smartsearch-clear] { align-items: center; background: transparent; border: 0; border-radius: 999px; color: #7d93a8; display: inline-flex; flex: 0 0 auto; font-size: 0.95rem; height: 34px; justify-content: center; min-width: 34px; padding: 0; position: static; transform: none; transition: background-color 0.18s ease, color 0.18s ease; }
.afterhours-page .smartsearch-clear:hover, .afterhours-page .smartsearch-clear:focus-visible, .afterhours-page [data-smartsearch-clear]:hover, .afterhours-page [data-smartsearch-clear]:focus-visible { background: #eef6ff; color: var(--ah-blue-dark); outline: none; }
.afterhours-page .smartsearch-hint { color: var(--ah-text-soft); display: block; font-size: 0.9rem; line-height: 1.5; margin-top: 0.7rem; text-align: center; }
.afterhours-page .smartsearch-suggestions, .afterhours-page [data-smartsearch-suggestions-list] { background: rgba(255, 255, 255, 0.98); border: 1px solid #dbe9f7; border-radius: 18px; box-shadow: 0 20px 42px rgba(16, 57, 104, 0.14); margin-top: 0.72rem; overflow: hidden; padding: 0.35rem; z-index: 40; }
.afterhours-page .smartsearch-suggestion { align-items: center; background: transparent; border: 0; border-radius: 14px; color: var(--ah-text); cursor: pointer; display: flex; gap: 1rem; justify-content: space-between; padding: 0.82rem 0.95rem; text-align: left; transition: background-color 0.18s ease; width: 100%; }
.afterhours-page .smartsearch-suggestion:hover, .afterhours-page .smartsearch-suggestion:focus, .afterhours-page .smartsearch-suggestion.is-active { background: #f2f8ff; outline: none; }
.afterhours-page .smartsearch-suggestion-text { color: var(--ah-text); font-size: 0.96rem; font-weight: 650; }
.afterhours-page .smartsearch-suggestion-meta { background: #e9f4ff; border: 1px solid #d2e6fb; border-radius: 999px; color: var(--ah-blue-dark); font-size: 0.76rem; font-weight: 800; padding: 0.22rem 0.56rem; white-space: nowrap; }
.afterhours-page .filter-main-results { margin-top: 1.45rem; }

/* ============================================================
   SECTION 7F: After-hours Smart Search Layering
   Scope: /Bookings/afterhours/
   Purpose: Keeps predictive suggestions visually above result tiles.
   ============================================================ */
.afterhours-page .filter-main, .afterhours-page .filter-main-panel, .afterhours-page .filter-main-card, .afterhours-page .smartsearch, .afterhours-page .smartsearch-control-wrap { overflow: visible; position: relative; }
.afterhours-page .filter-main-panel, .afterhours-page .filter-main-card, .afterhours-page .smartsearch { z-index: 30; }
.afterhours-page .smartsearch-suggestions, .afterhours-page [data-smartsearch-suggestions-list] { position: absolute; z-index: 9999; }
.afterhours-page .filter-main-results, .afterhours-page [data-filter-grid], .afterhours-page .multigrid-grid { position: relative; z-index: 1; }

/* ============================================================
   SECTION 7G: Reusable Help Popup Pattern
   Scope: /Bookings/afterhours/
   Purpose: Smart Search help trigger, modal structure, and numbered guidance list.
   ============================================================ */
.afterhours-page .smartsearch-label { align-items: center; display: inline-flex; gap: 0.55rem; justify-content: center; width: 100%; }
.afterhours-page .ah-help-trigger { align-items: center; background: var(--white); border: 2px solid var(--ah-blue, #1f78d1); border-radius: var(--radius-pill); box-shadow: 0 2px 8px rgba(28, 117, 188, 0.12); color: var(--ah-blue-dark, #125ca3); display: inline-flex; flex: 0 0 auto; font-size: 0.95rem; font-weight: 800; height: 1.85rem; justify-content: center; line-height: 1; margin-left: 0.1rem; padding: 0; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; width: 1.85rem; }
.afterhours-page .ah-help-trigger:hover, .afterhours-page .ah-help-trigger:focus-visible { background: var(--ah-blue, #1f78d1); border-color: var(--ah-blue, #1f78d1); color: var(--white); outline: none; transform: translateY(-1px); }
.afterhours-page .ah-smartsearch-subtext { color: var(--ah-text-soft, #5c6b7a); font-size: 0.92rem; line-height: 1.5; margin: -0.35rem 0 1rem; text-align: center; }
.ah-help-overlay { background: rgba(17, 24, 39, 0.45); inset: 0; position: fixed; z-index: 9997; }
.ah-help-popup { left: 50%; max-height: calc(100vh - 2rem); overflow-y: auto; position: fixed; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 560px); z-index: 9998; }
.ah-help-popup-inner { background: var(--white); border: 1px solid #d8e3f0; border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); overflow: hidden; padding: 1.2rem 1.15rem 1.15rem; position: relative; }
.ah-help-popup-inner::before { background: linear-gradient(90deg, var(--primary-green) 0%, var(--secondary-blue) 100%); border-radius: var(--radius-pill); content: ""; display: block; height: 4px; margin-bottom: 1rem; width: 100%; }
.ah-help-close { background: transparent; border: 0; color: #4b5563; font-size: 1.8rem; line-height: 1; padding: 0.15rem; position: absolute; right: 0.9rem; top: 0.75rem; }
.ah-help-close:hover, .ah-help-close:focus-visible { color: #111827; outline: none; }
.ah-help-header { align-items: center; display: flex; gap: 0.65rem; margin-bottom: 1rem; }
.ah-help-icon { align-items: center; background: var(--primary-green-soft); border: 1px solid var(--primary-green); border-radius: 50%; color: var(--primary-green); display: inline-flex; flex: 0 0 auto; font-size: 0.95rem; font-weight: 800; height: 1.45rem; justify-content: center; width: 1.45rem; }
.ah-help-header h3 { color: var(--secondary-blue-shade); font-size: 1.25rem; font-weight: 800; margin: 0; padding-right: 2rem; }
.ah-help-steps { display: grid; gap: 0.8rem; }
.ah-help-step { align-items: flex-start; background: #f8fafc; border: 1px solid #e3ebf3; border-radius: 14px; display: flex; gap: 0.85rem; padding: 0.85rem 0.9rem; }
.ah-help-step-num { align-items: center; background: var(--white); border: 1px solid #60a5fa; border-radius: 50%; color: var(--secondary-blue); display: inline-flex; flex: 0 0 2rem; font-weight: 800; height: 2rem; justify-content: center; min-width: 2rem; width: 2rem; }
.ah-help-step-text { color: #475569; font-size: 0.98rem; line-height: 1.55; }
.ah-help-step-text strong { color: #111827; }
.ah-help-step-text a { color: var(--primary-green); font-weight: 700; text-decoration: none; }
.ah-help-step-text a:hover, .ah-help-step-text a:focus-visible { text-decoration: underline; }

/* ============================================================
   SECTION 7H: After-hours Booking Flow Layout
   Scope: /Bookings/afterhours/book/ and /Bookings/afterhours/form.php
   Purpose: Shared layout, cards, inputs, fallback slots, summary panel, and actions.
   ============================================================ */
.ah-body { background: linear-gradient(135deg, #f8fbfc 0%, #ffffff 52%, #f5f9fb 100%); color: var(--text); }
.ah-wrap { margin: 1.25rem auto 2rem auto; max-width: 760px; padding: 0 0.85rem; }
.ah-wrap--wide { max-width: 1180px; }
.ah-header { margin: 0 auto 1.25rem auto; }
.ah-header--premium { max-width: 1040px; }
.ah-eyebrow { color: var(--primary-green); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; margin: 0 0 0.35rem 0; text-transform: uppercase; }
.ah-title { color: #081226; font-family: var(--font-primary); font-size: clamp(2.1rem, 5vw, 3.8rem); line-height: 1.05; margin: 0 0 0.45rem 0; }
.ah-date { color: #556274; font-size: 0.96rem; line-height: 1.55; margin: 0.35rem 0; }
.ah-booking-layout { align-items: start; display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.ah-card { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(28, 117, 188, 0.12); border-radius: 18px; box-shadow: 0 18px 45px rgba(8, 18, 38, 0.08); padding: 1rem; transition: box-shadow 0.25s ease, transform 0.2s ease; }
.ah-card:hover { box-shadow: 0 22px 55px rgba(8, 18, 38, 0.1); }
.ah-card-head { align-items: flex-start; border-bottom: 1px solid rgba(8, 18, 38, 0.08); display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; }
.ah-card-title, .ah-summary-title { color: #081226; font-family: var(--font-primary); font-size: 1.45rem; line-height: 1.15; margin: 0; }
.ah-card--summary { position: sticky; top: 1rem; }
.field { margin: 1rem 0; }
.ah-label { color: #081226; display: block; font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; }
.ah-input, .ah-select, .ah-textarea { background-color: var(--white); border: 1.5px solid rgba(8, 18, 38, 0.16); border-radius: 12px; font-family: var(--font-secondary); font-size: 1rem; padding: 0.85rem 0.95rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, background-color 0.2s ease; width: 100%; }
.ah-input:hover, .ah-select:hover, .ah-textarea:hover { border-color: var(--secondary-blue); }
.ah-input:focus, .ah-select:focus, .ah-textarea:focus { border-color: var(--primary-green); box-shadow: 0 0 0 3px #b3e5cc, 0 8px 20px rgba(8, 18, 38, 0.06); outline: none; transform: translateY(-1px); }
.ah-row { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.ah-subtitle { color: var(--secondary-blue); font-family: var(--font-secondary); font-size: 1.2rem; margin: 0 0 0.75rem 0; }
.ah-calendar-main-wrap { border-radius: 16px; overflow: hidden; }
.ah-info, .small.text-muted { color: #667085; font-size: 0.9rem; }
.date-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.date-tab, .slot { background: var(--white); border: 1px solid rgba(8, 18, 38, 0.16); border-radius: 12px; cursor: pointer; font-family: var(--font-secondary); padding: 0.75rem 0.95rem; text-align: center; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.12s ease; }
.date-tab { flex: 1 1 120px; min-width: 110px; }
.date-tab:hover, .slot:hover { box-shadow: 0 8px 18px rgba(8, 18, 38, 0.1); transform: translateY(-1px); }
.date-tab:focus-visible { outline: 3px solid var(--secondary-blue); outline-offset: 2px; }
.date-tab.active { background: var(--primary-green); border-color: var(--primary-green-shade); color: var(--white); }
.slots-grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.slot.selected { border-color: var(--primary-green); box-shadow: 0 0 0 2px #b3e5cc inset, 0 8px 18px rgba(8, 18, 38, 0.06); }
.ah-summary-list { display: grid; gap: 0.75rem; margin: 1rem 0; }
.ah-summary-list div { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.ah-summary-list dt { color: #667085; font-size: 0.9rem; }
.ah-summary-list dd { color: #081226; font-size: 0.95rem; font-weight: 700; margin: 0; max-width: 58%; text-align: right; }
.ah-summary-total { align-items: center; border-top: 1px dashed rgba(8, 18, 38, 0.18); display: flex; justify-content: space-between; margin-top: 1rem; padding-top: 1rem; }
.ah-summary-total strong { color: #081226; font-size: 1.35rem; }
.ah-summary-note { color: var(--primary-green-shade); font-size: 0.88rem; line-height: 1.5; margin: 0.8rem 0 0 0; }
.ah-footerbar { align-items: center; display: grid; gap: 0.75rem; margin-top: 1rem; }
.ah-total { color: #081226; font-weight: 700; }
.btn.ah-primary, .btn.ah-secondary, .btn.ah-danger, .ah-link-button { border-radius: 12px; cursor: pointer; font-family: var(--font-secondary); font-size: 1rem; font-weight: 700; transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.btn.ah-primary { background: var(--primary-green); border: 1px solid var(--primary-green); color: var(--white); padding: 1rem 1.25rem; }
.btn.ah-primary:hover { background: var(--secondary-blue); border-color: var(--secondary-blue); box-shadow: 0 12px 24px rgba(8, 18, 38, 0.16); transform: translateY(-1px); }
.btn.ah-primary:disabled { cursor: not-allowed; filter: grayscale(10%); opacity: 0.68; }
.btn.ah-secondary, .btn.ah-danger { padding: 0.85rem 1rem; }
.btn.ah-secondary { background: var(--white); border: 1px solid rgba(28, 117, 188, 0.4); color: var(--secondary-blue); }
.btn.ah-secondary:hover { background: rgba(28, 117, 188, 0.08); border-color: var(--secondary-blue); }
.btn.ah-danger { background: #fff7f7; border: 1px solid rgba(190, 18, 60, 0.3); color: #be123c; }
.btn.ah-danger:hover { background: #be123c; border-color: #be123c; color: var(--white); }
.ah-link-button { background: transparent; border: 0; color: var(--primary-green-shade); padding: 0.2rem 0; white-space: nowrap; }
.ah-link-button:hover { color: var(--secondary-blue); text-decoration: underline; }
.ah-recovery-actions { display: grid; gap: 0.65rem; grid-template-columns: 1fr; margin-top: 0.85rem; }
.ah-recovery-actions[hidden] { display: none !important; }
.ah-status { color: #556274; font-size: 0.92rem; line-height: 1.45; margin-top: 0.75rem; }
.ah-status--success { color: var(--primary-green-shade); }
.ah-status--error { color: #be123c; }
.ah-status--loading { color: var(--secondary-blue); }

/* ============================================================
   SECTION 7I: After-hours Patient Form Utilities
   Scope: /Bookings/afterhours/form.php
   Purpose: Patient details form grid, notes, actions, and platform routing panel.
   ============================================================ */
.ah-form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ah-form-grid--single { grid-template-columns: 1fr; }
.ah-field-full { grid-column: 1 / -1; }
.ah-section-title { color: #081226; font-size: 1.15rem; margin: 1.2rem 0 0.5rem 0; }
.ah-required { color: #c2410c; font-weight: 800; }
.ah-form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; margin-top: 1.2rem; }
.ah-back-link { color: var(--secondary-blue); font-weight: 800; text-decoration: none; }
.ah-back-link:hover, .ah-back-link:focus-visible { text-decoration: underline; }
.ah-form-note { background: #f8fafc; border: 1px solid #e5edf3; border-radius: 14px; color: #475569; font-size: 0.88rem; line-height: 1.55; margin: 0.8rem 0; padding: 0.9rem 1rem; }
.ah-platform-routing { background: #f8fbfc; border: 1px solid #dbeafe; border-radius: 16px; margin-top: 0.75rem; padding: 1rem; }
.ah-platform-routing[hidden], .ah-platform-field[hidden] { display: none !important; }
.ah-platform-help { color: #475569; font-size: 0.86rem; line-height: 1.5; margin: 0.35rem 0 0; }

/* ============================================================
SECTION 8: Reusable Campaign Layout System
============================================================ */
.campaign-page { background: linear-gradient(135deg, #f8fbfc 0%, #ffffff 55%, #eef8f3 100%); min-height: 70vh; padding: 48px 16px; }
.campaign-card { background: var(--surface); border: 1px solid #dce8f2; border-radius: 24px; box-shadow: 0 22px 55px rgba(28, 117, 188, 0.14); margin: 0 auto; max-width: 980px; overflow: hidden; }
.campaign-hero { background: linear-gradient(135deg, var(--primary-green), var(--secondary-blue)); color: var(--white); padding: 34px 30px; }
.campaign-eyebrow { background: rgba(255, 255, 255, 0.18); border-radius: var(--radius-pill); display: inline-block; font-weight: 800; letter-spacing: 0.08em; margin-bottom: 12px; padding: 8px 14px; text-transform: uppercase; }
.campaign-hero h1 { color: var(--white); font-size: clamp(2rem, 5vw, 4rem); line-height: 1; margin: 0 0 12px; }
.campaign-hero p { font-size: 1.08rem; line-height: 1.55; margin: 0; max-width: 720px; }
.campaign-notice { background: rgba(255, 255, 255, 0.96); border-left: 5px solid #ffdd00; border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); color: #12324a; display: inline-block; font-size: 1rem; font-weight: 600; line-height: 1.65; margin-top: 4px; max-width: 720px; padding: 0.9rem 1.1rem; }
.campaign-notice strong { color: var(--primary-green-shade); font-weight: 900; }
.campaign-body { display: grid; gap: 26px; grid-template-columns: 1fr 1.1fr; padding: 30px; }
.campaign-summary-panel { background: #f8fbfc; border: 1px solid #dce8f2; border-radius: 20px; padding: 24px; }
.campaign-price { color: var(--secondary-blue); font-size: 3.2rem; font-weight: 900; line-height: 1; margin-bottom: 8px; }
.campaign-available { color: var(--primary-green); font-size: 2.4rem; font-weight: 900; }
.campaign-summary-panel small { color: #4b5563; display: block; line-height: 1.5; margin-top: 10px; }
.campaign-form label { color: #1f2937; display: block; font-weight: 800; margin: 0 0 6px; }
.campaign-form input, .campaign-form select, .campaign-form textarea { border: 1px solid #cbd5e1; border-radius: 12px; box-sizing: border-box; font: 16px/1.4 var(--font-primary); margin-bottom: 14px; padding: 12px 14px; width: 100%; }
.campaign-form input:focus, .campaign-form select:focus, .campaign-form textarea:focus { border-color: var(--secondary-blue); box-shadow: 0 0 0 3px rgba(28, 117, 188, 0.15); outline: none; }
.campaign-grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.campaign-btn { background: var(--primary-green); border: 0; border-radius: var(--radius-pill); color: var(--white); cursor: pointer; display: inline-block; font-weight: 900; padding: 14px 24px; text-align: center; text-decoration: none; width: 100%; }
.campaign-btn:hover, .campaign-btn:focus { background: var(--primary-green-shade); color: var(--white); }
.campaign-btn[disabled] { background: #94a3b8; cursor: not-allowed; }
.campaign-message { border-radius: 14px; line-height: 1.55; margin-bottom: 18px; padding: 14px 16px; }
.campaign-message.error { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; }
.campaign-message.info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
@media (max-width: 820px) { .campaign-body { grid-template-columns: 1fr; padding: 20px; } .campaign-grid-2 { gap: 0; grid-template-columns: 1fr; } .campaign-notice { font-size: 0.95rem; line-height: 1.55; max-width: 100%; padding: 0.8rem 0.95rem; } }

/* ============================================================
SECTION 9: Responsive & Accessibility Helpers
============================================================ */
@media (min-width: 600px) { .ah-row { grid-template-columns: repeat(2, 1fr); } .slots-grid { grid-template-columns: repeat(2, 1fr); } .ah-recovery-actions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ah-card { padding: 1.45rem; } .ah-booking-layout { grid-template-columns: minmax(0, 1fr) 340px; } .ah-row { grid-template-columns: repeat(3, 1fr); } .slots-grid { grid-template-columns: repeat(3, 1fr); } .date-tab { flex: 0 0 auto; min-width: 140px; } }
@media (max-width: 900px) { .site-section { padding-bottom: var(--space-2xl); padding-top: var(--space-2xl); } }
@media (max-width: 768px) { .multigrid { padding: 0.5rem 0; } .multigrid-grid, .multigrid-grid-filter { gap: 0.75rem; grid-template-columns: 1fr; padding-left: 0; padding-right: 0; } .multigrid.multigrid-help, .multigrid.multigrid-filter { border-left: 0; border-radius: 0; border-right: 0; margin-left: calc(-1 * var(--page-pad)); margin-right: calc(-1 * var(--page-pad)); padding-left: var(--page-pad); padding-right: var(--page-pad); } .multigrid-tile { min-height: 0; padding: 1rem; } .multigrid-tile-filter { padding: 0.25rem; } .multigrid-tile h3, .multigrid-tile-filter h3 { font-size: 1.1rem; } .multigrid-description { font-size: 0.95rem; line-height: 1.45; } .multigrid-filter .multigrid-tile-filter { position: sticky; top: calc(var(--sticky-offset, 56px) + 0.5rem); z-index: 20; } }
@media (max-width: 767.98px) { .afterhours-page .howto { border-radius: 20px; padding: 1.15rem 0.95rem 1rem; } .afterhours-page .howto__heading { font-size: 1.18rem; } .afterhours-page .howto__item { gap: 0.8rem; padding: 0.82rem 0.82rem; } .afterhours-page .howto__num { flex-basis: 38px; height: 38px; width: 38px; } .afterhours-page .filter-main-panel { margin-top: 1.15rem; } .afterhours-page .filter-main-card { border-radius: 20px; padding: 0.95rem 0.85rem 0.85rem; } .afterhours-page .smartsearch-control { min-height: 54px; padding-left: 0.9rem; padding-right: 0.68rem; } .afterhours-page .smartsearch-input, .afterhours-page [data-smartsearch-input] { font-size: 0.94rem; min-height: 52px; } .afterhours-page .smartsearch-hint { font-size: 0.86rem; } }
@media (max-width: 720px) { .ah-form-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .button-row { flex-direction: column; } .button { width: 100%; } .ah-help-popup-inner { border-radius: 16px; padding: 1rem; } .ah-help-header h3 { font-size: 1.1rem; } .ah-help-step-text { font-size: 0.93rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }