/* ============================================================================
   استایل مشترک صفحات جزئیات (محصول/مقاله/دوره/فایل کتابخانه/تاپیک انجمن).
   روی همان توکن‌های tokens.css و کلاس‌های components.css سوار می‌شود — رنگ،
   فونت و فاصله‌ها از همان‌جا می‌آیند تا صفحات جزئیات هم‌شکل بقیه‌ی سایت باشند.
   ============================================================================ */

.detail-shell{max-width:1100px;margin-inline:auto;padding:calc(var(--nav-h) + var(--sp-6)) var(--sp-4) var(--sp-8);}

.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--ink-2);margin-bottom:var(--sp-5);}
.breadcrumb a{color:var(--ink-2);text-decoration:none;}
.breadcrumb a:hover{color:var(--brand);}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:var(--ink-1);font-weight:600;}

.detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-6);align-items:start;}
@media (max-width:860px){.detail-grid{grid-template-columns:1fr;}}

.detail-gallery{border-radius:var(--radius-lg,16px);overflow:hidden;background:var(--bg-2);aspect-ratio:4/3;position:relative;}
.detail-gallery img{width:100%;height:100%;object-fit:cover;display:block;}
.detail-gallery-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;}
.detail-gallery-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;cursor:pointer;opacity:.6;border:2px solid transparent;flex:0 0 auto;}
.detail-gallery-thumbs img.active{opacity:1;border-color:var(--brand);}

.detail-title{font-family:var(--font-en);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;margin-bottom:8px;}
.detail-meta-row{display:flex;flex-wrap:wrap;gap:14px;color:var(--ink-2);font-size:var(--fs-sm);margin-bottom:var(--sp-3);}
.detail-meta-row span{display:inline-flex;align-items:center;gap:6px;}

.price-row{display:flex;align-items:baseline;gap:12px;margin:var(--sp-3) 0;}
.price-now{font-size:1.6rem;font-weight:800;color:var(--brand);}
.price-old{font-size:1rem;color:var(--ink-2);text-decoration:line-through;}
.price-off{background:rgba(224,98,58,.15);color:var(--danger);border-radius:999px;padding:3px 10px;font-size:var(--fs-xs);font-weight:700;}

.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-4);}

.specs-table{width:100%;border-collapse:collapse;margin-top:var(--sp-4);}
.specs-table tr{border-bottom:1px solid var(--line);}
.specs-table td{padding:10px 4px;font-size:var(--fs-sm);}
.specs-table td:first-child{color:var(--ink-2);width:40%;}

.share-row{display:flex;gap:8px;margin-top:var(--sp-4);}
.share-btn{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--ink-1);border:1px solid var(--line);cursor:pointer;transition:.15s;}
.share-btn:hover{background:var(--brand);color:#08110c;border-color:var(--brand);}

.section-block{margin-top:var(--sp-8);}
.section-block > h3{font-family:var(--font-en);font-size:1.3rem;font-weight:700;margin-bottom:var(--sp-4);}

.rating-stars{display:inline-flex;gap:2px;color:#f5b301;}
.rating-stars.interactive i{cursor:pointer;}
.rating-summary{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:var(--fs-sm);}

.accordion-item{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;}
.accordion-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;background:var(--bg-2);font-weight:600;}
.accordion-head i{transition:transform .2s;}
.accordion-item.open .accordion-head i{transform:rotate(180deg);}
.accordion-body{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 16px;color:var(--ink-2);font-size:var(--fs-sm);}
.accordion-item.open .accordion-body{padding:12px 16px;}

.comment-item{border-bottom:1px solid var(--line);padding:14px 0;}
.comment-item:last-child{border-bottom:none;}
.comment-author{font-weight:700;font-size:var(--fs-sm);}
.comment-date{color:var(--ink-2);font-size:var(--fs-xs);margin-inline-start:8px;}
.comment-body{margin-top:6px;font-size:var(--fs-sm);line-height:1.8;}
.comment-form textarea{width:100%;min-height:90px;}
.login-required-note{background:var(--bg-2);border:1px dashed var(--line);border-radius:12px;padding:16px;text-align:center;color:var(--ink-2);font-size:var(--fs-sm);}
.login-required-note a{color:var(--brand);}

.like-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg-2);border-radius:999px;padding:8px 16px;cursor:pointer;color:var(--ink-1);font-family:inherit;font-size:var(--fs-sm);transition:.15s;}
.like-btn.sm{padding:4px 10px;font-size:.72rem;}
.like-btn.liked{background:rgba(224,98,58,.15);border-color:var(--danger);color:var(--danger);}
.like-btn:hover{border-color:var(--brand);}

.download-count-note{color:var(--ink-2);font-size:var(--fs-xs);margin-top:6px;}
.file-preview-box{border-radius:12px;overflow:hidden;background:var(--bg-2);min-height:220px;display:flex;align-items:center;justify-content:center;}
.file-preview-box img,.file-preview-box video{width:100%;max-height:420px;object-fit:contain;}
.file-preview-box audio{width:100%;padding:20px;}
.file-preview-box iframe{width:100%;height:420px;border:0;}
.file-preview-fallback{padding:40px;text-align:center;color:var(--ink-2);}
.file-preview-fallback i{font-size:2.4rem;margin-bottom:10px;color:var(--brand);}

/* --- بخش ب: گالری/ویدیو/PDF/فایل‌های ضمیمه در صفحه‌ی جزئیات --- */
.detail-gallery{cursor:zoom-in;}
.detail-gallery video{width:100%;height:100%;object-fit:contain;background:#000;}
.detail-gallery iframe{width:100%;height:100%;border:0;background:#fff;}
.detail-gallery-thumbs .thumb-btn{width:64px;height:64px;border-radius:8px;cursor:pointer;opacity:.6;border:2px solid transparent;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--bg-2);overflow:hidden;padding:0;}
.detail-gallery-thumbs .thumb-btn img{width:100%;height:100%;object-fit:cover;}
.detail-gallery-thumbs .thumb-btn i{color:var(--ink-2);font-size:1.1rem;}
.detail-gallery-thumbs .thumb-btn.active{opacity:1;border-color:var(--brand);}

.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:999;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);}
.lightbox-overlay img{max-width:100%;max-height:100%;border-radius:8px;}
.lightbox-close{position:absolute;top:var(--sp-4);left:var(--sp-4);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;}

.attached-files{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-4);}
.attached-file-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;}
.attached-file-row i{font-size:1.3rem;color:var(--brand);flex:0 0 auto;}
.attached-file-row .file-info{flex:1;min-width:0;}
.attached-file-row .file-name{font-weight:600;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.attached-file-row .file-size{color:var(--ink-2);font-size:var(--fs-xs);}


/* ===== دور ۶ (G): نظرات تودرتو ===== */
.cmt-section .cmt-list{display:flex;flex-direction:column;gap:12px;margin-top:var(--sp-4);}
.cmt{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.02);}
.cmt-replies{margin-top:12px;padding-inline-start:16px;border-inline-start:2px solid rgba(124,184,245,.25);display:flex;flex-direction:column;gap:10px;}
.cmt-replies.cmt-flat{padding-inline-start:0;border-inline-start:0;}
.cmt-replies .cmt{background:rgba(255,255,255,.015);}
.cmt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-sm);}
.cmt-avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;
  background:rgba(124,184,245,.18);color:#dbe8f7;flex-shrink:0;}
.cmt-author{font-weight:700;}
.cmt-date{color:var(--ink-2);font-size:var(--fs-xs);margin-inline-start:auto;}
.cmt-badge{font-size:.68rem;padding:2px 8px;border-radius:999px;background:rgba(255,216,154,.16);color:var(--accent-gold,#ffd89a);border:1px solid rgba(255,216,154,.35);}
.cmt-admin{border-color:rgba(255,216,154,.35);background:linear-gradient(180deg,rgba(255,216,154,.06),rgba(255,216,154,.02));}
.cmt-admin .cmt-avatar{background:rgba(255,216,154,.22);color:#ffd89a;}
.cmt-body{margin-top:8px;line-height:1.95;font-size:var(--fs-sm);overflow-wrap:anywhere;}
.cmt-actions{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:var(--fs-xs);color:var(--ink-2);}
.cmt-reply-btn{background:none;border:0;color:var(--accent-blue,#7cb8f5);cursor:pointer;font:inherit;padding:2px 0;}
.cmt-reply-btn:hover{text-decoration:underline;}
.cmt-form{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-3);}
.cmt-form-inline{margin-top:10px;}
.cmt-form-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cmt-form-msg{font-size:var(--fs-xs);color:var(--danger,#e5484d);}
.cmt-empty{color:var(--ink-2);font-size:var(--fs-sm);}
.cmt-highlight{box-shadow:0 0 0 2px rgba(255,216,154,.55);}

/* دور ۲۰ (فاز ۱): دکمه‌ی واضح «ثبت نظر» */
.cmt-form .cmt-submit{min-height:44px;padding:.55rem 1.4rem;font-weight:800;font-size:.95rem;display:inline-flex;align-items:center;gap:8px;border-radius:12px;box-shadow:0 6px 16px rgba(234,176,84,.28)}
.cmt-form .cmt-submit i{font-size:.85em}
.cmt-form-inline .cmt-submit{box-shadow:none;padding:.45rem 1rem}
@media (max-width:640px){.cmt-form:not(.cmt-form-inline) .cmt-submit{width:100%;justify-content:center}}
.cmt-form .cmt-submit,.cmt-form .cmt-submit:visited{background:linear-gradient(135deg,#f7c96b,#eab054 55%,#d9922b);color:#1b1305;border:1px solid #c98a2b;opacity:1;text-shadow:none}
.cmt-form .cmt-submit:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.cmt-form .cmt-submit:disabled{opacity:.6;cursor:wait}
.cmt-form .cmt-submit i{color:#1b1305}