/* ═════════════════════════════════════════════════════════════════════════════
   ترانه‌سراها CMS — Page Builder Front Styles [T66]
   استایل بلوک‌های صفحه‌ساز برای نمایش عمومی (page.php) و پیش‌نمایش پنل مدیریت.
   کلاس‌ها با پیشوند pb- مستقل از قالب کار می‌کنند و از CSS متغیرهای سایت
   (در صورت وجود) با مقدار جایگزین استفاده می‌کنند.
   ═════════════════════════════════════════════════════════════════════════════ */

.pb-block {
    --pb-primary: var(--primary-500, #6366f1);
    --pb-radius: 14px;
    position: relative;
    width: 100%;
}

/* ─── عرض محتوا ─── */
.pb-block.pb-w-narrow  { max-width: 720px; margin-inline: auto; }
.pb-block.pb-w-normal  { max-width: 900px; margin-inline: auto; }
.pb-block.pb-w-wide    { max-width: 1120px; margin-inline: auto; }
.pb-block.pb-w-full    { max-width: 100%; }

/* ═══ HERO ═══ */
.pb-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--pb-primary), #8b5cf6);
    color: #fff;
    border-radius: 0;
    background-size: cover;
    background-position: center;
}
.pb-hero-h-small  { min-height: 220px; padding: 3rem 1.5rem; }
.pb-hero-h-medium { min-height: 320px; padding: 4rem 1.5rem; }
.pb-hero-h-large  { min-height: 440px; padding: 5rem 1.5rem; }
.pb-hero-overlay {
    position: absolute;
    inset: 0;
    background: #0b1020;
    pointer-events: none;
}
.pb-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
}
.pb-hero-align-right { text-align: right; }
.pb-hero-align-left  { text-align: left; }
.pb-hero-title {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 .75rem;
    color: inherit;
}
.pb-hero-subtitle {
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    opacity: .92;
    margin: 0 0 1.75rem;
    line-height: 1.8;
    color: inherit;
}
.pb-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.pb-hero-align-right .pb-hero-actions { justify-content: flex-start; }
.pb-hero-align-left  .pb-hero-actions { justify-content: flex-start; }

/* ═══ دکمه‌ها ═══ */
.pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: 12px;
    transition: transform .2s, box-shadow .2s, background .2s;
    padding: 12px 26px;
    font-size: 1rem;
    line-height: 1.6;
}
.pb-btn-sm { padding: 8px 18px;  font-size: .875rem; }
.pb-btn-md { padding: 10px 22px; font-size: .95rem; }
.pb-btn-lg { padding: 14px 32px; font-size: 1.05rem; }
.pb-btn-primary { background: linear-gradient(135deg, var(--pb-primary), #8b5cf6); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--pb-primary) 35%, transparent); }
.pb-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--pb-primary) 45%, transparent); }
.pb-btn-outline { background: transparent; color: inherit; border: 2px solid currentColor; }
.pb-btn-outline:hover { transform: translateY(-2px); }
.pb-btn-light { background: #fff; color: #1e293b; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.pb-btn-light:hover { transform: translateY(-2px); }
.pb-btn-dark { background: #1e293b; color: #fff; }
.pb-block.pb-button { text-align: center; padding: 6px 0; }
.pb-align-right { text-align: right; }
.pb-align-left  { text-align: left; }
.pb-align-center{ text-align: center; }
.pb-block.pb-button.pb-align-right { text-align: right; }
.pb-block.pb-button.pb-align-left  { text-align: left; }

/* ═══ متن غنی ═══ */
.pb-rich { line-height: 2; font-size: 1rem; color: var(--gray-700, #334155); }
.pb-rich h1, .pb-rich h2, .pb-rich h3, .pb-rich h4 { line-height: 1.5; margin: 1.4em 0 .7em; color: var(--gray-900, #0f172a); }
.pb-rich h2 { font-size: 1.5rem; }
.pb-rich h3 { font-size: 1.25rem; }
.pb-rich p { margin: 0 0 1em; }
.pb-rich ul, .pb-rich ol { padding-right: 1.6em; margin: 1em 0; }
.pb-rich li { margin-bottom: .4em; }
.pb-rich a { color: var(--pb-primary); text-decoration: none; border-bottom: 1px dashed var(--pb-primary); }
.pb-rich a:hover { border-bottom-style: solid; }
.pb-rich img { max-width: 100%; height: auto; border-radius: 12px; }
.pb-rich blockquote {
    border-right: 4px solid var(--pb-primary);
    background: color-mix(in srgb, var(--pb-primary) 5%, transparent);
    padding: 1rem 1.4rem;
    border-radius: 0 12px 12px 0;
    margin: 1.4em 0;
}
.pb-rich table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.pb-rich th, .pb-rich td { border: 1px solid var(--gray-200, #e2e8f0); padding: .65rem .9rem; text-align: right; }
.pb-rich th { background: color-mix(in srgb, var(--pb-primary) 7%, transparent); font-weight: 700; }
.pb-rich code { background: var(--gray-100, #f1f5f9); padding: 2px 7px; border-radius: 6px; font-size: .9em; direction: ltr; display: inline-block; }
.pb-rich hr { border: none; height: 1px; background: var(--gray-200, #e2e8f0); margin: 2rem 0; }

/* ═══ تصویر / گالری / ویدیو ═══ */
.pb-image { text-align: center; padding: 8px 0; }
.pb-fig { margin: 0 auto; display: inline-block; max-width: 100%; }
.pb-image .pb-fig { display: block; margin: 0 auto; }
.pb-fig img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.pb-fig figcaption {
    text-align: center;
    font-size: .85rem;
    color: var(--gray-500, #64748b);
    padding-top: .6rem;
}
.pb-img-rounded .pb-fig img, .pb-img-rounded img { border-radius: var(--pb-radius); }
.pb-img-shadow .pb-fig img { box-shadow: 0 10px 30px rgba(0,0,0,.12); }

.pb-gallery { padding: 8px 0; }
.pb-gal-grid { display: grid; }
.pb-gal-item { margin: 0; position: relative; overflow: hidden; border-radius: 12px; }
.pb-gal-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.pb-gal-item:hover img { transform: scale(1.04); }
.pb-gal-item figcaption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.6rem .7rem .5rem;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: #fff;
    font-size: .8rem;
    text-align: center;
    opacity: 0;
    transition: opacity .25s;
}
.pb-gal-item:hover figcaption { opacity: 1; }

.pb-video { padding: 8px 0; }
.pb-video-fig { margin: 0; }
.pb-video-wrap {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--pb-radius);
    overflow: hidden;
    background: #000;
    box-shadow: 0 10px 30px rgba(0,0,0,.16);
}
.pb-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ═══ ویژگی‌ها ═══ */
.pb-features { padding: 10px 0 18px; text-align: center; }
.pb-sec-title {
    font-size: clamp(1.3rem, 3.4vw, 1.75rem);
    font-weight: 800;
    color: var(--gray-900, #0f172a);
    margin: 0 0 .4rem;
    text-align: center;
}
.pb-sec-subtitle {
    color: var(--gray-500, #64748b);
    text-align: center;
    margin: 0 0 1.6rem;
    font-size: 1rem;
}
.pb-feat-grid { display: grid; gap: 18px; margin-top: 10px; }
.pb-feat-item {
    background: var(--gray-50, #f8fafc);
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: var(--pb-radius);
    padding: 1.6rem 1.2rem;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pb-feat-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
    border-color: color-mix(in srgb, var(--pb-primary) 35%, var(--gray-200, #e2e8f0));
}
.pb-feat-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--pb-primary), #8b5cf6);
    border-radius: 16px;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pb-primary) 35%, transparent);
}
.pb-feat-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .45rem; color: var(--gray-900, #0f172a); }
.pb-feat-text { font-size: .9rem; color: var(--gray-500, #64748b); margin: 0; line-height: 1.9; }

/* ═══ نوار آمار ═══ */
.pb-stats { padding: 2.4rem 1.25rem; margin: 10px 0; }
.pb-stats-primary { background: linear-gradient(135deg, var(--pb-primary), #8b5cf6); color: #fff; }
.pb-stats-dark { background: #0f172a; color: #fff; }
.pb-stats-light { background: var(--gray-50, #f8fafc); color: var(--gray-900, #0f172a); border: 1px solid var(--gray-200, #e2e8f0); }
.pb-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.pb-stat-value {
    display: block;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 800;
    line-height: 1.3;
}
.pb-stat-label { display: block; font-size: .9rem; opacity: .85; margin-top: .25rem; }
.pb-stats-light .pb-stat-value { color: var(--pb-primary); }

/* ═══ نقل قول ═══ */
.pb-quote { padding: 14px 0; }
.pb-quote blockquote {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    padding: 2rem 2.6rem;
    text-align: center;
    background: var(--gray-50, #f8fafc);
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: var(--pb-radius);
}
.pb-quote blockquote::before {
    content: '\f10e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: -16px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--pb-primary), #8b5cf6);
    color: #fff;
    border-radius: 50%;
    font-size: 1rem;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--pb-primary) 40%, transparent);
}
.pb-quote p { font-size: 1.1rem; font-weight: 600; line-height: 2; color: var(--gray-800, #1e293b); margin: 0 0 .75rem; }
.pb-quote cite { font-style: normal; font-size: .9rem; color: var(--gray-500, #64748b); }

/* ═══ باکس هشدار ═══ */
.pb-alert { padding: 8px 0; }
.pb-alert-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 1.1rem 1.3rem;
    border-radius: var(--pb-radius);
    border: 1px solid transparent;
    line-height: 1.9;
}
.pb-alert-box > i { font-size: 1.25rem; margin-top: .2rem; }
.pb-alert-box p { margin: .15rem 0 0; }
.pb-alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.pb-alert-info    > i { color: #3b82f6; }
.pb-alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.pb-alert-success > i { color: #10b981; }
.pb-alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.pb-alert-warning > i { color: #f59e0b; }
.pb-alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.pb-alert-danger  > i { color: #ef4444; }

/* ═══ سوالات متداول ═══ */
.pb-faq { padding: 10px 0; max-width: 860px; margin: 0 auto; }
.pb-faq-item {
    background: var(--gray-50, #f8fafc);
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}
.pb-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--gray-900, #0f172a);
    transition: color .2s;
}
.pb-faq-item summary::-webkit-details-marker { display: none; }
.pb-faq-item summary:hover { color: var(--pb-primary); }
.pb-faq-item summary i { transition: transform .25s; color: var(--pb-primary); font-size: .85rem; }
.pb-faq-item[open] summary i { transform: rotate(180deg); }
.pb-faq-answer {
    padding: 0 1.25rem 1.1rem;
    color: var(--gray-600, #475569);
    line-height: 2;
    border-top: 1px dashed var(--gray-200, #e2e8f0);
    padding-top: .8rem;
    margin-top: -1px;
}

/* ═══ اطلاعات تماس ═══ */
.pb-contact { padding: 10px 0; }
.pb-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    max-width: 1000px;
    margin: 0 auto;
}
.pb-contact-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--gray-50, #f8fafc);
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 12px;
    padding: 1.05rem 1.2rem;
    transition: border-color .2s, box-shadow .2s;
}
.pb-contact-row:hover { border-color: color-mix(in srgb, var(--pb-primary) 40%, var(--gray-200, #e2e8f0)); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.pb-contact-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pb-primary) 12%, transparent);
    color: var(--pb-primary);
    font-size: 1.1rem;
}
.pb-contact-label { display: block; font-size: .78rem; color: var(--gray-500, #64748b); margin-bottom: .15rem; }
.pb-contact-value { display: block; font-weight: 600; color: var(--gray-800, #1e293b); font-size: .95rem; line-height: 1.8; }
.pb-contact-value a { color: var(--pb-primary); text-decoration: none; }
.pb-contact-value a:hover { text-decoration: underline; }

/* ═══ شبکه‌های اجتماعی ═══ */
.pb-social { text-align: center; padding: 10px 0 16px; }
.pb-social-grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pb-social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: .7rem 1.25rem;
    border-radius: 999px;
    background: var(--gray-50, #f8fafc);
    border: 1px solid var(--gray-200, #e2e8f0);
    color: var(--gray-700, #334155);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: all .2s;
}
.pb-social-link i { font-size: 1.1rem; }
.pb-social-link:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.09); }
.pb-social-instagram i { color: #e1306c; }
.pb-social-telegram  i { color: #229ed9; }
.pb-social-bale      i { color: #16a34a; }
.pb-social-whatsapp  i { color: #25d366; }
.pb-social-youtube   i { color: #ff0000; }
.pb-social-aparat    i { color: #ed145b; }
.pb-social-twitter   i { color: #111; }
.pb-social-linkedin  i { color: #0a66c2; }
.pb-social-website   i { color: var(--pb-primary); }

/* ═══ نقشه ═══ */
.pb-map { padding: 8px 0; }
.pb-map-wrap {
    border-radius: var(--pb-radius);
    overflow: hidden;
    border: 1px solid var(--gray-200, #e2e8f0);
    box-shadow: 0 8px 22px rgba(0,0,0,.07);
}
.pb-map-wrap iframe { width: 100%; border: 0; display: block; }

/* ═══ فاصله / جداکننده / HTML ═══ */
.pb-spacer { background: transparent; }
.pb-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 0;
    margin: 0 auto;
}
.pb-divider span { display: block; width: 100%; height: 1px; background: var(--gray-200, #e2e8f0); }
.pb-div-dashed span { height: 0; border-top: 2px dashed var(--gray-300, #cbd5e1); background: transparent; }
.pb-div-dotted span { height: 0; border-top: 3px dotted var(--gray-300, #cbd5e1); background: transparent; }
.pb-div-gradient span {
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--pb-primary), transparent);
}
.pb-html { width: 100%; }

/* ═══ حالت تیره سایت ═══ */
body.dark-mode .pb-rich { color: var(--gray-700, #cbd5e1); }
body.dark-mode .pb-rich h1, body.dark-mode .pb-rich h2, body.dark-mode .pb-rich h3, body.dark-mode .pb-rich h4 { color: #f1f5f9; }
body.dark-mode .pb-sec-title,
body.dark-mode .pb-feat-title,
body.dark-mode .pb-faq-item summary,
body.dark-mode .pb-contact-value,
body.dark-mode .pb-quote p { color: #f1f5f9; }
body.dark-mode .pb-sec-subtitle,
body.dark-mode .pb-feat-text,
body.dark-mode .pb-faq-answer,
body.dark-mode .pb-quote cite,
body.dark-mode .pb-contact-label { color: #94a3b8; }
body.dark-mode .pb-feat-item,
body.dark-mode .pb-faq-item,
body.dark-mode .pb-contact-row,
body.dark-mode .pb-quote blockquote { background: #1e293b; border-color: #334155; }
body.dark-mode .pb-alert-info    { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.35); }
body.dark-mode .pb-alert-success { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
body.dark-mode .pb-alert-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
body.dark-mode .pb-alert-danger  { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
body.dark-mode .pb-stats-light { background: #1e293b; border-color: #334155; }
body.dark-mode .pb-divider span { background: #334155; }
body.dark-mode .pb-social-link { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* ═══ ریسپانسیو ═══ */
@media (max-width: 768px) {
    .pb-hero-h-small  { min-height: 180px; padding: 2.2rem 1.1rem; }
    .pb-hero-h-medium { min-height: 260px; padding: 2.6rem 1.1rem; }
    .pb-hero-h-large  { min-height: 340px; padding: 3rem 1.1rem; }
    .pb-hero-actions .pb-btn { width: 100%; }
    .pb-hero-actions { flex-direction: column; }
    .pb-feat-grid { grid-template-columns: 1fr !important; }
    .pb-gal-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .pb-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .pb-quote blockquote { padding: 1.7rem 1.2rem .2rem; }
    .pb-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .pb-gal-grid { grid-template-columns: 1fr !important; }
    .pb-stats-grid { grid-template-columns: 1fr; gap: 12px; }
    .pb-btn { width: auto; }
}