/* ==========================================================================
   Gamevers Top-Up Panel v2 — Main Panel
   File: /woocommerce/Gamevers Top Up Panel builder/css/gv-top-up-panel-main.css
   ========================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
    --gv-accent: #00d4ff;
    --gv-accent-2: #7c3aed;
    --gv-amber: #f59e0b;
    --gv-amber-light: #fbbf24;
    --gv-amber-dark: #d97706;
    --gv-orange: #f97316;
    --gv-orange-dark: #ea580c;
    --gv-success: #22c55e;
    --gv-danger: #ef4444;

    --gv-bg-panel: #0b0e16;
    --gv-bg-tab: #080b12;
    --gv-bg-card: #0e1525;
    --gv-bg-card-img: #080d1a;
    --gv-bg-card-body: #111827;
    --gv-bg-modal: #0d1120;

    --gv-border: rgba(255, 255, 255, 0.07);
    --gv-border-card: rgba(255, 255, 255, 0.09);
    --gv-border-hover: rgba(0, 212, 255, 0.4);
    --gv-border-modal: rgba(255, 255, 255, 0.1);

    --gv-text-primary: #e8edf8;
    --gv-text-secondary: #7a8599;
    --gv-text-muted: #3d4a5e;

    --gv-r-card: 0.875rem;
    --gv-r-modal: 1.375rem;
    --gv-r-btn: 0.75rem;
    --gv-r-pill: 99rem;
    --gv-r-badge: 0.3rem;

    --gv-shadow-card: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.5);
    --gv-shadow-card-hover: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.7);
    --gv-shadow-modal: 0 2rem 5rem rgba(0, 0, 0, 0.85);

    --gv-t: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --gv-t-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Panel wrap ────────────────────────────────────────────────────────── */
.gv-panel-wrap {
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════
   TAB BAR  (Image 1 style: full-width, even, icon + label, vertically centred)
   ══════════════════════════════════════════════════════════════════════════ */
.gv-tab-bar {
    display: flex;
    padding: 0 2em 0 2em;
    align-items: stretch;
    justify-content: center;
    background: #080b128c;
    border-bottom: 0.0625rem solid var(--gv-border);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.gv-tab-bar::-webkit-scrollbar {
    display: none;
}

.gv-tab-btn {
    flex: 1 1 0;
    min-width: 7rem;
    max-width: 20em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.1rem 2em;
    max-height: 20em;
    background: none;
    border: none;
    border-bottom: 0.1875rem solid transparent;
    color: var(--gv-text-secondary);
    cursor: pointer;
    transition: var(--gv-t);
    position: relative;
    white-space: nowrap;
    outline: none;
    /* Subtle right divider between tabs */
}

.gv-tab-btn:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 0.0625rem;
    background: var(--gv-border);
    pointer-events: none;
}

.gv-tab-btn:hover {
    color: var(--gv-text-primary);
    background: rgba(255, 255, 255, 0.025);
}

.gv-tab-btn:focus-visible {
    outline: 0.125rem solid var(--gv-accent);
    outline-offset: -0.125rem;
}

.gv-tab-btn.is-active {
    color: var(--gv-accent);
    border-radius: 1em;
    border-bottom-color: var(--gv-accent);
    background: rgba(0, 212, 255, 0.05);
}

/* Tab icon wrapper */
.gv-tab-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.375rem;
    transition: var(--gv-t);
}

.gv-tab-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0.7) saturate(0.6);
    transition: var(--gv-t);
}

.gv-tab-btn.is-active .gv-tab-icon-img {
    filter: brightness(1) saturate(1);
}

.gv-tab-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.gv-tab-icon-svg svg {
    width: 1.125rem;
    height: 1.125rem;
    transition: var(--gv-t);
}

.gv-tab-btn:not(.is-active) .gv-tab-icon-svg svg {
    opacity: 0.6;
}

.gv-tab-btn.is-active .gv-tab-icon-svg svg {
    filter: drop-shadow(0 0 0.375rem var(--gv-accent));
}

/* Tab label */
.gv-tab-label {
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0em;
    text-transform: uppercase;
    transition: var(--gv-t);
    line-height: 1;
    display: flex;
    align-items: center;
}

.gv-tab-btn.is-active .gv-tab-label {
    text-shadow: 0 0 0.75rem rgba(0, 212, 255, 0.5);
}

/* ── Panels ────────────────────────────────────────────────────────────── */
.gv-panels-wrap {
    padding: 1.5rem 2em;
}

.gv-panel {
    display: none;
    animation: gvPanelIn 0.28s ease forwards;
}

.gv-panel.is-active {
    display: block;
}

@keyframes gvPanelIn {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Cards Grid ────────────────────────────────────────────────────────── */
.gv-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
}

/* ── Single Card ───────────────────────────────────────────────────────── */
.gv-card {
    flex: 1 1 15rem;
    max-width: 15rem;
    min-height: 16rem;
    padding: 0 1em 0 1em;
    /* fixed height so 50/50 split works */
    position: relative;
    background: radial-gradient(circle at top left, rgb(255 205 93 / 15%) 0%, transparent 50%), linear-gradient(160deg, rgba(14, 22, 40, 0.4) 0%, rgba(10, 16, 32, 0.8) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: none; /* Replaced by gradient border */
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: var(--gv-t);
    box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.6), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.05);
    animation: gvCardIn 0.35s ease both;
    display: flex;
    flex-direction: column;
    outline: none;
}

/* ── Variant Label Size Control ── */
.gv-card-variant-label {
    /* Change this font-size to control the label size. The label itself scales based on this (em units). */
    font-size: 0.85rem; 
}

.gv-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
        800px circle at var(--glow-x, -1000px) var(--glow-y, -1000px),
        rgba(255, 184, 0, calc(var(--glow-intensity, 0) * 1)),
        rgba(255, 255, 255, 0.15) 30%,
        rgba(255, 255, 255, 0.05) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Staggered entrance */
.gv-cards-grid .gv-card:nth-child(1) {
    animation-delay: 0.03s;
}

.gv-cards-grid .gv-card:nth-child(2) {
    animation-delay: 0.06s;
}

.gv-cards-grid .gv-card:nth-child(3) {
    animation-delay: 0.09s;
}

.gv-cards-grid .gv-card:nth-child(4) {
    animation-delay: 0.12s;
}

.gv-cards-grid .gv-card:nth-child(5) {
    animation-delay: 0.15s;
}

.gv-cards-grid .gv-card:nth-child(6) {
    animation-delay: 0.18s;
}

.gv-cards-grid .gv-card:nth-child(7) {
    animation-delay: 0.21s;
}

.gv-cards-grid .gv-card:nth-child(8) {
    animation-delay: 0.24s;
}

.gv-cards-grid .gv-card:nth-child(n+9) {
    animation-delay: 0.27s;
}

@keyframes gvCardIn {
    from {
        opacity: 0;
        transform: translateY(0.625rem) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gv-card:hover,
.gv-card:focus-visible {
    transform: translateY(-0.3rem) scale(1.02);
    box-shadow: var(--gv-shadow-card-hover);
}

.gv-card:active {
    transform: translateY(0) scale(0.98);
}

.gv-card.is-out-of-stock {
    pointer-events: none;
    background: repeating-linear-gradient(
        135deg,
        #0e1628,
        #0e1628 10px,
        #150d18 10px,
        #150d18 20px
    );
}

/* Red border for out of stock */
.gv-card.is-out-of-stock::before {
    background: rgba(239, 68, 68, 0.05);
    -webkit-mask: none;
    mask-composite: exclude;
    border: 1px solid rgba(239, 68, 68, 0.7);
    box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.2), 0 0 10px rgba(239, 68, 68, 0.2);
}

.gv-card.is-out-of-stock::after {
    display: none;
}

/* Gray out internal elements but keep OOS badge colored */
.gv-card.is-out-of-stock .gv-card-top,
.gv-card.is-out-of-stock .gv-card-info-wrap,
.gv-card.is-out-of-stock .gv-card-price-wrap,
.gv-card.is-out-of-stock .gv-card-off-badge,
.gv-card.is-out-of-stock .gv-card-timer-icon {
    opacity: 0.55;
    filter: grayscale(1);
}

/* ── Stacked OFF badge (top-right corner) ── */
.gv-card-off-badge {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 3;
    background: #0e1628;
    border: 0.01rem solid var(--gv-amber);
    border-radius: 0.5rem;
    color: var(--gv-amber-light);
    font-size: 0.9375rem;
    font-weight: 900;
    line-height: 1.1;
    padding: 0.35rem 0rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.5rem;
    box-shadow: 0 0 0.75rem rgba(245, 158, 11, 0.3);
}

.gv-badge-pct {
    font-family: monospace;
    font-size: 1rem;
    font-weight: 900;
    color: var(--gv-amber-light);
}

.gv-badge-off {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gv-amber-light);
    text-transform: uppercase;
}

.gv-card-timer-icon {
    position: absolute;
    top: 3.8rem;
    right: 0.9rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: 50%;
    color: #ef4444;
}

.gv-card-timer-icon svg {
    width: 1rem;
    height: 1rem;
}

.gv-card-oos-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.4em 0;
    width: 100%;
    padding: 0.05rem 0;
    border: 1px solid rgba(239, 68, 68, 0.8);
    border-radius: var(--gv-r-pill);
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: rgba(239, 68, 68, 0.1);
    box-shadow: inset 0 0 10px rgba(239, 68, 68, 0.2);
}

.gv-card-oos-badge svg {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
}

/* ── Top half container (image) ── */
.gv-card-top {
    flex: 0 0 7.5rem;
    height: 7.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* ── Card image area ── */
.gv-card-img-area {
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 0 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.gv-card-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0.375rem 1rem rgba(0, 0, 0, 0.7));
}

.gv-card:hover .gv-card-img {
    transform: scale(1.1) translateY(-0.25rem);
}

/* ── Bottom half container (info + price) ── */
.gv-card-bottom {
    width: 100%;
    padding: 0em 0em 1em;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: none;
    padding: 0 0 1rem;
}


/* ── Card info wrap (title + bonuses inside bottom half) ── */
.gv-card-info-wrap {
    background: transparent;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;
    text-align: center;
}

/* ── Card Divider Line (fades on left and right) ── */
.gv-card-divider {
    height: 1px;
    width: 80%;
    margin: 0.35rem auto;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0.12) 80%, transparent);
}


/* Denomination row: icon + name */
.gv-card-denom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

/* Denom icon */
.gv-card-denom-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.gv-card-denom-img {
    width: 1.8rem;
    height: 1.8rem;
    object-fit: contain;
    border-radius: 0.2rem;
}

.gv-card-denom-svg {
    display: flex;
    align-items: center;
}

.gv-card-denom-svg svg {
    width: 1.8rem;
    height: 1.8rem;
    color: var(--gv-amber);
}

/* Denomination name */
.gv-card-denom-name {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem;
    line-height: 1.2;
}

.gv-denom-base {
    font-family: 'Manrope', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
}

/* Pack style for titles (normal and a bit small) */
.gv-card-type-packs .gv-card-denom-name {
    margin-top: 0.7rem;
}

.gv-card-type-packs .gv-denom-base {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
}

.gv-denom-sep {
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gv-amber);
}

.gv-denom-bonus {
    font-family: 'Manrope', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gv-amber);
    letter-spacing: -0.01em;
}

.gv-card-add-bonus {
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    color: var(--gv-amber-light);
    font-weight: 500;
    text-align: center;
    line-height: 1;
}

/* Prices */
.gv-card-prices {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
}

.gv-price-sale {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gv-amber-light);
    line-height: 1.2;
}

.gv-price-regular {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gv-amber-light);
    line-height: 1.2;
    text-align: center;
    display: block;
}

/* Hide sale price inside card info wrap (since it moved to the bottom bar) */
.gv-card-info-wrap .gv-price-sale {
    display: none;
}

/* Strip WC wrappers */
.gv-price-sale .woocommerce-Price-amount,
.gv-price-sale bdi,
.gv-price-regular .woocommerce-Price-amount,
.gv-price-regular bdi {
    display: inline;
}

.gv-card-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gv-price-was {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #717171;
    text-decoration: none;
    text-align: center;
    display: block;
    line-height: 1;
}

/* Strikethrough only on the number, NOT the ৳ symbol */
.gv-price-was .gv-price-number {
    text-decoration: line-through;
}

.gv-price-was .woocommerce-Price-amount,
.gv-price-was bdi {
    display: inline;
}

/* Taka symbol — Montserrat bold, same rendering as nav bar balance ৳ */
.gv-panel-wrap .gv-taka-symbol,
.gv-modal-backdrop .gv-taka-symbol {
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    font-weight: 700;
    display: inline-block;
    vertical-align: baseline;
    margin-left: 0.08em;
    text-decoration: none;
    line-height: 1;
}

/* Legacy WooCommerce symbol fallback */
.gv-panel-wrap .woocommerce-Price-currencySymbol,
.gv-modal-backdrop .woocommerce-Price-currencySymbol {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    font-weight: 700;
}

/* ── New Sale Price Bar (bottom of card) ── */
.gv-card-price-bar {
    margin: 0.25rem 0 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gv-amber-light);
}


/* strip WC wrappers */
.gv-card-price-bar .woocommerce-Price-amount,
.gv-card-price-bar bdi {
    display: inline;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 48rem) {
    .gv-panels-wrap {
        padding: 1rem 0.875rem;
    }

    .gv-tab-btn {
        min-width: 5.5rem;
        padding: 0.9rem 0.75rem;
    }

    .gv-tab-label {
        font-size: 0.6875rem;
    }

    .gv-cards-grid {
        gap: 0.75rem;
    }

    .gv-card {
        flex-basis: 7.5rem;
        max-width: 10rem;
        height: 13rem;
    }

}

@media (max-width: 30rem) {
    .gv-cards-grid {
        gap: 0.5rem;
    }

    .gv-card {
        flex-basis: 6rem;
        max-width: 8.5rem;
        height: 11rem;
    }

    .gv-tab-btn {
        min-width: 4.5rem;
        gap: 0.3rem;
    }

    .gv-tab-icon-wrap {
        width: 1.1rem;
        height: 1.1rem;
    }
}