/* ============================================================
RUPRELA DIAGNOSTICS — Frontend Stylesheet
Modern healthcare theme: teal primary + coral accent
Colours are overridden live from Admin → Settings → Branding
============================================================ */
:root{
--primary:#0F9298;
--primary-2:#12AFB5;
--primary-soft:#E4F5F5;
--primary-softer:#F3FBFB;
--accent:#EF5B5B;
--accent-2:#F5806F;
--accent-soft:#FDECEC;
--green:#17B26A;
--green-soft:#E6F8EF;
--amber:#F79009;
--danger:#E5484D;
--danger-soft:#FDECEC;
--ink:#14183E;
--ink-2:#333A63;
--grey:#6B7280;
--grey-2:#9AA1B1;
--line:#E8EAF2;
--bg:#F6F7FB;
--white:#fff;
--radius:16px;
--radius-sm:12px;
--radius-lg:24px;
--shadow-xs:0 2px 8px rgba(20,24,62,.06);
--shadow:0 8px 26px rgba(20,24,62,.09);
--shadow-lg:0 20px 50px rgba(20,24,62,.14);
--grad:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);
--grad-accent:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
/* legacy aliases so older markup keeps working */
--red:var(--primary);
--red-dark:var(--primary-2);
--red-light:var(--primary-soft);
--navy:var(--primary);
--dark:var(--ink);
--border:var(--line);
--grey-light:var(--bg);
--blue:var(--primary-2);
--font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
/* ============================================================
LANGUAGE SWITCHER + RIGHT-TO-LEFT
RTL only kicks in when the page carries dir="rtl", which the
header sets from the visitor's language. A left-to-right site
is completely unaffected by everything below.
============================================================ */
.lang-switch{position:relative;flex:0 0 auto}
.lang-switch .ls-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);
border-radius:50px;padding:7px 12px 7px 10px;font-family:var(--font);font-size:13px;font-weight:600;
color:var(--ink-2);cursor:pointer;white-space:nowrap;line-height:1;transition:.18s}
.lang-switch .ls-btn:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.lang-switch.open .ls-btn{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.ls-flag{font-size:15px;line-height:1;flex:0 0 auto}
.ls-cur{letter-spacing:.2px}
.ls-caret{font-size:10px;opacity:.6;transition:transform .18s}
.lang-switch.open .ls-caret{transform:rotate(180deg)}
.lang-switch .ls-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:190px;background:#fff;
border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:120;
opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;max-height:60vh;overflow-y:auto}
.lang-switch.open .ls-menu{opacity:1;visibility:visible;transform:none}
.lang-switch .ls-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
font-size:13.8px;color:var(--ink-2)}
.lang-switch .ls-menu a span:not(.ls-flag){flex:1;min-width:0}
.lang-switch .ls-menu a i{font-size:11px;color:var(--primary)}
.lang-switch .ls-menu a:hover{background:var(--bg);color:var(--primary)}
.lang-switch .ls-menu a.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
@media(max-width:520px){ .ls-cur{display:none} .lang-switch .ls-btn{padding:7px 10px} }
/* ---- RTL ---- */
[dir="rtl"] body{text-align:right}
[dir="rtl"] .crumb,[dir="rtl"] .breadcrumb{direction:rtl}
[dir="rtl"] .check-list li,[dir="rtl"] .prep-list li,[dir="rtl"] .ci,[dir="rtl"] .row,
[dir="rtl"] .pay-choice,[dir="rtl"] .f-brand,[dir="rtl"] .info-strip span{flex-direction:row-reverse}
[dir="rtl"] .check-list,[dir="rtl"] .prep-list{padding-right:0}
[dir="rtl"] .fa-chevron-right:before{content:"\f053"} /* arrows point the other way */
[dir="rtl"] .fa-chevron-left:before{content:"\f054"}
[dir="rtl"] .fa-arrow-right:before{content:"\f060"}
[dir="rtl"] .fa-arrow-left:before{content:"\f061"}
[dir="rtl"] .float-wa{right:auto;left:22px}
[dir="rtl"] .float-call{left:auto;right:22px}
[dir="rtl"] .m-drawer{right:auto;left:0;transform:translateX(-100%)}
[dir="rtl"] .m-drawer.open{transform:none}
[dir="rtl"] .slotbox,[dir="rtl"] .slots,[dir="rtl"] .days,[dir="rtl"] .chips{direction:rtl}
[dir="rtl"] table th,[dir="rtl"] table td{text-align:right}
[dir="rtl"] input,[dir="rtl"] select,[dir="rtl"] textarea{text-align:right}
/* numbers, prices, phone numbers and codes always read left-to-right */
[dir="rtl"] .bb-price,[dir="rtl"] .pk .pr,[dir="rtl"] .price-table .p,
[dir="rtl"] a[href^="tel:"],[dir="rtl"] code,[dir="rtl"] .otp{direction:ltr;unicode-bidi:embed}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{
font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
color:var(--ink); background:var(--white); line-height:1.65; font-size:15.5px;
-webkit-font-smoothing:antialiased;
}
/* Nothing may push the page wider than the viewport ---------------------- */
img,svg,video,iframe,canvas{max-width:100%;height:auto}
img{display:block}
table{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}
/* Grid/flex children default to min-width:auto, which makes long words and
wide tables blow the track out. Reset it everywhere. */
[class*="grid-"]>*,.usp-strip>*,.offer-tiles>*,.cat-grid>*,.why-num>*,.ach-grid>*,
.team-grid>*,.partner-grid>*,.steps>*,.stats-band>*,.footer-grid>*,.promise-bar>*,
.detail-grid>*,.about-grid>*,.why-wrap>*,.contact-grid>*,.my-wrap>*,.stat-cards>*{min-width:0}
h1,h2,h3,h4,h5,p,li,td,th,a,b,span{overflow-wrap:break-word;word-break:break-word}
a{text-decoration:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4,h5{line-height:1.25;font-weight:700;color:var(--ink);letter-spacing:-.02em}
h1{font-size:clamp(28px,4.4vw,50px)}
h2{font-size:clamp(23px,3vw,35px)}
h3{font-size:19px}
p{color:var(--grey)}
::selection{background:var(--primary);color:#fff}
.container{max-width:1220px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
.bg-grey{background:var(--bg)}
.bg-soft{background:var(--primary-softer)}
.text-center{text-align:center}
/* ---------------- Buttons ---------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
background:var(--grad-accent);color:#fff;border:none;cursor:pointer;
padding:13px 28px;border-radius:50px;font-weight:600;font-size:15px;
font-family:inherit;transition:.25s;box-shadow:0 8px 20px rgba(255,107,53,.28);
white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,107,53,.36)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--grad);box-shadow:0 8px 20px rgba(43,27,107,.26)}
.btn-primary:hover{box-shadow:0 12px 26px rgba(43,27,107,.34)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary);box-shadow:none}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-ghost{background:var(--primary-soft);color:var(--primary);box-shadow:none}
.btn-ghost:hover{background:var(--primary);color:#fff}
.btn-white{background:#fff;color:var(--primary);box-shadow:0 8px 20px rgba(0,0,0,.14)}
.btn-white:hover{background:#fff;color:var(--accent)}
.btn-green{background:var(--green);box-shadow:0 8px 20px rgba(23,178,106,.28)}
.btn-danger{background:var(--danger);box-shadow:0 8px 20px rgba(229,72,77,.25)}
.btn-sm{padding:9px 20px;font-size:13.5px}
.btn-xs{padding:6px 14px;font-size:12.5px;border-radius:40px}
.btn-lg{padding:16px 36px;font-size:16.5px}
.btn-block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none;box-shadow:none}
/* ---- Pay-at-centre vs pay-online choice on every booking form ---- */
.pay-choice{display:flex;gap:11px;align-items:flex-start;border:1.6px solid var(--border);
border-radius:12px;padding:12px 14px;margin-bottom:9px;cursor:pointer;transition:.18s;background:#fff}
.pay-choice:hover{border-color:var(--primary)}
.pay-choice input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--primary);cursor:pointer}
.pay-choice span{flex:1;min-width:0}
.pay-choice b{display:block;font-size:14px;font-weight:600;color:var(--dark);line-height:1.35}
.pay-choice em{display:block;font-style:normal;font-size:12.4px;color:var(--grey);margin-top:2px;line-height:1.45}
.pay-choice:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
/* ---------------- Brand block (shared by both header rows) ---------------- */
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}
.brand img{width:46px;height:46px;object-fit:contain;flex:0 0 auto}
.b-name{font-weight:800;font-size:21px;color:var(--primary);letter-spacing:.5px;line-height:1.1;white-space:nowrap}
.b-tag{font-size:11px;color:var(--grey);letter-spacing:.2px;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:240px}
/* ---------------- Offer strip ---------------- */
.offer-strip{background:var(--grad-accent);color:#fff;text-align:center;font-size:13.8px;font-weight:500;padding:9px 20px}
.offer-strip a{text-decoration:underline;font-weight:700}
.offer-strip i{margin-right:7px}
/* ---------------- Hero slider ---------------- */
.slider{position:relative;overflow:hidden;background:var(--primary)}
.slides{display:flex;transition:transform .6s cubic-bezier(.5,0,.2,1);will-change:transform}
.slide{min-width:100%;position:relative;background:var(--grad)}
.slide .container{
display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
min-height:520px;padding-top:56px;padding-bottom:56px;
}
.slide-badge{
display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.25);color:#fff;padding:7px 16px;border-radius:50px;
font-size:12.8px;font-weight:600;margin-bottom:18px;backdrop-filter:blur(6px);
}
.slide-badge i{color:var(--accent-2)}
.slide h1{color:#fff;margin-bottom:16px}
.slide h1 span{
display:block;background:linear-gradient(90deg,var(--accent-2),#FFD9A0);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.slide p{color:rgba(255,255,255,.86);font-size:16.5px;max-width:560px;margin-bottom:26px}
.slide-cta{display:flex;gap:13px;flex-wrap:wrap}
.slide-art{display:flex;justify-content:center;align-items:center}
.slide-art img{max-height:380px;width:auto;filter:drop-shadow(0 24px 44px rgba(0,0,0,.3))}
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;font-size:16px;z-index:4;transition:.2s;backdrop-filter:blur(6px)}
.slider-nav:hover{background:var(--accent);border-color:var(--accent)}
.slider-nav.prev{left:18px}
.slider-nav.next{right:18px}
.slider-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:4}
.slider-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.42);cursor:pointer;transition:.25s;padding:0}
.slider-dots button.on{width:30px;border-radius:50px;background:var(--accent)}
/* ---------------- Quick booking bar ---------------- */
.quickbook{margin-top:-46px;position:relative;z-index:10;padding-bottom:10px}
.qb-box{
background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
padding:22px;display:grid;gap:14px;align-items:end;border:1px solid var(--line);
}
.qb-5{grid-template-columns:1.1fr 1fr 1.3fr 1fr 1fr auto}
.qb-box label{display:block;font-size:12.2px;font-weight:600;color:var(--grey);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.qb-box input,.qb-box select{
width:100%;padding:12px 14px;border:1.6px solid var(--line);border-radius:11px;
font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;transition:.2s;
}
.qb-box input:focus,.qb-box select:focus{outline:none;border-color:var(--primary-2);box-shadow:0 0 0 4px var(--primary-soft)}
.qb-title{grid-column:1/-1;font-weight:700;font-size:16px;color:var(--primary);display:flex;align-items:center;gap:9px}
/* ---------------- USP strip ---------------- */
.usp-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:14px 0 0}
.usp{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:.25s}
.usp:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--primary-soft)}
.usp .ic{width:46px;height:46px;flex:0 0 46px;border-radius:13px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:19px}
.usp b{display:block;font-size:14.5px;color:var(--ink);line-height:1.35}
.usp span{font-size:12.5px;color:var(--grey);display:block;line-height:1.45}
/* ---------------- Section heads ---------------- */
.sec-head{text-align:center;max-width:720px;margin:0 auto 44px}
.kicker{
display:inline-block;background:var(--primary-soft);color:var(--primary);
padding:6px 16px;border-radius:50px;font-size:12.5px;font-weight:700;
text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px;
}
.sec-head h2{margin-bottom:12px}
.sec-head p{font-size:15.8px}
.sec-head.left{text-align:left;margin-left:0}
/* ---------------- Grids & cards ---------------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:28px 24px;transition:.28s;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:.3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card .icon{
width:60px;height:60px;border-radius:17px;background:var(--primary-soft);color:var(--primary);
display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:18px;transition:.28s;
}
.card:hover .icon{background:var(--grad);color:#fff;transform:rotate(-6deg) scale(1.05)}
.card h3{font-size:17.5px;margin-bottom:9px}
.card p{font-size:14.2px;margin-bottom:14px}
.card .price-row{display:flex;align-items:baseline;gap:9px;margin-bottom:12px}
.card .price-row .new{color:var(--accent);font-weight:800;font-size:20px}
.card .price-row .old{color:var(--grey-2);text-decoration:line-through;font-size:14px}
.link{display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-weight:600;font-size:14px}
.link:hover{gap:11px;color:var(--accent)}
.card-img{height:170px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:44px;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
/* ---------------- Package cards ---------------- */
.pkg-card{
background:#fff;border:1.6px solid var(--line);border-radius:var(--radius-lg);
display:flex;flex-direction:column;transition:.28s;position:relative;overflow:hidden;
}
.pkg-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--primary-2)}
.pkg-card.popular{border-color:var(--accent);box-shadow:0 14px 40px rgba(255,107,53,.16)}
.ribbon{
position:absolute;top:16px;right:-34px;background:var(--grad-accent);color:#fff;
padding:5px 42px;font-size:11.5px;font-weight:700;letter-spacing:1px;transform:rotate(38deg);z-index:2;
}
.pkg-head{padding:24px 24px 0}
.pkg-tag{display:inline-block;background:var(--primary-soft);color:var(--primary);padding:4px 13px;border-radius:50px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-bottom:11px}
.pkg-head h3{font-size:20px;margin-bottom:4px}
.pkg-price{display:flex;align-items:baseline;gap:10px;padding:14px 24px;flex-wrap:wrap}
.pkg-price .new{font-size:31px;font-weight:800;color:var(--primary)}
.pkg-price .old{font-size:15.5px;color:var(--grey-2);text-decoration:line-through}
.pkg-price .save{background:var(--green-soft);color:var(--green);padding:3px 11px;border-radius:50px;font-size:12px;font-weight:700}
.pkg-body{padding:4px 24px 16px;flex:1}
.pkg-body li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);padding:5px 0}
.pkg-body li i{color:var(--green);font-size:12.5px;margin-top:5px;flex:0 0 auto}
.pkg-meta{padding:12px 24px;background:var(--bg);font-size:12.8px;color:var(--grey);display:flex;gap:16px;flex-wrap:wrap}
.pkg-meta i{color:var(--primary);margin-right:5px}
.pkg-foot{padding:18px 24px 24px;display:flex;gap:10px}
.pkg-foot .btn{flex:1}
/* ---------------- Why / feature list ---------------- */
.why-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.why-list{display:grid;gap:16px}
.why-list li{display:flex;gap:16px;background:#fff;padding:18px 20px;border-radius:var(--radius);border:1px solid var(--line);transition:.25s}
.why-list li:hover{transform:translateX(6px);box-shadow:var(--shadow);border-color:var(--primary-soft)}
.wicon{width:48px;height:48px;flex:0 0 48px;border-radius:14px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px}
.why-list h4{font-size:16px;margin-bottom:3px}
.why-list p{font-size:13.8px;margin:0}
/* ---------------- Steps ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 22px;text-align:center;position:relative;transition:.28s}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.step .num{
width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;
margin:0 auto 16px;box-shadow:0 8px 18px rgba(43,27,107,.26);
}
.step .num i{font-size:19px}
.step h4{font-size:16.5px;margin-bottom:7px}
.step p{font-size:13.8px}
/* ---------------- Stats band ---------------- */
.stats-band{background:var(--grad);border-radius:var(--radius-lg);padding:44px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;position:relative;overflow:hidden}
.stats-band::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.06);top:-140px;right:-90px}
.hs{position:relative;z-index:2}
.hs b{display:block;font-size:38px;font-weight:800;color:#fff;line-height:1.1}
.hs span{font-size:13.5px;color:rgba(255,255,255,.78)}
/* ---------------- Testimonials ---------------- */
.testi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:.28s;position:relative}
.testi:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.testi::before{content:"\201C";position:absolute;top:6px;right:22px;font-size:74px;color:var(--primary-soft);font-family:Georgia,serif;line-height:1}
.testi .stars{color:#FFB020;font-size:16px;letter-spacing:2px;margin-bottom:12px}
.testi p{font-size:14.6px;color:var(--ink-2);font-style:italic;margin-bottom:18px;position:relative;z-index:2}
.t-user{display:flex;align-items:center;gap:12px}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.t-user b{display:block;font-size:14.5px}
.t-user span{font-size:12.5px;color:var(--grey)}
/* ---------------- Blog cards ---------------- */
.blog-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.28s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.blog-thumb{height:190px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:46px;overflow:hidden}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.blog-card:hover .blog-thumb img{transform:scale(1.06)}
.blog-body{padding:22px;flex:1;display:flex;flex-direction:column}
.blog-meta{font-size:12.3px;color:var(--grey);margin-bottom:10px;display:flex;gap:14px;flex-wrap:wrap}
.blog-meta i{color:var(--primary);margin-right:4px}
.blog-body h3{font-size:17.5px;margin-bottom:9px;line-height:1.4}
.blog-body h3 a:hover{color:var(--primary)}
.blog-body p{font-size:14px;flex:1}
/* ---------------- CTA band ---------------- */
.cta-band{
background:var(--grad);border-radius:var(--radius-lg);padding:44px 46px;
display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
position:relative;overflow:hidden;
}
.cta-band::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.07);bottom:-150px;left:-60px}
.cta-band h2{color:#fff;margin-bottom:7px;position:relative;z-index:2}
.cta-band p{color:rgba(255,255,255,.82);margin:0;position:relative;z-index:2}
.cta-band>div:last-child{position:relative;z-index:2}
/* ---------------- Page banner ---------------- */
.page-banner{background:var(--grad);color:#fff;padding:58px 20px;text-align:center;position:relative;overflow:hidden}
.page-banner::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.06);top:-160px;right:-80px}
.page-banner h1{color:#fff;font-size:clamp(26px,3.6vw,42px);position:relative;z-index:2}
.crumb{margin-top:10px;font-size:14px;color:rgba(255,255,255,.8);position:relative;z-index:2}
.crumb a{color:#fff;font-weight:500}
.crumb a:hover{color:var(--accent-2)}
.crumb span{margin:0 8px;opacity:.6}
/* ---------------- Forms ---------------- */
.form-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow)}
.form-box h3{margin-bottom:20px;font-size:21px}
.form-group{margin-bottom:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
label{display:block;font-size:13.2px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
/* input:not([type]) is here because CSS attribute selectors are literal:
an written without a type attribute behaves as type="text" but
matches none of the selectors below. track.php writes
exactly that way, so the reference box a
patient types their booking code into had no styling at all — a raw
browser input, sized to its default 20 characters. */
input:not([type]),
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=time],
input[type=password],input[type=number],input[type=search],select,textarea{
width:100%;padding:12px 15px;border:1.6px solid var(--line);border-radius:11px;
font-family:inherit;font-size:15px;color:var(--ink);background:#fff;transition:.2s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-2);box-shadow:0 0 0 4px var(--primary-soft)}
textarea{resize:vertical;min-height:110px}
.hint{font-size:12.4px;color:var(--grey);margin-top:6px}
.req{color:var(--danger)}
/* ------------------------------------------------------------
FORM CLASSES THE PUBLIC PAGES USE BUT THIS FILE NEVER DEFINED
.f-in, .f-label, .f-hint and .cardbox are admin-panel classes — they
live in admin/assets/admin.css and nowhere else. Five public pages use
them anyway: track.php, apply.php, job.php, health-score.php and
team.php. On those pages the markup asked for a styled field and got
whatever the browser draws by default: wrong font, wrong size, wrong
border, no focus ring, and on a phone a box about 240px wide in a
318px form.
Defined here to match this site's own inputs rather than the admin
panel's, so the tracking form looks like the site it is on.
------------------------------------------------------------ */
.f-label{display:block;font-size:13.2px;font-weight:600;color:var(--ink-2);margin:16px 0 7px}
.f-hint{font-size:12.4px;color:var(--grey);margin-top:6px}
input.f-in,select.f-in,textarea.f-in{
width:100%;max-width:100%;padding:12px 15px;border:1.6px solid var(--line);border-radius:11px;
font-family:inherit;font-size:15px;color:var(--ink);background:#fff;transition:.2s;
}
input.f-in:focus,select.f-in:focus,textarea.f-in:focus{
outline:none;border-color:var(--primary-2);box-shadow:0 0 0 4px var(--primary-soft)
}
.cardbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:24px;margin-bottom:22px;box-shadow:var(--shadow)}
.cardbox h3{font-size:17px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.alert,.alert-success,.alert-error,.alert-info,.alert-warn{
padding:13px 18px;border-radius:12px;margin-bottom:18px;font-weight:500;font-size:14.4px;
}
.alert,.alert.alert-success,.alert.alert-error,.alert.alert-info,.alert.alert-warn{display:flex;gap:10px;align-items:flex-start}
.alert-success{background:var(--green-soft);color:#0F7A48;border:1px solid #BFECD6}
.alert-error{background:var(--danger-soft);color:#B01E24;border:1px solid #F6C9CB}
.alert-info{background:var(--primary-soft);color:var(--primary);border:1px solid #DCD5F7}
.alert-warn{background:#FFF7E6;color:#8A5A00;border:1px solid #F5DFB8}
.flash{padding:13px 18px;border-radius:12px;margin-bottom:18px;font-weight:500}
/* ---------------- Contact ---------------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.ci{display:flex;gap:16px;margin-bottom:22px}
.ci .icon{width:50px;height:50px;flex:0 0 50px;border-radius:15px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:19px}
.ci h4{font-size:16px;margin-bottom:3px}
.ci p{font-size:14px;margin:0}
/* ---------------- Payment method chooser ---------------- */
.pay-methods{display:grid;gap:10px}
.pay-m{display:flex;align-items:center;gap:13px;border:1.8px solid var(--line);border-radius:14px;
padding:13px 16px;cursor:pointer;transition:.18s;margin:0;background:#fff;
/* Same reason as .slot-day label — the hidden radio below is absolute and
needs something to be absolute against, or it escapes onto the page and
drags the payment screen sideways. */
position:relative}
.pay-m:hover{border-color:var(--primary-2)}
.pay-m.sel{border-color:var(--primary);background:var(--primary-softer);box-shadow:0 0 0 3px var(--primary-soft)}
/* The three hidden radios. Pinned to their own label's top-left corner and
given no size, so they take up no room and — crucially — cannot be laid
out anywhere near the edge of the page even if a label ever loses its
position:relative again. 'opacity:0' alone left them full-sized and in
the flow's static position, which is how the booking page ended up
1018px wide on a 390px phone. Still focusable, so keyboard and screen
reader users keep the radio group. */
.pay-m input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.pay-m>i{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:var(--primary-soft);color:var(--primary);
display:flex;align-items:center;justify-content:center;font-size:17px}
.pay-m.sel>i{background:var(--grad);color:#fff}
.pay-m span{display:block;min-width:0}
.pay-m b{display:block;font-size:14.8px;color:var(--ink)}
.pay-m small{display:block;font-size:12.4px;color:var(--grey)}
/* ---------------- Live appointment slots ---------------- */
.slotbox{border:1.6px solid var(--line);border-radius:14px;padding:16px;background:var(--bg)}
.slot-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.3px;color:var(--grey);margin-bottom:12px}
.slot-legend i{font-size:9px;margin-right:5px}
.slot-legend .ok i{color:var(--green)}
.slot-legend .full i{color:var(--danger)}
.slot-legend .past i{color:var(--grey-2)}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.slot{
position:relative;background:#fff;border:1.6px solid var(--line);border-radius:11px;
padding:11px 8px;text-align:center;cursor:pointer;transition:.2s;font-size:13.6px;font-weight:600;color:var(--ink-2);
}
.slot small{display:block;font-size:10.8px;font-weight:500;color:var(--green);margin-top:2px}
.slot:hover{border-color:var(--primary-2);color:var(--primary);transform:translateY(-2px)}
.slot input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.slot.sel{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(43,27,107,.26)}
.slot.sel small{color:rgba(255,255,255,.85)}
.slot.dis{background:#F1F2F6;color:var(--grey-2);border-color:#E6E8EF;cursor:not-allowed;text-decoration:line-through}
.slot.dis small{color:var(--grey-2);text-decoration:none}
.slot.dis:hover{transform:none;border-color:#E6E8EF;color:var(--grey-2)}
.slot-empty{text-align:center;padding:26px 14px;color:var(--grey);font-size:14px}
.slot-empty i{font-size:30px;color:var(--grey-2);display:block;margin-bottom:10px}
.slot-loading{text-align:center;padding:24px;color:var(--grey);font-size:14px}
.slot-day{display:flex;gap:9px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;scrollbar-width:thin}
.slot-day label{
/* position:relative is load-bearing, not decoration.
The radio inside is position:absolute (below), and an absolutely
positioned box is placed against its nearest POSITIONED ancestor.
Without this line there was none, so each hidden radio was laid out
against the page itself — at the static position its label would
have had, which for the days scrolled out of view inside this
horizontal strip is off the right-hand edge of the screen.
Absolute boxes extend the scrollable area. So on a 390px phone the
document became 1018px wide: the booking page "split", and the form
and login sat off-screen until you scrolled sideways. One missing
line, on the one page where a patient actually books.
.slot already had it. .slot-day and .pay-m did not. */
position:relative;
flex:0 0 auto;background:#fff;border:1.6px solid var(--line);border-radius:12px;
padding:9px 14px;text-align:center;cursor:pointer;margin:0;transition:.2s;min-width:76px;
}
.slot-day label span{display:block;font-size:11.5px;color:var(--grey);font-weight:600;text-transform:uppercase}
.slot-day label b{display:block;font-size:16px;color:var(--ink)}
.slot-day label small{display:block;font-size:10.5px;color:var(--grey)}
.slot-day input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.slot-day label.sel{background:var(--grad);border-color:transparent}
.slot-day label.sel span,.slot-day label.sel b,.slot-day label.sel small{color:#fff}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:7px;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(23,178,106,.5)}70%{box-shadow:0 0 0 8px rgba(23,178,106,0)}100%{box-shadow:0 0 0 0 rgba(23,178,106,0)}}
/* ---------------- Tables ---------------- */
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:620px}
table.tbl th{background:var(--primary);color:#fff;text-align:left;padding:13px 18px;font-size:12.8px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
table.tbl td{padding:13px 18px;border-bottom:1px solid var(--line);font-size:14.2px}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:var(--primary-softer)}
.cat-title{background:var(--primary-soft);color:var(--primary);padding:11px 18px;font-weight:700;font-size:14.5px;border-radius:11px;margin:26px 0 12px}
.badge{display:inline-block;padding:4px 12px;border-radius:50px;font-size:11.8px;font-weight:600}
.badge.new{background:var(--primary-soft);color:var(--primary)}
.badge.done{background:var(--green-soft);color:var(--green)}
.badge.pend{background:#FFF7E6;color:#B77400}
.badge.off,.badge.cancel{background:var(--danger-soft);color:#B01E24}
/* ---------------- Gallery ---------------- */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.gal{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;transition:.28s}
.gal:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.gal .ph{height:200px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:44px;overflow:hidden}
.gal .ph img{width:100%;height:100%;object-fit:cover}
.gal .cap{padding:14px 16px;font-size:14.2px;font-weight:600}
/* ---------------- FAQ / accordion ---------------- */
.faq{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:12px;background:#fff}
.faq summary{padding:16px 20px;font-weight:600;cursor:pointer;font-size:15.4px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\002B";font-size:22px;color:var(--primary);font-weight:400;line-height:1}
.faq[open] summary::after{content:"\2212"}
.faq[open] summary{background:var(--primary-softer);color:var(--primary)}
.faq .fa-body{padding:4px 20px 18px;font-size:14.4px;color:var(--grey)}
/* ---------------- Prose (blog / page content) ---------------- */
.prose{font-size:16px;color:var(--ink-2);line-height:1.85}
.prose h2{font-size:25px;margin:32px 0 13px;color:var(--primary)}
.prose h3{font-size:20px;margin:26px 0 10px}
.prose p{margin-bottom:16px;color:var(--ink-2)}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose ul li{list-style:disc;margin-bottom:8px}
.prose ol li{list-style:decimal;margin-bottom:8px}
.prose b,.prose strong{color:var(--ink)}
.prose img{border-radius:14px;margin:18px 0}
.prose blockquote{border-left:4px solid var(--primary-2);background:var(--primary-softer);padding:14px 20px;border-radius:0 12px 12px 0;margin:18px 0;font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:18px 0}
.prose th{background:var(--primary);color:#fff;padding:10px 14px;text-align:left;font-size:13.5px}
.prose td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:14.2px}
/* ---------------- Footer ---------------- */
.footer{background:var(--primary);color:rgba(255,255,255,.72);padding:58px 0 0;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:38px;padding-bottom:38px}
.f-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.f-brand img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:11px;padding:5px}
.f-brand b{color:#fff;font-size:19px;display:block;letter-spacing:.5px}
.f-brand span{display:block;color:rgba(255,255,255,.62)}
.footer p{color:rgba(255,255,255,.7);font-size:14px}
.footer h4{color:#fff;font-size:16.5px;margin-bottom:17px;position:relative;padding-bottom:10px}
.footer h4::after{content:"";position:absolute;bottom:0;left:0;width:36px;height:3px;background:var(--accent);border-radius:3px}
.footer ul li{margin-bottom:9px;font-size:14px}
.footer ul li a{color:rgba(255,255,255,.72);transition:.2s}
.footer ul li a:hover{color:var(--accent-2);padding-left:5px}
.footer .fi{display:flex;gap:11px;align-items:flex-start;color:rgba(255,255,255,.72)}
.footer .fi i{color:var(--accent-2);margin-top:5px;flex:0 0 15px}
.f-social{display:flex;gap:10px;margin-top:16px}
.f-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.11);color:#fff;display:flex;align-items:center;justify-content:center;transition:.25s}
.f-social a:hover{background:var(--accent);transform:translateY(-3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13);padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.3px}
/* ---------------- Floating buttons ---------------- */
.float-wa,.float-call{position:fixed;right:20px;z-index:800;border-radius:50px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.22);transition:.25s;color:#fff}
.float-wa{bottom:92px;width:56px;height:56px;background:#25D366;font-size:27px}
.float-call{bottom:22px;background:var(--grad-accent);padding:0 22px;height:52px;gap:9px;font-weight:600;font-size:14.5px}
.float-wa:hover,.float-call:hover{transform:scale(1.07)}
/* ---------------- Mobile bottom nav ---------------- */
/* The bottom tab bar is nailed down.
transform:none is !important on purpose. The bar used to be slid off
the screen by JavaScript whenever a field took focus, and six pages
autofocus their field on load — so Reports and Login opened with the
navigation already gone. The script no longer does that, but a phone
that cached the old main.js (or has it in the service worker) would
carry the bug until its cache turned over. This line makes that
impossible from the stylesheet side as well.
If a future version ever wants to animate this bar, remove this
declaration deliberately rather than fighting it. */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(20,24,62,.09);z-index:850;padding:7px 4px calc(7px + env(safe-area-inset-bottom));transform:none !important}
.mobile-nav ul{display:grid;grid-template-columns:repeat(5,1fr)}
.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.6px;color:var(--grey);font-weight:500;padding:4px 2px}
.mobile-nav a i{font-size:17px}
.mobile-nav a.on{color:var(--primary)}
.mobile-nav a.mid{position:relative}
.mobile-nav a.mid i{width:44px;height:44px;border-radius:50%;background:var(--grad-accent);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:-20px;box-shadow:0 6px 16px rgba(255,107,53,.4)}
/* ---------------- Search ---------------- */
.searchbar{display:flex;background:#fff;border-radius:50px;padding:6px 6px 6px 20px;box-shadow:var(--shadow-lg);max-width:560px;align-items:center;gap:10px}
.searchbar input{border:none;flex:1;padding:10px 0;font-size:15px;background:transparent}
.searchbar input:focus{outline:none;box-shadow:none}
.searchbar .btn{padding:11px 24px}
/* ---------------- Customer panel ---------------- */
.my-wrap{display:grid;grid-template-columns:262px 1fr;gap:26px;align-items:start;padding:34px 0 60px}
.my-side{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:sticky;top:96px}
.my-user{background:var(--grad);color:#fff;padding:24px 20px;text-align:center}
.my-user .av{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.4);margin:0 auto 11px;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;overflow:hidden}
.my-user .av img{width:100%;height:100%;object-fit:cover}
.my-user b{display:block;font-size:16.5px}
.my-user span{font-size:12.4px;color:rgba(255,255,255,.78)}
.my-menu{padding:10px}
.my-menu a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;font-size:14.2px;color:var(--ink-2);font-weight:500;transition:.2s;margin-bottom:2px}
.my-menu a i{width:19px;text-align:center;color:var(--grey);font-size:15px}
.my-menu a:hover{background:var(--primary-softer);color:var(--primary)}
.my-menu a:hover i{color:var(--primary)}
.my-menu a.on{background:var(--grad);color:#fff}
.my-menu a.on i{color:#fff}
.my-menu a .cnt{margin-left:auto;background:var(--accent);color:#fff;border-radius:50px;font-size:10.8px;padding:1px 8px;font-weight:700}
.my-menu .sep{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--grey-2);padding:14px 14px 6px;font-weight:700}
.my-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.my-head h1{font-size:26px}
.my-head p{font-size:14.2px;margin-top:2px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:22px}
.panel h3{font-size:17.5px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.panel h3 i{color:var(--primary)}
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;gap:14px;align-items:center;transition:.25s}
.stat-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.stat-card .ic{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--primary-soft);color:var(--primary)}
.stat-card .ic.g{background:var(--green-soft);color:var(--green)}
.stat-card .ic.o{background:var(--accent-soft);color:var(--accent)}
.stat-card .ic.a{background:#FFF7E6;color:#B77400}
.stat-card b{display:block;font-size:24px;line-height:1.15}
.stat-card span{font-size:12.8px;color:var(--grey)}
.bk-card{border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;transition:.25s}
.bk-card:hover{box-shadow:var(--shadow);border-color:var(--primary-soft)}
.bk-top{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start}
.bk-top h4{font-size:16.5px;margin-bottom:4px}
.bk-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13.4px;color:var(--grey);margin-top:10px}
.bk-meta i{color:var(--primary);margin-right:6px}
.bk-actions{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.auth-wrap{max-width:470px;margin:0 auto}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:36px}
.auth-card .logo{width:62px;height:62px;border-radius:19px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px}
.auth-card h2{text-align:center;font-size:24px;margin-bottom:6px}
.auth-card .sub{text-align:center;font-size:14px;color:var(--grey);margin-bottom:24px}
.auth-alt{text-align:center;margin-top:20px;font-size:14px;color:var(--grey)}
.auth-alt a{color:var(--primary);font-weight:600}
.auth-tabs{display:flex;background:var(--bg);border-radius:12px;padding:5px;margin-bottom:22px}
.auth-tabs a{flex:1;text-align:center;padding:9px;border-radius:9px;font-size:14px;font-weight:600;color:var(--grey)}
.auth-tabs a.on{background:#fff;color:var(--primary);box-shadow:var(--shadow-xs)}
.empty{text-align:center;padding:52px 20px;color:var(--grey)}
.empty i{font-size:46px;color:var(--primary-soft);display:block;margin-bottom:14px}
.empty h4{font-size:18px;margin-bottom:7px;color:var(--ink)}
.empty p{font-size:14.2px;margin-bottom:18px}
.pw-meter{height:5px;border-radius:5px;background:var(--line);margin-top:8px;overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;transition:.3s;border-radius:5px}
/* pagination */
.pager{display:flex;gap:8px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.pager a,.pager span{padding:9px 15px;border-radius:11px;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-2);background:#fff}
.pager a:hover{border-color:var(--primary);color:var(--primary)}
.pager .on{background:var(--grad);color:#fff;border-color:transparent}
/* ============================================================
TWO-ROW HEADER
Row 1: white utility bar Row 2: coloured category nav
============================================================ */
.util-bar{background:#fff;border-bottom:1px solid var(--line)}
.util-bar .container{display:flex;align-items:center;gap:22px;min-height:74px;flex-wrap:nowrap}
.util-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--grey);line-height:1.3;min-width:0}
.util-item .ic{width:33px;height:33px;flex:0 0 33px;border-radius:50%;background:var(--primary-soft);color:var(--primary);
display:flex;align-items:center;justify-content:center;font-size:14px}
.util-item .tx{min-width:0}
.util-item span{display:block;font-size:11.6px;color:var(--grey-2);white-space:nowrap}
.util-item b,.util-item a.big{display:block;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:210px}
.util-item a.big:hover{color:var(--primary)}
.util-sep{flex:1 1 auto;min-width:8px}
/* ---- category bar ---- */
.catnav{background:var(--primary);position:sticky;top:0;z-index:900;box-shadow:0 2px 12px rgba(10,40,42,.16)}
.catnav>.container{display:flex;align-items:center;gap:8px;min-width:0}
/* overflow must stay visible or the dropdowns get clipped — the number of
items shown is capped in header.php so the row always fits */
.catnav-list{display:flex;align-items:center;flex:0 1 auto;min-width:0;list-style:none;overflow:visible}
.catnav-list>li{position:relative;flex:0 0 auto}
.catnav-list>li>a{
display:flex;align-items:center;gap:6px;padding:15px 12px;color:#fff;font-size:14.4px;font-weight:500;
white-space:nowrap;transition:.2s;position:relative;
}
.catnav-list>li>a:hover,.catnav-list>li.on>a{background:rgba(255,255,255,.14)}
.catnav-list>li.has-drop>a::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:9px;opacity:.8}
.catnav-list .home-ic{font-size:16px;padding:15px 14px}
.nav-new{background:var(--accent);color:#fff;font-size:8.4px;font-weight:800;
padding:1px 6px;border-radius:20px;letter-spacing:.4px;margin-left:2px}
.cat-drop{
position:absolute;top:100%;left:0;background:#fff;width:320px;max-width:calc(100vw - 32px);
border-radius:0 0 16px 16px;box-shadow:0 20px 44px rgba(10,40,42,.2);padding:12px;
opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;
max-height:70vh;overflow-y:auto;overscroll-behavior:contain;border-top:3px solid var(--accent);z-index:20;
}
.catnav-list>li:last-of-type .cat-drop{left:auto;right:0}
.catnav-list>li:hover .cat-drop,.catnav-list>li:focus-within .cat-drop{opacity:1;visibility:visible;transform:translateY(0)}
.cat-drop .dd-head{font-size:11.4px;text-transform:uppercase;letter-spacing:1px;color:var(--grey-2);font-weight:700;padding:8px 12px 4px}
.cat-drop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:13.8px;color:var(--ink-2)}
.cat-drop a i{width:16px;flex:0 0 16px;text-align:center;color:var(--primary);font-size:13px}
.cat-drop a .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-drop a:hover{background:var(--primary-soft);color:var(--primary)}
.cat-drop a .px{flex:0 0 auto;font-size:12.4px;font-weight:700;color:var(--accent)}
.cat-drop .dd-all{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.cat-drop .dd-all a{font-weight:700;color:var(--primary)}
.nav-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.nav-right .btn{padding:9px 18px;font-size:13.4px}
.nav-ghost{color:#fff;border:1.6px solid rgba(255,255,255,.45);border-radius:50px;padding:8px 16px;font-size:13.4px;
font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:.2s;white-space:nowrap}
.nav-ghost:hover{background:#fff;color:var(--primary);border-color:#fff}
/* ---- mobile off-canvas drawer ---- */
.m-toggle{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;
padding:12px 10px;flex:0 0 auto;line-height:1}
.m-drawer{
position:fixed;top:0;right:0;width:min(320px,86vw);height:100dvh;background:#fff;z-index:1100;
transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(10,40,42,.22);
}
.m-drawer.open{transform:translateX(0)}
.m-head{background:var(--grad);color:#fff;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto}
.m-head b{font-size:16px;display:block}
.m-head span{font-size:11.6px;opacity:.85;display:block}
.m-head button{background:rgba(255,255,255,.18);border:none;color:#fff;width:34px;height:34px;border-radius:50%;
font-size:17px;cursor:pointer;flex:0 0 auto}
.m-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px 24px;-webkit-overflow-scrolling:touch}
.m-body .m-sec{font-size:10.8px;text-transform:uppercase;letter-spacing:1.1px;color:var(--grey-2);
font-weight:800;padding:16px 12px 6px}
.m-body a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;
font-size:14.6px;color:var(--ink-2);font-weight:500}
.m-body a i{width:18px;flex:0 0 18px;text-align:center;color:var(--primary);font-size:15px}
.m-body a:active,.m-body a:hover{background:var(--primary-soft);color:var(--primary)}
.m-body a .tag{margin-left:auto;background:var(--accent);color:#fff;font-size:9px;font-weight:800;padding:2px 7px;border-radius:20px}
.m-foot{flex:0 0 auto;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:9px}
.m-mask{position:fixed;inset:0;background:rgba(8,26,28,.5);z-index:1090;opacity:0;visibility:hidden;transition:.28s}
.m-mask.on{opacity:1;visibility:visible}
body.drawer-open{overflow:hidden}
/* ============================================================
CITY PICKER
============================================================ */
.city-btn{background:none;border:none;cursor:pointer;font-family:inherit;padding:0;text-align:left}
.city-btn:hover .ic{background:var(--primary);color:#fff}
.city-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
padding:20px;background:rgba(8,26,28,.55);opacity:0;visibility:hidden;transition:.24s}
.city-modal.open{opacity:1;visibility:visible}
.city-box{background:#fff;border-radius:20px;width:100%;max-width:760px;max-height:min(86dvh,720px);
display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 70px rgba(8,26,28,.35);
transform:translateY(14px);transition:.24s}
.city-modal.open .city-box{transform:none}
.city-top{background:var(--grad);color:#fff;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex:0 0 auto}
.city-top b{font-size:18px;display:block}
.city-top span{font-size:12.6px;opacity:.86;display:block}
.city-top button{background:rgba(255,255,255,.18);border:none;color:#fff;width:34px;height:34px;border-radius:50%;
font-size:17px;cursor:pointer;flex:0 0 auto}
.city-search{position:relative;padding:16px 24px 10px;flex:0 0 auto}
.city-search i{position:absolute;left:38px;top:29px;color:var(--grey-2);font-size:14px}
.city-search input{width:100%;padding:12px 16px 12px 42px;border:1.6px solid var(--line);border-radius:11px;font-size:15px}
.city-pop{padding:4px 24px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:0 0 auto;border-bottom:1px solid var(--line)}
.city-pop .lbl{font-size:11.4px;text-transform:uppercase;letter-spacing:1px;color:var(--grey-2);font-weight:800}
.city-list{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:14px 24px 20px;-webkit-overflow-scrolling:touch}
.city-state{margin-bottom:18px}
.st-name{font-size:12.4px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;color:var(--primary);
margin-bottom:9px;display:flex;align-items:center;gap:8px}
.st-name span{background:var(--primary-soft);color:var(--primary);font-size:10.6px;padding:1px 8px;border-radius:20px;letter-spacing:0}
.st-cities{display:flex;flex-wrap:wrap;gap:8px}
.city-chip{border:1.4px solid var(--line);border-radius:50px;padding:7px 15px;font-size:13.6px;
color:var(--ink-2);background:#fff;transition:.18s;white-space:nowrap}
.city-chip:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-softer)}
.city-chip.on{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}
.city-chip.home{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700}
.city-chip.home.on{background:var(--grad);border-color:transparent;color:#fff}
.city-chip i{font-size:11px;opacity:.8}
.city-foot{flex:0 0 auto;background:var(--bg);border-top:1px solid var(--line);padding:13px 24px;
font-size:12.8px;color:var(--grey)}
.city-foot i{color:var(--primary);margin-right:7px}
.city-none{padding:26px;text-align:center}
@media (max-width:620px){
.city-modal{padding:0}
.city-box{max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}
.city-search,.city-pop,.city-list,.city-foot{padding-left:16px;padding-right:16px}
.city-search i{left:30px}
.city-top{padding:16px}
}
/* ============================================================
HERO SEARCH + CALLBACK STRIP
============================================================ */
/* The search box now lives in .hero-wrap, beside .slider rather than inside
it, so .slider can keep overflow:hidden without swallowing the search.
On a desktop nothing changes visually — it still floats over the bottom of
the slide, only now positioned against the wrapper. */
.hero-wrap{position:relative}
.hero-search{position:absolute;left:0;right:0;bottom:28px;z-index:5;padding:0 20px}
.hero-search form{
max-width:640px;margin:0 auto;display:flex;background:#fff;border-radius:12px;overflow:hidden;
box-shadow:0 16px 40px rgba(10,40,42,.28);
}
.hero-search input{border:none;flex:1;padding:17px 22px;font-size:15.5px;background:transparent;border-radius:0}
.hero-search input:focus{outline:none;box-shadow:none}
.hero-search button{
border:none;background:var(--primary);color:#fff;padding:0 38px;font-family:inherit;
font-size:15.5px;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap;
}
.hero-search button:hover{background:var(--primary-2)}
.callback-strip{background:var(--primary);padding:16px 0}
.callback-strip .container{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.callback-strip b{color:#fff;font-size:15.5px;font-weight:600}
.callback-strip form{display:flex;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.callback-strip input{border:none;padding:13px 18px;font-size:14.6px;min-width:230px;border-radius:0}
.callback-strip input:focus{outline:none;box-shadow:none}
.callback-strip button{
border:none;background:var(--accent);color:#fff;padding:0 26px;font-family:inherit;
font-size:14.6px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.2s;
}
.callback-strip button:hover{background:var(--accent-2)}
.callback-strip .note{color:rgba(255,255,255,.82);font-size:13px;width:100%;text-align:center}
/* ============================================================
PROMISE BAR (3 items under the hero)
============================================================ */
.promise-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff;border-bottom:1px solid var(--line)}
.promise{display:flex;align-items:center;gap:14px;padding:20px 24px;border-right:1px solid var(--line)}
.promise:last-child{border-right:none}
.promise .ic{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:var(--primary-soft);color:var(--primary);
display:flex;align-items:center;justify-content:center;font-size:19px}
.promise b{display:block;font-size:14.8px;color:var(--ink);line-height:1.3}
.promise span{display:block;font-size:12.8px;color:var(--grey)}
/* ============================================================
OFFER TILES
============================================================ */
.offer-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.offer-tile{
border-radius:var(--radius);padding:20px 16px;text-align:center;transition:.26s;border:1px solid transparent;
}
.offer-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.offer-tile .ic{width:50px;height:50px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
font-size:21px;margin:0 auto 12px;box-shadow:0 4px 12px rgba(20,24,62,.08)}
.offer-tile b{display:block;font-size:16px;font-weight:800;margin-bottom:3px}
.offer-tile span{display:block;font-size:13.2px;color:var(--ink-2);line-height:1.4}
/* ============================================================
CATEGORY GRID (browse by health concern)
============================================================ */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.cat-tile{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 16px;text-align:center;
transition:.26s;position:relative;
}
.cat-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--primary-soft)}
.cat-tile .ic{width:64px;height:64px;border-radius:50%;background:var(--primary-soft);color:var(--primary);
display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;transition:.26s}
.cat-tile:hover .ic{background:var(--grad);color:#fff;transform:scale(1.07)}
.cat-tile b{display:block;font-size:15.2px;color:var(--ink);margin-bottom:5px}
.cat-tile span{display:block;font-size:12.6px;color:var(--grey);line-height:1.45}
.cat-tile .newtag{position:absolute;top:10px;right:10px;background:var(--accent);color:#fff;font-size:9px;font-weight:800;
padding:2px 8px;border-radius:20px;letter-spacing:.5px}
/* ============================================================
PACKAGE CARD
============================================================ */
.pkg-tabs{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.pkg-tab{background:#fff;border:1.6px solid var(--line);color:var(--ink-2);padding:9px 20px;border-radius:50px;
font-family:inherit;font-size:13.8px;font-weight:600;cursor:pointer;transition:.22s}
.pkg-tab:hover{border-color:var(--primary);color:var(--primary)}
.pkg-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.pkg-h{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
display:flex;flex-direction:column;transition:.26s;position:relative}
.pkg-h:hover{box-shadow:var(--shadow-lg);border-color:var(--primary-soft);transform:translateY(-4px)}
.pkg-h.popular{border-color:var(--accent)}
.pkg-h-top{padding:20px 20px 0;display:flex;gap:14px;align-items:flex-start}
.pkg-h-top h3{font-size:16.5px;line-height:1.4;flex:1}
.tcount{flex:0 0 62px;width:62px;height:62px;border-radius:50%;background:var(--primary-soft);color:var(--primary);
display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.tcount b{font-size:20px;font-weight:800}
.tcount span{font-size:9.6px;text-transform:uppercase;letter-spacing:.6px}
.pkg-h-tests{padding:12px 20px 0;font-size:13.2px;color:var(--grey);line-height:1.6}
.pkg-h-tests b{color:var(--ink-2);font-weight:600}
.pkg-h-tests a{color:var(--primary);font-weight:600;white-space:nowrap}
.pkg-h-meta{padding:14px 20px;margin-top:auto;display:grid;gap:7px;font-size:12.8px;color:var(--grey)}
.pkg-h-meta div{display:flex;align-items:center;gap:9px}
.pkg-h-meta i{color:var(--primary);width:15px;text-align:center}
.pkg-h-foot{border-top:1px solid var(--line);padding:15px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--primary-softer)}
.pkg-h-price .now{font-size:23px;font-weight:800;color:var(--ink);line-height:1.1}
.pkg-h-price .was{font-size:13.5px;color:var(--grey-2);text-decoration:line-through;margin-left:7px}
.pkg-h-price .off{display:block;font-size:11.8px;font-weight:700;color:var(--green)}
.pkg-h .flag{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-size:10.5px;font-weight:800;
padding:4px 14px;border-radius:0 0 0 12px;letter-spacing:.6px}
/* ============================================================
NUMBERED "WHY CHOOSE" GRID
============================================================ */
.why-num{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.wn{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative;transition:.26s;overflow:hidden}
.wn:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.wn .no{position:absolute;top:12px;right:16px;font-size:44px;font-weight:800;color:var(--primary-soft);line-height:1}
.wn .ic{width:52px;height:52px;border-radius:15px;background:var(--grad);color:#fff;display:flex;align-items:center;
justify-content:center;font-size:21px;margin-bottom:15px}
.wn h4{font-size:16.5px;margin-bottom:6px;position:relative;z-index:2}
.wn p{font-size:13.8px;margin:0;position:relative;z-index:2}
/* ============================================================
JOURNEY TIMELINE
============================================================ */
.journey{position:relative;padding-left:38px}
.journey::before{content:"";position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:var(--primary-soft)}
.jitem{position:relative;padding-bottom:28px}
.jitem:last-child{padding-bottom:0}
.jitem .dot{position:absolute;left:-31px;top:2px;width:32px;height:32px;border-radius:50%;background:var(--grad);
color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 0 0 5px var(--primary-softer)}
.jitem .yr{display:inline-block;background:var(--primary-soft);color:var(--primary);font-size:12.4px;font-weight:800;
padding:3px 13px;border-radius:50px;margin-bottom:7px;letter-spacing:.5px}
.jitem h4{font-size:17px;margin-bottom:5px}
.jitem p{font-size:14.2px;margin:0}
/* ============================================================
ACHIEVEMENT CARDS
============================================================ */
.ach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ach{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;transition:.26s;text-align:center}
.ach:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.ach .ic{width:52px;height:52px;border-radius:16px;background:var(--accent-soft);color:var(--accent);display:flex;
align-items:center;justify-content:center;font-size:21px;margin:0 auto 13px}
.ach .fig{font-size:29px;font-weight:800;color:var(--primary);line-height:1.1}
.ach h4{font-size:15.4px;margin:4px 0 7px}
.ach p{font-size:13px;margin:0}
/* ============================================================
TEAM CARDS
============================================================ */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.26s;text-align:center}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.tcard .ph{height:200px;background:var(--grad);display:flex;align-items:center;justify-content:center;
color:#fff;font-size:52px;font-weight:700;overflow:hidden}
.tcard .ph img{width:100%;height:100%;object-fit:cover}
.tcard .bd{padding:20px 18px}
.tcard h4{font-size:17px;margin-bottom:3px}
.tcard .qual{font-size:12.6px;color:var(--primary);font-weight:600;margin-bottom:6px}
.tcard .desig{display:inline-block;background:var(--primary-soft);color:var(--primary);font-size:11.6px;font-weight:700;
padding:3px 12px;border-radius:50px;text-transform:uppercase;letter-spacing:.5px}
.tcard p{font-size:13.4px;margin-top:11px;text-align:left}
/* ============================================================
PARTNER / CLIENT GRID
============================================================ */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.partner{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:center;transition:.24s}
.partner:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow)}
.partner img{max-height:42px;margin:0 auto 10px;object-fit:contain}
.partner b{display:block;font-size:14.2px;color:var(--ink)}
.partner span{display:block;font-size:11.8px;color:var(--grey);margin-top:3px}
/* ============================================================
ACCREDITATION TABLE
============================================================ */
.accred{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.accred th{background:var(--primary);color:#fff;text-align:left;padding:13px 20px;font-size:12.6px;
text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.accred td{padding:13px 20px;border-bottom:1px solid var(--line);font-size:14.2px}
.accred tr:last-child td{border-bottom:none}
.accred tbody tr:hover{background:var(--primary-softer)}
.accred .bodytag{display:inline-block;background:var(--primary-soft);color:var(--primary);font-size:11.6px;
font-weight:700;padding:3px 11px;border-radius:50px}
/* ============================================================
APP / PORTAL BAND + NEWSLETTER
============================================================ */
.app-band{background:var(--grad);border-radius:var(--radius-lg);padding:38px 44px;display:grid;
grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;position:relative;overflow:hidden}
.app-band::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.07);top:-120px;right:-70px}
.app-band h2,.app-band p{color:#fff;position:relative;z-index:2}
.app-band p{color:rgba(255,255,255,.85)}
.app-feats{display:grid;gap:10px;position:relative;z-index:2}
.app-feats div{display:flex;gap:11px;align-items:center;color:#fff;font-size:14.4px}
.app-feats i{color:var(--accent-2)}
.newsletter{background:var(--primary-softer);border:1px solid var(--primary-soft);border-radius:var(--radius-lg);
padding:34px;text-align:center}
.newsletter h3{font-size:22px;margin-bottom:8px}
.newsletter form{display:flex;max-width:470px;margin:18px auto 0;background:#fff;border-radius:50px;
overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.newsletter input{border:none;flex:1;padding:14px 22px;font-size:14.8px;border-radius:0}
.newsletter input:focus{outline:none;box-shadow:none}
.newsletter button{border:none;background:var(--grad-accent);color:#fff;padding:0 30px;font-family:inherit;
font-size:14.8px;font-weight:600;cursor:pointer}
/* ============================================================
SEO FOOTER LINK CLOUDS
============================================================ */
.seo-cloud{background:var(--bg);padding:40px 0;border-top:1px solid var(--line)}
.seo-grp{margin-bottom:22px}
.seo-grp h4{font-size:12.6px;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink);margin-bottom:9px}
.seo-grp .links{font-size:13.2px;color:var(--grey);line-height:2}
.seo-grp .links a{color:var(--grey)}
.seo-grp .links a:hover{color:var(--primary)}
.seo-grp .links span{color:var(--grey-2);margin:0 6px}
.seo-intro{font-size:13.6px;color:var(--grey);margin-bottom:26px;max-width:960px}
/* ============================================================
SEARCH RESULTS
============================================================ */
.sr{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;
padding:18px 20px;margin-bottom:12px;transition:.22s}
.sr:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.sr .ic{width:46px;height:46px;flex:0 0 46px;border-radius:13px;background:var(--primary-soft);color:var(--primary);
display:flex;align-items:center;justify-content:center;font-size:18px}
.sr h4{font-size:16.4px;margin-bottom:3px}
.sr p{font-size:13.6px;margin:0}
.sr .kind{display:inline-block;background:var(--bg);color:var(--grey);font-size:11.2px;font-weight:700;
padding:2px 10px;border-radius:50px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.sr .px{margin-left:auto;text-align:right;white-space:nowrap}
.sr .px b{color:var(--accent);font-size:18px}
/* ============================================================
Responsive for the new components
============================================================ */
@media (max-width:1080px){
.offer-tiles{grid-template-columns:repeat(3,1fr)}
.cat-grid{grid-template-columns:repeat(3,1fr)}
.why-num{grid-template-columns:repeat(2,1fr)}
.ach-grid,.team-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1180px){
.util-item.hide-lg{display:none}
.catnav-list>li>a{padding:15px 10px;font-size:13.8px}
.nav-right .nav-ghost{display:none}
}
@media (max-width:940px){
.util-bar .container{min-height:auto;padding-top:11px;padding-bottom:11px;gap:12px}
.util-item.hide-sm{display:none}
.util-item b,.util-item a.big{max-width:150px}
/* THE BRAND, ON A PHONE.
.brand was flex:0 0 auto and .b-name was white-space:nowrap — a
combination that says "never shrink, never wrap". With a short word like
RUPRELA that is fine. With a real centre's name — "Ruprela Diagnostics &
Imaging Centre" — the header simply ran out of room and the name was cut
off mid-word, which is what it does on the live site.
So on a phone the brand is allowed to shrink (flex:1 1 auto + min-width:0,
both needed: a flex item will not shrink below its content without the
second one), and the name is allowed to wrap to two lines instead of
being clipped. The logo keeps a fixed size so it never turns into a
smear. */
.brand{flex:1 1 auto;min-width:0}
.brand img{width:40px;height:40px}
.b-name{
font-size:18px;white-space:normal;line-height:1.16;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.b-tag{max-width:100%}
/* the whole category bar becomes the drawer trigger */
.catnav>.container{gap:0}
.catnav-list{display:none}
.nav-right{flex:1 1 auto;justify-content:flex-end}
.m-toggle{display:block}
/* Below the slider now, not inside it: a white card that overlaps the
slide's bottom edge by 26px and is fully visible. */
.hero-search{position:static;margin-top:-26px;padding:0 16px;position:relative;z-index:5}
.hero-search form{box-shadow:var(--shadow-lg)}
.promise-bar{grid-template-columns:1fr}
.promise{border-right:none;border-bottom:1px solid var(--line)}
.app-band{grid-template-columns:1fr;padding:28px 24px}
.journey{padding-left:32px}
}
/* ============================================================
INLINE GRIDS ON A PHONE
27 places across the public pages set grid-template-columns in a
style="" attribute. An inline style outranks every rule in this file,
so none of the responsive rules above could reach them — the stylesheet
said .contact-grid becomes one column below 940px, and
report-download.php said "1fr 1fr" in its markup, and the markup won.
The result was the report lookup: two columns on a 390px phone, which
left the Report Number and Mobile Number boxes 119 pixels wide each.
That is the form a patient uses to open their own result, and it was
the narrowest thing on the site.
!important is the only thing that outranks an inline style, and this is
the case it exists for. The :not() clauses leave the genuinely
responsive grids alone — repeat(auto-fit, minmax(...)) already collapses
by itself, and tile rows read better two-up than stacked.
============================================================ */
@media (max-width:820px){
main [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
section [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
.container [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]){
grid-template-columns:1fr !important;
}
}
@media (max-width:620px){
/* The round icon above a form heading is 70px on a desktop card. In a
318px card it is a large empty square of colour above the one thing
the page is for. */
.form-box>div:first-child[style*="border-radius"]{width:54px !important;height:54px !important;
font-size:23px !important;margin-bottom:12px !important}
.offer-tiles{grid-template-columns:repeat(2,1fr)}
.cat-grid{grid-template-columns:repeat(2,1fr)}
.why-num,.ach-grid,.team-grid{grid-template-columns:1fr}
.hero-search button{padding:0 18px;font-size:14px;flex:0 0 auto}
.hero-search input{padding:14px 14px;font-size:14.4px;min-width:0}
/* Under 430px the word "Search" costs more than it explains — the
magnifier says the same thing and gives the field back ~70px, which is
the difference between reading "Find your test, package or sc" and
reading the whole prompt. */
@media (max-width:430px){
.hero-search button .lbl{display:none}
.hero-search button{padding:0 16px}
}
.callback-strip input{min-width:0;flex:1}
.callback-strip form{width:100%}
.pkg-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:8px}
.accred th:nth-child(4),.accred td:nth-child(4){display:none}
.sr{flex-wrap:wrap}
.sr .px{margin-left:0;width:100%;text-align:left}
}
/* ============================================================
DETAIL PAGES (service.php, package.php, about.php, page.php)
============================================================ */
.detail-grid{display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:start}
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.detail-main{font-size:16px;color:var(--ink-2);line-height:1.85}
.detail-main h2{font-size:26px;margin:34px 0 14px;color:var(--primary);padding-bottom:9px;border-bottom:2px solid var(--primary-soft)}
.detail-main h3{font-size:20px;margin:24px 0 10px}
.detail-main p{margin-bottom:15px;color:var(--ink-2)}
.detail-main ul:not(.check-list):not(.prep-list){margin:0 0 18px 22px}
.detail-main ul:not(.check-list):not(.prep-list) li{list-style:disc;margin-bottom:8px}
.detail-main ol{margin:0 0 18px 22px}
.detail-main ol li{list-style:decimal;margin-bottom:8px}
.detail-main b,.detail-main strong{color:var(--ink)}
.detail-main img{border-radius:14px;margin:16px 0}
.detail-main table{width:100%;border-collapse:collapse;margin:18px 0}
.detail-main th{background:var(--primary);color:#fff;padding:10px 14px;text-align:left;font-size:13.5px}
.detail-main td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:14.2px}
.d-icon{width:82px;height:82px;border-radius:22px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:20px}
.info-strip{display:flex;gap:26px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px 22px;margin:20px 0 8px;font-size:14px;color:var(--grey)}
.info-strip i{color:var(--primary);margin-right:7px}
.info-strip b{color:var(--ink)}
.check-list,.prep-list{margin:0 0 18px !important;display:grid;gap:9px}
.check-list li,.prep-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 15px;list-style:none !important}
.check-list li i{color:var(--green);margin-top:5px;flex:0 0 auto}
.prep-list li i{color:var(--primary-2);margin-top:5px;flex:0 0 auto}
.faq-item{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:11px;background:#fff}
.faq-item summary{padding:15px 20px;font-weight:600;cursor:pointer;font-size:15.4px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"\002B";font-size:22px;color:var(--primary);font-weight:400;line-height:1}
.faq-item[open] summary{background:var(--primary-softer);color:var(--primary)}
.faq-item[open] summary::after{content:"\2212"}
.faq-body{padding:4px 20px 17px;font-size:14.4px;color:var(--grey);line-height:1.75}
.detail-side{position:sticky;top:96px}
.book-box{background:#fff;border:1.6px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
.book-box h3{font-size:19px;margin-bottom:6px}
.bb-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:10px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.bb-price .new{font-size:30px;font-weight:800;color:var(--primary)}
.bb-price .old{font-size:15.5px;color:var(--grey-2);text-decoration:line-through}
.about-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.ab{background:var(--grad);color:#fff;border-radius:var(--radius);padding:20px 14px;text-align:center}
.ab b{display:block;font-size:26px;font-weight:800;line-height:1.2}
.ab span{font-size:12.4px;color:rgba(255,255,255,.8)}
/* ---------------- Services list (services.php) ---------------- */
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.svc:hover{border-color:var(--primary-soft)}
/* ---------------- Tabs + price table (tests.php) ---------------- */
.tab-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.tab-btn{background:#fff;border:1.6px solid var(--line);color:var(--ink-2);padding:10px 22px;border-radius:50px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.22s}
.tab-btn:hover{border-color:var(--primary-2);color:var(--primary)}
.tab-btn.active{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(43,27,107,.24)}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.price-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.price-table th{background:var(--primary);color:#fff;text-align:left;padding:14px 20px;font-size:12.8px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.price-table td{padding:13px 20px;border-bottom:1px solid var(--line);font-size:14.4px}
.price-table tr:last-child td{border-bottom:none}
.price-table tbody tr:hover{background:var(--primary-softer)}
.price-table td.p{color:var(--accent);font-weight:700;white-space:nowrap}
/* ---------------- Gallery (gallery.php) ---------------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.g-item{position:relative;height:230px;border-radius:var(--radius);overflow:hidden;background:var(--primary-soft);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;color:var(--primary);
border:1px solid var(--line);transition:.3s}
.g-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.g-item>i{font-size:46px}
.g-item>span{font-size:14px;font-weight:600;text-align:center;padding:0 14px}
/* ---------------- Article (blog-post.php, page.php) ---------------- */
.article{max-width:820px}
.article h1{font-size:clamp(25px,3.4vw,38px);margin:22px 0 12px}
.a-hero{height:320px;border-radius:var(--radius-lg);background:var(--primary-soft);color:var(--primary);
display:flex;align-items:center;justify-content:center;font-size:66px;overflow:hidden;margin-bottom:8px}
.a-hero img{width:100%;height:100%;object-fit:cover}
.a-meta{font-size:13.6px;color:var(--grey);margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.a-meta i{color:var(--primary);margin-right:5px}
.article h2{font-size:25px;margin:32px 0 13px;color:var(--primary)}
.article h3{font-size:20px;margin:24px 0 10px}
.article p{margin-bottom:16px;font-size:16px;color:var(--ink-2);line-height:1.85}
.article ul,.article ol{margin:0 0 18px 22px}
.article ul li{list-style:disc;margin-bottom:9px;color:var(--ink-2)}
.article ol li{list-style:decimal;margin-bottom:9px;color:var(--ink-2)}
.article b,.article strong{color:var(--ink)}
/* ---------------- Map ---------------- */
.map-frame{width:100%;height:420px;border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.c-info h2{margin-bottom:8px}
@media (max-width:940px){
.detail-grid,.about-grid{grid-template-columns:1fr}
.detail-side{position:static}
.about-badges{grid-template-columns:repeat(2,1fr)}
.a-hero{height:220px;font-size:48px}
.map-frame{height:320px}
}
@media (max-width:620px){
.info-strip{gap:12px;flex-direction:column}
.about-badges{grid-template-columns:repeat(2,1fr)}
.tab-btns{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}
.price-table th,.price-table td{padding:11px 13px;font-size:13.4px}
.price-table th:nth-child(2),.price-table td:nth-child(2){display:none}
}
/* ---------------- Utilities ---------------- */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:34px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}.wrap{flex-wrap:wrap}.gap-1{gap:8px}.gap-2{gap:16px}
.muted{color:var(--grey)}.small{font-size:13px}.bold{font-weight:700}
.hide{display:none !important}
/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
.qb-5{grid-template-columns:1fr 1fr 1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
.usp-strip{grid-template-columns:repeat(2,1fr)}
.stat-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:940px){
section{padding:52px 0}
.slide .container{grid-template-columns:1fr;text-align:center;min-height:auto;padding-top:44px;padding-bottom:64px}
.slide p{margin-left:auto;margin-right:auto}
.slide-cta{justify-content:center}
.slide-art{order:-1;margin-bottom:14px}
.slide-art img{max-height:210px}
.slider-nav{display:none}
.quickbook{margin-top:20px}
.qb-5{grid-template-columns:1fr 1fr}
.why-wrap,.contact-grid,.grid-3,.grid-2{grid-template-columns:1fr}
.steps{grid-template-columns:repeat(2,1fr)}
.stats-band{grid-template-columns:repeat(2,1fr);gap:26px}
.footer-grid{grid-template-columns:1fr 1fr;gap:28px}
.my-wrap{grid-template-columns:1fr}
.my-side{position:static}
.cta-band{padding:34px 26px;text-align:center;justify-content:center}
.cta-band>div:last-child{justify-content:center}
.mobile-nav{display:block}
/* The bar is 66px, but the round "Book" button in the middle of it sticks
up about 20px higher — so 66px of padding left the last line of every
page tucked under that circle. On the report page it was the sentence
telling you where to find your report number, which is the one line on
that page somebody stuck is actually looking for. */
body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
.float-call{display:none}
.float-wa{bottom:calc(84px + env(safe-area-inset-bottom));right:14px;width:46px;height:46px;font-size:20px}
/* ------------------------------------------------------------
ACTION ROWS INSIDE A FORM CARD
Rows like "Get it on WhatsApp" + "Call the Centre" are laid out as
a centred wrapping flex row of .btn-sm. On a desktop that reads as
two neat pills. In a 318px card it reads as two different-sized
pills on two different lines, each centred to its own width — which
is the "doesn't look made for a phone" of it.
Given the room, they sit side by side and share it equally; when
they cannot, they stack full width. Either way they line up.
------------------------------------------------------------ */
.form-box .flex.wrap>.btn,
.panel .flex.wrap>.btn{flex:1 1 150px;justify-content:center}
}
@media (max-width:620px){
body{font-size:15px}
section{padding:42px 0}
.container{padding:0 16px}
.topbar .tb-right span{display:none}
.grid-4,.grid-3,.steps,.usp-strip,.stat-cards{grid-template-columns:1fr}
.qb-5,.form-row{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.stats-band{padding:30px 20px}
.hs b{font-size:31px}
.form-box,.auth-card,.panel{padding:22px}
.slot-grid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
.b-tag{display:none}
}
/* ============================================================
MOBILE APP SHELL
Below 940px the site stops behaving like a website and starts
behaving like an installed app: compact top bar, blurred bottom
tab bar, sheet-style overlays, card rails and touch feedback.
============================================================ */
.app-bar{display:none}
.pwa-banner{display:none}
@media (max-width:940px){
/* ---- top app bar (replaces the desktop utility row) ---- */
.util-bar{display:none}
.app-bar{
display:flex;align-items:center;gap:10px;background:#fff;padding:8px 14px;
padding-top:calc(8px + env(safe-area-inset-top));
position:sticky;top:0;z-index:910;border-bottom:1px solid var(--line);min-height:56px;
}
.app-bar .ab-brand{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;flex:1}
.app-bar .ab-brand img{width:30px;height:30px;flex:0 0 30px;object-fit:contain}
/* THE CENTRE'S NAME, ON A PHONE.
This was white-space:nowrap + text-overflow:ellipsis, which is a
reasonable default for a short brand word and wrong for a real one:
"Ruprela Diagnostics & Imaging Centre" came out as "Ruprela Diagnostics …"
on every phone, on every page. The name of the centre is not a detail to
truncate on a medical site — it is how a patient knows they are in the
right place.
Two lines instead, clamped so a very long name still cannot push the
app bar out of shape, and a slightly smaller size so two lines fit the
56px bar comfortably. */
.app-bar .ab-name{font-weight:800;font-size:15.5px;color:var(--primary);line-height:1.14;letter-spacing:.1px;
white-space:normal;overflow:hidden;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow-wrap:anywhere}
/* The bar grows a little when the name needs a second line, rather than
clipping it. */
.app-bar{min-height:56px;align-items:center}
.app-bar .ab-city{font-size:11.4px;color:var(--grey);display:flex;align-items:center;gap:4px;
max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-bar .ab-city i{font-size:9px;color:var(--accent)}
.app-bar .ab-act{
width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--primary-softer);
color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:15px;
border:none;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;
}
.app-bar .ab-act:active{transform:scale(.92);background:var(--primary-soft)}
.app-bar .ab-act .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;
background:var(--accent);border:1.5px solid #fff}
.app-bar .ab-back{font-size:17px}
/* the coloured category row only shows the CTA + menu on mobile,
and it scrolls away — the app bar is the one that stays pinned */
.catnav{padding:0;position:static}
.catnav>.container{min-height:0;padding-top:7px;padding-bottom:7px}
.nav-right .btn{flex:1;justify-content:center;padding:10px 16px;border-radius:12px}
/* ---- app-style bottom tab bar ---- */
.mobile-nav{
background:rgba(255,255,255,.94);
-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
border-top:1px solid rgba(20,24,62,.07);box-shadow:0 -6px 24px rgba(20,24,62,.09);
padding:5px 4px calc(4px + env(safe-area-inset-bottom));
}
.mobile-nav a{
position:relative;gap:2px;padding:7px 2px 5px;border-radius:14px;
-webkit-tap-highlight-color:transparent;transition:color .18s;
}
.mobile-nav a i{font-size:18px;transition:transform .18s}
.mobile-nav a:active i{transform:scale(.86)}
.mobile-nav a.on{color:var(--primary);font-weight:700}
.mobile-nav a.on::before{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:22px;height:3px;border-radius:0 0 4px 4px;background:var(--grad);
}
.mobile-nav a.on i{transform:translateY(-1px)}
.mobile-nav a.mid i{
width:48px;height:48px;margin-top:-22px;font-size:19px;
box-shadow:0 8px 18px rgba(255,107,53,.42),0 0 0 4px #fff;
}
.mobile-nav a.mid:active i{transform:scale(.9)}
.mobile-nav a.mid::before{display:none}
body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
/* ---- app cards & rails ---- */
section{padding:26px 0}
.sec-head{text-align:left;margin-bottom:18px;max-width:none}
.sec-head p{font-size:14.4px}
.kicker{margin-bottom:9px}
.card,.pkg-h,.blog-card,.testi,.step,.wn,.ach,.tcard,.usp,.gal,.partner{border-radius:18px}
.card:active,.pkg-h:active,.blog-card:active,.cat-tile:active,.offer-tile:active{transform:scale(.985)}
/* horizontal swipe rails instead of stacked cards */
.rail{
display:grid !important;grid-auto-flow:column;grid-auto-columns:78%;
grid-template-columns:none !important;overflow-x:auto;scroll-snap-type:x mandatory;
gap:13px;padding:2px 16px 12px;margin:0 -16px;
scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail-sm{grid-auto-columns:62%}
/* ---- sheet-style overlays ---- */
.m-drawer{border-radius:22px 0 0 22px}
.city-box{border-radius:22px 22px 0 0 !important;height:88dvh !important;max-height:88dvh !important;
margin-top:auto;animation:sheetUp .3s cubic-bezier(.32,.72,0,1)}
.city-modal{align-items:flex-end !important}
.city-box::before{content:"";display:block;width:38px;height:4px;border-radius:4px;
background:rgba(255,255,255,.5);margin:9px auto 0;flex:0 0 auto}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* ---- bigger, thumb-friendly controls ---- */
input,select,textarea{font-size:16px !important;padding:13px 15px} /* 16px stops iOS zooming */
.btn{padding:13px 22px;border-radius:13px}
.btn-sm{padding:10px 18px;border-radius:11px}
.btn-block,.form-box .btn,.auth-card .btn{border-radius:14px}
.slot{padding:13px 8px;border-radius:13px}
a,button,label,.slot,.city-chip,.pkg-tab,.tab-btn{-webkit-tap-highlight-color:transparent}
/* ---- install prompt ---- */
.pwa-banner{
display:none;position:fixed;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));
z-index:880;background:#fff;border-radius:18px;box-shadow:0 14px 40px rgba(20,24,62,.22);
padding:13px 14px;align-items:center;gap:12px;border:1px solid var(--line);
animation:sheetUp .34s cubic-bezier(.32,.72,0,1);
}
.pwa-banner.show{display:flex}
.pwa-banner img{width:42px;height:42px;border-radius:12px;flex:0 0 42px}
.pwa-banner b{display:block;font-size:14.4px;line-height:1.25}
.pwa-banner span{display:block;font-size:12.2px;color:var(--grey)}
.pwa-banner .btn{padding:9px 16px;font-size:13.2px;flex:0 0 auto}
.pwa-banner .x{background:none;border:none;color:var(--grey-2);font-size:17px;cursor:pointer;padding:4px 2px;flex:0 0 auto}
}
/* Standalone (installed) mode — hide anything that says "website" */
@media (display-mode:standalone),(display-mode:minimal-ui){
.offer-strip{display:none}
.seo-cloud{display:none}
.footer{padding-top:34px}
.footer-grid{display:none}
.footer-bottom{border-top:none;justify-content:center;text-align:center}
.pwa-banner{display:none !important}
body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}
/* ============================================================
MOBILE HARDENING — nothing may scroll sideways or clip
============================================================ */
@media (max-width:940px){
/* any wide table scrolls inside its own box instead of the page */
.table-wrap,.tab-pane,.accred,.dt{max-width:100%}
.tab-pane{overflow-x:auto;-webkit-overflow-scrolling:touch}
.price-table{min-width:520px}
.pkg-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:8px;
scrollbar-width:none;-ms-overflow-style:none}
.pkg-tabs::-webkit-scrollbar{display:none}
.pkg-tab{flex:0 0 auto}
.slot-day{scrollbar-width:none}
.slot-day::-webkit-scrollbar{display:none}
/* long unbroken strings (report numbers, emails, urls) */
.table-wrap td,.dt td,.accred td{word-break:break-word}
/* sticky sidebars must not trap scroll on touch */
.detail-side,.my-side{position:static !important}
.stats-band::after,.cta-band::after,.app-band::after,.page-banner::after{display:none}
}
@media (max-width:620px){
.util-bar .container{gap:10px}
.util-item .ic{width:30px;height:30px;flex:0 0 30px;font-size:12.5px}
.util-item span{font-size:10.6px}
.util-item b,.util-item a.big{font-size:12.8px;max-width:96px}
.brand{gap:9px}
.brand img{width:36px;height:36px}
.b-name{font-size:16px;letter-spacing:.2px}
/* Under 620px the tagline is the first thing to go if the name needs the
room — the name is what identifies the centre. */
.b-tag{font-size:10.5px}
.catnav>.container{padding-left:12px;padding-right:12px}
.nav-right .btn{padding:8px 14px;font-size:12.6px}
.offer-strip{font-size:12.4px;padding:8px 14px}
.slide-badge{font-size:11.4px;padding:6px 13px}
.slide-cta{flex-direction:column;align-items:stretch}
.slide-cta .btn{width:100%}
.qb-box{padding:16px;border-radius:16px}
.sec-head{margin-bottom:30px}
.kicker{font-size:11.4px;padding:5px 13px}
.pkg-h-foot{flex-direction:column;align-items:stretch}
.pkg-h-foot .flex{width:100%}
.pkg-h-foot .btn{flex:1;justify-content:center}
.bk-actions .btn,.bk-actions form{flex:1 1 auto}
.bk-actions .btn{justify-content:center;width:100%}
.cta-band,.app-band,.newsletter{padding:26px 18px;border-radius:18px}
.newsletter form{flex-direction:column;border-radius:16px;background:transparent;box-shadow:none;border:none;gap:10px}
.newsletter input{border:1.6px solid var(--line);border-radius:12px;background:#fff}
.newsletter button{border-radius:12px;padding:13px}
.footer{padding-top:40px}
.footer-bottom{flex-direction:column;gap:6px;text-align:center}
.seo-grp .links{font-size:12.4px;line-height:1.9}
.float-wa{width:50px;height:50px;font-size:23px}
.toolbar,.sheet{width:auto !important}
}
@media (max-width:400px){
.container{padding:0 13px}
.util-item.hide-xs{display:none}
.util-item b,.util-item a.big{max-width:74px}
.mobile-nav a{font-size:9.8px}
.mobile-nav a i{font-size:16px}
.btn{padding:12px 20px;font-size:14px}
.btn-lg{padding:14px 24px;font-size:15px}
h1{font-size:26px}
h2{font-size:22px}
}
/* ============================================================
PRINT — for ordinary site pages.
Proper documents (reports, invoices, receipts) have their own
stylesheet in includes/letterhead.php and never reach these rules.
What is left here is the case of somebody pressing Ctrl+P on a
normal page: an appointment, a package, a partner's QR code.
The old version of this listed the things to hide and missed
several — the mobile app bar, the account sidebar, the install
banner — so a printed appointment came out with navigation down
the side of it.
============================================================ */
@media print{
/* chrome */
.topbar,.header,.util-bar,.catnav,.app-bar,.m-drawer,.m-mask,.city-modal,
.footer,.mobile-nav,.float-wa,.float-call,.offer-strip,.pwa-banner,
.slider,.quickbook,.callback-strip,.seo-cloud,.breadcrumb,.crumb,
.my-side,.partner-side,.bk-actions,.share-row,.noprint{display:none !important}
/* anything interactive is meaningless on paper */
button,.btn,input[type=submit],.pagination,video,iframe{display:none !important}
body{background:#fff !important;padding:0;font-size:12pt;color:#000}
.container,.panel,.card{max-width:100% !important;width:auto !important;
box-shadow:none !important;border:0 !important;padding:0 !important;margin:0 0 10px !important}
/* a table that splits mid-row, or loses its headings on page two,
is the single most common thing wrong with a printed web page */
thead{display:table-header-group}
tr,.panel{page-break-inside:avoid;break-inside:avoid}
h1,h2,h3{page-break-after:avoid;break-after:avoid}
p,li,td{orphans:3;widows:3}
/* a printed link to "#" or javascript: helps nobody, but a real URL
is worth showing since the reader cannot click the paper */
a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt;color:#555}
a{text-decoration:none;color:#000}
@page{margin:14mm}
}