/* RR Cooling Point — Design System v4 ("Calm Premium")
   Skin-only layer: colours, type, radius, shadow, motion. No layout, position or display changes,
   so it cannot move or hide page content. Loaded last, after ultra-premium.css.
   ROLLBACK: delete the <link ... rr-design-v4.css> line in index.php (or this file). */

:root{
 --navy:#0a1f44; --blue:#0a5bd8; --ink:#0d1b34; --mut:#53627c;
 --sky:#eef4fc; --line:#dfe8f5; --bg:#fbfcfe; --card:#ffffff; --green:#0e9f55;
 --v4-r-sm:10px; --v4-r:16px; --v4-r-lg:24px; --v4-pill:999px;
 --v4-ease:cubic-bezier(.22,.8,.22,1);
 --v4-sh-1:0 1px 2px rgba(10,31,68,.05),0 1px 1px rgba(10,31,68,.03);
 --v4-sh-2:0 1px 2px rgba(10,31,68,.05),0 8px 24px -8px rgba(10,31,68,.14);
 --v4-sh-3:0 2px 4px rgba(10,31,68,.05),0 24px 48px -16px rgba(10,31,68,.22);
 --v4-grad:linear-gradient(135deg,#0a5bd8 0%,#2f7bff 55%,#4fd8ff 140%);
}

/* ---------- Typography ---------- */
body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
 text-rendering:optimizeLegibility;font-feature-settings:"kern","liga"}
h1,h2,h3,h4{font-family:Manrope,Poppins,system-ui,sans-serif;letter-spacing:-.022em;color:var(--ink)}
h1{font-weight:800;letter-spacing:-.03em}
h2{font-weight:800}
h3,h4{font-weight:700}
p,li{color:var(--mut)}
.sec h2,.rv h2,.bsec h3,.feat h2,.about h2{font-weight:800;letter-spacing:-.028em}
.sec.c>.w>p,.rv>.w>p{color:var(--mut)}
::selection{background:#cfe3ff;color:#06265c}

/* ---------- Top bar & header ---------- */
.top{background:linear-gradient(90deg,#071733,#0a2556);letter-spacing:.01em}
header#hd{border-bottom:1px solid rgba(10,31,68,.07)}
.dn a{border-radius:var(--v4-pill);font-weight:600;letter-spacing:-.005em;transition:background .25s var(--v4-ease),color .25s var(--v4-ease)}
.dn a:hover{background:var(--sky);color:var(--blue)}
.dn a.on{background:var(--ink);color:#fff}
.dd .dm,.dm{border:1px solid var(--line);border-radius:var(--v4-r);box-shadow:var(--v4-sh-3)}
.drawer{border-radius:var(--v4-r-lg) 0 0 var(--v4-r-lg)}

/* ---------- Buttons ---------- */
.btn{border-radius:var(--v4-pill);font-weight:700;letter-spacing:-.005em;
 transition:transform .3s var(--v4-ease),box-shadow .3s var(--v4-ease),background .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--v4-sh-2)}
.btn:active{transform:translateY(0) scale(.985)}
.b1{background:var(--v4-grad);border-color:transparent;color:#fff;box-shadow:0 6px 18px -6px rgba(10,91,216,.55)}
.b1:hover{box-shadow:0 12px 26px -8px rgba(10,91,216,.6)}
.b2{background:#fff;border-color:var(--line);color:var(--ink)}
.b2:hover{border-color:var(--blue);color:var(--blue)}
.bg{background:linear-gradient(135deg,#0e9f55,#17c26b);border-color:transparent;box-shadow:0 6px 18px -6px rgba(14,159,85,.5)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
 outline:3px solid rgba(47,123,255,.45);outline-offset:2px}

/* ---------- Cards & surfaces ---------- */
.card,.qs-card,.rc,.bkq,.sv-side,.sv-panel,.pt-wrap,.help,.cc,.cform,.rbox{
 border:1px solid var(--line);border-radius:var(--v4-r);background:var(--card);box-shadow:var(--v4-sh-1);
 transition:box-shadow .35s var(--v4-ease),transform .35s var(--v4-ease),border-color .25s}
.card:hover,.rc:hover{box-shadow:var(--v4-sh-3);transform:translateY(-3px);border-color:#c9dbf3}
.qs-card{border-radius:var(--v4-r-lg);box-shadow:var(--v4-sh-3)}
.ic,.ico{border-radius:14px}
.pill,.tag,.chip{border-radius:var(--v4-pill);font-weight:600;letter-spacing:.01em}
.chips a,.chips button,.chips span,.bsec .chips>*{border-radius:var(--v4-pill);border:1px solid var(--line);background:#fff;
 transition:background .25s,border-color .25s,color .25s,transform .25s var(--v4-ease)}
.chips a:hover,.chips button:hover{background:var(--sky);border-color:#bcd4f5;color:var(--blue);transform:translateY(-1px)}
.bsec,.sec.c{position:relative}
.about,.feat{background:linear-gradient(180deg,#f4f8fe 0%,#fbfcfe 100%)}
img{border-radius:0}
.about img,.sv-panel img,.card img,.pg-hero img{border-radius:var(--v4-r)}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--v4-r);background:#fff;margin-bottom:10px;box-shadow:var(--v4-sh-1);
 transition:box-shadow .3s var(--v4-ease),border-color .25s}
.faq details[open]{box-shadow:var(--v4-sh-2);border-color:#c9dbf3}
.faq summary{font-weight:700;color:var(--ink);letter-spacing:-.01em}

/* ---------- Forms (booking, contact, tracking, review) ---------- */
input,select,textarea{font-family:inherit}
.bkq input,.bkq select,.bkq textarea,.cform input,.cform select,.cform textarea,.fld input,.fld select,.fld textarea,
form input[type=text],form input[type=tel],form input[type=email],form input[type=number],form input[type=date],form select,form textarea{
 border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
 transition:border-color .2s,box-shadow .2s}
.bkq input:focus,.bkq select:focus,.bkq textarea:focus,.cform input:focus,.cform textarea:focus,.fld input:focus,
form input:focus,form select:focus,form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,91,216,.14);outline:none}
.slots>*{border-radius:12px}
.bkq h3{font-weight:800;letter-spacing:-.02em}

/* ---------- Tables (price lists) ---------- */
.pt-wrap{overflow:hidden}
.pt th{background:var(--sky);color:var(--ink);font-weight:700}
.pt tr:hover td{background:#f7faff}

/* ---------- Breadcrumbs, sidebars ---------- */
.crumb{color:var(--mut);font-size:13px}
.crumb a:hover{color:var(--blue)}
.more a{border-radius:var(--v4-pill)}

/* ---------- Footer ---------- */
footer#contact{background:linear-gradient(180deg,#071733 0%,#050f26 100%)}
footer#contact a{transition:color .2s,opacity .2s}
footer#contact a:hover{color:#8fc5ff}
.fcta,.fcontact-actions a{border-radius:var(--v4-pill)}

/* ---------- Floating call/WhatsApp ---------- */
.fab,.bkfab{border-radius:var(--v4-pill);box-shadow:var(--v4-sh-3)}

/* ---------- Scroll polish ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* =====================================================================
   PAGE TEMPLATES — service, brand-less content pages, area pages, about,
   contact, legal, blog posts. (.pg-hero / .sv-hero / .sv-body / .sv-side)
   Skin only: same markup, richer look.
   ===================================================================== */

/* ---------- Dark premium hero (matches the home page) ---------- */
.pg-hero,.sv-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;
 background:
  radial-gradient(900px 420px at 88% -10%,rgba(79,216,255,.28),transparent 62%),
  radial-gradient(700px 380px at 0% 110%,rgba(47,123,255,.34),transparent 64%),
  linear-gradient(165deg,#04112a 0%,#0a2556 62%,#061a3f 100%)}
.pg-hero::before,.sv-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
 background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
 background-size:52px 52px;-webkit-mask-image:radial-gradient(70% 90% at 75% 20%,#000,transparent 75%);
 mask-image:radial-gradient(70% 90% at 75% 20%,#000,transparent 75%)}
.pg-hero .w,.sv-hero .w{position:relative;z-index:1}
.pg-hero .w{padding-top:clamp(18px,3vw,34px);padding-bottom:clamp(34px,5vw,60px)}
.sv-hero .w{padding-top:clamp(18px,3vw,34px);padding-bottom:clamp(34px,5vw,60px)}
.pg-hero h1,.sv-hero h1{color:#fff;font-weight:800;letter-spacing:-.035em;line-height:1.06;
 font-size:clamp(32px,5.4vw,56px);text-wrap:balance}
.pg-hero .sub,.sv-hero .sub{color:#9fd0ff;font-weight:600;letter-spacing:-.01em}
.pg-hero p,.sv-hero p{color:rgba(255,255,255,.8);line-height:1.7}
.pg-hero .crumb,.sv-hero .crumb{color:rgba(255,255,255,.66)}
.pg-hero .crumb a,.sv-hero .crumb a{color:rgba(255,255,255,.9)}
.pg-hero .crumb a:hover,.sv-hero .crumb a:hover{color:#8fe3ff}
.pg-hero .crumb span,.sv-hero .crumb span{color:rgba(255,255,255,.4)}
.sv-hero .tag{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#cfe6ff;
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sv-hero .ticks,.sv-hero .ticks span{color:rgba(255,255,255,.9)}
.sv-hero .ticks i{background:linear-gradient(135deg,#17c26b,#0e9f55);color:#fff}
.sv-hero .btn.b2,.pg-hero .btn.b2{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sv-hero .btn.b2:hover,.pg-hero .btn.b2:hover{background:rgba(255,255,255,.16);border-color:#8fe3ff;color:#fff}
.sv-panel{background:linear-gradient(160deg,#ffffff,#eaf3ff);border:1px solid rgba(255,255,255,.5);
 box-shadow:0 30px 70px -20px rgba(0,10,40,.6),0 0 0 1px rgba(255,255,255,.08)}
.sv-panel img{box-shadow:none;border-radius:0}

/* ---------- Content sections become clean cards ---------- */
.sv-body{background:transparent}
.sv-body>div>section{background:#fff;border:1px solid var(--line);border-radius:var(--v4-r-lg);
 padding:clamp(20px,3vw,34px);box-shadow:var(--v4-sh-1);transition:box-shadow .35s var(--v4-ease)}
.sv-body>div>section:hover{box-shadow:var(--v4-sh-2)}
.sv-body section+section{margin-top:18px}
.sv-body>div>section>h2{color:var(--ink);font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.025em;margin:0 0 16px}
.sv-body>div>section>h2::before{content:"";display:block;width:34px;height:4px;border-radius:4px;margin-bottom:12px;background:var(--v4-grad)}
.pg-body p,.pg-body li{font-size:15.5px;line-height:1.8}
.pg-body h3,.sv-body h3{color:var(--ink);font-size:18px;margin:18px 0 6px}
.pg-body a:not(.btn){color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-color:rgba(10,91,216,.3);text-underline-offset:3px}
.pg-body a:not(.btn):hover{text-decoration-color:var(--blue)}

/* problems / steps / links inside service & area pages */
.pb>div{background:linear-gradient(180deg,#fff,#f6faff);font-weight:600;color:var(--ink);border-color:var(--line)}
.pb i{background:linear-gradient(135deg,#17c26b,#0e9f55)}
.stp li{background:linear-gradient(180deg,#fff,#f6faff);border-radius:16px;align-items:center}
.stp li:before{background:var(--v4-grad);box-shadow:0 6px 14px -4px rgba(10,91,216,.5)}
.stp b{color:var(--ink);font-weight:700}
.more a{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600}
.more a:hover{color:var(--blue);border-color:#bcd4f5}
.nt{border-radius:var(--v4-r);background:linear-gradient(180deg,#f4f8fe,#eef4fc);border-left:4px solid var(--blue)}

/* ---------- Sticky side card ---------- */
.sv-side{border:1px solid var(--line);border-radius:var(--v4-r-lg);box-shadow:var(--v4-sh-2);overflow:hidden}
.sv-side h3{color:var(--ink);font-weight:800;letter-spacing:-.02em}
.sv-side .toc button{color:var(--ink);font-weight:600;border-radius:8px;padding:8px 10px;transition:background .2s,color .2s}
.sv-side .toc button:hover{background:var(--sky);color:var(--blue);text-decoration:none}
/* booking CTA variant (no table of contents) gets the dark premium treatment */
.sv-side:not(:has(.toc)){background:linear-gradient(160deg,#0a2556 0%,#04112a 100%);border-color:rgba(255,255,255,.08);
 box-shadow:0 30px 60px -24px rgba(4,17,42,.7)}
.sv-side:not(:has(.toc)) h3{color:#fff}
.sv-side:not(:has(.toc)) p{color:rgba(255,255,255,.76)}
.sv-side:not(:has(.toc)) small{color:rgba(255,255,255,.66)}

/* ---------- Price tables & FAQ inside cards ---------- */
.sv-body .pt-wrap{box-shadow:none;border-radius:var(--v4-r)}
.sv-body .faq details:last-child{margin-bottom:0}
.sv-body .faq details{box-shadow:none;background:#f9fbff}
.sv-body .faq details[open]{background:#fff}

/* ---------- Brand hero (.bh) gets the same depth ---------- */
.bh .btn.b2{border-radius:var(--v4-pill)}
.bh h1{letter-spacing:-.035em}

@media(max-width:900px){
 .pg-hero h1,.sv-hero h1{font-size:clamp(30px,8.4vw,42px)}
 .sv-body>div>section{border-radius:var(--v4-r)}
}

/* =====================================================================
   CONVERSION BLOCKS (added by assets/js/rr-enhance.js)
   ===================================================================== */
.rr-trust{position:relative;z-index:4;margin-top:-26px;padding-bottom:6px}
.rr-trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;
 border:1px solid var(--line);border-radius:var(--v4-r-lg);box-shadow:var(--v4-sh-3);overflow:hidden}
.rr-trust li{display:flex;align-items:center;gap:12px;padding:18px clamp(14px,2vw,22px);position:relative}
.rr-trust li+li::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.rr-trust li>svg{flex:none;box-sizing:content-box;padding:11px;border-radius:14px;color:#fff;background:var(--v4-grad);
 box-shadow:0 8px 18px -6px rgba(10,91,216,.55)}
.rr-trust b{display:block;color:var(--ink);font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.rr-trust span{display:block;color:var(--mut);font-size:12.5px;margin-top:2px;line-height:1.35}

.rr-cta{padding:clamp(8px,2vw,20px) 0 clamp(40px,6vw,72px)}
.rr-cta-in{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--v4-r-lg);color:#fff;
 padding:clamp(26px,4.5vw,52px);display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;
 background:radial-gradient(640px 320px at 100% 0%,rgba(79,216,255,.32),transparent 62%),
  radial-gradient(520px 300px at 0% 120%,rgba(47,123,255,.38),transparent 64%),
  linear-gradient(160deg,#0a2556,#04112a);
 box-shadow:0 40px 80px -30px rgba(4,17,42,.75)}
.rr-cta-in::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;pointer-events:none;
 background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
 background-size:48px 48px;-webkit-mask-image:radial-gradient(80% 100% at 90% 0%,#000,transparent 75%);mask-image:radial-gradient(80% 100% at 90% 0%,#000,transparent 75%)}
.rr-cta-k{display:inline-block;padding:6px 14px;border-radius:var(--v4-pill);font-size:12.5px;font-weight:700;letter-spacing:.04em;
 text-transform:uppercase;color:#9fe3ff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2)}
.rr-cta h2{color:#fff;font-size:clamp(26px,3.8vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:14px 0 12px;text-wrap:balance}
.rr-cta p{color:rgba(255,255,255,.78);font-size:clamp(14.5px,1.6vw,16.5px);line-height:1.7;max-width:560px}
.rr-cta-b{display:grid;gap:12px}
.rr-cta-b .btn{width:100%;padding:16px 22px;font-size:15.5px}
.rr-cta-b .btn.b2{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff;font-weight:800;letter-spacing:.01em}
.rr-cta-b .btn.b2:hover{background:rgba(255,255,255,.16);border-color:#8fe3ff}
.rr-cta-b svg{flex:none}

@media(max-width:900px){
 .rr-trust{margin-top:-18px}
 .rr-trust ul{grid-template-columns:1fr 1fr}
 .rr-trust li:nth-child(3)::before{display:none}
 .rr-trust li:nth-child(n+3){border-top:1px solid var(--line)}
 .rr-cta-in{grid-template-columns:1fr}
}
@media(max-width:520px){
 .rr-trust li{flex-direction:column;align-items:flex-start;gap:8px;padding:14px}
}