/* =====================================================================
   PREVIEW ONLY — "Glass + Royal Blue" theme override for Carbon Perfume
   NOT linked from the site. To apply after approval: append this file to the
   end of assets/css/style.css (or add <link rel="stylesheet" href="assets/css/theme-glass.css?v=…">
   after style.css) in carbon-site + carbon-publish, then deploy.
   Navy base stays; cards / bars / buttons become frosted glass with thin royal-blue borders.
   Text stays white / gold for contrast; prices and the Best Seller badge stay gold.
   ===================================================================== */
:root{
  --rb:#1d4ed8;              /* deep royal blue */
  --rb2:#2563eb;             /* royal blue */
  --rb3:#3b82f6;             /* highlight */
  --rb-ice:#c7d7fe;          /* light periwinkle for icons on dark glass */
  --rb-line:rgba(37,99,235,.55);
  --rb-line-strong:rgba(59,130,246,.85);
  --glass:linear-gradient(155deg,rgba(30,58,138,.30),rgba(8,20,48,.38) 55%,rgba(4,10,28,.45));
  --glass-strong:linear-gradient(155deg,rgba(30,58,138,.42),rgba(8,20,48,.5) 55%,rgba(4,10,28,.55));
  --glass-blur:blur(14px) saturate(150%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.02),0 18px 40px -26px rgba(29,78,216,.55);
}
/* soft royal-blue light behind the glass so the frosting is visible on the navy base */
body{background-image:
  radial-gradient(900px 520px at 85% -10%,rgba(29,78,216,.30),transparent 60%),
  radial-gradient(700px 520px at 0% 38%,rgba(37,99,235,.18),transparent 60%),
  radial-gradient(700px 600px at 100% 78%,rgba(30,58,138,.28),transparent 62%)}

/* ---------- shared glass surface ---------- */
.card,.faq-toggle,.faq-item,.rev-form,.rev-thanks,.vis-pill,.foot-links a,.ship-card,.steps--slim li{
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--rb-line);box-shadow:var(--glass-shadow)}

/* ---------- FAQ + reviews header bars ---------- */
html[dir="rtl"] .faq-toggle{background:var(--glass)}
.faq-toggle:hover{border-color:var(--rb-line-strong)}
.faq-toggle:focus-visible{outline:2px solid var(--rb3);outline-offset:3px}
.faq-toggle-ico{color:var(--rb-ice);border-color:var(--rb-line);background:rgba(37,99,235,.14)}
.faq-chev{color:var(--rb-ice);border-color:var(--rb-line);background:rgba(4,10,28,.35)}
.faq-count{color:var(--rb-ice);border-color:var(--rb-line);background:rgba(37,99,235,.12)}
.faq.is-open .faq-toggle,.reviews.is-open .faq-toggle{border-color:var(--rb-line-strong);background:var(--glass-strong)}
.faq.is-open .faq-chev,.reviews.is-open .faq-chev{background:linear-gradient(135deg,var(--rb3),var(--rb));color:#fff;border-color:transparent;box-shadow:0 0 14px rgba(59,130,246,.5)}
/* questions inside the FAQ */
.faq-item[open]{background:var(--glass-strong);border-color:var(--rb-line-strong)}
.faq-icon{border-color:var(--rb-line)}
.faq-icon::before,.faq-icon::after{background:var(--rb-ice)}
.faq-item[open] .faq-icon{background:linear-gradient(135deg,var(--rb3),var(--rb));border-color:transparent}
.faq-item[open] .faq-icon::before,.faq-item[open] .faq-icon::after{background:#fff}
.faq-item summary:focus-visible{outline-color:var(--rb3)}
.faq-a p::before{background:linear-gradient(180deg,var(--rb3),rgba(37,99,235,.15))}

/* ---------- product cards ---------- */
.card{background:linear-gradient(180deg,rgba(30,58,138,.22),rgba(6,14,36,.55) 60%)}
.card:hover{border-color:var(--rb-line-strong)}
.card-img{background:rgba(4,10,28,.6)}
.discover{border-bottom-color:var(--rb-line)}
.discover:hover{border-color:var(--rb3)}
.size{border-color:var(--rb-line)}

/* ---------- order pill ("اطلب الآن") + WhatsApp circle ---------- */
.btn-pay{color:#eef3ff;background:rgba(37,99,235,.10);border:1px solid var(--rb-line-strong);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 18px -10px rgba(37,99,235,.7)}
.btn-pay .pay-ico{color:var(--rb-ice)}
.btn-pay:hover,.btn-pay:focus-visible{background:rgba(37,99,235,.22);border-color:#60a5fa;color:#fff}
.btn-pay:active{background:rgba(37,99,235,.3)}
.btn-pay:focus-visible{outline-color:var(--rb3)}
.btn-wa,.feature-cta .btn-gold,.set-btn{background:rgba(8,20,48,.35);border:1px solid var(--rb-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-wa:hover,.feature-cta .btn-gold:hover,.set-btn:hover,.btn-wa:focus-visible,.feature-cta .btn-gold:focus-visible,.set-btn:focus-visible{background:rgba(37,99,235,.16);border-color:var(--rb-line-strong)}
.btn-wa:focus-visible,.feature-cta .btn-gold:focus-visible,.set-btn:focus-visible{outline-color:var(--rb3)}
.card .card-body .btn-wa--ico{border-color:var(--rb-line-strong);background:rgba(37,99,235,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 16px -10px rgba(37,99,235,.7)}
.btn-wa .ico,.feature-cta .btn-gold .ico,.set-btn .ico{color:#4fd08a} /* WhatsApp green stays recognisable */

/* ---------- footer contact buttons ---------- */
.foot-links a{color:#e6ecff}
.foot-links a:hover{border-color:var(--rb-line-strong);color:#fff;background:rgba(37,99,235,.16)}
.foot-mail{color:var(--gold2);border-color:var(--rb-line)}
.foot-mail:hover{color:#f3e3b8;border-color:var(--rb-line-strong)}
.vis-foot{border-color:var(--rb-line);background:rgba(8,20,48,.4)}

/* ---------- reviews form + visitor pill (consistency) ---------- */
.rev-f input,.rev-f textarea{border-color:rgba(37,99,235,.45);background:rgba(4,10,28,.55)}
.rev-f input:focus,.rev-f textarea:focus{border-color:var(--rb3);box-shadow:0 0 0 3px rgba(37,99,235,.22)}
.rev-check{color:var(--rb-ice);border-color:var(--rb-line-strong);background:rgba(37,99,235,.14)}
.vis-pill{color:#e6ecff}
.ship-ico{color:var(--rb-ice);border-color:var(--rb-line);background:rgba(37,99,235,.12)}

/* no backdrop-filter support -> slightly more opaque glass so text stays readable */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .card,.faq-toggle,.faq-item,.rev-form,.rev-thanks,.vis-pill,.foot-links a,.ship-card,.steps--slim li{background:linear-gradient(155deg,rgba(18,36,86,.92),rgba(6,16,40,.94))}
}