/* Instant free check + WhatsApp button on the sales pages (home.html, ar.html). Uses each page's
   colour variables and logical properties, so the same rules work left-to-right and right-to-left. */
#check{scroll-margin-top:80px}
.quick{margin-top:4px;max-width:580px}
.quick-label{display:block;font-weight:700;font-size:1rem;color:var(--txt);margin-bottom:10px}
.quick-row{display:flex;flex-wrap:wrap;gap:10px}
.quick-row input{flex:1 1 240px;min-width:0;font-family:inherit;font-size:1.05rem;color:var(--txt);background:#fff;border:1px solid var(--line2);border-radius:12px;padding:14px 15px;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .15s,box-shadow .15s}
.quick-row input:focus{outline:none;border-color:var(--e2);box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.quick-row input[aria-invalid="true"]{border-color:#dc2626}
.quick-row .btn{flex:1 1 200px}
@media (min-width:640px){.quick-row .btn{flex:0 0 auto}}
.quick-err{display:none;margin-top:10px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:10px;padding:10px 12px;font-size:.92rem}
.quick-err.on{display:block}
.hero-links{margin-top:10px;font-size:.9rem;color:var(--muted)}

/* Result card (takes the place of the example plan in the hero) */
.qr{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(15,23,42,.10);padding:20px;max-width:520px;width:100%;justify-self:center;scroll-margin-top:80px;min-width:0}
.qr:focus{outline:none}
@media (min-width:640px){.qr{padding:24px}}
.qr[hidden],.qr [hidden]{display:none!important}
.qr-loading{display:flex;gap:14px;align-items:center;padding:8px 0}
.qr-loading p{color:var(--body);font-size:.95rem}
.qr-loading b{color:var(--txt)}
.spin{flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:4px solid var(--mint2);border-top-color:var(--e2);animation:qspin .9s linear infinite}
@keyframes qspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.5s}}
.qr-head{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.ring{position:relative;flex:0 0 96px;width:96px;height:96px}
.ring svg{width:96px;height:96px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:11}
.ring-bg{stroke:#e2e8f0}
.ring-fg{stroke:var(--e2);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .8s ease}
.ring.mid .ring-fg{stroke:#d97706}
.ring.low .ring-fg{stroke:#dc2626}
.ring-txt{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:28px;direction:ltr;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.ring-txt b{font-size:1.75rem;font-weight:800;line-height:1}
.ring-txt span{font-size:.8rem;color:var(--muted);margin-inline-start:1px}
.qr-host{font-weight:700;font-size:1rem;color:var(--txt);word-break:break-all;line-height:1.35}
html[dir="rtl"] .qr-host{text-align:right}
/* With a result showing, the hero columns line up at the top instead of centring on the tall card. */
@media (min-width:960px){.hero.has-result .wrap{align-items:start}}
.qr-grade{font-size:.93rem;color:var(--body);margin-top:2px}
.qr-grade b{font-weight:800;color:var(--txt)}
.qr-counts{font-size:.85rem;color:var(--muted);margin-top:2px}
.qr h3{font-size:1.06rem;font-weight:800;margin-bottom:10px}
.qr-list{list-style:none;display:grid;gap:10px;counter-reset:q}
.qr-list li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px}
.qr-list .n{flex:0 0 26px;height:26px;border-radius:8px;background:#fef3c7;color:#92400e;font-weight:800;font-size:.85rem;display:grid;place-items:center;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.qr-list p{font-size:.9rem;color:var(--body);line-height:1.5;min-width:0}
.qr-list b{display:block;color:var(--txt);margin-bottom:2px}
.qr-none{background:var(--mint);border:1px solid var(--mint2);color:#065f46;border-radius:12px;padding:12px;font-size:.93rem}
.qr-more{margin-top:12px;font-weight:700;color:var(--e4);font-size:.95rem}
.qr-form{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.qr-form-h{font-weight:800;font-size:1.02rem;margin-bottom:12px}
.qr-form .btn{width:100%}
.qr-form .row{display:grid;gap:0 12px;grid-template-columns:1fr}
@media (min-width:520px){.qr-form .row{grid-template-columns:1fr 1fr}}
.qr-form .field{margin-bottom:12px}
.qr-form .consent{margin:0 0 12px;font-size:.8rem}
.qr-scope{margin-top:14px;font-size:.82rem;color:var(--muted)}
.linkbtn{margin-top:10px;background:none;border:0;padding:4px 0;font:inherit;font-weight:700;font-size:.9rem;color:var(--e4);cursor:pointer;text-decoration:underline}

/* WhatsApp click-to-chat: bottom inline-end corner (right on English, left on Arabic) */
.wa-fab{position:fixed;bottom:16px;inset-inline-end:16px;z-index:40;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(15,23,42,.25);transition:transform .15s}
.wa-fab:hover{transform:scale(1.06)}
.wa-fab svg{width:30px;height:30px;fill:#fff}
.wa-fab[hidden],.wa-inline[hidden]{display:none!important}
@media (min-width:640px){.wa-fab{bottom:24px;inset-inline-end:24px}}
/* Room below the footer so the button never sits on top of the last links. */
body.has-wa footer{padding-bottom:96px}