/* ═══════════════════════════════════════════════════════════
   AFFILIATE MASTER PRODUCT PREVIEW V3 — glass modal styles
   One reusable preview overlay for every affiliate product.
   Design system: GeetAI core tokens (glass depth, peacock-blue
   accent, signature gold, Sora/Cinzel/Inter/JetBrains Mono).
   v3 = new version; v2 files untouched (rollback).
   ═══════════════════════════════════════════════════════════ */

/* ─── Overlay ─── */
.afp-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(10,25,28,0.42);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  opacity:0;pointer-events:none;
  transition:opacity .32s var(--ease);
}
.afp-overlay.open{opacity:1;pointer-events:auto}

/* ─── Modal (glass) ─── */
.afp-modal{
  position:relative;
  width:min(880px,100%);
  max-height:calc(100vh - 48px);
  overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--glass-3-bg);
  backdrop-filter:blur(var(--glass-3-blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--glass-3-blur)) saturate(1.6);
  border:1px solid var(--glass-3-border);
  border-radius:var(--r-lg);
  box-shadow:0 40px 90px -30px rgba(6,30,36,0.55),0 12px 30px -12px rgba(6,30,36,0.3),inset 0 1px 0 rgba(255,255,255,0.6);
  transform:translateY(14px) scale(0.97);
  opacity:0;
  transition:transform .34s var(--ease),opacity .3s var(--ease);
}
.afp-overlay.open .afp-modal{transform:translateY(0) scale(1);opacity:1}

/* ─── Close ─── */
.afp-close{
  position:absolute;top:16px;right:16px;z-index:5;
  width:40px;height:40px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hair-strong);background:rgba(255,255,255,0.7);
  color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
  transition:all .25s ease;
}
.afp-close:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:rotate(90deg)}

/* ─── Scroll body ─── */
.afp-body-wrap{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.afp-body-wrap::-webkit-scrollbar{width:8px}
.afp-body-wrap::-webkit-scrollbar-thumb{background:rgba(18,107,120,0.3);border-radius:8px}

/* ─── Hero: media + info ─── */
.afp-hero{
  display:grid;grid-template-columns:minmax(220px,360px) 1fr;
  gap:clamp(20px,3.5vw,40px);
  padding:clamp(22px,4vw,36px);
  align-items:start;
}
.afp-media{
  background:rgba(255,255,255,0.6);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  padding:12px;
}
.afp-hero-img{
  width:100%;aspect-ratio:1/1;object-fit:contain;
  border-radius:var(--r-sm);
  background:#fff;
}
.afp-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.afp-thumb{
  width:56px;height:56px;object-fit:contain;cursor:pointer;
  border:2px solid var(--hair);border-radius:10px;background:#fff;
  transition:border-color .2s ease;padding:4px;appearance:none;overflow:hidden;
}
.afp-thumb img{width:100%;height:100%;object-fit:contain}
.afp-thumb.active{border-color:var(--accent)}
body.afp-locked{overflow:hidden}

/* ─── Info column ─── */
.afp-info{min-width:0;display:flex;flex-direction:column;gap:10px}
.afp-cat{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--accent);font-weight:500;
}
.afp-name{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(1.3rem,2.2vw,1.9rem);color:#0a3040;line-height:1.2;letter-spacing:-0.01em}
.afp-brand{font-size:0.85rem;color:rgba(13,82,92,0.7);font-weight:500}
.afp-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.afp-price{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);color:#0a3040}
.afp-mrp{font-size:0.95rem;color:var(--ink-muted);text-decoration:line-through}
.afp-disc{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:0.8rem;
  color:#fff;background:linear-gradient(120deg,#126B78,#1a8898);
  padding:4px 10px;border-radius:999px;letter-spacing:.4px;
}
.afp-disc.none{background:rgba(14,14,13,0.08);color:var(--ink-muted)}
.afp-rating{display:flex;align-items:center;gap:8px;color:#333;font-size:0.9rem}
.afp-rating .stars{color:var(--accent);letter-spacing:1px}
.afp-reviews{font-size:0.8rem;color:rgba(13,82,92,0.7)}
.afp-avail{font-size:0.85rem;color:rgba(13,82,92,0.75);display:flex;align-items:center;gap:6px}
.afp-avail .dot{width:8px;height:8px;border-radius:50%;background:#1a8898;display:inline-block}
.afp-avail.soft .dot{background:#D4B830}
.afp-short{font-size:0.92rem;color:var(--ink-dim);line-height:1.55}

/* ─── Actions ─── */
.afp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.afp-buy{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(120deg,#1a8898 0%,#126B78 55%,#0d525c 100%);
  color:#fff;font-weight:700;font-size:0.98rem;
  padding:13px 24px;border-radius:999px;text-decoration:none;
  box-shadow:0 8px 24px -8px rgba(18,107,120,0.5);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.afp-buy:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(18,107,120,0.6);color:#fff}
.afp-buy svg{width:16px;height:16px}
.afp-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.65);border:1px solid var(--hair-strong);
  color:var(--ink);font-weight:600;font-size:0.85rem;
  padding:11px 16px;border-radius:999px;cursor:pointer;
  transition:all .22s ease;
}
.afp-btn:hover{background:#fff;border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.afp-btn svg{width:15px;height:15px}
.afp-btn.on{background:rgba(18,107,120,0.12);border-color:var(--accent);color:var(--accent)}

/* ─── Sections ─── */
.afp-sections{
  border-top:1px solid var(--hair-strong);
  padding:clamp(22px,4vw,36px);
  display:flex;flex-direction:column;gap:26px;
}
.afp-sec{display:flex;flex-direction:column;gap:10px}
.afp-sec-title{
  font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;color:#0a3040;
  letter-spacing:.2px;display:flex;align-items:center;gap:8px;
}
.afp-sec-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(18,107,120,0.35),transparent)}
.afp-sec-text{font-size:0.92rem;color:var(--ink-dim);line-height:1.6}
.afp-list{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:0.92rem;color:var(--ink-dim)}
.afp-list li{display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.afp-list li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;margin-top:8px;background:var(--accent)}
.afp-list.cons li::before{background:#c0564a}
.afp-specs{display:grid;grid-template-columns:1fr;gap:0;font-size:0.9rem}
.afp-spec{display:flex;gap:14px;padding:9px 2px;border-bottom:1px dashed var(--hair)}
.afp-spec dt{flex:0 0 42%;font-weight:600;color:#0a3040}
.afp-spec dd{margin:0;color:var(--ink-dim);word-break:break-word}

.afp-faq{display:flex;flex-direction:column;gap:12px}
.afp-faq-item{border:1px solid var(--hair);border-radius:var(--r-sm);background:rgba(255,255,255,0.55);overflow:hidden}
.afp-faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  text-align:left;font-weight:600;font-size:0.9rem;color:#0a3040;
  padding:12px 16px;cursor:pointer;background:transparent;border:none;
}
.afp-faq-q .chev{transition:transform .25s var(--ease);color:var(--accent);flex:none}
.afp-faq-item.open .afp-faq-q .chev{transform:rotate(180deg)}
.afp-faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);font-size:0.88rem;color:var(--ink-dim);line-height:1.6}
.afp-faq-item.open .afp-faq-a{max-height:240px}
.afp-faq-a p{padding:0 16px 14px}

/* ─── Related ─── */
.afp-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.afp-rel{
  display:flex;flex-direction:column;gap:8px;text-decoration:none;
  background:rgba(255,255,255,0.6);border:1px solid var(--hair);
  border-radius:var(--r-md);padding:12px;cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.afp-rel:hover{transform:translateY(-3px);box-shadow:0 14px 28px -12px rgba(18,107,120,0.35);border-color:rgba(18,107,120,0.4)}
.afp-rel-img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:var(--r-sm)}
.afp-rel-name{font-size:0.78rem;color:#0a3040;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.afp-rel-price{font-size:0.85rem;font-weight:700;color:#126B78}
.afp-rel-mrp{font-size:0.72rem;color:var(--ink-muted);text-decoration:line-through;margin-left:6px}
.afp-rel-rate{font-size:0.72rem;color:#555}

/* ─── Notice (honesty for sample/placeholder listings) ─── */
.afp-notice{
  display:flex;gap:8px;align-items:flex-start;
  background:rgba(212,184,48,0.14);border:1px solid rgba(212,184,48,0.5);
  color:#5c4a06;font-size:0.8rem;border-radius:10px;padding:10px 12px;line-height:1.45;
}
.afp-notice svg{flex:none;width:15px;height:15px;margin-top:1px}

/* ─── Toast ─── */
.afp-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:rgba(10,40,48,0.92);backdrop-filter:blur(10px);color:#fff;
  font-size:0.85rem;font-weight:600;padding:11px 18px;border-radius:999px;
  box-shadow:0 12px 30px -8px rgba(6,30,36,0.5);
  opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:10000;
}
.afp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ─── Responsive ─── */
@media (max-width:720px){
  .afp-overlay{padding:12px;align-items:flex-end}
  .afp-modal{max-height:calc(100dvh - 24px);width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:none}
  .afp-hero{grid-template-columns:1fr;gap:16px}
  .afp-media{max-width:300px;margin:0 auto}
  .afp-sections{gap:20px}
  .afp-spec{flex-direction:column;gap:2px}
  .afp-spec dt{flex:none}
}
@media (max-width:420px){
  .afp-close{top:12px;right:12px;width:36px;height:36px}
  .afp-actions .afp-buy{flex:1;justify-content:center}
}
/* Landscape short screens */
@media (max-height:520px) and (orientation:landscape){
  .afp-overlay{align-items:flex-start;padding:10px}
  .afp-modal{max-height:calc(100dvh - 20px)}
  .afp-hero{grid-template-columns:160px 1fr;padding:16px}
}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .afp-overlay,.afp-modal,.afp-faq-a,.afp-btn,.afp-buy,.afp-rel{transition:none!important}
}