/* LeapDigitals Part 8 - Billing, Invoice, Login, Register, Account Pages */

.ld-auth-page,
.ld-billing-page,
.ld-account-page {
    width: min(1180px, calc(100% - 34px));
    margin: 62px auto 88px;
}

.ld-auth-wrap {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 24px;
    align-items: center;
}

.ld-auth-visual,
.ld-auth-panel,
.ld-billing-panel,
.ld-account-panel {
    border-radius: 38px;
    padding: 32px;
}

.ld-auth-visual {
    min-height: 560px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.ld-auth-orb {
    width: min(100%, 430px);
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.78), rgba(255,255,255,.18) 36%, transparent 52%),
        conic-gradient(from 60deg, transparent, color-mix(in srgb, var(--ld-purple) 36%, transparent), color-mix(in srgb, var(--ld-blue) 32%, transparent), transparent);
    filter: drop-shadow(0 34px 72px rgba(70,41,151,.14));
    animation: ldBillingSpin 22s linear infinite;
}

.ld-auth-orb::after {
    content: "";
    position: absolute;
    inset: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,.32);
    border: 1px solid rgba(255,255,255,.64);
    backdrop-filter: blur(14px);
}

@keyframes ldBillingSpin {
    to { transform: rotate(360deg); }
}

.ld-auth-card {
    position: absolute;
    z-index: 2;
    width: min(78%, 330px);
    border-radius: 32px;
    padding: 24px;
    transform: rotateX(8deg) rotateY(-9deg);
}

.ld-auth-card h2,
.ld-auth-panel h1,
.ld-billing-hero h1,
.ld-account-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -.06em;
}

.ld-auth-card p,
.ld-auth-panel p,
.ld-billing-hero p,
.ld-account-hero p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--ld-muted);
    line-height: 1.75;
}

.ld-auth-panel form,
.ld-auth-panel .form-group,
.ld-auth-panel .logincontainer,
.ld-auth-panel .providerLinkingFeedback,
.ld-billing-panel form,
.ld-account-panel form {
    position: relative;
    z-index: 1;
}

.ld-auth-panel label,
.ld-billing-panel label,
.ld-account-panel label {
    font-weight: 900;
    color: var(--ld-ink);
    margin-bottom: 7px;
}

.ld-auth-panel .form-control,
.ld-billing-panel .form-control,
.ld-account-panel .form-control,
.ld-auth-panel input[type="text"],
.ld-auth-panel input[type="email"],
.ld-auth-panel input[type="password"],
.ld-auth-panel select,
.ld-auth-panel textarea,
.ld-billing-panel input[type="text"],
.ld-billing-panel input[type="email"],
.ld-billing-panel input[type="password"],
.ld-billing-panel select,
.ld-billing-panel textarea,
.ld-account-panel input[type="text"],
.ld-account-panel input[type="email"],
.ld-account-panel input[type="password"],
.ld-account-panel select,
.ld-account-panel textarea {
    min-height: 48px;
    border-radius: 16px !important;
    border: 1px solid rgba(116,73,223,.14) !important;
    background: rgba(255,255,255,.74) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.ld-auth-links {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 800;
}

.ld-auth-links a {
    color: var(--ld-purple);
}

.ld-auth-submit {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
}

.ld-billing-hero,
.ld-account-hero {
    border-radius: 38px;
    padding: 34px;
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: center;
}

.ld-billing-actions,
.ld-account-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.ld-billing-grid {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 18px;
    align-items: start;
}

.ld-billing-side {
    position: sticky;
    top: 112px;
}

.ld-billing-main,
.ld-billing-side {
    border-radius: 34px;
    padding: 26px;
}

.ld-panel-heading {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    font-size: 24px;
    letter-spacing: -.05em;
}

.ld-billing-list,
.ld-account-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}

.ld-billing-item,
.ld-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.54);
    border: 1px solid rgba(255,255,255,.74);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
    transition: transform .22s ease, background .22s ease;
}

a.ld-billing-item:hover,
a.ld-account-item:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.76);
    color: var(--ld-purple);
    text-decoration: none;
}

.ld-billing-item strong,
.ld-account-item strong {
    display: block;
    font-size: 15px;
    letter-spacing: -.03em;
}

.ld-billing-item span,
.ld-account-item span {
    display: block;
    margin-top: 4px;
    color: var(--ld-muted);
    font-size: 12px;
    font-weight: 800;
}

.ld-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--ld-purple);
    background: color-mix(in srgb, var(--ld-purple) 10%, transparent);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.ld-pill-paid,
.ld-pill-active {
    color: #108a52;
    background: rgba(112,236,165,.14);
}

.ld-pill-unpaid,
.ld-pill-overdue {
    color: #b42318;
    background: rgba(255,99,99,.12);
}

.ld-pill-cancelled,
.ld-pill-inactive {
    color: #667085;
    background: rgba(102,112,133,.12);
}

.ld-invoice-document {
    border-radius: 38px;
    padding: 32px;
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(255,255,255,.82);
    box-shadow: 0 26px 76px rgba(70,41,151,.12);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    position: relative;
    z-index: 1;
}

.ld-invoice-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(116,73,223,.12);
}

.ld-invoice-top h1 {
    margin: 0 0 8px;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -.07em;
}

.ld-invoice-meta {
    text-align: right;
    color: var(--ld-muted);
    font-weight: 800;
}

.ld-invoice-total {
    border-radius: 28px;
    padding: 24px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 38%),
        linear-gradient(135deg, var(--ld-purple-2), var(--ld-purple));
    color: #fff;
    box-shadow: 0 18px 42px rgba(70,41,151,.22), inset 0 1px 0 rgba(255,255,255,.34);
}

.ld-invoice-total strong {
    display: block;
    font-size: 34px;
    letter-spacing: -.05em;
}

.ld-invoice-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}

.ld-invoice-address {
    border-radius: 24px;
    padding: 18px;
    background: rgba(255,255,255,.56);
    border: 1px solid rgba(255,255,255,.74);
}

.ld-invoice-address strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ld-ink);
}

.ld-invoice-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 22px;
}

.ld-invoice-table th,
.ld-invoice-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(116,73,223,.10);
}

.ld-invoice-table th {
    background: color-mix(in srgb, var(--ld-purple) 8%, rgba(255,255,255,.8));
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ld-invoice-table td {
    background: rgba(255,255,255,.52);
}

.ld-invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.ld-empty-box {
    position: relative;
    z-index: 1;
    padding: 28px;
    border-radius: 24px;
    text-align: center;
    background: rgba(255,255,255,.48);
    border: 1px dashed rgba(116,73,223,.24);
}

.ld-empty-box strong {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
}

.ld-empty-box p {
    margin: 0 0 16px;
    color: var(--ld-muted);
    line-height: 1.7;
}

/* Broad WHMCS billing/account style refinements */
.invoice-container,
.view-invoice,
.masspay-container,
.credit-card-container,
.payment-methods-container,
.logincontainer,
.main-content form {
    border-radius: 28px;
}

.dataTables_wrapper,
.table-container,
.invoices-table,
.services-table {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    border-radius: 22px;
}

.table,
table.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table th,
.table td {
    border-color: rgba(116,73,223,.10) !important;
}

.table thead th {
    background: color-mix(in srgb, var(--ld-purple) 8%, rgba(255,255,255,.8)) !important;
    color: var(--ld-ink) !important;
    font-weight: 900 !important;
}

.table tbody td {
    background: rgba(255,255,255,.48) !important;
}

.badge,
.label {
    border-radius: 999px !important;
    padding: 6px 9px !important;
    font-weight: 900 !important;
}

@media (max-width: 980px) {
    .ld-auth-wrap,
    .ld-billing-grid,
    .ld-billing-hero,
    .ld-account-hero,
    .ld-invoice-top,
    .ld-invoice-address-grid {
        grid-template-columns: 1fr;
    }

    .ld-billing-side {
        position: static;
    }

    .ld-billing-actions,
    .ld-account-actions,
    .ld-invoice-meta,
    .ld-invoice-actions {
        justify-content: flex-start;
        text-align: left;
    }

    .ld-auth-visual {
        min-height: 360px;
    }
}

@media (max-width: 640px) {
    .ld-auth-page,
    .ld-billing-page,
    .ld-account-page {
        margin-top: 42px;
    }

    .ld-auth-panel,
    .ld-auth-visual,
    .ld-billing-hero,
    .ld-account-hero,
    .ld-billing-main,
    .ld-billing-side,
    .ld-account-panel,
    .ld-invoice-document {
        padding: 22px;
        border-radius: 28px;
    }

    .ld-billing-item,
    .ld-account-item {
        align-items: flex-start;
        flex-direction: column;
    }
}