/* JaguarGame account area normalizer.
   Scoped to account pages only; header, footer, home, story and product pages are untouched. */

html body .jg-account-page,
html body section.account {
    --jg-account-bg: var(--theme-bg, #0B1220);
    --jg-account-panel: var(--theme-card, #151F32);
    --jg-account-panel-soft: var(--theme-soft, #111827);
    --jg-account-inner: var(--theme-input, #111827);
    --jg-account-line: var(--theme-border, #263244);
    --jg-account-text: var(--theme-text, #F8FAFC);
    --jg-account-muted: var(--theme-muted, #94A3B8);
    --jg-account-blue: var(--theme-primary, #3B82F6);
    --jg-account-mint: var(--theme-accent, #06B6D4);
    --jg-account-gold: var(--theme-primary, #3B82F6);
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.045), transparent 260px), var(--jg-account-bg) !important;
    color: var(--jg-account-text) !important;
}

html body .jg-account-page *,
html body section.account * {
    box-sizing: border-box !important;
    min-width: 0;
}

html body .jg-account-page > .container,
html body section.account > .container,
html body section.account .container {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body section.account .row,
html body section.account [class*="col-"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body .jg-account-shell,
html body .jg-account-page .account-tab-container,
html body section.account .account-tab-container {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
}

html body .jg-account-page .jg-account-main,
html body section.account .tab-container,
html body section.account .tab-content,
html body section.account .tab-inner,
html body section.account .jg-account-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html body .jg-account-page .jg-account-sidebar,
html body section.account .jg-account-sidebar {
    width: 100% !important;
    max-width: 300px !important;
}

html body section.account .account-tab-header {
    display: none !important;
}

html body .jg-account-page .jg-account-panel,
html body .jg-account-page .jg-content-card,
html body .jg-account-page .jg-form-card,
html body .jg-account-page .jg-profile-card,
html body section.account .tab-inner,
html body section.account .tab-content,
html body section.account .user-profile-box,
html body section.account .siparisler-liste,
html body section.account .odeme-gecmisi-liste,
html body section.account .destek-talepleri-liste,
html body section.account table {
    background: var(--jg-account-panel) !important;
    border: 1px solid var(--jg-account-line) !important;
    border-radius: 18px !important;
    color: var(--jg-account-text) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html body .jg-account-page .jg-account-panel-head,
html body section.account .tab-inner > h1,
html body section.account .tab-inner > h2,
html body section.account .tab-inner > h3 {
    background: var(--jg-account-panel-soft) !important;
    border-bottom: 1px solid var(--jg-account-line) !important;
    color: var(--jg-account-text) !important;
}

html body .jg-account-page .jg-account-panel-body,
html body section.account .tab-inner,
html body section.account .tab-content {
    padding: 22px !important;
}

html body .jg-account-page h1,
html body .jg-account-page h2,
html body .jg-account-page h3,
html body .jg-account-page h4,
html body section.account h1,
html body section.account h2,
html body section.account h3,
html body section.account h4 {
    color: var(--jg-account-text) !important;
}

html body .jg-account-page p,
html body .jg-account-page small,
html body .jg-account-page span,
html body section.account p,
html body section.account small,
html body section.account span {
    overflow-wrap: anywhere;
}

html body .jg-account-page .jg-account-table-wrap,
html body section.account .table-responsive,
html body section.account .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

html body .jg-account-page .jg-account-table,
html body section.account table {
    width: 100% !important;
    min-width: 720px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

html body .jg-account-page table th,
html body .jg-account-page table td,
html body section.account table th,
html body section.account table td {
    color: var(--jg-account-text) !important;
    border-color: var(--jg-account-line) !important;
    vertical-align: middle !important;
    white-space: normal !important;
}

html body .jg-account-page input,
html body .jg-account-page select,
html body .jg-account-page textarea,
html body section.account input,
html body section.account select,
html body section.account textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    background: var(--jg-account-inner) !important;
    color: var(--jg-account-text) !important;
    border: 1px solid var(--jg-account-line) !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    outline: none !important;
}

html body .jg-account-page textarea,
html body section.account textarea {
    min-height: 130px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

html body .jg-account-page .jg-form-grid,
html body section.account form,
html body section.account .form-row {
    max-width: 100% !important;
}

html body .jg-account-page .jg-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body .jg-account-page .jg-payment-item,
html body .jg-account-page .jg-order-card,
html body .jg-account-page .jg-order-item,
html body .jg-account-page .jg-info-card,
html body .jg-account-page .jg-stat-card,
html body section.account .buttons,
html body section.account .price,
html body section.account .item,
html body section.account .card {
    max-width: 100% !important;
    background: var(--jg-account-inner) !important;
    border: 1px solid var(--jg-account-line) !important;
    border-radius: 14px !important;
    color: var(--jg-account-text) !important;
}

html body .jg-account-page .jg-action-btn,
html body .jg-account-page .jg-form-btn,
html body section.account button,
html body section.account .btn,
html body section.account input[type="submit"] {
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(90deg, var(--jg-account-blue), var(--jg-account-mint)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

html body .jg-account-page .jg-empty-state,
html body section.account .empty,
html body section.account .alert {
    background: var(--jg-account-inner) !important;
    border: 1px dashed var(--jg-account-line) !important;
    color: var(--jg-account-muted) !important;
    border-radius: 16px !important;
}

html body .jg-account-page .jg-side-link.active,
html body section.account .jg-side-link.active {
    background: rgba(37, 99, 235, .12) !important;
    border-color: rgba(37, 99, 235, .34) !important;
    color: var(--jg-account-text) !important;
    box-shadow: none !important;
}

html body .jg-account-page .jg-side-link.active .jg-side-icon i,
html body section.account .jg-side-link.active .jg-side-icon i {
    color: var(--jg-account-gold) !important;
}

@media (max-width: 992px) {
    html body .jg-account-page > .container,
    html body section.account > .container,
    html body section.account .container {
        width: min(100% - 20px, 720px) !important;
    }

    html body .jg-account-shell,
    html body .jg-account-page .account-tab-container,
    html body section.account .account-tab-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    html body .jg-account-page .jg-account-sidebar,
    html body section.account .jg-account-sidebar {
        max-width: none !important;
    }
}

@media (max-width: 640px) {
    html body .jg-account-page,
    html body section.account {
        padding-top: 18px !important;
    }

    html body .jg-account-page .jg-account-panel-body,
    html body section.account .tab-inner,
    html body section.account .tab-content {
        padding: 14px !important;
    }

    html body .jg-account-page .jg-form-grid {
        grid-template-columns: 1fr !important;
    }

    html body .jg-account-page .jg-payment-item,
    html body .jg-account-page .jg-order-card,
    html body .jg-account-page .jg-order-item {
        grid-template-columns: 1fr !important;
    }

    html body .jg-account-page .jg-account-table,
    html body section.account table {
        min-width: 620px !important;
    }
}