/*
 DEV V23 Key Requests UI polish
 Scope only:
 - /buy-key
 - /admin/key-requests
 No business logic.
*/

body.dev-v23-buy-key-page,
body.dev-v23-admin-key-requests-page {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.dev-v23-buy-key-page {
    background:
        radial-gradient(circle at top left, rgba(43, 111, 255, .10), transparent 34rem),
        linear-gradient(135deg, #f7fbff 0%, #eef8f6 100%);
}

body.dev-v23-buy-key-page main,
body.dev-v23-buy-key-page .container,
body.dev-v23-buy-key-page .wrapper,
body.dev-v23-buy-key-page .page,
body.dev-v23-buy-key-page .content {
    max-width: 980px;
}

body.dev-v23-buy-key-page form {
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(15, 23, 42, .08);
    padding: clamp(18px, 3vw, 34px);
}

body.dev-v23-buy-key-page input,
body.dev-v23-buy-key-page select,
body.dev-v23-buy-key-page textarea {
    width: 100%;
    min-height: 48px;
    border-radius: 14px !important;
    border: 1px solid rgba(37, 99, 235, .22) !important;
    background: #fff !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    outline: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.dev-v23-buy-key-page input:focus,
body.dev-v23-buy-key-page select:focus,
body.dev-v23-buy-key-page textarea:focus {
    border-color: rgba(37, 99, 235, .65) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12) !important;
}

body.dev-v23-buy-key-page label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: #102a56;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .01em;
}

body.dev-v23-buy-key-page button,
body.dev-v23-buy-key-page .btn,
body.dev-v23-buy-key-page a.button {
    min-height: 48px;
    border-radius: 14px !important;
    font-weight: 900 !important;
    letter-spacing: .01em;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .18);
}

body.dev-v23-buy-key-page .alert,
body.dev-v23-buy-key-page [class*="success"],
body.dev-v23-buy-key-page [class*="error"] {
    border-radius: 16px !important;
}

body.dev-v23-admin-key-requests-page {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, .10), transparent 32rem),
        linear-gradient(135deg, #f6fbff 0%, #effcf7 100%);
}

body.dev-v23-admin-key-requests-page .alert {
    border-radius: 16px !important;
    font-weight: 800;
}

body.dev-v23-admin-key-requests-page .card,
body.dev-v23-admin-key-requests-page .panel,
body.dev-v23-admin-key-requests-page .box,
body.dev-v23-admin-key-requests-page section,
body.dev-v23-admin-key-requests-page .table-responsive {
    border-radius: 20px;
}

body.dev-v23-admin-key-requests-page input,
body.dev-v23-admin-key-requests-page select,
body.dev-v23-admin-key-requests-page textarea {
    min-height: 44px;
    border-radius: 12px !important;
}

body.dev-v23-admin-key-requests-page table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

body.dev-v23-admin-key-requests-page thead th {
    color: #102a56;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border-bottom: 0 !important;
}

body.dev-v23-admin-key-requests-page tbody tr {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

body.dev-v23-admin-key-requests-page tbody td {
    vertical-align: middle;
    border-top: 1px solid rgba(15, 23, 42, .06) !important;
    border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
}

body.dev-v23-admin-key-requests-page tbody td:first-child {
    border-left: 1px solid rgba(15, 23, 42, .06) !important;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

body.dev-v23-admin-key-requests-page tbody td:last-child {
    border-right: 1px solid rgba(15, 23, 42, .06) !important;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

body.dev-v23-admin-key-requests-page .btn,
body.dev-v23-admin-key-requests-page button,
body.dev-v23-admin-key-requests-page a[class*="btn"] {
    border-radius: 12px !important;
    font-weight: 850 !important;
}

body.dev-v23-admin-key-requests-page .badge,
body.dev-v23-admin-key-requests-page [class*="badge"],
body.dev-v23-admin-key-requests-page [class*="status"] {
    border-radius: 999px !important;
}

body.dev-v23-admin-key-requests-page .dev-v23-table-note {
    display: none;
}

@media (max-width: 768px) {
    body.dev-v23-buy-key-page {
        padding-bottom: 34px;
    }

    body.dev-v23-buy-key-page form {
        border-radius: 20px;
        padding: 18px;
        margin: 10px;
    }

    body.dev-v23-buy-key-page h1,
    body.dev-v23-buy-key-page h2 {
        font-size: clamp(24px, 8vw, 34px) !important;
        line-height: 1.12 !important;
    }

    body.dev-v23-buy-key-page input,
    body.dev-v23-buy-key-page select,
    body.dev-v23-buy-key-page textarea,
    body.dev-v23-buy-key-page button,
    body.dev-v23-buy-key-page .btn {
        font-size: 16px !important;
    }

    body.dev-v23-admin-key-requests-page {
        overflow-x: hidden;
    }

    body.dev-v23-admin-key-requests-page .table-responsive,
    body.dev-v23-admin-key-requests-page table {
        width: 100% !important;
        overflow: visible !important;
    }

    body.dev-v23-admin-key-requests-page table,
    body.dev-v23-admin-key-requests-page thead,
    body.dev-v23-admin-key-requests-page tbody,
    body.dev-v23-admin-key-requests-page th,
    body.dev-v23-admin-key-requests-page td,
    body.dev-v23-admin-key-requests-page tr {
        display: block;
    }

    body.dev-v23-admin-key-requests-page thead {
        display: none;
    }

    body.dev-v23-admin-key-requests-page tbody tr {
        margin: 0 0 14px;
        padding: 14px;
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 18px;
    }

    body.dev-v23-admin-key-requests-page tbody td {
        display: grid;
        grid-template-columns: minmax(105px, 38%) 1fr;
        gap: 12px;
        align-items: center;
        min-height: 38px;
        padding: 10px 0 !important;
        border: 0 !important;
        border-bottom: 1px dashed rgba(15, 23, 42, .10) !important;
        border-radius: 0 !important;
        word-break: break-word;
    }

    body.dev-v23-admin-key-requests-page tbody td:last-child {
        border-bottom: 0 !important;
    }

    body.dev-v23-admin-key-requests-page tbody td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .035em;
    }

    body.dev-v23-admin-key-requests-page .btn,
    body.dev-v23-admin-key-requests-page button,
    body.dev-v23-admin-key-requests-page a[class*="btn"] {
        min-height: 42px;
        width: auto;
        margin: 3px;
    }
}