/**
 * Vice Coins — mobile & tablet.
 * Design: mobile-website-design/components/vice-coins/*
 */

:root {
    --vc-gutter: 12px;
    --vc-radius-lg: 12px;
    --vc-radius-md: 8px;
    --vc-radius-sm: 6px;
    --vc-dark: #0f0f14;
    --vc-gray: #94a3b8;
    --vc-gray-dark: #64748b;
    --vc-primary: #7c3aed;
    --vc-primary-light: #a78bfa;
    --vc-light: #f1f5f9;
    --vc-white: #ffffff;
    --vc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --vc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --vc-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.1);
    --bottom-bar-h: 64px;
}

/* Hide mobile-only elements on desktop */
.vice-coins-mobile-only {
    display: none !important;
}

@media (max-width: 1024px) {
    .vice-coins-mobile-only {
        display: flex !important;
    }

    .vice-coins-page {
        margin-left: 0 !important;
        padding: 0 var(--vc-gutter) calc(var(--bottom-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + 140px) !important;
    }

    .vice-coins-header-bar {
        margin: 0 calc(-1 * var(--vc-gutter)) clamp(18px, 2.6vw, 24px);
        padding: 12px var(--vc-gutter) clamp(18px, 2.6vw, 24px);
    }

    .vice-coins-header-bar .page-title {
        font-size: clamp(24px, 3vw, 36px);
    }

    .vice-coins-header-bar .page-subtitle {
        font-size: clamp(12px, 1.2vw, 14px);
    }

    /* Wallet bar — design vice-coins-content.tsx */
    .vice-coins-wallet-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: clamp(18px, 2.6vw, 24px);
        gap: 12px;
    }

    .vice-coins-wallet-card {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--vc-white);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 9999px;
        padding: 8px 20px 8px 8px;
        box-shadow: var(--vc-shadow-sm);
    }

    .vice-coins-wallet-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--vc-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--vc-white);
    }

    .vice-coins-wallet-icon i {
        font-size: 18px;
    }

    .vice-coins-wallet-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .vice-coins-wallet-label {
        font-size: 10px;
        font-weight: 700;
        color: var(--vc-gray);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .vice-coins-wallet-amount,
    .vice-coins-wallet-currency {
        display: inline;
    }

    .vice-coins-wallet-amount {
        font-size: clamp(18px, 1.4vw, 24px);
        font-weight: 900;
        color: var(--vc-dark);
        letter-spacing: -0.025em;
        line-height: 1;
    }

    .vice-coins-wallet-currency {
        font-size: 11px;
        font-weight: 700;
        color: var(--vc-gray-dark);
        text-transform: uppercase;
    }

    .vice-coins-choose-title {
        display: none;
        font-size: clamp(18px, 1.2vw, 20px);
        font-weight: 700;
        color: var(--vc-dark);
    }

    @media (min-width: 640px) {
        .vice-coins-choose-title {
            display: block;
        }
    }

    /* Main grid — column on mobile */
    .vice-coins-page .main-grid {
        flex-direction: column;
        gap: clamp(18px, 2.6vw, 24px);
    }

    /* Packages grid */
    .vice-coins-page .packages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(8px, 0.8vw, 12px);
    }

    .vice-coins-page .package-card {
        min-height: 100px;
        height: auto;
        padding: clamp(10px, 1vw, 14px);
    }

    .vice-coins-page .card-amount {
        font-size: clamp(20px, 2vw, 26px);
    }

    .vice-coins-page .card-price {
        font-size: clamp(14px, 1vw, 16px);
    }

    /* Features strip */
    .vice-coins-page .features-strip {
        grid-template-columns: 1fr;
        gap: clamp(8px, 1vw, 12px);
    }

    /* Purchase history */
    .vice-coins-page .purchase-history-info {
        flex-direction: column;
        text-align: center;
        padding: clamp(14px, 1.2vw, 20px);
    }

    /* Sidebar — hide on mobile/tablet */
    .vice-coins-page .sidebar-column {
        display: none !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .vice-coins-page .packages-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .vice-coins-page .features-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile order sheet — fixed bottom */
.vice-coins-order-sheet {
    display: none;
}

@media (max-width: 1024px) {
    .vice-coins-order-sheet {
        display: block;
        position: fixed;
        bottom: calc(var(--bottom-bar-h, 64px) + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        z-index: 30;
        background: var(--vc-white);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    }

    .vice-coins-order-sheet-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px var(--vc-gutter);
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
    }

    .vice-coins-order-sheet-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .vice-coins-order-sheet-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--vc-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--vc-white);
    }

    .vice-coins-order-sheet-icon i {
        font-size: 16px;
    }

    .vice-coins-order-sheet-total-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: var(--vc-gray);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .vice-coins-order-sheet-total-value {
        display: block;
        font-size: 18px;
        font-weight: 900;
        color: var(--vc-dark);
        letter-spacing: -0.025em;
        line-height: 1;
    }

    .vice-coins-order-sheet-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .vice-coins-order-sheet-coins {
        font-size: 12px;
        font-weight: 700;
        color: var(--vc-primary);
    }

    .vice-coins-order-sheet-chevron {
        width: 20px;
        height: 20px;
        color: var(--vc-gray);
        transition: transform 0.2s;
    }

    .vice-coins-order-sheet.expanded .vice-coins-order-sheet-chevron {
        transform: rotate(180deg);
    }

    .vice-coins-order-sheet-content {
        display: none;
        padding: 16px var(--vc-gutter) 20px;
        max-height: 60vh;
        overflow-y: auto;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .vice-coins-order-sheet.expanded .vice-coins-order-sheet-content {
        display: block;
    }

    .vice-coins-order-sheet .promo-section,
    .vice-coins-order-sheet .totals-section {
        margin-bottom: 16px;
    }

    .vice-coins-order-sheet .promo-label {
        font-size: 10px;
    }

    .vice-coins-order-sheet .promo-input {
        height: 40px;
        font-size: 12px;
    }

    .vice-coins-order-sheet .pay-button {
        width: 100%;
        padding: 12px;
    }

    .vice-coins-order-sheet .payment-notice {
        font-size: 12px;
        margin-top: 12px;
    }
}