/* ══════════════════════════════════════════════════════════════════
   Admin Showcase — AIStoreShop Home Page
   ══════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ────────────────────────────────────────────── */
.showcase-section {
    padding: 80px 0;
    background: #f8fafc;
}
.showcase-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 100px;
    background: rgba(79,70,229,.08);
    color: #4f46e5;
    font-size: .83rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ── Tab navigation ─────────────────────────────────────────────── */
.showcase-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.sc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 100px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    font-family: 'Vazirmatn', sans-serif;
    position: relative;
}
.sc-tab:hover {
    border-color: #a5b4fc;
    color: #4f46e5;
    background: #f5f3ff;
}
.sc-tab.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
    box-shadow: 0 4px 14px rgba(79,70,229,.3);
}
.sc-tab-badge {
    font-size: .65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 100px;
    background: #fbbf24;
    color: #78350f;
    letter-spacing: .03em;
}
.sc-tab.active .sc-tab-badge {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* ── Panel visibility ───────────────────────────────────────────── */
.sc-panel { display: none; }
.sc-panel.active { display: block; }

/* ── Feature grid (large + small-grid) ─────────────────────────── */
.sc-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) { .sc-feature-grid { grid-template-columns: 1fr; } }

/* ── Large feature card ─────────────────────────────────────────── */
.sc-feat--large {
    background:
        linear-gradient(#fff, #fafbff) padding-box,
        linear-gradient(135deg, #818cf8 0%, #c084fc 40%, #38bdf8 100%) border-box;
    border: 2.5px solid transparent;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(79,70,229,.08), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .25s, box-shadow .25s, background .25s;
}
.sc-feat--large:hover {
    transform: translateY(-5px);
    background:
        linear-gradient(#fff, #f8f5ff) padding-box,
        linear-gradient(135deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%) border-box;
    box-shadow: 0 20px 48px rgba(99,102,241,.2), 0 4px 12px rgba(0,0,0,.06);
}
.sc-feat-img-wrap {
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    position: relative;
}
.sc-feat-img-wrap.sc-feat-img-placeholder::before {
    content: '\f03e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #cbd5e1;
}
.sc-feat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform .4s;
}
.sc-feat--large:hover .sc-feat-img { transform: scale(1.03); }

.sc-feat-body {
    padding: 24px;
}
.sc-feat-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    margin-bottom: 12px;
}
.sc-feat-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}
.sc-feat-desc {
    font-size: .88rem;
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 14px;
}
.sc-feat-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.sc-feat-tags span {
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 100px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* ── Small features grid ────────────────────────────────────────── */
.sc-feat-small-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) { .sc-feat-small-grid { grid-template-columns: 1fr; } }

.sc-feat--small {
    background:
        linear-gradient(#fff, #fafbff) padding-box,
        linear-gradient(135deg, #818cf8 0%, #c084fc 40%, #38bdf8 100%) border-box;
    border: 2.5px solid transparent;
    border-radius: 18px;
    padding: 0 0 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(79,70,229,.07), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .2s, box-shadow .2s, background .2s;
}
.sc-feat--small:hover {
    transform: translateY(-4px);
    background:
        linear-gradient(#fff, #f8f5ff) padding-box,
        linear-gradient(135deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%) border-box;
    box-shadow: 0 14px 36px rgba(99,102,241,.18), 0 2px 8px rgba(0,0,0,.05);
}
.sc-feat-img-wrap.small {
    height: 110px;
    border-radius: 0;
}
.sc-feat--small .sc-feat-icon {
    margin: 14px 14px 8px;
    width: 34px; height: 34px;
    font-size: .85rem;
    border-radius: 10px;
}
.sc-feat-title-sm {
    font-size: .88rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 14px 4px;
}
.sc-feat-desc-sm {
    font-size: .76rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0 14px;
}

/* ── AI tab ─────────────────────────────────────────────────────── */
.sc-ai-header {
    text-align: center;
    margin-bottom: 28px;
}
.sc-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 100px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    font-size: .82rem;
    font-weight: 700;
    border: 1px solid rgba(253,230,138,.6);
}
.sc-ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 768px) { .sc-ai-grid { grid-template-columns: 1fr; } }

.sc-ai-card {
    background:
        linear-gradient(#fff, #fafbff) padding-box,
        linear-gradient(135deg, #818cf8 0%, #c084fc 40%, #38bdf8 100%) border-box;
    border: 2.5px solid transparent;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 3px 20px rgba(79,70,229,.07), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .2s, box-shadow .2s, background .2s;
}
.sc-ai-card:hover {
    transform: translateY(-4px);
    background:
        linear-gradient(#fff, #f5f0ff) padding-box,
        linear-gradient(135deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%) border-box;
    box-shadow: 0 16px 40px rgba(99,102,241,.18), 0 3px 10px rgba(0,0,0,.05);
}
.sc-ai-img-wrap {
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    position: relative;
}
.sc-ai-img-wrap.sc-feat-img-placeholder::before {
    content: '\f03e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #cbd5e1;
}
.sc-ai-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform .4s;
}
.sc-ai-card:hover .sc-ai-img-wrap img { transform: scale(1.04); }

.sc-ai-body {
    padding: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.sc-ai-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.sc-ai-content h4 {
    font-size: .95rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}
.sc-ai-content p {
    font-size: .8rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 10px;
}
.sc-ai-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.sc-ai-tags span {
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 100px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    color: #4f46e5;
    border: 1px solid rgba(165,180,252,.4);
}

/* ── Settings tab uniform grid ──────────────────────────────────── */
.sc-settings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 1100px) { .sc-settings-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .sc-settings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .sc-settings-grid { grid-template-columns: 1fr; } }

.sc-setting-card {
    background:
        linear-gradient(#fff, #fafbff) padding-box,
        linear-gradient(135deg, #818cf8 0%, #c084fc 40%, #38bdf8 100%) border-box;
    border: 2.5px solid transparent;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(79,70,229,.07), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .2s, box-shadow .2s, background .2s;
}
.sc-setting-card:hover {
    transform: translateY(-4px);
    background:
        linear-gradient(#fff, #f8f5ff) padding-box,
        linear-gradient(135deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%) border-box;
    box-shadow: 0 16px 40px rgba(99,102,241,.18), 0 2px 8px rgba(0,0,0,.05);
}
.sc-setting-img-wrap {
    width: 100%;
    height: 130px;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    position: relative;
}
.sc-setting-img-wrap.sc-feat-img-placeholder::before {
    content: '\f03e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #cbd5e1;
}
.sc-setting-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform .35s;
    display: block;
}
.sc-setting-card:hover .sc-setting-img-wrap img { transform: scale(1.04); }

/* ── Small card img ─────────────────────────────────────────────── */
.sc-feat-img-wrap.small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform .35s;
}
.sc-feat--small:hover .sc-feat-img-wrap.small img { transform: scale(1.04); }

/* ══════════════════════════════════════════════════════════════════
   Lightbox Modal
   ══════════════════════════════════════════════════════════════════ */
.sc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(5, 5, 20, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.sc-lightbox.open {
    opacity: 1;
    pointer-events: all;
}
.sc-lightbox-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: min(97vw, 1600px);
    width: min(97vw, 1600px);
    transform: scale(.9) translateY(16px);
    transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
.sc-lightbox.open .sc-lightbox-inner {
    transform: scale(1) translateY(0);
}
.sc-lightbox-img {
    display: block;
    max-width: 100%;
    width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
}
.sc-lightbox-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}
.sc-lightbox-caption {
    color: rgba(255,255,255,.92);
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Vazirmatn', sans-serif;
    letter-spacing: .01em;
}
.sc-lightbox-hint {
    color: rgba(255,255,255,.38);
    font-size: .78rem;
    font-family: 'Vazirmatn', sans-serif;
}
.sc-lightbox-close {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.22);
    color: #fff;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
    line-height: 1;
    z-index: 10000;
}
.sc-lightbox-close:hover {
    background: rgba(255,255,255,.25);
    transform: scale(1.1);
}
/* zoom cursor on image wrappers */
.sc-feat-img-wrap.sc-zoomable,
.sc-setting-img-wrap.sc-zoomable {
    cursor: zoom-in;
    position: relative;
}
.sc-feat-img-wrap.sc-zoomable::after,
.sc-setting-img-wrap.sc-zoomable::after {
    content: '\f00e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s;
    pointer-events: none;
}
.sc-feat-img-wrap.sc-zoomable:hover::after,
.sc-setting-img-wrap.sc-zoomable:hover::after {
    opacity: 1;
}

.sc-setting-body {
    padding: 14px 16px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.sc-setting-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}
.sc-setting-title {
    font-size: .88rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}
.sc-setting-desc {
    font-size: .74rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}