/* ================================================================
   ZCW2 Frontend — Package Tabs, Buy Now, Subscribe & Save
   All prices USD. Max 4 tabs.
   ================================================================ */

/* ── Wrap ── */
.zcw2-packages {
    margin: 0 0 28px;
    font-family: inherit;
}

/* ── Tabs ── */
.zcw2-pkg-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    gap: 0;
    margin-bottom: 0;
}

.zcw2-pkg-tab {
    flex: 1;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    text-align: center;
}

.zcw2-pkg-tab:hover {
    color: #111827;
}

.zcw2-pkg-tab.active {
    color: #111827;
    border-bottom-color: #111827;
}

/* ── Panel ── */
.zcw2-pkg-panel {
    display: none;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 20px 20px 16px;
    background: #fff;
}

.zcw2-pkg-panel.active {
    display: block;
}

/* ── Package header ── */
.zcw2-pkg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.zcw2-pkg-icon {
    font-size: 18px;
    line-height: 1;
}

.zcw2-pkg-name {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ── Price ── */
.zcw2-pkg-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.zcw2-pkg-price {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    line-height: 1;
}

.zcw2-pkg-fees {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.zcw2-fees-tip {
    cursor: help;
    font-size: 13px;
    color: #9ca3af;
}

/* ── Description ── */
.zcw2-pkg-desc {
    font-size: 13.5px;
    color: #374151;
    line-height: 1.55;
    margin: 0 0 12px;
}

/* ── Meta (delivery + revisions) ── */
.zcw2-pkg-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #374151;
    font-weight: 600;
}

.zcw2-pkg-delivery,
.zcw2-pkg-revisions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.zcw2-pkg-delivery svg,
.zcw2-pkg-revisions svg {
    flex-shrink: 0;
    color: #6b7280;
}

/* ── What's Included ── */
.zcw2-pkg-features-wrap {
    margin-bottom: 14px;
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
}

.zcw2-features-toggle {
    background: none;
    border: none;
    padding: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
}

.zcw2-features-toggle:hover {
    color: #111827;
}

.zcw2-chevron {
    transition: transform .2s;
    font-size: 12px;
}

.zcw2-features-toggle.open .zcw2-chevron {
    transform: rotate(180deg);
}

.zcw2-pkg-features {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: none;
}

.zcw2-pkg-features.open {
    display: block;
}

.zcw2-pkg-features li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    color: #374151;
    padding: 4px 0;
    line-height: 1.4;
}

.zcw2-pkg-features li svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Buy Now button ── */
.zcw2-buy-now-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    background: #111827;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none !important;
    margin-bottom: 10px;
    transition: background .15s, transform .1s;
    cursor: pointer;
    border: none;
}

.zcw2-buy-now-btn:hover {
    background: #1f2937;
    transform: translateY(-1px);
    color: #fff !important;
}

.zcw2-buy-now-btn span {
    font-size: 18px;
    line-height: 1;
}

/* ── Subscribe & Save ── */
.zcw2-sub-save-row {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 6px;
}

.zcw2-sub-save-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.zcw2-sub-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
}

.zcw2-sub-desc {
    font-size: 13px;
    color: #6b7280;
}

.zcw2-sub-save-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.zcw2-sub-price {
    font-size: 17px;
    font-weight: 800;
    color: #111827;
}

.zcw2-subscribe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    background: #fff;
    border: 2px solid #111827;
    color: #111827 !important;
    font-size: 14px;
    font-weight: 700;
    border-radius: 7px;
    text-decoration: none !important;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.zcw2-subscribe-btn:hover {
    background: #111827;
    color: #fff !important;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .zcw2-pkg-tab {
        font-size: 12px;
        padding: 10px 8px;
    }
    .zcw2-pkg-price {
        font-size: 22px;
    }
    .zcw2-pkg-meta {
        flex-direction: column;
        gap: 6px;
    }
}

/* ── One-time vs Subscribe & Save layout ── */
.zcw2-onetime-row {
    margin-bottom: 6px;
}

.zcw2-onetime-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    margin-bottom: 6px;
}

.zcw2-sub-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 8px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
}
.zcw2-sub-divider::before,
.zcw2-sub-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.zcw2-sub-save-row {
    margin-top: 2px;
}

.zcw2-sub-save-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px 14px;
}

.zcw2-sub-save-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.zcw2-sub-label {
    font-size: 13px;
    font-weight: 700;
    color: #15803d;
}

.zcw2-sub-desc {
    font-size: 12px;
    color: #16a34a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zcw2-subscribe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #15803d;
    border: none;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    border-radius: 7px;
    text-decoration: none !important;
    transition: background .15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.zcw2-subscribe-btn:hover {
    background: #166534;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   V2.7.1 — PORTFOLIO & SAMPLES FRONTEND DISPLAY
   ═══════════════════════════════════════════════════════════════ */

/* Portfolio Section */
.zcw2-portfolio-section { margin:24px 0; padding:20px 0; border-top:1px solid #e5e7eb; }
.zcw2-portfolio-heading { font-size:18px; font-weight:700; color:#1e293b; margin:0 0 4px; }
.zcw2-portfolio-desc { font-size:13px; color:#64748b; margin:0 0 16px; }
.zcw2-portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.zcw2-portfolio-item { background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; transition:box-shadow .2s; }
.zcw2-portfolio-item:hover { box-shadow:0 4px 12px rgba(0,0,0,.08); }
.zcw2-portfolio-thumb { aspect-ratio:16/10; overflow:hidden; }
.zcw2-portfolio-thumb img { width:100%; height:100%; object-fit:cover; }
.zcw2-portfolio-body { padding:14px 16px; }
.zcw2-portfolio-body h4 { font-size:15px; font-weight:600; color:#1e293b; margin:0 0 6px; }
.zcw2-portfolio-body p { font-size:13px; color:#64748b; margin:0 0 10px; line-height:1.5; }
.zcw2-portfolio-links { display:flex; flex-wrap:wrap; gap:6px; }
.zcw2-portfolio-link { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#2563eb; text-decoration:none; padding:4px 10px; background:#eff6ff; border-radius:20px; transition:background .15s; }
.zcw2-portfolio-link:hover { background:#dbeafe; }

/* Samples Section */
.zcw2-samples-section { margin:16px 0; padding:16px 0; border-top:1px solid #e5e7eb; }
.zcw2-samples-heading { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#1e293b; margin:0 0 4px; }
.zcw2-samples-desc { font-size:12px; color:#94a3b8; margin:0 0 12px; }
.zcw2-samples-list { display:flex; flex-direction:column; gap:6px; }
.zcw2-sample-link { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; color:#334155; text-decoration:none; font-size:13px; font-weight:500; transition:all .15s; }
.zcw2-sample-link:hover { background:#f0fdf4; border-color:#86efac; color:#166534; }
.zcw2-sample-link svg { flex-shrink:0; color:#64748b; }
.zcw2-sample-link:hover svg { color:#22c55e; }

/* Portfolio media images */
.zcw2-portfolio-media { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.zcw2-portfolio-media-img { border-radius:6px; overflow:hidden; max-width:100%; }
.zcw2-portfolio-media-img img { width:100%; height:auto; display:block; border-radius:6px; }

/* Portfolio lazy-load video */
.zcw2-portfolio-video-wrap { position:relative; cursor:pointer; border-radius:6px; overflow:hidden; background:#000; }
.zcw2-portfolio-video-wrap img.zcw2-portfolio-video-poster { width:100%; height:auto; display:block; opacity:.85; transition:opacity .2s; }
.zcw2-portfolio-video-wrap:hover img.zcw2-portfolio-video-poster { opacity:1; }
.zcw2-portfolio-video-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:none; border:none; cursor:pointer; opacity:.85; transition:opacity .2s; }
.zcw2-portfolio-video-wrap:hover .zcw2-portfolio-video-play { opacity:1; }
.zcw2-portfolio-video-placeholder { display:flex; align-items:center; justify-content:center; min-height:180px; color:#fff; font-size:18px; background:#1a1a2e; border-radius:6px; cursor:pointer; }