/* =====================================================================
   Abu Ahmad Attars — Phase 6 styles (blog, static pages, quiz, popups)
   Loads after style.css. Uses theme.css variables.
   ===================================================================== */

/* Blog listing */
.blog-layout { display:grid; grid-template-columns:1fr 280px; gap:36px; align-items:start; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.blog-card { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--card-bg); display:flex; flex-direction:column; transition:transform var(--speed) var(--ease), border-color var(--speed) var(--ease); }
.blog-card:hover { transform:translateY(-6px); border-color:var(--border-strong); box-shadow:var(--shadow); }
.blog-media { display:block; aspect-ratio:16/10; background:var(--bg-2); overflow:hidden; }
.blog-media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.blog-card:hover .blog-media img { transform:scale(1.05); }
.blog-body { padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-cat { align-self:flex-start; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--brand-gold); border:1px solid var(--border-strong); padding:3px 10px; border-radius:50px; }
.blog-body h2 { font-size:1.2rem; margin:0; }
.blog-body p { color:var(--text-muted); font-size:.9rem; flex:1; }
.blog-meta { color:var(--text-faint); font-size:.8rem; }
.blog-sidebar { display:grid; gap:22px; position:sticky; top:calc(var(--header-h) + 20px); }
.blog-search { display:flex; gap:8px; }
.blog-search input { flex:1; padding:12px 16px; border-radius:50px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); }
.blog-search .btn { padding:.7em 1.2em; }
.blog-widget { border:1px solid var(--border); border-radius:var(--radius); background:var(--card-bg); padding:20px; }
.blog-widget h3 { font-size:1rem; margin-bottom:12px; color:var(--brand-gold); }
.blog-widget ul li a { display:flex; justify-content:space-between; padding:7px 0; color:var(--text-muted); transition:.2s; }
.blog-widget ul li a:hover, .blog-widget ul li a.active { color:var(--brand-gold); padding-left:5px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag-cloud a { font-size:.8rem; padding:5px 11px; border:1px solid var(--border-strong); border-radius:50px; color:var(--text-muted); transition:.2s; }
.tag-cloud a:hover, .tag-cloud a.active { background:var(--gold-gradient); color:#06140d; border-color:transparent; }

/* Single post */
.post-narrow { max-width:760px; }
.post-head { text-align:center; margin-bottom:24px; }
.post-head h1 { font-size:clamp(1.9rem,4vw,2.8rem); margin:14px 0 10px; }
.post-meta { color:var(--text-muted); font-size:.88rem; }
.post-hero { border-radius:var(--radius-lg); overflow:hidden; margin-bottom:30px; aspect-ratio:16/9; background:var(--bg-2); }
.post-hero img { width:100%; height:100%; object-fit:cover; }
.post-content p { margin:0 0 1.2em; color:var(--text); line-height:1.9; }
.post-content h2 { font-size:1.5rem; margin:1.4em 0 .5em; }
.post-tags { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0; }
.post-tags a { font-size:.82rem; padding:5px 12px; border:1px solid var(--border-strong); border-radius:50px; color:var(--text-muted); }
.post-tags a:hover { color:var(--brand-gold); border-color:var(--brand-gold); }
.post-share { display:flex; align-items:center; gap:14px; padding-top:20px; border-top:1px solid var(--border); color:var(--text-muted); }
.post-share a { color:var(--brand-gold); }

/* Contact */
.contact-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:36px; align-items:start; }
.contact-info { border:1px solid var(--border); border-radius:var(--radius); background:var(--card-bg); padding:28px; }
.contact-info h3 { color:var(--brand-gold); margin-bottom:16px; }
.contact-form-wrap form .co-field { margin-bottom:14px; }
.contact-form-wrap textarea, .contact-form-wrap input { width:100%; padding:13px 16px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-family:inherit; }

/* FAQ */
.faq-list { display:grid; gap:12px; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius); background:var(--card-bg); padding:0 22px; }
.faq-item summary { cursor:pointer; padding:18px 0; font-family:var(--font-head); font-size:1.1rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; color:var(--brand-gold); font-size:1.4rem; transition:transform .3s; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { color:var(--text-muted); padding:0 0 18px; margin:0; }

/* Quiz */
.quiz { max-width:680px; margin:0 auto; border:1px solid var(--border-strong); border-radius:var(--radius-lg); background:var(--card-bg); padding:clamp(24px,4vw,44px); }
.quiz-progress { height:4px; background:var(--bg-2); border-radius:50px; overflow:hidden; margin-bottom:30px; }
.quiz-bar { display:block; height:100%; width:20%; background:var(--gold-gradient); transition:width .4s var(--ease); }
.quiz-step { display:none; animation:fadeStep .4s var(--ease); }
.quiz-step.active { display:block; }
@keyframes fadeStep { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } }
.quiz-step.shake { animation:shakeX .4s; }
@keyframes shakeX { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.quiz-step h3 { font-size:1.5rem; text-align:center; margin-bottom:24px; }
.quiz-opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.quiz-opt { position:relative; cursor:pointer; }
.quiz-opt input { position:absolute; opacity:0; }
.quiz-opt span { display:block; text-align:center; padding:20px 14px; border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--text); transition:.25s var(--ease); }
.quiz-opt:hover span { border-color:var(--brand-gold); }
.quiz-opt input:checked + span { background:var(--gold-gradient); color:#06140d; border-color:transparent; font-weight:600; }
.quiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:30px; gap:12px; }
.quiz-results { margin-top:10px; }

/* Flash sale countdown */
.flash-sale { background:linear-gradient(135deg, rgba(var(--brand-gold-rgb),.14), var(--bg-2)); border-block:1px solid var(--border-strong); padding:30px 0; }
.flash-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.flash-text h2 { font-size:clamp(1.3rem,3vw,1.9rem); margin:4px 0 0; }
.countdown { display:flex; align-items:center; gap:8px; }
.countdown.ended .cd-unit b { opacity:.4; }
.cd-unit { display:flex; flex-direction:column; align-items:center; background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; padding:8px 12px; min-width:58px; }
.cd-unit b { font-family:var(--font-head); font-size:1.7rem; color:var(--brand-gold); line-height:1; }
.cd-unit span { font-size:.66rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }
.cd-sep { color:var(--brand-gold); font-size:1.4rem; font-weight:700; }

/* Exit-intent popup */
.exit-popup { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); opacity:0; visibility:hidden; transition:.35s var(--ease); }
.exit-popup.open { opacity:1; visibility:visible; }
.exit-card { position:relative; width:min(440px,100%); text-align:center; border:1px solid var(--border-strong); border-radius:var(--radius-lg); background:linear-gradient(160deg, rgba(21,122,85,.18), var(--surface)); padding:42px 34px; transform:translateY(16px) scale(.97); transition:.35s var(--ease); }
.exit-popup.open .exit-card { transform:none; }
.exit-close { position:absolute; top:14px; right:16px; background:none; border:none; color:var(--text-muted); font-size:1.1rem; cursor:pointer; }
.exit-orn { color:var(--brand-gold); font-size:1.8rem; }
.exit-card h3 { font-size:1.6rem; margin:8px 0; }
.exit-card p { color:var(--text-muted); }
.exit-code { font-family:var(--font-head); font-size:1.6rem; letter-spacing:.2em; color:var(--brand-gold); border:1px dashed var(--border-strong); border-radius:10px; padding:12px; margin:16px 0 20px; }
.exit-card .btn { width:100%; justify-content:center; }
.exit-dismiss { display:block; margin:12px auto 0; background:none; border:none; color:var(--text-faint); font-size:.85rem; cursor:pointer; text-decoration:underline; }

/* Recently purchased */
.recent-purchase { position:fixed; left:20px; bottom:20px; z-index:120; display:flex; align-items:center; gap:14px; width:min(330px,86vw); background:var(--surface); border:1px solid var(--border-strong); border-left:4px solid var(--brand-gold); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(20px); transition:.45s var(--ease); }
.recent-purchase.show { opacity:1; visibility:visible; transform:translateY(0); }
.rp-close { position:absolute; top:6px; right:8px; background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:.8rem; }
.rp-ico { width:42px; height:42px; border-radius:50%; background:var(--gold-gradient); display:grid; place-items:center; font-size:1.2rem; flex-shrink:0; }
.rp-body { font-size:.84rem; color:var(--text-muted); line-height:1.45; }
.rp-body b { color:var(--text); }
.rp-body small { display:block; color:var(--text-faint); font-size:.74rem; margin-top:2px; }

@media (max-width:880px) {
  .blog-layout, .contact-layout { grid-template-columns:1fr; }
  .blog-sidebar { position:static; }
  .flash-inner { justify-content:center; text-align:center; }
}