/**
 * صفحه‌ساز زسابت — استایل رندر المنت‌ها در سایت
 * از متغیرهای رنگی قالب (دارک/لایت) پیروی می‌کند.
 */

/* ============================ ردیف (بخش) ============================ */
.zspb-row {
        position: relative;
        padding: 56px 0;
        box-sizing: border-box;
}
.zspb-row__inner,
.zspb-row__full {
        position: relative;
        z-index: 2;
        width: 100%;
}
.zspb-row__inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
}
.zspb-row__overlay {
        position: absolute;
        inset: 0;
        background: #02100a;
        z-index: 1;
        pointer-events: none;
}
.zspb-row--pattern::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("../img/pattern.png");
        background-size: 420px;
        opacity: .05;
        pointer-events: none;
        z-index: 0;
}

.zspb-cols {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        margin: 0 -14px;
}
.zspb-col {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 14px;
        box-sizing: border-box;
}
.zspb-col--d12 { flex: 0 0 100%; max-width: 100%; }
.zspb-col--d11 { flex: 0 0 91.666%; max-width: 91.666%; }
.zspb-col--d10 { flex: 0 0 83.333%; max-width: 83.333%; }
.zspb-col--d9  { flex: 0 0 75%; max-width: 75%; }
.zspb-col--d8  { flex: 0 0 66.666%; max-width: 66.666%; }
.zspb-col--d7  { flex: 0 0 58.333%; max-width: 58.333%; }
.zspb-col--d6  { flex: 0 0 50%; max-width: 50%; }
.zspb-col--d5  { flex: 0 0 41.666%; max-width: 41.666%; }
.zspb-col--d4  { flex: 0 0 33.333%; max-width: 33.333%; }
.zspb-col--d3  { flex: 0 0 25%; max-width: 25%; }
.zspb-col--d2  { flex: 0 0 16.666%; max-width: 16.666%; }
.zspb-col--d1  { flex: 0 0 8.333%; max-width: 8.333%; }

@media (max-width: 860px) {
        .zspb-cols { gap: 18px; }
        .zspb-col { flex: 0 0 100%; max-width: 100%; padding: 0; }
        .zspb-col--m12 { flex: 0 0 100%; max-width: 100%; }
        .zspb-col--m6  { flex: 0 0 50%; max-width: 50%; }
        .zspb-col--m4  { flex: 0 0 33.333%; max-width: 33.333%; }
        .zspb-col--m3  { flex: 0 0 25%; max-width: 25%; }
}

/* ============================ متن و عنوان ============================ */
.zspb-text {
        color: var(--foreground, inherit);
        word-break: break-word;
}
.zspb-text > * { margin: 0 0 .9em; }
.zspb-text > *:last-child { margin-bottom: 0; }
.zspb-text a { color: var(--primary, #14b07f); }

.zspb-heading { display: block; }
.zspb-heading__title {
        margin: 0;
        line-height: 1.5;
        color: var(--foreground, inherit);
        word-break: break-word;
}
.zspb-heading__line {
        display: block;
        width: 72px;
        height: 3px;
        margin: 14px auto 0;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--primary, #14b07f), var(--gold, #d9b45c));
}
.zspb-heading--center .zspb-heading__line { margin-inline: auto; }
.zspb-heading--right .zspb-heading__line { margin-inline: 0 auto; }
.zspb-heading--left .zspb-heading__line { margin-inline: auto 0; }
.zspb-heading__sub {
        margin: 12px 0 0;
        color: var(--muted-foreground, #8ba698);
        font-size: .98rem;
        line-height: 1.9;
}
.zspb-heading--right .zspb-heading__sub { text-align: right; }
.zspb-heading--left .zspb-heading__sub { text-align: left; }

/* ============================ دکمه ============================ */
.zspb-btnwrap { margin-bottom: 8px; }
.zspb-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 26px;
        border-radius: 14px;
        font-weight: 700;
        font-size: .95rem;
        line-height: 1.6;
        text-decoration: none !important;
        cursor: pointer;
        border: 1.5px solid transparent;
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
        box-sizing: border-box;
}
.zspb-btn .icon { width: 18px; height: 18px; }
.zspb-btn:hover { transform: translateY(-2px); }
.zspb-btn--sm { padding: 9px 18px; font-size: .86rem; }
.zspb-btn--lg { padding: 15px 34px; font-size: 1.05rem; }
.zspb-btn--full { display: flex; justify-content: center; width: 100%; }

.zspb-btn--solid {
        background: var(--primary, #14b07f);
        color: var(--primary-foreground, #04130d);
        box-shadow: 0 10px 30px -12px var(--primary-glow, rgba(20,176,127,.35));
}
.zspb-btn--soft {
        background: var(--secondary, #0e1e17);
        color: var(--secondary-foreground, #a9dcc4);
        border-color: var(--line, #182b22);
}
.zspb-btn--ghost {
        background: transparent;
        color: var(--primary, #14b07f);
        box-shadow: inset 0 0 0 1px var(--primary, #14b07f), 0 0 24px -6px var(--primary-glow, rgba(20,176,127,.35));
}
.zspb-btn--outline {
        background: transparent;
        color: var(--foreground, #e4f1e9);
        border-color: var(--border, #1a2f26);
}
.zspb-btn--gold {
        background: linear-gradient(135deg, var(--gold, #d9b45c), var(--gold-soft, #f0d79b));
        color: #241a05;
}

/* ============================ جداکننده و فاصله ============================ */
.zspb-divider { border: 0; }
.zspb-divider--solid { background: var(--line, #182b22); }
.zspb-divider--dashed { background: repeating-linear-gradient(90deg, var(--line, #182b22) 0 12px, transparent 12px 22px); height: 2px !important; }
.zspb-divider--dots {
        background: radial-gradient(circle, var(--primary, #14b07f) 2.4px, transparent 2.8px) !important;
        background-size: 16px 6px !important;
        background-repeat: repeat-x !important;
        background-position: center !important;
        height: 6px !important;
        opacity: .7;
}
.zspb-divider--glow {
        background: linear-gradient(90deg, transparent, var(--primary, #14b07f), transparent) !important;
        height: 2px !important;
        box-shadow: 0 0 18px -2px var(--primary-glow, rgba(20,176,127,.5));
}
.zspb-gap { width: 100%; }
@media (max-width: 860px) {
        .zspb-gap { height: var(--zspb-gap-m, 40px) !important; }
}

/* ============================ آیکن ============================ */
.zspb-ico { display: block; }
.zspb-ico--center { text-align: center; }
.zspb-ico--left { text-align: left; }
.zspb-ico--right { text-align: right; }
.zspb-ico__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: transform .2s ease;
}
a:hover > .zspb-ico__badge { transform: translateY(-3px) scale(1.05); }

/* ============================ تصویر ============================ */
.zspb-image img { height: auto; }
.zspb-image--empty {
        border: 1.5px dashed var(--border, #1a2f26);
        border-radius: 14px;
        padding: 34px;
        text-align: center;
        color: var(--muted-foreground, #8ba698);
}
.zspb-image .zspb-lightbox { display: inline-block; cursor: zoom-in; }
#zspb-lightbox-overlay {
        position: fixed;
        inset: 0;
        background: rgba(2, 10, 6, .88);
        z-index: 99999;
        display: none;
        align-items: center;
        justify-content: center;
        cursor: zoom-out;
        padding: 30px;
}
#zspb-lightbox-overlay.is-open { display: flex; }
#zspb-lightbox-overlay img { max-width: 94%; max-height: 92%; border-radius: 14px; }

/* ============================ ویدیو ============================ */
.zspb-video {
        position: relative;
        width: 100%;
        overflow: hidden;
        background: var(--card, #0a130f);
}
.zspb-video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
}
.zspb-video--empty, .zspb-slider--empty, .zspb-acc--empty, .zspb-tabs--empty, .zspb-map--empty {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 120px;
        border: 1.5px dashed var(--border, #1a2f26);
        border-radius: 14px;
        color: var(--muted-foreground, #8ba698);
        font-size: .9rem;
}

/* ============================ اسلایدر ============================ */
.zspb-slider {
        position: relative;
        overflow: hidden;
        background: var(--card, #0a130f);
        box-sizing: border-box;
}
.zspb-slider__track { position: absolute; inset: 0; }
.zspb-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity .7s ease;
        pointer-events: none;
}
.zspb-slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
.zspb-slide__img {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
}
.zspb-slide__shade { position: absolute; inset: 0; background: #02100a; }
.zspb-slide__body {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 10px;
        padding: 30px;
        color: #eafff5;
}
.zspb-slide__title { margin: 0; font-size: 1.7rem; font-weight: 800; }
.zspb-slide__text { margin: 0; max-width: 640px; opacity: .92; line-height: 1.9; }
.zspb-slider__dots {
        position: absolute;
        bottom: 14px;
        left: 0; right: 0;
        display: flex;
        justify-content: center;
        gap: 7px;
        z-index: 3;
}
.zspb-slider__dot {
        width: 9px; height: 9px;
        border-radius: 50%;
        border: 0;
        background: rgba(255,255,255,.45);
        cursor: pointer;
        padding: 0;
        transition: transform .2s ease, background .2s ease;
}
.zspb-slider__dot.is-active { background: var(--primary, #14b07f); transform: scale(1.3); }
.zspb-slider__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        width: 42px; height: 42px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.25);
        background: rgba(2, 12, 8, .45);
        color: #eafff5;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .2s ease;
}
.zspb-slider__arrow:hover { background: var(--primary, #14b07f); }
.zspb-slider__arrow .icon { width: 18px; height: 18px; }
.zspb-slider__arrow--next { left: 14px; }
.zspb-slider__arrow--prev { right: 14px; }
@media (max-width: 720px) {
        .zspb-slider { height: 280px !important; }
        .zspb-slide__title { font-size: 1.2rem; }
}

/* ============================ بنر ============================ */
.zspb-banner {
        position: relative;
        overflow: hidden;
        background: var(--card, #0a130f);
}
.zspb-banner__img {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        transition: transform 1.2s ease;
}
.zspb-banner--zoom:hover .zspb-banner__img { transform: scale(1.06); }
.zspb-banner__shade { position: absolute; inset: 0; background: #02100a; }
.zspb-banner__body {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 8px;
        padding: 26px;
        color: #eafff5;
}
.zspb-banner--top .zspb-banner__body { justify-content: flex-start; }
.zspb-banner--bottom .zspb-banner__body { justify-content: flex-end; }
.zspb-banner__title { margin: 0; font-size: 1.5rem; font-weight: 800; }
.zspb-banner__sub { margin: 0; opacity: .9; line-height: 1.9; max-width: 560px; }
.zspb-banner__body .zspb-btn { margin-top: 6px; pointer-events: none; }

/* ============================ نوشته‌ها (اخبار) ============================ */
.zspb-posts {
        display: grid;
        gap: 22px;
}
.zspb-posts--c2 { grid-template-columns: repeat(2, 1fr); }
.zspb-posts--c3 { grid-template-columns: repeat(3, 1fr); }
.zspb-posts--c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
        .zspb-posts--c3, .zspb-posts--c4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
        .zspb-posts--c2, .zspb-posts--c3, .zspb-posts--c4 { grid-template-columns: 1fr; }
}
.zspb-post {
        background: var(--card, #0a130f);
        border: 1px solid var(--line, #182b22);
        border-radius: 18px;
        overflow: hidden;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.zspb-post:hover {
        transform: translateY(-4px);
        border-color: var(--primary, #14b07f);
        box-shadow: 0 20px 44px -22px rgba(0,0,0,.55);
}
.zspb-post__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.zspb-post__thumb { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--muted, #0d1813); }
.zspb-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.zspb-post:hover .zspb-post__thumb img { transform: scale(1.05); }
.zspb-post__body { display: block; padding: 16px 18px 20px; }
.zspb-post__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.zspb-post__date { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-foreground, #8ba698); font-size: .8rem; }
.zspb-post__date .icon { width: 14px; height: 14px; }
.zspb-post__cat {
        display: inline-block;
        font-size: .72rem;
        padding: 3px 10px;
        border-radius: 99px;
        background: color-mix(in srgb, var(--primary, #14b07f) 14%, transparent);
        color: var(--primary, #14b07f);
        font-weight: 700;
}
.zspb-post__title { margin: 0 0 8px; font-size: 1.02rem; font-weight: 700; line-height: 1.7; color: var(--foreground, #e4f1e9); }
.zspb-post__excerpt { margin: 0; font-size: .86rem; color: var(--muted-foreground, #8ba698); line-height: 1.9; }
.zspb-posts__empty { grid-column: 1 / -1; text-align: center; color: var(--muted-foreground, #8ba698); }
.zspb-posts__more { text-align: center; margin-top: 24px; }

/* ============================ آکاردئون ============================ */
.zspb-acc { display: block; }
.zspb-acc__item {
        background: var(--card, #0a130f);
        border: 1px solid var(--line, #182b22);
        border-radius: 14px;
        margin-bottom: 10px;
        overflow: hidden;
        transition: border-color .2s ease;
}
.zspb-acc__item.is-open { border-color: var(--primary, #14b07f); }
.zspb-acc__head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: transparent;
        border: 0;
        color: var(--foreground, #e4f1e9);
        font: inherit;
        font-weight: 700;
        padding: 15px 18px;
        cursor: pointer;
        text-align: right;
}
.zspb-acc__chev { display: inline-flex; transition: transform .25s ease; color: var(--primary, #14b07f); }
.zspb-acc__chev .icon { width: 16px; height: 16px; }
.zspb-acc__item.is-open .zspb-acc__chev { transform: rotate(180deg); }
.zspb-acc__body {
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
}
.zspb-acc__item.is-open .zspb-acc__body { max-height: 1200px; }
.zspb-acc__inner {
        padding: 0 18px 18px;
        color: var(--muted-foreground, #8ba698);
        line-height: 2;
}
.zspb-acc__inner > *:first-child { margin-top: 0; }

/* ============================ تب ============================ */
.zspb-tabs__nav {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--line, #182b22);
        padding-bottom: 10px;
        margin-bottom: 18px;
}
.zspb-tabs__btn {
        border: 1px solid var(--line, #182b22);
        background: var(--surface, #0a130f);
        color: var(--muted-foreground, #8ba698);
        padding: 9px 20px;
        border-radius: 99px;
        cursor: pointer;
        font: inherit;
        font-size: .9rem;
        font-weight: 700;
        transition: all .2s ease;
}
.zspb-tabs__btn.is-active {
        background: var(--primary, #14b07f);
        border-color: var(--primary, #14b07f);
        color: var(--primary-foreground, #04130d);
}
.zspb-tabs__panel { display: none; color: var(--foreground, #e4f1e9); line-height: 2; }
.zspb-tabs__panel.is-active { display: block; animation: zspb-fadein .4s ease; }
@keyframes zspb-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================ شمارنده ============================ */
.zspb-counter {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        padding: 22px 14px;
}
.zspb-counter__icon { color: var(--primary, #14b07f); }
.zspb-counter__icon .icon { width: 34px; height: 34px; }
.zspb-counter__num {
        font-size: 2.3rem;
        font-weight: 900;
        color: var(--zspb-count-color, var(--primary, #14b07f));
        line-height: 1.3;
        font-variant-numeric: tabular-nums;
}
.zspb-counter__title { color: var(--muted-foreground, #8ba698); font-size: .9rem; line-height: 1.8; }

/* ============================ نقشه ============================ */
.zspb-map {
        overflow: hidden;
        background: var(--card, #0a130f);
        position: relative;
}
.zspb-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================ نقل قول ============================ */
.zspb-quote { margin: 0; }
.zspb-quote--card {
        background: var(--card, #0a130f);
        border: 1px solid var(--line, #182b22);
        border-radius: 18px;
        padding: 26px 30px;
        position: relative;
}
.zspb-quote--card::before {
        content: "❝";
        position: absolute;
        top: 6px;
        inset-inline-start: 18px;
        font-size: 2.4rem;
        color: var(--primary, #14b07f);
        opacity: .35;
}
.zspb-quote__text {
        margin: 0;
        font-size: 1.05rem;
        line-height: 2.1;
        color: var(--foreground, #e4f1e9);
}
.zspb-quote__author {
        margin-top: 12px;
        font-weight: 700;
        color: var(--primary, #14b07f);
        font-size: .92rem;
}
.zspb-quote__author small { display: block; color: var(--muted-foreground, #8ba698); font-weight: 400; }
.zspb-quote--plain { border-inline-start: 3px solid var(--primary, #14b07f); padding-inline-start: 18px; }
.zspb-quote--right { text-align: right; }
.zspb-quote--center { text-align: center; }
.zspb-quote--left { text-align: left; }

/* ============================ باکس ویژه ============================ */
.zspb-fbox {
        background: var(--card, #0a130f);
        border: 1px solid var(--line, #182b22);
        padding: 28px 24px;
        height: 100%;
        box-sizing: border-box;
        transition: transform .25s ease, border-color .25s ease;
}
.zspb-fbox:hover { transform: translateY(-4px); border-color: var(--primary, #14b07f); }
.zspb-fbox__icon {
        display: inline-flex;
        width: 58px; height: 58px;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: color-mix(in srgb, var(--primary, #14b07f) 12%, transparent);
        color: var(--primary, #14b07f);
        margin-bottom: 14px;
}
.zspb-fbox__icon .icon { width: 28px; height: 28px; }
.zspb-fbox__title { margin: 0 0 8px; font-size: 1.1rem; color: var(--foreground, #e4f1e9); }
.zspb-fbox__text { color: var(--muted-foreground, #8ba698); line-height: 2; font-size: .92rem; }
.zspb-fbox .zspb-btn { margin-top: 14px; }

/* ============================ انیمیشن ورود ============================ */
.zspb-anim { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.zspb-anim--fade-up { transform: translateY(26px); }
.zspb-anim--fade-right { transform: translateX(26px); }
.zspb-anim--fade-left { transform: translateX(-26px); }
.zspb-anim--zoom-in { transform: scale(.94); }
.zspb-anim.zspb-in { opacity: 1; transform: none; }
.zs-pb-mode .zspb-anim { opacity: 1 !important; transform: none !important; }

/* ============================ نمایش‌های شرطی ============================ */
@media (max-width: 720px) {
        .zspb-hide-m { display: none !important; }
}
@media (min-width: 721px) and (max-width: 1024px) {
        .zspb-hide-t { display: none !important; }
}
@media (min-width: 1025px) {
        .zspb-hide-d { display: none !important; }
}