/* ──────────────────────────────────────────────────────────────────────────
   subscriptions.css — styles for /subscriptions
   Owns: page wrapper, section-header panel, vertical filter slider, card grid,
   subscription cards (icon/title/price/desc/badges/buttons), and the per-product
   popup overlays (E1, Vanity, Premium / Newsfeed / Profile-page upgrades).
   ────────────────────────────────────────────────────────────────────────── */

/* Hide old nav elements - replaced by page_header_bar.php */
.gold-bar,
.header-area-container,
.top_banner_1 { display: none !important; }
.ph-banner-inner .top_banner { display: block !important; text-align: center; }
.ph-banner-inner .top_banner .banner_bottom { display: none !important; }

/* ── Page wrapper — matches .ph-banner-area width (1423px, box-sizing: border-box) ── */
.subs-page-wrapper {
    max-width: 1423px;
    margin: 6px auto 0 auto;
    padding: 0 0 60px 0;
    font-family: 'Tahoma', Geneva, sans-serif;
    box-sizing: border-box;
}
.subs-page-wrapper *,
.subs-page-wrapper *::before,
.subs-page-wrapper *::after {
    box-sizing: border-box;
}

/* ── Section header — ph-nav-bar styling ── */
.subs-section-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #b0b1df;
    border: 2px solid #5c6690;
    border-radius: 10px;
    padding: 7.42px 12px;
    margin: 6px auto 12px auto;
    color: #1a1a2e;
    gap: 24px;
    width: 100%;
    min-height: 112px;
    font-family: 'Tahoma', Geneva, sans-serif;
}
.subs-nav-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    min-width: 220px;
}
.subs-nav-page-icon {
    height: 86px;
    width: 80px;
    object-fit: contain;
    border-radius: 6px;
}
.subs-nav-page-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.subs-nav-page-title {
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 21.04px;
    font-weight: bold;
    color: #000;
    line-height: 1.1;
}
.subs-nav-breadcrumb {
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 13.48px;
    color: #352d2d;
}
.subs-nav-breadcrumb a {
    color: #1a1a2e;
    text-decoration: none;
}
.subs-nav-breadcrumb a:hover { color: #000; }
/* .ph-nav-page-select styling is in css/nav_page_select.css (shared include) */

/* ── Vertical Slider (drag to filter) ── */
.subs-vslider {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    padding: 0;
}
.subs-vslider-left {
    position: relative;
    width: 62px;
    height: 92px;
    flex-shrink: 0;
}
.subs-vslider-bg {
    position: absolute;
    left: 21px;
    top: 0;
    width: 24px;
    height: 100%;
    display: block;
    pointer-events: none;
    /* stretch the short background image vertically and horizontally to the chunkier PSD size */
    image-rendering: auto;
}
.subs-vslider-diodes {
    position: absolute;
    left: 21px;
    top: 0;
    width: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    pointer-events: none;
}
.subs-vslider-diodes img {
    width: 22px;
    height: auto;
    display: block;
}
.subs-vslider-pointer {
    position: absolute;
    right: 3px;
    top: 0;
    width: 41px;
    height: auto;
    cursor: grab;
    transition: top 0.18s ease;
    z-index: 2;
}
.subs-vslider-pointer:active { cursor: grabbing; }
.subs-vslider.dragging .subs-vslider-pointer { transition: none; }

.subs-vslider-labels {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 92px;
    min-width: 200px;
}
.subs-vslider-labels li {
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 15.5px;
    color: #1a1a2e;
    line-height: 1.1;
    cursor: pointer;
    padding: 1px 0;
    transition: color 0.15s;
}
.subs-vslider-labels li:hover { color: #000; }
.subs-vslider-labels li.active {
    font-weight: bold;
    color: #000;
}

/* ── Grid of subscription cards ── */
.subs-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

/* ── Card ── */
.subs-card {
    position: relative;
    background: #fff;
    border: 1px solid #c7cadf;
    border-radius: 6px;
    padding: 14px 14px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    min-height: 100%;
}
.subs-card-status-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2), inset 0 -1px 2px rgba(0,0,0,0.25);
    background: #d9d9d9;
}
.subs-card-status-dot.dot-live    { background: #2bb673; }
.subs-card-status-dot.dot-indev   { background: #e03a2f; }
.subs-card-status-dot.dot-primary { background: #3a78d4; }

.subs-card-icon {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 72px;
    margin: 2px 0 6px 0;
}
.subs-card-icon img {
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
}

.subs-card-title {
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: #1a1a2e;
    line-height: 1.15;
    text-align: left;
    margin: 0 0 2px 0;
}
.subs-card-subtitle {
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #1a1a2e;
    line-height: 1.2;
    text-align: left;
    margin: 0 0 8px 0;
}
.subs-card-price {
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #1a1a2e;
    text-align: left;
    margin: 0 0 10px 0;
}
.subs-card-desc {
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 11.5px;
    color: #333;
    line-height: 1.45;
    text-align: left;
    margin: 0 0 12px 0;
    flex: 1 1 auto;
}

/* ── Badge bullets (INCLUDED with E1, KEY Qualification required) ── */
.subs-card-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 10px 0;
}
.subs-card-badge {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 11.5px;
    line-height: 1.3;
    color: #1a1a2e;
}
.subs-card-badge .subs-check {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background: #2bb673;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 900;
    margin-top: 1px;
}
.subs-card-badge strong {
    font-weight: bold;
}

/* ── Buttons ──
   Flat colors sampled directly from the target screenshot:
   - Subscribe   fill #6d83b4, border #403041, white text
   - Manage      fill #b1b1b1, border #403041, dark text
   - InDev       fill #ee3a03, border #403041, white text */
.subs-card-btn {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #403041;
    border-radius: 4px;
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin-top: auto;
    background-image: none;
}
.subs-card-btn-subscribe,
a.subs-card-btn-subscribe {
    background: #6d83b4;
    color: #ffffff;
}
.subs-card-btn-subscribe:hover,
a.subs-card-btn-subscribe:hover {
    background: #5c74a9;
    color: #ffffff;
    text-decoration: none;
}
.subs-card-btn-manage,
a.subs-card-btn-manage {
    background: #b1b1b1;
    color: #1a1a2e;
}
.subs-card-btn-manage:hover,
a.subs-card-btn-manage:hover {
    background: #9a9a9a;
    color: #1a1a2e;
    text-decoration: none;
}
.subs-card-btn-indev,
a.subs-card-btn-indev {
    background: #ee3a03;
    color: #ffffff;
}
.subs-card-btn-indev:hover,
a.subs-card-btn-indev:hover {
    background: #c93103;
    color: #ffffff;
    text-decoration: none;
}

/* ── Responsive ── */
@media (max-width: 1280px) {
    .subs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .subs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .subs-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        min-height: 0;
    }
    .subs-nav-left { min-width: 0; }
}
@media (max-width: 640px) {
    .subs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .subs-vslider-labels { min-width: 170px; }
    .subs-vslider-labels li { font-size: 13px; }
}
@media (max-width: 420px) {
    .subs-grid { grid-template-columns: 1fr; }
}

/* ── Header right area (wraps slider, swapped for E1 popup info) ── */
.subs-header-right-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* ── E1 Subscription Popup (overlays card grid, same width as page) ── */
.subs-page-wrapper { position: relative; }
#subs-e1-popup-overlay,
#subs-vanity-popup-overlay,
#subs-premium-upgrade-popup-overlay,
#subs-newsfeed-upgrade-popup-overlay,
#subs-profile-page-upgrade-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    border: 2px solid #888;
    background: #fff;
    font-family: 'Tahoma', Geneva, sans-serif;
    z-index: 100;
}
.subs-e1-popup-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    text-align: center;
}
.subs-e1-popup-close:hover { color: #000; }

/* E1 header elements injected into .subs-section-header */
.subs-e1-popup-header-center {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.subs-e1-popup-header-e1-icon {
    height: 90px;
    width: 90px;
    object-fit: contain;
}
.subs-e1-popup-header-e1-name {
    font-size: 16px;
    font-weight: bold;
    color: #1a1a2e;
}
.subs-e1-popup-header-e1-price {
    font-size: 22px;
    font-weight: bold;
    color: #1a1a2e;
}
.subs-e1-popup-header-e1-billing {
    font-size: 11px;
    color: #333;
}
.subs-e1-popup-header-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.subs-e1-popup-subscribe-btn {
    display: inline-block;
    background: #6d7db5;
    color: #fff !important;
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 40px;
    margin: 0 auto;
    border-radius: 14px;
    text-decoration: none !important;
    cursor: pointer;
    border: 1px solid #4a5478;
    white-space: nowrap;
    text-align: center;
}
.subs-e1-popup-subscribe-btn:hover {
    background: #6070a8;
    text-decoration: none !important;
    color: #fff !important;
}
.subs-e1-popup-header-terms {
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 11px;
    color: #333;
    line-height: 1;
    max-width: 380px;
    border: 1px solid #999;
    border-radius: 8px;
    padding: 5px 10px;
    background: #fff;
    text-align: left;
}

/* Body */
.subs-e1-popup-body {
    position: relative;
    display: flex;
    gap: 0;
    min-height: 555px;
    border-top: 1px solid #ccc;
}
.subs-e1-popup-body-left {
    flex: 1 1 55%;
    padding: 20px 24px;
    border-right: 1px solid #ddd;
    overflow-y: auto;
}
.subs-e1-popup-body-title {
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #000;
    margin: 0 0 14px 0;
    text-align: center;
    text-transform: uppercase;
}
.subs-e1-popup-body-desc {
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 13px;
    color: #000;
    line-height: 1.55;
}
.subs-e1-popup-body-desc p {
    margin: 0 0 14px 0;
}
.subs-e1-popup-body-desc strong {
    font-weight: bold;
}
.subs-e1-popup-body-right {
    flex: 1 1 45%;
    padding: 14px 18px;
    overflow-y: auto;
    position: relative;
}

@media (max-width: 900px) {
    .subs-header-right-area {
        flex-wrap: wrap;
        gap: 10px;
    }
    .subs-e1-popup-header-center {
        flex: 0 0 auto;
    }
    .subs-e1-popup-header-right {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .subs-e1-popup-header-terms {
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .subs-e1-popup-body {
        flex-direction: column;
    }
    .subs-e1-popup-body-left {
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
}
@media (max-width: 640px) {
    .subs-header-right-area {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .subs-e1-popup-header-e1-icon {
        height: 50px;
        width: 50px;
    }
    .subs-e1-popup-header-e1-price {
        font-size: 18px;
    }
    .subs-e1-popup-subscribe-btn {
        font-size: 13px;
        padding: 6px 30px;
    }
    .subs-e1-popup-header-terms {
        font-size: 10px;
        max-width: 100%;
    }
}