/* _content/Photo8/Components/Account/Pages/AccessDenied.razor.rz.scp.css */
/* The scaffolded page was two lines of red text on the browser's default white, sitting under
   the app's dark navbar. Same page treatment as the rest of the signed-in app. */

.pi-denied-page[b-10t7qiydgx] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 60px 0;
}

.pi-denied-card[b-10t7qiydgx] {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 48px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pi-denied-icon[b-10t7qiydgx] {
    font-size: 56px;
    color: #f2e562;
    display: block;
    margin-bottom: 20px;
}

.pi-denied-card h1[b-10t7qiydgx] {
    font-size: 34px;
    font-weight: 400;
    margin: 0 0 14px;
}

.gradient-text[b-10t7qiydgx] {
    background: linear-gradient(90deg, #00b7ff, #8b35ff, #ff36c9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.pi-denied-lead[b-10t7qiydgx] {
    color: #cbd2e5;
    font-size: 16px;
    margin-bottom: 10px;
}

.pi-denied-note[b-10t7qiydgx] {
    color: #9ba5bc;
    font-size: 14px;
    margin-bottom: 28px;
}

.pi-denied-actions[b-10t7qiydgx] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.pi-btn-primary[b-10t7qiydgx],
.pi-btn-secondary[b-10t7qiydgx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    transition: all 0.2s;
    white-space: nowrap;
}

.pi-btn-primary[b-10t7qiydgx] {
    background: linear-gradient(90deg, #8b35ff, #00b7ff);
    color: white;
}

.pi-btn-primary:hover[b-10t7qiydgx] {
    opacity: 0.9;
    transform: translateY(-1px);
    color: white;
}

.pi-btn-secondary[b-10t7qiydgx] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd2e5;
}

.pi-btn-secondary:hover[b-10t7qiydgx] {
    border-color: rgba(0, 183, 255, 0.5);
    color: white;
}

.pi-btn-primary:focus-visible[b-10t7qiydgx],
.pi-btn-secondary:focus-visible[b-10t7qiydgx] {
    outline: 2px solid #00b7ff;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .pi-denied-page[b-10t7qiydgx] {
        padding: 32px 0;
    }

    .pi-denied-card[b-10t7qiydgx] {
        padding: 32px 20px;
    }

    .pi-denied-card h1[b-10t7qiydgx] {
        font-size: 28px;
    }

    /* Two buttons side by side leave each about 130px at this width, which cuts "Back to
       home" in half. Full width apiece, and a bigger tap target as a side effect. */
    .pi-denied-actions[b-10t7qiydgx] {
        flex-direction: column;
    }

    .pi-denied-actions .pi-btn-primary[b-10t7qiydgx],
    .pi-denied-actions .pi-btn-secondary[b-10t7qiydgx] {
        width: 100%;
    }
}
/* _content/Photo8/Components/Account/Pages/ConfirmEmail.razor.rz.scp.css */
/* Same shape as RegisterConfirmation — the two pages are the two halves of one flow, so they
   are deliberately identical. Kept scoped rather than shared from app.css because .gradient-text
   is redefined per component across this codebase, and a global one would reach pages that use
   the class without defining it. */

.pi-confirm-page[b-i9is6r4h8t] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 60px 0;
}

.pi-confirm-card[b-i9is6r4h8t] {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 48px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pi-confirm-icon[b-i9is6r4h8t] {
    font-size: 56px;
    color: #4ade80;
    display: block;
    margin-bottom: 20px;
}

.pi-confirm-icon-warn[b-i9is6r4h8t] {
    color: #f2e562;
}

.pi-confirm-card h1[b-i9is6r4h8t] {
    font-size: 34px;
    font-weight: 400;
    margin: 0 0 14px;
}

.gradient-text[b-i9is6r4h8t] {
    background: linear-gradient(90deg, #00b7ff, #8b35ff, #ff36c9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.pi-confirm-lead[b-i9is6r4h8t] {
    color: #cbd2e5;
    font-size: 16px;
    margin-bottom: 10px;
}

/* The address is the whole point of the page — it tells you which inbox to open — so it gets
   to stand out, and to break rather than widen the card on a narrow screen. */
.pi-confirm-email[b-i9is6r4h8t] {
    color: #ffffff;
    overflow-wrap: anywhere;
}

.pi-confirm-note[b-i9is6r4h8t] {
    color: #9ba5bc;
    font-size: 14px;
    margin-bottom: 28px;
}

.pi-confirm-actions[b-i9is6r4h8t] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.pi-btn-primary[b-i9is6r4h8t],
.pi-btn-secondary[b-i9is6r4h8t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    transition: all 0.2s;
    white-space: nowrap;
}

.pi-btn-primary[b-i9is6r4h8t] {
    background: linear-gradient(90deg, #8b35ff, #00b7ff);
    color: white;
}

.pi-btn-primary:hover[b-i9is6r4h8t] {
    opacity: 0.9;
    transform: translateY(-1px);
    color: white;
}

.pi-btn-secondary[b-i9is6r4h8t] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd2e5;
}

.pi-btn-secondary:hover[b-i9is6r4h8t] {
    border-color: rgba(0, 183, 255, 0.5);
    color: white;
}

.pi-btn-primary:focus-visible[b-i9is6r4h8t],
.pi-btn-secondary:focus-visible[b-i9is6r4h8t] {
    outline: 2px solid #00b7ff;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .pi-confirm-page[b-i9is6r4h8t] {
        padding: 32px 0;
    }

    .pi-confirm-card[b-i9is6r4h8t] {
        padding: 32px 20px;
    }

    .pi-confirm-card h1[b-i9is6r4h8t] {
        font-size: 28px;
    }

    /* Side by side these leave about 130px each, which clips "Resend the email". */
    .pi-confirm-actions[b-i9is6r4h8t] {
        flex-direction: column;
    }
}
/* _content/Photo8/Components/Account/Pages/CorrectEmail.razor.rz.scp.css */
/* Same shell as RegisterConfirmation and ConfirmEmail — three steps of one flow, so they match. Kept scoped rather than shared from app.css because .gradient-text
   is redefined per component across this codebase, and a global one would reach pages that use
   the class without defining it. */

.pi-confirm-page[b-o7pu89t02d] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 60px 0;
}

.pi-confirm-card[b-o7pu89t02d] {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 48px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pi-confirm-icon[b-o7pu89t02d] {
    font-size: 56px;
    color: #4ade80;
    display: block;
    margin-bottom: 20px;
}

.pi-confirm-icon-warn[b-o7pu89t02d] {
    color: #f2e562;
}

.pi-confirm-card h1[b-o7pu89t02d] {
    font-size: 34px;
    font-weight: 400;
    margin: 0 0 14px;
}

.gradient-text[b-o7pu89t02d] {
    background: linear-gradient(90deg, #00b7ff, #8b35ff, #ff36c9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.pi-confirm-lead[b-o7pu89t02d] {
    color: #cbd2e5;
    font-size: 16px;
    margin-bottom: 10px;
}

/* The address is the whole point of the page — it tells you which inbox to open — so it gets
   to stand out, and to break rather than widen the card on a narrow screen. */
.pi-confirm-email[b-o7pu89t02d] {
    color: #ffffff;
    overflow-wrap: anywhere;
}

.pi-confirm-note[b-o7pu89t02d] {
    color: #9ba5bc;
    font-size: 14px;
    margin-bottom: 28px;
}

.pi-confirm-actions[b-o7pu89t02d] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.pi-btn-primary[b-o7pu89t02d],
.pi-btn-secondary[b-o7pu89t02d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    transition: all 0.2s;
    white-space: nowrap;
}

.pi-btn-primary[b-o7pu89t02d] {
    background: linear-gradient(90deg, #8b35ff, #00b7ff);
    color: white;
}

.pi-btn-primary:hover[b-o7pu89t02d] {
    opacity: 0.9;
    transform: translateY(-1px);
    color: white;
}

.pi-btn-secondary[b-o7pu89t02d] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd2e5;
}

.pi-btn-secondary:hover[b-o7pu89t02d] {
    border-color: rgba(0, 183, 255, 0.5);
    color: white;
}

.pi-btn-primary:focus-visible[b-o7pu89t02d],
.pi-btn-secondary:focus-visible[b-o7pu89t02d] {
    outline: 2px solid #00b7ff;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .pi-confirm-page[b-o7pu89t02d] {
        padding: 32px 0;
    }

    .pi-confirm-card[b-o7pu89t02d] {
        padding: 32px 20px;
    }

    .pi-confirm-card h1[b-o7pu89t02d] {
        font-size: 28px;
    }

    /* Side by side these leave about 130px each, which clips "Resend the email". */
    .pi-confirm-actions[b-o7pu89t02d] {
        flex-direction: column;
    }
}

/* ── Form ──
   The scaffold used Bootstrap's form-floating in a col-md-4, which on this dark card gave a
   white input a third of the width, floating left under a centred heading.

   ::deep throughout, anchored on .pi-confirm-card which is a plain div in this component and so
   does carry the scope attribute. EditForm, InputText and ValidationMessage are components, and
   scoped CSS never reaches a child component's own markup — the first attempt styled nothing and
   left the input white. The label above is plain markup, which is why it took its styling. */

.pi-confirm-card[b-o7pu89t02d]  .pi-confirm-form {
    text-align: left;
    max-width: 340px;
    margin: 0 auto 4px;
}

.pi-confirm-label[b-o7pu89t02d] {
    display: block;
    color: #cbd2e5;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.pi-confirm-card[b-o7pu89t02d]  .pi-confirm-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(5, 8, 22, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 15px;
    transition: border-color 0.2s;
}

.pi-confirm-card[b-o7pu89t02d]  .pi-confirm-input::placeholder {
    color: #6b7590;
}

.pi-confirm-card[b-o7pu89t02d]  .pi-confirm-input:focus {
    outline: none;
    border-color: #00b7ff;
    box-shadow: 0 0 0 3px rgba(0, 183, 255, 0.18);
}

/* Bootstrap's is-invalid paints a red border; keep that but in this palette. */
.pi-confirm-card[b-o7pu89t02d]  .pi-confirm-input.invalid {
    border-color: #ef6461;
}

.pi-confirm-card[b-o7pu89t02d]  .pi-confirm-error {
    display: block;
    color: #ff9b98;
    font-size: 13px;
    margin-top: 6px;
}

.pi-confirm-submit[b-o7pu89t02d] {
    width: 100%;
    margin-top: 18px;
    cursor: pointer;
}

.pi-confirm-note-footer[b-o7pu89t02d] {
    margin-top: 22px;
    margin-bottom: 0;
}

.pi-confirm-link[b-o7pu89t02d] {
    color: #6cc7ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pi-confirm-link:hover[b-o7pu89t02d] {
    color: #ffffff;
}

/* This form asks for three things rather than one, so the labels after the first need air
   between them and the field above. */
.pi-confirm-label-spaced[b-o7pu89t02d] {
    margin-top: 16px;
}

/* The submit-time failures (wrong password, address already in use) are not field validation and
   have no field to sit under, so they go above the form as a summary. */
.pi-confirm-card[b-o7pu89t02d]  .pi-confirm-error-summary,
.pi-confirm-error-summary[b-o7pu89t02d] {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(239, 100, 97, 0.12);
    border: 1px solid rgba(239, 100, 97, 0.35);
}
/* _content/Photo8/Components/Account/Pages/CustomerRegister.razor.rz.scp.css */
/* Customer Register Page - Photo Infinity Theme */

/* Page Wrapper */
.pi-customer-register-page[b-j6dego40u2] {
    padding: 2rem 1rem;
    min-height: calc(100vh - 200px);
    color: #e0e0e0;
}

.pi-customer-register-page .container[b-j6dego40u2] {
    max-width: 800px;
}

/* Register Card */
.pi-register-card[b-j6dego40u2] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.9) 0%, rgba(20, 20, 40, 0.95) 100%);
    border: 1px solid rgba(138, 43, 226, 0.4);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
    overflow: hidden;
}

/* Header */
.pi-register-header[b-j6dego40u2] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.25) 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
    padding: 2rem 2.5rem;
    text-align: center;
}

.pi-header-icon[b-j6dego40u2] {
    font-size: 3rem;
    color: #3b82f6;
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6));
    display: block;
    margin-bottom: 0.75rem;
}

.pi-header-title[b-j6dego40u2] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.gradient-text[b-j6dego40u2] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Body */
.pi-register-body[b-j6dego40u2] {
    padding: 2.5rem;
}

/* Alerts */
.pi-alert[b-j6dego40u2] {
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border: 1px solid;
    backdrop-filter: blur(10px);
}

.pi-alert-info[b-j6dego40u2] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-color: rgba(59, 130, 246, 0.3);
    color: #7dd3fc;
}

.pi-alert-icon[b-j6dego40u2] {
    font-size: 1.5rem;
}

.pi-alert strong[b-j6dego40u2] {
    color: #ffffff;
    display: block;
    margin-bottom: 0.25rem;
}

.pi-alert small[b-j6dego40u2] {
    color: #d1d5db;
}

/* Form Elements */
[b-j6dego40u2] .form-floating {
    position: relative;
}

[b-j6dego40u2] .form-floating > label {
    color: #9ca3af;
    font-size: 0.9rem;
}

[b-j6dego40u2] .form-control {
    background: rgba(20, 20, 40, 0.8);
    border: 1px solid rgba(138, 43, 226, 0.4);
    color: #ffffff;
    border-radius: 10px;
    transition: all 0.3s ease;
}

[b-j6dego40u2] .form-control:focus {
    background: rgba(30, 30, 60, 0.9);
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
    color: #ffffff;
}

[b-j6dego40u2] .form-control::placeholder {
    color: #6b7280;
}

[b-j6dego40u2] .form-text {
    color: #9ca3af;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Password Toggle Button */
[b-j6dego40u2] .btn-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.3s ease;
}

[b-j6dego40u2] .btn-link:hover {
    color: #3b82f6;
}

/* Button */
.pi-btn-customer[b-j6dego40u2] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px 0 rgba(59, 130, 246, 0.5);
    position: relative;
    overflow: hidden;
}

.pi-btn-customer[b-j6dego40u2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.pi-btn-customer:hover:not(:disabled)[b-j6dego40u2]::before {
    left: 100%;
}

.pi-btn-customer:hover:not(:disabled)[b-j6dego40u2] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px 0 rgba(59, 130, 246, 0.7);
    color: #ffffff;
}

.pi-btn-customer:disabled[b-j6dego40u2] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Info Boxes */
.pi-info-box[b-j6dego40u2] {
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid;
    backdrop-filter: blur(10px);
    margin-bottom: 1rem;
}

.pi-info-benefits[b-j6dego40u2] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(21, 128, 61, 0.12) 100%);
    border-color: rgba(34, 197, 94, 0.3);
}

.pi-info-password[b-j6dego40u2] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
    border-color: rgba(102, 126, 234, 0.3);
}

.pi-info-title[b-j6dego40u2] {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.pi-info-title i[b-j6dego40u2] {
    color: #3b82f6;
    margin-right: 0.5rem;
}

.pi-feature-list[b-j6dego40u2] {
    list-style: none;
    padding-left: 0;
    font-size: 0.9rem;
    color: #d1d5db;
}

.pi-feature-list li[b-j6dego40u2] {
    padding: 0.35rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.pi-feature-list li[b-j6dego40u2]::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #3b82f6;
    font-weight: bold;
}

.pi-info-box small[b-j6dego40u2] {
    color: #d1d5db;
    line-height: 1.5;
}

/* Footer */
.pi-register-footer[b-j6dego40u2] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.5) 0%, rgba(20, 20, 40, 0.6) 100%);
    border-top: 1px solid rgba(138, 43, 226, 0.3);
    padding: 1.5rem 2.5rem;
    text-align: center;
    color: #b0b0b0;
}

.pi-register-footer small[b-j6dego40u2] {
    color: #b0b0b0;
    font-size: 0.95rem;
}

.pi-link[b-j6dego40u2] {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.pi-link[b-j6dego40u2]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    transition: width 0.3s ease;
}

.pi-link:hover[b-j6dego40u2] {
    color: #60a5fa;
}

.pi-link:hover[b-j6dego40u2]::after {
    width: 100%;
}

/* Validation */
[b-j6dego40u2] .text-danger,
[b-j6dego40u2] .validation-message {
    color: #f87171 !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

[b-j6dego40u2] .validation-summary {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    padding: 1rem;
    color: #f87171;
}

[b-j6dego40u2] .validation-summary ul {
    margin: 0;
    padding-left: 1.5rem;
}

/* Spinner */
[b-j6dego40u2] .spinner-border {
    color: #ffffff !important;
}

/* Responsive Design */
@media (max-width: 992px) {
    .pi-register-body[b-j6dego40u2] {
        padding: 2rem 1.5rem;
    }

    .pi-register-header[b-j6dego40u2] {
        padding: 1.75rem 1.5rem;
    }

    .pi-header-icon[b-j6dego40u2] {
        font-size: 2.5rem;
    }

    .pi-header-title[b-j6dego40u2] {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .pi-customer-register-page[b-j6dego40u2] {
        padding: 1rem 0.5rem;
    }

    .pi-register-card[b-j6dego40u2] {
        border-radius: 15px;
    }

    .pi-register-body[b-j6dego40u2] {
        padding: 1.5rem 1.25rem;
    }

    .pi-register-header[b-j6dego40u2] {
        padding: 1.5rem 1.25rem;
    }

    .pi-header-icon[b-j6dego40u2] {
        font-size: 2.25rem;
    }

    .pi-header-title[b-j6dego40u2] {
        font-size: 1.35rem;
    }

    .pi-register-footer[b-j6dego40u2] {
        padding: 1.25rem 1.25rem;
    }

    .pi-btn-customer[b-j6dego40u2] {
        font-size: 1.05rem;
        padding: 0.9rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .pi-register-body[b-j6dego40u2] {
        padding: 1.25rem 1rem;
    }

    .pi-register-header[b-j6dego40u2] {
        padding: 1.25rem 1rem;
    }

    .pi-btn-customer[b-j6dego40u2] {
        font-size: 1rem;
        padding: 0.85rem 1rem;
    }

    .pi-alert[b-j6dego40u2] {
        padding: 0.875rem 1rem;
    }

    .pi-info-box[b-j6dego40u2] {
        padding: 1rem;
    }
}
/* _content/Photo8/Components/Account/Pages/ForgotPassword.razor.rz.scp.css */
/* Forgot Password Page - Photo Infinity Theme */

/* Page Wrapper */
.pi-forgot-password-page[b-td2uiaqn4a] {
    padding: 2rem 1rem;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
}

.pi-forgot-password-page .container[b-td2uiaqn4a] {
    max-width: 600px;
}

.pi-forgot-password-page .col-md-6[b-td2uiaqn4a],
.pi-forgot-password-page .col-lg-5[b-td2uiaqn4a] {
    max-width: 100%;
}

/* Auth Card */
.pi-auth-card[b-td2uiaqn4a] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.9) 0%, rgba(20, 20, 40, 0.95) 100%);
    border: 1px solid rgba(138, 43, 226, 0.4);
    border-radius: 20px;
    padding: 3rem 3rem;
    backdrop-filter: blur(15px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}

/* Icon Hero */
.pi-icon-hero[b-td2uiaqn4a] {
    font-size: 4rem;
    color: #667eea;
    filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.6));
    display: block;
    margin-bottom: 1rem;
}

/* Page Title */
.pi-page-title[b-td2uiaqn4a] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.gradient-text[b-td2uiaqn4a] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.pi-page-subtitle[b-td2uiaqn4a] {
    color: #b0b0b0;
    font-size: 1.05rem;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Form Elements */
.pi-form-label[b-td2uiaqn4a] {
    color: #e0e0e0;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
}

.pi-form-control[b-td2uiaqn4a] {
    background: rgba(20, 20, 40, 0.8);
    border: 1px solid rgba(138, 43, 226, 0.4);
    color: #ffffff;
    border-radius: 10px;
    padding: 0.95rem 1.25rem;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    width: 100%;
}

.pi-form-control:focus[b-td2uiaqn4a] {
    background: rgba(30, 30, 60, 0.9);
    border-color: #667eea;
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
    color: #ffffff;
    outline: none;
}

.pi-form-control[b-td2uiaqn4a]::placeholder {
    color: #6b7280;
}

/* Button */
.pi-btn-gradient[b-td2uiaqn4a] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px 0 rgba(102, 126, 234, 0.5);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.pi-btn-gradient[b-td2uiaqn4a]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.pi-btn-gradient:hover[b-td2uiaqn4a]::before {
    left: 100%;
}

.pi-btn-gradient:hover[b-td2uiaqn4a] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px 0 rgba(102, 126, 234, 0.7);
    color: #ffffff;
}

.pi-btn-gradient:active[b-td2uiaqn4a] {
    transform: translateY(0);
}

/* Link */
.pi-link[b-td2uiaqn4a] {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.pi-link[b-td2uiaqn4a]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #f093fb);
    transition: width 0.3s ease;
}

.pi-link:hover[b-td2uiaqn4a] {
    color: #f093fb;
}

.pi-link:hover[b-td2uiaqn4a]::after {
    width: 100%;
}

/* Validation */
.pi-validation-summary[b-td2uiaqn4a] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: #f87171;
}

.pi-validation-summary ul[b-td2uiaqn4a] {
    margin: 0;
    padding-left: 1.5rem;
}

.pi-validation-message[b-td2uiaqn4a] {
    color: #f87171;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
    .pi-auth-card[b-td2uiaqn4a] {
        padding: 2.5rem 2rem;
        max-width: 100%;
    }

    .pi-icon-hero[b-td2uiaqn4a] {
        font-size: 3.5rem;
    }

    .pi-page-title[b-td2uiaqn4a] {
        font-size: 2rem;
    }

    .pi-page-subtitle[b-td2uiaqn4a] {
        font-size: 1rem;
    }

    .pi-btn-gradient[b-td2uiaqn4a] {
        font-size: 1.05rem;
        padding: 0.9rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .pi-forgot-password-page[b-td2uiaqn4a] {
        padding: 1rem 0.5rem;
    }

    .pi-auth-card[b-td2uiaqn4a] {
        padding: 2rem 1.5rem;
        border-radius: 15px;
    }

    .pi-icon-hero[b-td2uiaqn4a] {
        font-size: 3rem;
    }

    .pi-page-title[b-td2uiaqn4a] {
        font-size: 1.75rem;
    }

    .pi-btn-gradient[b-td2uiaqn4a] {
        padding: 0.85rem 1.25rem;
        font-size: 1rem;
    }
}
/* _content/Photo8/Components/Account/Pages/Login.razor.rz.scp.css */
/* Login Container */
.pi-login-container[b-s5rrnb16yn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Login Card */
.pi-login-card[b-s5rrnb16yn] {
    width: 500px;
    padding: 45px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 60px rgba(120, 0, 255, 0.15);
}

.pi-login-title[b-s5rrnb16yn] {
    font-size: 52px;
    margin: 0 0 10px;
    color: white;
}

.pi-login-subtitle[b-s5rrnb16yn] {
    color: #aaa;
    font-size: 20px;
    margin-bottom: 35px;
}

/* Form Elements */
.pi-label[b-s5rrnb16yn] {
    display: block;
    margin: 20px 0 8px;
    color: #ddd;
    font-size: 16px;
}

.pi-input[b-s5rrnb16yn] {
    width: 100%;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #080d18 !important;
    color: white !important;
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pi-input:focus[b-s5rrnb16yn] {
    outline: none;
    border-color: rgba(0, 183, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 183, 255, 0.1);
    background: #080d18 !important;
    color: white !important;
}

/* Override browser autofill styles */
.pi-input:-webkit-autofill[b-s5rrnb16yn],
.pi-input:-webkit-autofill:hover[b-s5rrnb16yn],
.pi-input:-webkit-autofill:focus[b-s5rrnb16yn],
.pi-input:-webkit-autofill:active[b-s5rrnb16yn] {
    -webkit-box-shadow: 0 0 0 30px #080d18 inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

.pi-input[b-s5rrnb16yn]::placeholder {
    color: #666;
}

/* Password Input Wrapper */
.pi-password-wrapper[b-s5rrnb16yn] {
    position: relative;
}

.pi-password-toggle[b-s5rrnb16yn] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.pi-password-toggle:hover[b-s5rrnb16yn] {
    color: #00b7ff;
}

.pi-password-toggle i[b-s5rrnb16yn] {
    font-size: 18px;
}

/* Checkbox */
.pi-checkbox-label[b-s5rrnb16yn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    color: #ddd;
    font-size: 16px;
    cursor: pointer;
}

.pi-checkbox[b-s5rrnb16yn] {
    width: auto !important;
    cursor: pointer;
    accent-color: #00b7ff;
}

/* Button */
.pi-button[b-s5rrnb16yn] {
    width: 100%;
    margin-top: 25px;
    padding: 17px;
    border: 0;
    border-radius: 12px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient(90deg, #007cff, #b400ff, #ff28c8);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pi-button:hover:not(:disabled)[b-s5rrnb16yn] {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 124, 255, 0.4);
}

.pi-button:active:not(:disabled)[b-s5rrnb16yn] {
    transform: translateY(0);
}

.pi-button:disabled[b-s5rrnb16yn] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Links */
.pi-links[b-s5rrnb16yn] {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pi-links a[b-s5rrnb16yn] {
    color: #28a8ff;
    text-decoration: none;
    transition: color 0.2s;
}

.pi-links a:hover[b-s5rrnb16yn] {
    color: #00b7ff;
    text-decoration: underline;
}

/* Gallery */
.pi-gallery[b-s5rrnb16yn] {
    position: relative;
    width: 520px;
    height: 450px;
    flex-shrink: 0;
}

/* Gallery cards should be absolutely positioned with specific styling */
.pi-gallery .pi-card[b-s5rrnb16yn] {
    position: absolute !important;
    width: 260px !important;
    height: 190px !important;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 0 35px rgba(120, 0, 255, 0.4) !important;
    background: linear-gradient(135deg, #17233d, #431a70) !important;
    padding: 0 !important;
}

.pi-gallery .pi-card img[b-s5rrnb16yn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gallery Card Positions.

   Each carries its own gradient now that the cards are empty. They used to be filled by images
   from picsum.photos and the shared background never showed; four identical tiles would have
   read as something that failed to load rather than as decoration. */
.pi-gallery .pi-card.pi-c1[b-s5rrnb16yn] {
    position: absolute;
    right: 40px;
    top: 30px;
    transform: rotate(6deg);
    background: linear-gradient(135deg, #1d3a5c, #4a1f7a) !important;
}

.pi-gallery .pi-card.pi-c2[b-s5rrnb16yn] {
    position: absolute;
    left: 20px;
    top: 100px;
    transform: rotate(-6deg);
    background: linear-gradient(135deg, #17233d, #6a2472) !important;
}

.pi-gallery .pi-card.pi-c3[b-s5rrnb16yn] {
    position: absolute;
    right: 80px;
    bottom: 30px;
    transform: rotate(-8deg);
    background: linear-gradient(135deg, #2a2050, #3b6288) !important;
}

.pi-gallery .pi-card.pi-c4[b-s5rrnb16yn] {
    position: absolute;
    left: 70px;
    bottom: 20px;
    transform: rotate(8deg);
    background: linear-gradient(135deg, #3d1f66, #1b4a63) !important;
}

/* Alerts */
.pi-alert[b-s5rrnb16yn] {
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 15px;
}

.pi-alert-success[b-s5rrnb16yn] {
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid rgba(40, 167, 69, 0.4);
    color: #5dff8f;
}

.pi-alert-danger[b-s5rrnb16yn] {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ff6b7f;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .pi-login-container[b-s5rrnb16yn] {
        gap: 50px;
    }

    .pi-gallery[b-s5rrnb16yn] {
        width: 420px;
        height: 380px;
    }

    .pi-gallery .pi-card[b-s5rrnb16yn] {
        width: 220px !important;
        height: 160px !important;
    }
}

@media (max-width: 1000px) {
    .pi-login-container[b-s5rrnb16yn] {
        flex-direction: column;
        gap: 40px;
    }

    .pi-gallery[b-s5rrnb16yn] {
        display: none;
    }

    .pi-login-card[b-s5rrnb16yn] {
        width: 100%;
        max-width: 500px;
    }
}

@media (max-width: 600px) {
    .pi-login-card[b-s5rrnb16yn] {
        padding: 30px;
        border-radius: 20px;
    }

    .pi-login-title[b-s5rrnb16yn] {
        font-size: 38px;
    }

    .pi-login-subtitle[b-s5rrnb16yn] {
        font-size: 16px;
        margin-bottom: 25px;
    }
}
/* _content/Photo8/Components/Account/Pages/Manage/ChangePassword.razor.rz.scp.css */
/* Photo Infinity Change Password Page Styling */

.password-card[b-v0mvg6xxds] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(38, 49, 83, 0.6);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.section-title[b-v0mvg6xxds] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: white;
}

.pi-label[b-v0mvg6xxds] {
    display: block;
    color: #b9c3d8;
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 14px;
}

.password-input-wrapper[b-v0mvg6xxds] {
    position: relative;
}

.pi-input[b-v0mvg6xxds] {
    width: 100%;
    padding: 15px;
    padding-right: 50px; /* Make room for toggle button */
    border-radius: 12px;
    background: #070c1d !important;
    color: white !important;
    border: 1px solid #303a60 !important;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pi-input:focus[b-v0mvg6xxds] {
    outline: none;
    border-color: #008cff !important;
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.15) !important;
}

.pi-input[b-v0mvg6xxds]::placeholder {
    color: #6b7490;
}

/* Target InputText components specifically */
[b-v0mvg6xxds] .pi-input,
[b-v0mvg6xxds] input.pi-input {
    width: 100%;
    padding: 15px;
    padding-right: 50px;
    border-radius: 12px;
    background: #070c1d !important;
    color: white !important;
    border: 1px solid #303a60 !important;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[b-v0mvg6xxds] .pi-input:focus,
[b-v0mvg6xxds] input.pi-input:focus {
    outline: none;
    border-color: #008cff !important;
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.15) !important;
}

/* Webkit autofill override */
.pi-input:-webkit-autofill[b-v0mvg6xxds],
.pi-input:-webkit-autofill:hover[b-v0mvg6xxds],
.pi-input:-webkit-autofill:focus[b-v0mvg6xxds] {
    -webkit-box-shadow: 0 0 0 1000px #070c1d inset !important;
    -webkit-text-fill-color: white !important;
    border: 1px solid #303a60 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Password toggle button */
.password-toggle[b-v0mvg6xxds] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #9ba5bc;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
    z-index: 10;
}

.password-toggle:hover[b-v0mvg6xxds] {
    color: white;
}

.password-toggle i[b-v0mvg6xxds] {
    font-size: 18px;
}

/* Submit button */
.pi-button[b-v0mvg6xxds] {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    color: white;
    background: linear-gradient(90deg, #8b35ff, #008cff);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pi-button:hover[b-v0mvg6xxds] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.pi-button:active[b-v0mvg6xxds] {
    transform: translateY(0);
}

.pi-button:disabled[b-v0mvg6xxds] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading state */
.loading-state[b-v0mvg6xxds] {
    text-align: center;
    padding: 40px;
    color: #9ba5bc;
}

.loading-state .spinner-border[b-v0mvg6xxds] {
    width: 3rem;
    height: 3rem;
    color: #008cff;
    margin-bottom: 15px;
}

/* Error card */
.error-card[b-v0mvg6xxds] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 20px;
    padding: 25px;
    color: white;
}

.error-card h4[b-v0mvg6xxds] {
    color: #ff6b6b;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-card ul[b-v0mvg6xxds] {
    color: #cbd2e5;
    margin: 15px 0;
}

.error-card p[b-v0mvg6xxds] {
    color: #cbd2e5;
}

.error-actions[b-v0mvg6xxds] {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.pi-button-secondary[b-v0mvg6xxds] {
    padding: 10px 20px;
    border-radius: 10px;
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(38, 49, 83, 0.6);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pi-button-secondary:hover[b-v0mvg6xxds] {
    background: rgba(11, 16, 36, 1);
    border-color: #008cff;
}

/* Validation messages */
[b-v0mvg6xxds] .text-danger {
    color: #ff6b6b !important;
    font-size: 13px;
    margin-top: 5px;
    display: block;
}

[b-v0mvg6xxds] .validation-message {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 5px;
}

/* Password requirements display (if using custom component) */
[b-v0mvg6xxds] .password-requirements {
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .password-card[b-v0mvg6xxds] {
        padding: 20px;
    }

    .error-actions[b-v0mvg6xxds] {
        flex-direction: column;
    }

    .pi-button[b-v0mvg6xxds],
    .pi-button-secondary[b-v0mvg6xxds] {
        width: 100%;
    }
}
/* _content/Photo8/Components/Account/Pages/Manage/Email.razor.rz.scp.css */
/* Photo Infinity Email Page Styling */

.email-card[b-06wkcp6tdw] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(38, 49, 83, 0.6);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.section-title[b-06wkcp6tdw] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: white;
}

.pi-label[b-06wkcp6tdw] {
    display: block;
    color: #b9c3d8;
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 14px;
}

.pi-input[b-06wkcp6tdw] {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    background: #070c1d !important;
    color: white !important;
    border: 1px solid #303a60 !important;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pi-input:focus[b-06wkcp6tdw] {
    outline: none;
    border-color: #008cff !important;
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.15) !important;
}

.pi-input:disabled[b-06wkcp6tdw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pi-input[b-06wkcp6tdw]::placeholder {
    color: #6b7490;
}

/* Target InputText components specifically */
[b-06wkcp6tdw] .pi-input,
[b-06wkcp6tdw] input.pi-input {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    background: #070c1d !important;
    color: white !important;
    border: 1px solid #303a60 !important;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[b-06wkcp6tdw] .pi-input:focus,
[b-06wkcp6tdw] input.pi-input:focus {
    outline: none;
    border-color: #008cff !important;
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.15) !important;
}

/* Webkit autofill override */
.pi-input:-webkit-autofill[b-06wkcp6tdw],
.pi-input:-webkit-autofill:hover[b-06wkcp6tdw],
.pi-input:-webkit-autofill:focus[b-06wkcp6tdw] {
    -webkit-box-shadow: 0 0 0 1000px #070c1d inset !important;
    -webkit-text-fill-color: white !important;
    border: 1px solid #303a60 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Email verified group */
.email-verified-group[b-06wkcp6tdw] {
    position: relative;
}

.verified-badge[b-06wkcp6tdw] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #2ecc71;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.verified-badge i[b-06wkcp6tdw] {
    font-size: 16px;
}

/* Verify link button */
.verify-link[b-06wkcp6tdw] {
    background: transparent;
    border: none;
    color: #008cff;
    padding: 8px 0;
    margin-top: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.verify-link:hover[b-06wkcp6tdw] {
    color: #0099ff;
    text-decoration: underline;
}

.verify-link i[b-06wkcp6tdw] {
    font-size: 14px;
}

/* Save button */
.pi-button[b-06wkcp6tdw] {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    color: white;
    background: linear-gradient(90deg, #8b35ff, #008cff);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.pi-button:hover[b-06wkcp6tdw] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.pi-button:active[b-06wkcp6tdw] {
    transform: translateY(0);
}

.pi-button:disabled[b-06wkcp6tdw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Validation messages */
[b-06wkcp6tdw] .text-danger {
    color: #ff6b6b !important;
    font-size: 13px;
    margin-top: 5px;
    display: block;
}

[b-06wkcp6tdw] .validation-message {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .email-card[b-06wkcp6tdw] {
        padding: 20px;
    }
}
/* _content/Photo8/Components/Account/Pages/Manage/Index.razor.rz.scp.css */
/* Photo Infinity Profile Page Styling */

.profile-card[b-wqrh56cdbd] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(38, 49, 83, 0.6);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.section-title[b-wqrh56cdbd] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: white;
}

.pi-label[b-wqrh56cdbd] {
    display: block;
    color: #b9c3d8;
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 14px;
}

.pi-input[b-wqrh56cdbd] {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    background: #070c1d !important;
    color: white !important;
    border: 1px solid #303a60 !important;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pi-input:focus[b-wqrh56cdbd] {
    outline: none;
    border-color: #008cff !important;
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.15) !important;
}

.pi-input:disabled[b-wqrh56cdbd] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pi-input[b-wqrh56cdbd]::placeholder {
    color: #6b7490;
}

/* Target InputText components specifically */
[b-wqrh56cdbd] .pi-input,
[b-wqrh56cdbd] input.pi-input {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    background: #070c1d !important;
    color: white !important;
    border: 1px solid #303a60 !important;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[b-wqrh56cdbd] .pi-input:focus,
[b-wqrh56cdbd] input.pi-input:focus {
    outline: none;
    border-color: #008cff !important;
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.15) !important;
}

/* Webkit autofill override */
.pi-input:-webkit-autofill[b-wqrh56cdbd],
.pi-input:-webkit-autofill:hover[b-wqrh56cdbd],
.pi-input:-webkit-autofill:focus[b-wqrh56cdbd] {
    -webkit-box-shadow: 0 0 0 1000px #070c1d inset !important;
    -webkit-text-fill-color: white !important;
    border: 1px solid #303a60 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Two-column input row */
.input-row[b-wqrh56cdbd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Save button */
.pi-button[b-wqrh56cdbd] {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    color: white;
    background: linear-gradient(90deg, #8b35ff, #008cff);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.pi-button:hover[b-wqrh56cdbd] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.pi-button:active[b-wqrh56cdbd] {
    transform: translateY(0);
}

.pi-button:disabled[b-wqrh56cdbd] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Delete account section */
.delete-section[b-wqrh56cdbd] {
    margin-top: 20px;
    border-color: rgba(220, 53, 69, 0.3);
    background: rgba(220, 53, 69, 0.05);
}

.delete-section h4[b-wqrh56cdbd] {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.delete-text[b-wqrh56cdbd] {
    color: #cbd2e5;
    margin-bottom: 15px;
}

/* Sits directly under the Display Name box, so it needs to read as a note rather than a value —
   muted, but still above the 4.5:1 AA floor against the panel. */
.field-hint[b-wqrh56cdbd] {
    color: #9aa5bd;
    font-size: 13px;
    line-height: 1.4;
    margin: 6px 0 0;
}

/* #dc3545 is Bootstrap's danger red, mixed for white pages; on this dark panel it measured 4.3:1,
   just under the 4.5:1 AA floor. Lightened until it clears — on the button that deletes an account,
   which is the last thing that should be hard to read. */
.pi-button-danger[b-wqrh56cdbd] {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    background: transparent;
    border: 2px solid #ff6b7a;
    color: #ff6b7a;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.pi-button-danger:hover[b-wqrh56cdbd] {
    background: #ff6b7a;
    color: #2b0308;
}

/* Validation messages */
[b-wqrh56cdbd] .text-danger {
    color: #ff6b6b !important;
    font-size: 13px;
    margin-top: 5px;
    display: block;
}

[b-wqrh56cdbd] .validation-message {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .input-row[b-wqrh56cdbd] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .profile-card[b-wqrh56cdbd] {
        padding: 20px;
    }
}
/* _content/Photo8/Components/Account/Pages/Manage/ResetAuthenticator.razor.rz.scp.css */
/* Matches the other account pages. These classes are defined per page in this folder rather than
   once globally, so a page without its own copy - which this one was - renders unstyled. */

.password-card[b-6kvgug95fy] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(38, 49, 83, 0.6);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.section-title[b-6kvgug95fy] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: white;
}

@media (max-width: 768px) {
    .password-card[b-6kvgug95fy] {
        padding: 20px;
    }
}
/* _content/Photo8/Components/Account/Pages/Manage/SetPassword.razor.rz.scp.css */
/* Photo Infinity Set Password Page Styling.
   Deliberately the same rules as ChangePassword.razor.css: the two pages are the same form to
   look at, and only one of them is ever shown to a given account. Scoped CSS is per component,
   so they cannot share one file without moving both out of scoped styling. */

.password-card[b-x0lsxzz1o3] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(38, 49, 83, 0.6);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.section-title[b-x0lsxzz1o3] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: white;
}

.pi-label[b-x0lsxzz1o3] {
    display: block;
    color: #b9c3d8;
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 14px;
}

.pi-intro[b-x0lsxzz1o3] {
    color: #b9c3d8;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 5px;
}

.pi-intro strong[b-x0lsxzz1o3] {
    color: white;
}

.password-input-wrapper[b-x0lsxzz1o3] {
    position: relative;
}

.pi-input[b-x0lsxzz1o3] {
    width: 100%;
    padding: 15px;
    padding-right: 50px; /* Make room for toggle button */
    border-radius: 12px;
    background: #070c1d !important;
    color: white !important;
    border: 1px solid #303a60 !important;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pi-input:focus[b-x0lsxzz1o3] {
    outline: none;
    border-color: #008cff !important;
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.15) !important;
}

.pi-input[b-x0lsxzz1o3]::placeholder {
    color: #6b7490;
}

/* Target InputText components specifically */
[b-x0lsxzz1o3] .pi-input,
[b-x0lsxzz1o3] input.pi-input {
    width: 100%;
    padding: 15px;
    padding-right: 50px;
    border-radius: 12px;
    background: #070c1d !important;
    color: white !important;
    border: 1px solid #303a60 !important;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[b-x0lsxzz1o3] .pi-input:focus,
[b-x0lsxzz1o3] input.pi-input:focus {
    outline: none;
    border-color: #008cff !important;
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.15) !important;
}

/* Webkit autofill override */
.pi-input:-webkit-autofill[b-x0lsxzz1o3],
.pi-input:-webkit-autofill:hover[b-x0lsxzz1o3],
.pi-input:-webkit-autofill:focus[b-x0lsxzz1o3] {
    -webkit-box-shadow: 0 0 0 1000px #070c1d inset !important;
    -webkit-text-fill-color: white !important;
    border: 1px solid #303a60 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Password toggle button */
.password-toggle[b-x0lsxzz1o3] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #9ba5bc;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
    z-index: 10;
}

.password-toggle:hover[b-x0lsxzz1o3] {
    color: white;
}

.password-toggle i[b-x0lsxzz1o3] {
    font-size: 18px;
}

/* Submit button */
.pi-button[b-x0lsxzz1o3] {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    color: white;
    background: linear-gradient(90deg, #8b35ff, #008cff);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pi-button:hover[b-x0lsxzz1o3] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.pi-button:active[b-x0lsxzz1o3] {
    transform: translateY(0);
}

.pi-button:disabled[b-x0lsxzz1o3] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading state */
.loading-state[b-x0lsxzz1o3] {
    text-align: center;
    padding: 40px;
    color: #9ba5bc;
}

.loading-state .spinner-border[b-x0lsxzz1o3] {
    width: 3rem;
    height: 3rem;
    color: #008cff;
    margin-bottom: 15px;
}

/* Error card */
.error-card[b-x0lsxzz1o3] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 20px;
    padding: 25px;
    color: white;
}

.error-card h4[b-x0lsxzz1o3] {
    color: #ff6b6b;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-card ul[b-x0lsxzz1o3] {
    color: #cbd2e5;
    margin: 15px 0;
}

.error-card p[b-x0lsxzz1o3] {
    color: #cbd2e5;
}

.error-actions[b-x0lsxzz1o3] {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.pi-button-secondary[b-x0lsxzz1o3] {
    padding: 10px 20px;
    border-radius: 10px;
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(38, 49, 83, 0.6);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pi-button-secondary:hover[b-x0lsxzz1o3] {
    background: rgba(11, 16, 36, 1);
    border-color: #008cff;
}

/* Validation messages */
[b-x0lsxzz1o3] .text-danger {
    color: #ff6b6b !important;
    font-size: 13px;
    margin-top: 5px;
    display: block;
}

[b-x0lsxzz1o3] .validation-message {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 5px;
}

/* Password requirements display (if using custom component) */
[b-x0lsxzz1o3] .password-requirements {
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .password-card[b-x0lsxzz1o3] {
        padding: 20px;
    }

    .error-actions[b-x0lsxzz1o3] {
        flex-direction: column;
    }

    .pi-button[b-x0lsxzz1o3],
    .pi-button-secondary[b-x0lsxzz1o3] {
        width: 100%;
    }
}
/* _content/Photo8/Components/Account/Pages/Manage/TwoFactorAuthentication.razor.rz.scp.css */
/* This page was raw Bootstrap — white cards, a #0d6efd header bar and a .bg-light tips panel —
   sitting on the dark layout, which is why several of its own colours were unreadable: .text-warning
   at 1.63:1 on white, "Contact Support" at 2.15:1 in the footer. Rather than keep patching colours
   chosen for a white page, the surfaces are themed to match the rest of the site and the Bootstrap
   accents then work as intended on top of them.

   Bootstrap sets .bg-primary, .bg-light, .border-* and the .text-* utilities with !important, so
   the rules that override those need it too. */

.pi-2fa-page[b-lqgwtsvm33] {
    color: #e0e0e0;
}

/* Cards ------------------------------------------------------------------ */

.pi-2fa-page .card[b-lqgwtsvm33] {
    background: var(--pi-panel, rgba(11, 16, 36, 0.85));
    border: 1px solid var(--pi-line, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    color: #e0e0e0;
}

/* Inner cards sit on the outer one, so they need to read as a layer above it rather than the same
   flat panel twice. */
.pi-2fa-page .card .card[b-lqgwtsvm33] {
    background: rgba(255, 255, 255, 0.035);
    border-radius: 12px;
}

.pi-2fa-page .card-header[b-lqgwtsvm33] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.18) 0%, rgba(139, 53, 255, 0.18) 100%) !important;
    border-bottom: 1px solid var(--pi-line, rgba(255, 255, 255, 0.08));
    color: #ffffff !important;
    border-radius: 16px 16px 0 0;
}

.pi-2fa-page .card .card .card-header[b-lqgwtsvm33] {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px 12px 0 0;
}

.pi-2fa-page .card-header h3[b-lqgwtsvm33],
.pi-2fa-page .card-header h5[b-lqgwtsvm33] {
    color: #ffffff;
    margin: 0;
}

.pi-2fa-page .card-footer[b-lqgwtsvm33] {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid var(--pi-line, rgba(255, 255, 255, 0.08));
    color: var(--pi-text-muted, #9aa5bd) !important;
    border-radius: 0 0 16px 16px;
}

/* The status cards use border colour as their signal, so these have to carry through — Bootstrap
   declares .border-* as !important. Softened from the solid Bootstrap hues, which are loud against
   a dark panel, while staying clearly distinguishable. */
.pi-2fa-page .border-success[b-lqgwtsvm33] {
    border-color: rgba(46, 204, 113, 0.55) !important;
}

.pi-2fa-page .border-warning[b-lqgwtsvm33] {
    border-color: rgba(245, 158, 11, 0.55) !important;
}

.pi-2fa-page .border-info[b-lqgwtsvm33] {
    border-color: rgba(0, 183, 255, 0.45) !important;
}

/* The security-tips panel. .bg-light is a near-white fill. */
.pi-2fa-page .bg-light[b-lqgwtsvm33] {
    background: rgba(255, 255, 255, 0.035) !important;
}

/* Text ------------------------------------------------------------------- */

/* All five of these are Bootstrap hues mixed for white pages. On the dark panels they are either
   too dark to read or, in amber's case, fine — the earlier scoped fix that darkened .text-warning
   to #7a5200 was for the white card this page no longer has, and is removed with it. */
.pi-2fa-page .text-muted[b-lqgwtsvm33] {
    color: var(--pi-text-muted, #9aa5bd) !important;
}

.pi-2fa-page .text-success[b-lqgwtsvm33] {
    color: #4ade80 !important;
}

.pi-2fa-page .text-warning[b-lqgwtsvm33] {
    color: #fbbf24 !important;
}

.pi-2fa-page .text-danger[b-lqgwtsvm33] {
    color: #ff6b7a !important;
}

.pi-2fa-page .text-info[b-lqgwtsvm33] {
    color: var(--pi-blue, #00b7ff) !important;
}

.pi-2fa-page h5[b-lqgwtsvm33],
.pi-2fa-page h6[b-lqgwtsvm33],
.pi-2fa-page strong[b-lqgwtsvm33] {
    color: #ffffff;
}

.pi-2fa-page li[b-lqgwtsvm33],
.pi-2fa-page p[b-lqgwtsvm33] {
    color: #cbd2e5;
}

/* The footer link is no longer inside a white card, so app.css's inherit rule for .card links now
   resolves to the footer's muted grey. Give it the theme's link colour back. */
.pi-2fa-page .card-footer a[b-lqgwtsvm33] {
    color: var(--pi-blue, #00b7ff) !important;
}

/* Alerts ----------------------------------------------------------------- */

.pi-2fa-page .alert[b-lqgwtsvm33] {
    border-radius: 12px;
    border: 1px solid;
}

.pi-2fa-page .alert-danger[b-lqgwtsvm33] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #ffb4bc;
}

.pi-2fa-page .alert-warning[b-lqgwtsvm33] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}

.pi-2fa-page .alert-info[b-lqgwtsvm33] {
    background: rgba(0, 183, 255, 0.10);
    border-color: rgba(0, 183, 255, 0.32);
    color: #a3edfd;
}

.pi-2fa-page .alert h5[b-lqgwtsvm33],
.pi-2fa-page .alert h6[b-lqgwtsvm33] {
    color: inherit;
}

.pi-2fa-page .alert p[b-lqgwtsvm33] {
    color: inherit;
}

/* Buttons ---------------------------------------------------------------- */

/* Outline buttons borrow their contrast from whatever is behind them, and what is behind them is
   now dark, so the Bootstrap hues have to lighten to match. Each keeps its own meaning. */
.pi-2fa-page .btn-outline-primary[b-lqgwtsvm33] {
    color: var(--pi-blue, #00b7ff);
    border-color: rgba(0, 183, 255, 0.6);
}

.pi-2fa-page .btn-outline-info[b-lqgwtsvm33] {
    color: #a3edfd;
    border-color: rgba(163, 237, 253, 0.5);
}

.pi-2fa-page .btn-outline-warning[b-lqgwtsvm33] {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.55);
}

.pi-2fa-page .btn-outline-danger[b-lqgwtsvm33] {
    color: #ff6b7a;
    border-color: rgba(255, 107, 122, 0.55);
}

.pi-2fa-page .btn-outline-secondary[b-lqgwtsvm33] {
    color: #cbd2e5;
    border-color: rgba(203, 210, 229, 0.4);
}

.pi-2fa-page .btn-outline-primary:hover[b-lqgwtsvm33],
.pi-2fa-page .btn-outline-info:hover[b-lqgwtsvm33],
.pi-2fa-page .btn-outline-warning:hover[b-lqgwtsvm33],
.pi-2fa-page .btn-outline-danger:hover[b-lqgwtsvm33],
.pi-2fa-page .btn-outline-secondary:hover[b-lqgwtsvm33] {
    color: #05121c;
}

.pi-2fa-page .btn-outline-primary:hover[b-lqgwtsvm33] {
    background: var(--pi-blue, #00b7ff);
    border-color: var(--pi-blue, #00b7ff);
}

.pi-2fa-page .btn-outline-info:hover[b-lqgwtsvm33] {
    background: #a3edfd;
    border-color: #a3edfd;
}

.pi-2fa-page .btn-outline-warning:hover[b-lqgwtsvm33] {
    background: #fbbf24;
    border-color: #fbbf24;
}

.pi-2fa-page .btn-outline-danger:hover[b-lqgwtsvm33] {
    background: #ff6b7a;
    border-color: #ff6b7a;
}

.pi-2fa-page .btn-outline-secondary:hover[b-lqgwtsvm33] {
    background: #cbd2e5;
    border-color: #cbd2e5;
}

/* The disabled "Enable 2FA First" was Bootstrap grey on grey. It has to still read as disabled,
   so it stays muted — just not to the point of vanishing. */
.pi-2fa-page .btn-secondary:disabled[b-lqgwtsvm33] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--pi-text-muted, #9aa5bd);
    opacity: 1;
}

/* btn-group-vertical fuses its children's corners; with the rounder buttons here that left odd
   square joins, and the two actions in each group are unrelated enough to stand apart. */
.pi-2fa-page .btn-group-vertical > .btn[b-lqgwtsvm33] {
    border-radius: 10px !important;
    margin-bottom: 0.5rem;
}

.pi-2fa-page .btn-group-vertical > .btn:last-child[b-lqgwtsvm33] {
    margin-bottom: 0;
}

/* Layout ----------------------------------------------------------------- */

/* Bootstrap's col-md-6 splits a row in two as soon as the *window* passes 768px, which says
   nothing about how much room this column actually has: the app sidebar takes 250px, the account
   layout's menu and padding take roughly 400 more, so on a 1231px window these panels were sharing
   about 480px — 240px each, enough to break "Not Configured" over two lines and "Not applicable
   until 2FA is on" over four.

   A container query asks the question that matters: how wide is the column these panels are in.
   Below 700px of it they stack and use the full width; above, they sit side by side as intended. */
.pi-2fa-page[b-lqgwtsvm33] {
    container-type: inline-size;
}

@container (max-width: 700px) {
    .pi-2fa-page .row > [class*="col-md-"][b-lqgwtsvm33] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* The status list is plain inline content — an icon, a bold label, a value — so it wraps like
   prose. It was briefly flex here, which made each of those an item that could not reflow and put
   the value on its own line the moment the label filled the row. */
.pi-2fa-page .list-unstyled li[b-lqgwtsvm33] {
    line-height: 1.5;
}

.pi-2fa-page .list-unstyled li i[b-lqgwtsvm33] {
    margin-right: 0.35rem;
}

@media (max-width: 575.98px) {
    .pi-2fa-page .card-header h3[b-lqgwtsvm33] {
        font-size: 1.25rem;
    }
}
/* _content/Photo8/Components/Account/Pages/PhotographerRegister.razor.rz.scp.css */
/* Photographer Register Page - Photo Infinity Theme */

/* Page Wrapper */
.pi-photographer-register-page[b-xu5sm9azg8] {
    padding: 2rem 1rem;
    min-height: calc(100vh - 200px);
    color: #e0e0e0;
}

.pi-photographer-register-page .container[b-xu5sm9azg8] {
    max-width: 1000px;
}

/* Register Card */
.pi-register-card[b-xu5sm9azg8] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.9) 0%, rgba(20, 20, 40, 0.95) 100%);
    border: 1px solid rgba(138, 43, 226, 0.4);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
    overflow: hidden;
}

/* Header */
.pi-register-header[b-xu5sm9azg8] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(21, 128, 61, 0.25) 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.3);
    padding: 2rem 2.5rem;
    text-align: center;
}

.pi-header-icon[b-xu5sm9azg8] {
    font-size: 3rem;
    color: #22c55e;
    filter: drop-shadow(0 0 15px rgba(34, 197, 94, 0.6));
    display: block;
    margin-bottom: 0.75rem;
}

.pi-header-title[b-xu5sm9azg8] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.gradient-text[b-xu5sm9azg8] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #4ade80 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Body */
.pi-register-body[b-xu5sm9azg8] {
    padding: 2.5rem;
}

/* Alerts */
.pi-alert[b-xu5sm9azg8] {
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border: 1px solid;
    backdrop-filter: blur(10px);
}

.pi-alert-success[b-xu5sm9azg8] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(21, 128, 61, 0.15) 100%);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.pi-alert-info[b-xu5sm9azg8] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-color: rgba(102, 126, 234, 0.3);
    color: #7dd3fc;
}

.pi-alert-icon[b-xu5sm9azg8] {
    font-size: 1.5rem;
}

.pi-alert strong[b-xu5sm9azg8] {
    color: #ffffff;
    display: block;
    margin-bottom: 0.25rem;
}

.pi-alert small[b-xu5sm9azg8] {
    color: #d1d5db;
}

/* Form Elements */
[b-xu5sm9azg8] .form-floating {
    position: relative;
}

[b-xu5sm9azg8] .form-floating > label {
    color: #9ca3af;
    font-size: 0.9rem;
}

[b-xu5sm9azg8] .form-control {
    background: rgba(20, 20, 40, 0.8);
    border: 1px solid rgba(138, 43, 226, 0.4);
    color: #ffffff;
    border-radius: 10px;
    transition: all 0.3s ease;
}

[b-xu5sm9azg8] .form-control:focus {
    background: rgba(30, 30, 60, 0.9);
    border-color: #22c55e;
    box-shadow: 0 0 0 0.25rem rgba(34, 197, 94, 0.25);
    color: #ffffff;
}

[b-xu5sm9azg8] .form-control::placeholder {
    color: #6b7280;
}

[b-xu5sm9azg8] .form-text {
    color: #9ca3af;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Password Toggle Button */
[b-xu5sm9azg8] .btn-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.3s ease;
}

[b-xu5sm9azg8] .btn-link:hover {
    color: #22c55e;
}

/* Button */
.pi-btn-photographer[b-xu5sm9azg8] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px 0 rgba(34, 197, 94, 0.5);
    position: relative;
    overflow: hidden;
}

.pi-btn-photographer[b-xu5sm9azg8]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.pi-btn-photographer:hover:not(:disabled)[b-xu5sm9azg8]::before {
    left: 100%;
}

.pi-btn-photographer:hover:not(:disabled)[b-xu5sm9azg8] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px 0 rgba(34, 197, 94, 0.7);
    color: #ffffff;
}

.pi-btn-photographer:disabled[b-xu5sm9azg8] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Info Boxes (Sidebar) */
.pi-info-box[b-xu5sm9azg8] {
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid;
    backdrop-filter: blur(10px);
}

.pi-info-features[b-xu5sm9azg8] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.6) 0%, rgba(20, 20, 40, 0.7) 100%);
    border-color: rgba(138, 43, 226, 0.3);
}

.pi-info-warning[b-xu5sm9azg8] {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(202, 138, 4, 0.12) 100%);
    border-color: rgba(234, 179, 8, 0.3);
}

.pi-info-password[b-xu5sm9azg8] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
    border-color: rgba(102, 126, 234, 0.3);
}

.pi-info-title[b-xu5sm9azg8] {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.pi-info-title i[b-xu5sm9azg8] {
    color: #22c55e;
    margin-right: 0.5rem;
}

.pi-feature-list[b-xu5sm9azg8] {
    list-style: none;
    padding-left: 0;
    font-size: 0.9rem;
    color: #d1d5db;
}

.pi-feature-list li[b-xu5sm9azg8] {
    padding: 0.35rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.pi-feature-list li[b-xu5sm9azg8]::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: bold;
}

.pi-info-box small[b-xu5sm9azg8] {
    color: #d1d5db;
    line-height: 1.5;
}

/* Footer */
.pi-register-footer[b-xu5sm9azg8] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.5) 0%, rgba(20, 20, 40, 0.6) 100%);
    border-top: 1px solid rgba(138, 43, 226, 0.3);
    padding: 1.5rem 2.5rem;
    text-align: center;
    color: #b0b0b0;
}

.pi-register-footer small[b-xu5sm9azg8] {
    color: #b0b0b0;
    font-size: 0.95rem;
}

.pi-link[b-xu5sm9azg8] {
    color: #22c55e;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.pi-link[b-xu5sm9azg8]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    transition: width 0.3s ease;
}

.pi-link:hover[b-xu5sm9azg8] {
    color: #4ade80;
}

.pi-link:hover[b-xu5sm9azg8]::after {
    width: 100%;
}

/* Validation */
[b-xu5sm9azg8] .text-danger,
[b-xu5sm9azg8] .validation-message {
    color: #f87171 !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

[b-xu5sm9azg8] .validation-summary {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    padding: 1rem;
    color: #f87171;
}

[b-xu5sm9azg8] .validation-summary ul {
    margin: 0;
    padding-left: 1.5rem;
}

/* Spinner */
[b-xu5sm9azg8] .spinner-border {
    color: #ffffff !important;
}

/* Responsive Design */
@media (max-width: 992px) {
    .pi-register-body[b-xu5sm9azg8] {
        padding: 2rem 1.5rem;
    }

    .pi-register-header[b-xu5sm9azg8] {
        padding: 1.75rem 1.5rem;
    }

    .pi-header-icon[b-xu5sm9azg8] {
        font-size: 2.5rem;
    }

    .pi-header-title[b-xu5sm9azg8] {
        font-size: 1.5rem;
    }

    .pi-info-box[b-xu5sm9azg8] {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 768px) {
    .pi-photographer-register-page[b-xu5sm9azg8] {
        padding: 1rem 0.5rem;
    }

    .pi-register-card[b-xu5sm9azg8] {
        border-radius: 15px;
    }

    .pi-register-body[b-xu5sm9azg8] {
        padding: 1.5rem 1.25rem;
    }

    .pi-register-header[b-xu5sm9azg8] {
        padding: 1.5rem 1.25rem;
    }

    .pi-header-icon[b-xu5sm9azg8] {
        font-size: 2.25rem;
    }

    .pi-header-title[b-xu5sm9azg8] {
        font-size: 1.35rem;
    }

    .pi-register-footer[b-xu5sm9azg8] {
        padding: 1.25rem 1.25rem;
    }

    .pi-btn-photographer[b-xu5sm9azg8] {
        font-size: 1.05rem;
        padding: 0.9rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .pi-register-body[b-xu5sm9azg8] {
        padding: 1.25rem 1rem;
    }

    .pi-register-header[b-xu5sm9azg8] {
        padding: 1.25rem 1rem;
    }

    .pi-btn-photographer[b-xu5sm9azg8] {
        font-size: 1rem;
        padding: 0.85rem 1rem;
    }

    .pi-alert[b-xu5sm9azg8] {
        padding: 0.875rem 1rem;
    }

    .pi-info-box[b-xu5sm9azg8] {
        padding: 1rem;
    }
}
/* _content/Photo8/Components/Account/Pages/Register.razor.rz.scp.css */
/* Register Page - Photo Infinity Theme */

/* Page Wrapper */
.pi-register-page[b-pt5bt91nxf] {
    padding: 2rem 0;
    color: #e0e0e0;
}

/* Page Header */
.pi-page-header[b-pt5bt91nxf] {
    margin-bottom: 3rem;
}

.pi-logo-img[b-pt5bt91nxf] {
    height: 3rem;
    filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.4));
}

.pi-page-title[b-pt5bt91nxf] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.gradient-text[b-pt5bt91nxf] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pi-page-subtitle[b-pt5bt91nxf] {
    color: #b0b0b0;
    font-size: 1.25rem;
}

/* Choice Cards */
/* This is an <a> now rather than a div with a click handler, so it needs to be laid out as a
   block, keep its own text colour instead of the link colour, and — the reason for the change —
   show where the keyboard is. */
.pi-choice-card[b-pt5bt91nxf] {
    display: block;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 2px solid;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    cursor: pointer;
    transition: all 0.4s ease;
    overflow: hidden;
    position: relative;
}

.pi-choice-card:hover[b-pt5bt91nxf],
.pi-choice-card:focus-visible[b-pt5bt91nxf] {
    color: inherit;
    text-decoration: none;
}

.pi-choice-card:focus-visible[b-pt5bt91nxf] {
    outline: 3px solid #4dc3ff;
    outline-offset: 3px;
}

.pi-choice-card[b-pt5bt91nxf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.pi-choice-card:hover[b-pt5bt91nxf]::before {
    opacity: 1;
}

/* Customer Card */
.pi-customer-card[b-pt5bt91nxf] {
    border-color: rgba(102, 126, 234, 0.5);
}

.pi-customer-card:hover[b-pt5bt91nxf] {
    transform: translateY(-10px);
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 12px 40px 0 rgba(102, 126, 234, 0.4);
}

/* Photographer Card */
.pi-photographer-card[b-pt5bt91nxf] {
    border-color: rgba(34, 197, 94, 0.5);
}

.pi-photographer-card:hover[b-pt5bt91nxf] {
    transform: translateY(-10px);
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 12px 40px 0 rgba(34, 197, 94, 0.4);
}

/* Card Content */
[b-pt5bt91nxf] .card-body {
    position: relative;
    z-index: 1;
}

.pi-card-icon[b-pt5bt91nxf] {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
    filter: drop-shadow(0 0 15px currentColor);
}

.pi-icon-customer[b-pt5bt91nxf] {
    color: #667eea;
}

.pi-icon-photographer[b-pt5bt91nxf] {
    color: #22c55e;
}

.pi-card-title[b-pt5bt91nxf] {
    font-weight: 700;
    font-size: 1.5rem;
}

.pi-customer-card .pi-card-title[b-pt5bt91nxf] {
    color: #667eea;
    text-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.pi-photographer-card .pi-card-title[b-pt5bt91nxf] {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.pi-card-text[b-pt5bt91nxf] {
    color: #d1d5db;
    line-height: 1.6;
}

/* Info Badges */
.pi-info-badge[b-pt5bt91nxf] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(21, 128, 61, 0.15) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: #4ade80;
    backdrop-filter: blur(5px);
}

.pi-badge-warning[b-pt5bt91nxf] {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(202, 138, 4, 0.15) 100%);
    border-color: rgba(234, 179, 8, 0.3);
    color: #fbbf24;
}

.pi-info-badge i[b-pt5bt91nxf] {
    font-size: 1rem;
}

/* Buttons */
.pi-btn-customer[b-pt5bt91nxf] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.4);
    position: relative;
    overflow: hidden;
}

.pi-btn-customer[b-pt5bt91nxf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.pi-btn-customer:hover[b-pt5bt91nxf]::before {
    left: 100%;
}

.pi-btn-customer:hover[b-pt5bt91nxf] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.6);
    color: #ffffff;
}

.pi-btn-photographer[b-pt5bt91nxf] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(34, 197, 94, 0.4);
    position: relative;
    overflow: hidden;
}

.pi-btn-photographer[b-pt5bt91nxf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.pi-btn-photographer:hover[b-pt5bt91nxf]::before {
    left: 100%;
}

.pi-btn-photographer:hover[b-pt5bt91nxf] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(34, 197, 94, 0.6);
    color: #ffffff;
}

/* Sign In Link */
.pi-signin-link[b-pt5bt91nxf] {
    margin-top: 3rem;
}

.pi-signin-link p[b-pt5bt91nxf] {
    color: #b0b0b0;
    font-size: 1rem;
}

.pi-link[b-pt5bt91nxf] {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.pi-link[b-pt5bt91nxf]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #f093fb);
    transition: width 0.3s ease;
}

.pi-link:hover[b-pt5bt91nxf] {
    color: #f093fb;
}

.pi-link:hover[b-pt5bt91nxf]::after {
    width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .pi-page-title[b-pt5bt91nxf] {
        font-size: 2rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .pi-logo-img[b-pt5bt91nxf] {
        height: 2.5rem;
    }

    .pi-page-subtitle[b-pt5bt91nxf] {
        font-size: 1rem;
    }

    .pi-card-icon[b-pt5bt91nxf] {
        font-size: 3rem;
    }

    .pi-card-title[b-pt5bt91nxf] {
        font-size: 1.25rem;
    }

    .pi-card-text[b-pt5bt91nxf] {
        font-size: 1rem;
    }

    .pi-choice-card[b-pt5bt91nxf] {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    [b-pt5bt91nxf] .card-body {
        padding: 2rem 1.5rem !important;
    }

    .pi-btn-customer[b-pt5bt91nxf],
    .pi-btn-photographer[b-pt5bt91nxf] {
        padding: 0.625rem 1.5rem;
        font-size: 0.95rem;
    }
}
/* _content/Photo8/Components/Account/Pages/RegisterConfirmation.razor.rz.scp.css */
/* The scaffolded page was a bare h1 and one line of text on the browser's default white, sitting
   under the app's dark account nav. Same treatment as AccessDenied. */

.pi-confirm-page[b-gdl82jry56] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 60px 0;
}

.pi-confirm-card[b-gdl82jry56] {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 48px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pi-confirm-icon[b-gdl82jry56] {
    font-size: 56px;
    color: #4ade80;
    display: block;
    margin-bottom: 20px;
}

.pi-confirm-icon-warn[b-gdl82jry56] {
    color: #f2e562;
}

.pi-confirm-card h1[b-gdl82jry56] {
    font-size: 34px;
    font-weight: 400;
    margin: 0 0 14px;
}

.gradient-text[b-gdl82jry56] {
    background: linear-gradient(90deg, #00b7ff, #8b35ff, #ff36c9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.pi-confirm-lead[b-gdl82jry56] {
    color: #cbd2e5;
    font-size: 16px;
    margin-bottom: 10px;
}

/* The address is the whole point of the page — it tells you which inbox to open — so it gets
   to stand out, and to break rather than widen the card on a narrow screen. */
.pi-confirm-email[b-gdl82jry56] {
    color: #ffffff;
    overflow-wrap: anywhere;
}

.pi-confirm-note[b-gdl82jry56] {
    color: #9ba5bc;
    font-size: 14px;
    margin-bottom: 28px;
}

.pi-confirm-actions[b-gdl82jry56] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.pi-btn-primary[b-gdl82jry56],
.pi-btn-secondary[b-gdl82jry56] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    transition: all 0.2s;
    white-space: nowrap;
}

.pi-btn-primary[b-gdl82jry56] {
    background: linear-gradient(90deg, #8b35ff, #00b7ff);
    color: white;
}

.pi-btn-primary:hover[b-gdl82jry56] {
    opacity: 0.9;
    transform: translateY(-1px);
    color: white;
}

.pi-btn-secondary[b-gdl82jry56] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd2e5;
}

.pi-btn-secondary:hover[b-gdl82jry56] {
    border-color: rgba(0, 183, 255, 0.5);
    color: white;
}

.pi-btn-primary:focus-visible[b-gdl82jry56],
.pi-btn-secondary:focus-visible[b-gdl82jry56] {
    outline: 2px solid #00b7ff;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .pi-confirm-page[b-gdl82jry56] {
        padding: 32px 0;
    }

    .pi-confirm-card[b-gdl82jry56] {
        padding: 32px 20px;
    }

    .pi-confirm-card h1[b-gdl82jry56] {
        font-size: 28px;
    }

    /* Side by side these leave about 130px each, which clips "Resend the email". */
    .pi-confirm-actions[b-gdl82jry56] {
        flex-direction: column;
    }
}

/* The "Wrong address?" line. Same treatment as the equivalent footer link on
   ResendEmailConfirmation — these are three steps of one flow and are meant to match. */
.pi-confirm-note-footer[b-gdl82jry56] {
    margin-top: 22px;
    margin-bottom: 0;
}

.pi-confirm-link[b-gdl82jry56] {
    color: #6cc7ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pi-confirm-link:hover[b-gdl82jry56] {
    color: #ffffff;
}
/* _content/Photo8/Components/Account/Pages/ResendEmailConfirmation.razor.rz.scp.css */
/* Same shell as RegisterConfirmation and ConfirmEmail — three steps of one flow, so they match. Kept scoped rather than shared from app.css because .gradient-text
   is redefined per component across this codebase, and a global one would reach pages that use
   the class without defining it. */

.pi-confirm-page[b-4h9l1oil79] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 60px 0;
}

.pi-confirm-card[b-4h9l1oil79] {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 48px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pi-confirm-icon[b-4h9l1oil79] {
    font-size: 56px;
    color: #4ade80;
    display: block;
    margin-bottom: 20px;
}

.pi-confirm-icon-warn[b-4h9l1oil79] {
    color: #f2e562;
}

.pi-confirm-card h1[b-4h9l1oil79] {
    font-size: 34px;
    font-weight: 400;
    margin: 0 0 14px;
}

.gradient-text[b-4h9l1oil79] {
    background: linear-gradient(90deg, #00b7ff, #8b35ff, #ff36c9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.pi-confirm-lead[b-4h9l1oil79] {
    color: #cbd2e5;
    font-size: 16px;
    margin-bottom: 10px;
}

/* The address is the whole point of the page — it tells you which inbox to open — so it gets
   to stand out, and to break rather than widen the card on a narrow screen. */
.pi-confirm-email[b-4h9l1oil79] {
    color: #ffffff;
    overflow-wrap: anywhere;
}

.pi-confirm-note[b-4h9l1oil79] {
    color: #9ba5bc;
    font-size: 14px;
    margin-bottom: 28px;
}

.pi-confirm-actions[b-4h9l1oil79] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.pi-btn-primary[b-4h9l1oil79],
.pi-btn-secondary[b-4h9l1oil79] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    transition: all 0.2s;
    white-space: nowrap;
}

.pi-btn-primary[b-4h9l1oil79] {
    background: linear-gradient(90deg, #8b35ff, #00b7ff);
    color: white;
}

.pi-btn-primary:hover[b-4h9l1oil79] {
    opacity: 0.9;
    transform: translateY(-1px);
    color: white;
}

.pi-btn-secondary[b-4h9l1oil79] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd2e5;
}

.pi-btn-secondary:hover[b-4h9l1oil79] {
    border-color: rgba(0, 183, 255, 0.5);
    color: white;
}

.pi-btn-primary:focus-visible[b-4h9l1oil79],
.pi-btn-secondary:focus-visible[b-4h9l1oil79] {
    outline: 2px solid #00b7ff;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .pi-confirm-page[b-4h9l1oil79] {
        padding: 32px 0;
    }

    .pi-confirm-card[b-4h9l1oil79] {
        padding: 32px 20px;
    }

    .pi-confirm-card h1[b-4h9l1oil79] {
        font-size: 28px;
    }

    /* Side by side these leave about 130px each, which clips "Resend the email". */
    .pi-confirm-actions[b-4h9l1oil79] {
        flex-direction: column;
    }
}

/* ── Form ──
   The scaffold used Bootstrap's form-floating in a col-md-4, which on this dark card gave a
   white input a third of the width, floating left under a centred heading.

   ::deep throughout, anchored on .pi-confirm-card which is a plain div in this component and so
   does carry the scope attribute. EditForm, InputText and ValidationMessage are components, and
   scoped CSS never reaches a child component's own markup — the first attempt styled nothing and
   left the input white. The label above is plain markup, which is why it took its styling. */

.pi-confirm-card[b-4h9l1oil79]  .pi-confirm-form {
    text-align: left;
    max-width: 340px;
    margin: 0 auto 4px;
}

.pi-confirm-label[b-4h9l1oil79] {
    display: block;
    color: #cbd2e5;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.pi-confirm-card[b-4h9l1oil79]  .pi-confirm-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(5, 8, 22, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 15px;
    transition: border-color 0.2s;
}

.pi-confirm-card[b-4h9l1oil79]  .pi-confirm-input::placeholder {
    color: #6b7590;
}

.pi-confirm-card[b-4h9l1oil79]  .pi-confirm-input:focus {
    outline: none;
    border-color: #00b7ff;
    box-shadow: 0 0 0 3px rgba(0, 183, 255, 0.18);
}

/* Bootstrap's is-invalid paints a red border; keep that but in this palette. */
.pi-confirm-card[b-4h9l1oil79]  .pi-confirm-input.invalid {
    border-color: #ef6461;
}

.pi-confirm-card[b-4h9l1oil79]  .pi-confirm-error {
    display: block;
    color: #ff9b98;
    font-size: 13px;
    margin-top: 6px;
}

.pi-confirm-submit[b-4h9l1oil79] {
    width: 100%;
    margin-top: 18px;
    cursor: pointer;
}

.pi-confirm-note-footer[b-4h9l1oil79] {
    margin-top: 22px;
    margin-bottom: 0;
}

.pi-confirm-link[b-4h9l1oil79] {
    color: #6cc7ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pi-confirm-link:hover[b-4h9l1oil79] {
    color: #ffffff;
}
/* _content/Photo8/Components/Account/Pages/Suspended.razor.rz.scp.css */
/* This page was raw Bootstrap — a white card and five stacked alert boxes in danger red, info
   blue, success green, a nested info inside the success one, and a light grey — sitting under the
   app's dark navbar. Same treatment as AccessDenied, which is the other page in this pair: a
   status page you land on rather than a form you fill in. */

.pi-suspended-page[b-puhqo37xak] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 60px 0;
}

/* Wider than the 520px AccessDenied card: this one carries a details list and two or three
   blocks of explanation rather than a single sentence. */
.pi-suspended-card[b-puhqo37xak] {
    max-width: 640px;
    margin: 0 auto;
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 48px 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pi-suspended-icon[b-puhqo37xak] {
    font-size: 56px;
    color: #ff6b6b;
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.pi-suspended-card h1[b-puhqo37xak] {
    font-size: 34px;
    font-weight: 400;
    text-align: center;
    margin: 0 0 16px;
}

.gradient-text[b-puhqo37xak] {
    background: linear-gradient(90deg, #00b7ff, #8b35ff, #ff36c9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.pi-suspended-lead[b-puhqo37xak] {
    color: #cbd2e5;
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
}

.pi-suspended-note[b-puhqo37xak] {
    color: #9ba5bc;
    font-size: 14px;
    margin-bottom: 0;
}

.pi-suspended-lead + .pi-suspended-note[b-puhqo37xak] {
    text-align: center;
}

/* Label/value pairs in two columns, collapsing to stacked rows on a phone. */
.pi-suspended-details[b-puhqo37xak] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    margin: 28px 0;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.pi-suspended-details dt[b-puhqo37xak] {
    color: #9ba5bc;
    font-size: 14px;
    font-weight: 500;
}

.pi-suspended-details dd[b-puhqo37xak] {
    color: #e6ebf7;
    font-size: 14px;
    margin: 0;
}

.pi-suspended-permanent[b-puhqo37xak] {
    color: #ff8585;
    font-weight: 700;
}

.pi-suspended-block[b-puhqo37xak] {
    margin-top: 24px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.pi-suspended-block h2[b-puhqo37xak] {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pi-suspended-block p[b-puhqo37xak] {
    color: #cbd2e5;
    font-size: 14px;
    margin: 0 0 10px;
}

.pi-suspended-block p:last-child[b-puhqo37xak] {
    margin-bottom: 0;
}

.pi-suspended-block ul[b-puhqo37xak] {
    margin: 0;
    padding-left: 20px;
    color: #cbd2e5;
    font-size: 14px;
}

.pi-suspended-block li[b-puhqo37xak] {
    margin-bottom: 6px;
}

.pi-suspended-block li:last-child[b-puhqo37xak] {
    margin-bottom: 0;
}

.pi-suspended-good[b-puhqo37xak] {
    color: #5fe3b0;
}

.pi-suspended-block a[b-puhqo37xak] {
    color: #4dc3ff;
}

.pi-suspended-block.is-payment[b-puhqo37xak] {
    border-color: rgba(0, 220, 154, 0.35);
    background: rgba(0, 220, 154, 0.07);
}

.pi-suspended-block.is-payment .pi-btn-primary[b-puhqo37xak] {
    margin-top: 6px;
}

.pi-suspended-actions[b-puhqo37xak] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

.pi-btn-primary[b-puhqo37xak],
.pi-btn-secondary[b-puhqo37xak] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: 0;
    transition: all 0.2s;
    white-space: nowrap;
}

.pi-btn-primary[b-puhqo37xak] {
    background: linear-gradient(90deg, #8b35ff, #00b7ff);
    color: white;
}

.pi-btn-primary:hover[b-puhqo37xak] {
    opacity: 0.9;
    transform: translateY(-1px);
    color: white;
}

.pi-btn-secondary[b-puhqo37xak] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd2e5;
}

.pi-btn-secondary:hover[b-puhqo37xak] {
    border-color: rgba(0, 183, 255, 0.5);
    color: white;
}

.pi-btn-primary:focus-visible[b-puhqo37xak],
.pi-btn-secondary:focus-visible[b-puhqo37xak] {
    outline: 2px solid #00b7ff;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .pi-suspended-page[b-puhqo37xak] {
        padding: 32px 0;
    }

    .pi-suspended-card[b-puhqo37xak] {
        padding: 32px 20px;
    }

    .pi-suspended-card h1[b-puhqo37xak] {
        font-size: 28px;
    }

    /* Two columns leave the value about 90px wide at this width, which breaks a timestamp
       across three lines. Stacked, with the label sitting directly above its value. */
    .pi-suspended-details[b-puhqo37xak] {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .pi-suspended-details dd[b-puhqo37xak] {
        margin-bottom: 10px;
    }

    .pi-suspended-details dd:last-child[b-puhqo37xak] {
        margin-bottom: 0;
    }

    /* Side by side these each get about 130px, which cuts the labels in half. */
    .pi-suspended-actions[b-puhqo37xak] {
        flex-direction: column;
    }

    .pi-suspended-actions .pi-btn-secondary[b-puhqo37xak] {
        width: 100%;
    }
}
/* _content/Photo8/Components/Account/Shared/AuthMessage.razor.rz.scp.css */
/* Matches AccessDenied's treatment, which was the first of these pages to be dressed. Kept as
   its own copy rather than shared with that file: scoped CSS is per-component, so there is no
   way to reference those rules from here. */

.pi-auth-page[b-icctzx9cl7] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 60px 0;
}

.pi-auth-card[b-icctzx9cl7] {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 48px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pi-auth-icon[b-icctzx9cl7] {
    font-size: 56px;
    color: #f2e562;
    display: block;
    margin-bottom: 20px;
}

.pi-auth-icon-good[b-icctzx9cl7] {
    color: #3ddc97;
}

.pi-auth-icon-bad[b-icctzx9cl7] {
    color: #ff6b81;
}

.pi-auth-card h1[b-icctzx9cl7] {
    font-size: 34px;
    font-weight: 400;
    margin: 0 0 14px;
}

.gradient-text[b-icctzx9cl7] {
    background: linear-gradient(90deg, #00b7ff, #8b35ff, #ff36c9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.pi-auth-lead[b-icctzx9cl7] {
    color: #cbd2e5;
    font-size: 16px;
    margin-bottom: 10px;
}

.pi-auth-note[b-icctzx9cl7] {
    color: #9ba5bc;
    font-size: 14px;
    margin-bottom: 28px;
}

.pi-auth-extra[b-icctzx9cl7] {
    margin-bottom: 24px;
    text-align: left;
}

/* StatusMessage renders nothing at all when there is no status cookie, which is the normal case
   on InvalidUser. Without this the empty wrapper still contributes its margin. */
.pi-auth-extra:empty[b-icctzx9cl7] {
    margin-bottom: 0;
}

.pi-auth-actions[b-icctzx9cl7] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.pi-btn-primary[b-icctzx9cl7],
.pi-btn-secondary[b-icctzx9cl7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    transition: all 0.2s;
    white-space: nowrap;
}

.pi-btn-primary[b-icctzx9cl7] {
    background: linear-gradient(90deg, #8b35ff, #00b7ff);
    color: white;
}

.pi-btn-primary:hover[b-icctzx9cl7] {
    opacity: 0.9;
    transform: translateY(-1px);
    color: white;
}

.pi-btn-secondary[b-icctzx9cl7] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd2e5;
}

.pi-btn-secondary:hover[b-icctzx9cl7] {
    border-color: rgba(0, 183, 255, 0.5);
    color: white;
}

.pi-btn-primary:focus-visible[b-icctzx9cl7],
.pi-btn-secondary:focus-visible[b-icctzx9cl7] {
    outline: 2px solid #00b7ff;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .pi-auth-page[b-icctzx9cl7] {
        padding: 32px 0;
    }

    .pi-auth-card[b-icctzx9cl7] {
        padding: 32px 20px;
    }

    .pi-auth-card h1[b-icctzx9cl7] {
        font-size: 28px;
    }

    /* Side by side these leave about 130px each at this width, which cuts the longer label in
       half. Full width apiece, and a bigger tap target as a side effect. */
    .pi-auth-actions[b-icctzx9cl7] {
        flex-direction: column;
    }

    .pi-auth-actions .pi-btn-primary[b-icctzx9cl7],
    .pi-auth-actions .pi-btn-secondary[b-icctzx9cl7] {
        width: 100%;
    }
}
/* _content/Photo8/Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* Photo Infinity Account Settings Layout */

/* There was a "::deep :root { --pi-blue: ... }" block here declaring six colours. Scoped CSS
   compiles ::deep to a descendant selector, so it became "[b-en7rpwia0x] :root" - a :root that is
   a descendant of something. :root is always <html>, which is a descendant of nothing, so the
   rule never matched and not one of those variables was ever defined by it.

   The title below still drew correctly only because app.css defines --pi-blue, --pi-purple and
   --pi-pink globally. That is a bad thing to be relying on silently: the gradient is painted with
   -webkit-text-fill-color: transparent, so if those globals ever went away the declaration would
   collapse to linear-gradient(90deg, , , ), and the word "account" in the heading would simply
   not be visible. The fallbacks below are the same guard CartBadge and TwoFactorAuthentication
   already use. */

/* Container with gradient background */
.manage-container[b-en7rpwia0x] {
    min-height: 100vh;
    padding: 40px 70px;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.22), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
}

/* Page title */
.manage-title[b-en7rpwia0x] {
    font-size: 42px;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.manage-title .gradient-text[b-en7rpwia0x] {
    background: linear-gradient(90deg, var(--pi-blue, #00b7ff), var(--pi-purple, #8b35ff), var(--pi-pink, #ff36c9));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.manage-subtitle[b-en7rpwia0x] {
    color: #9ba5bc;
    font-size: 16px;
    margin-bottom: 35px;
}

/* Two-column layout.

   The content column was a fixed 650px. Added to the 240px menu, the 30px gap and this container's
   70px of padding either side, that is 1060px demanded whatever the window actually offers — and
   the app's own 250px sidebar comes out of the same width first. Below about 1310px the layout
   simply ran off the right-hand edge, and because html carries overflow-x: hidden it was clipped
   rather than scrollable: the footer of a card, and the right of every two-column row inside it,
   were cut off with nothing to indicate it. Above that width it stayed at 650px no matter how much
   room there was, which is what made these pages feel so cramped.

   minmax(0, 1fr) rather than plain 1fr: a grid track sized 1fr will not shrink below the
   min-content width of what is in it, and Bootstrap rows full of col-md-6 have a wide min-content,
   so 1fr alone reproduces the overflow at narrow widths. */
.manage-layout[b-en7rpwia0x] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 30px;
    margin-top: 35px;
    align-items: stretch;
}

.manage-sidebar[b-en7rpwia0x] {
    /* Sidebar will stretch to match content height */
}

.manage-content[b-en7rpwia0x] {
    /* Content area - children will have pi-card styling */
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .manage-container[b-en7rpwia0x] {
        padding: 30px 40px;
    }

    .manage-layout[b-en7rpwia0x] {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .manage-container[b-en7rpwia0x] {
        padding: 20px;
    }

    .manage-title[b-en7rpwia0x] {
        font-size: 32px;
    }

    .manage-layout[b-en7rpwia0x] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* _content/Photo8/Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* Photo Infinity Account Settings Menu */

.manage-menu[b-ubqszywqgv] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(38, 49, 83, 0.6);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: 100%;
}

[b-ubqszywqgv] .menu-item {
    display: block;
    width: 100%;
    padding: 15px 18px;
    border-radius: 12px;
    color: #9ca3af;
    text-decoration: none !important;
    transition: all 0.2s;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    border: 2px solid transparent;
    background: rgba(17, 24, 39, 0.4);
}

[b-ubqszywqgv] .menu-item:hover {
    color: #e5e7eb;
    background: rgba(31, 41, 55, 0.6);
    text-decoration: none !important;
}

[b-ubqszywqgv] .menu-item:focus {
    outline: none;
    text-decoration: none !important;
}

[b-ubqszywqgv] .menu-item:visited {
    color: #9ca3af;
    text-decoration: none !important;
}

[b-ubqszywqgv] .menu-item.active {
    background: linear-gradient(90deg, #082d72, #24104d);
    border: 2px solid #008cff;
    color: white;
    font-weight: 500;
}
/* _content/Photo8/Components/Account/Shared/ShowRecoveryCodes.razor.rz.scp.css */
/* .recovery-code was referenced by the old markup and defined nowhere, so the codes rendered as
   whatever a bare <code> looks like. They are the thing on this page worth reading carefully. */

.recovery-card[b-2yzgi4hnk0] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(38, 49, 83, 0.6);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.recovery-title[b-2yzgi4hnk0] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: white;
}

.recovery-actions[b-2yzgi4hnk0] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* auto-fill rather than a fixed column count: these sit in the account content column, whose width
   has nothing to do with the window's, so a column count picked against a breakpoint would be
   wrong at most sizes. */
.recovery-grid[b-2yzgi4hnk0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.recovery-code[b-2yzgi4hnk0] {
    display: block;
    background: rgba(5, 8, 22, 0.9);
    border: 1px solid rgba(38, 49, 83, 0.8);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 16px;
    letter-spacing: 0.06em;
    color: #e6ebf7;

    /* The codes are the one thing here anybody needs to select by hand. */
    user-select: all;
}

.recovery-footnote[b-2yzgi4hnk0] {
    margin: 18px 0 0;
    font-size: 14px;
    color: #9ba5bc;
}

@media (max-width: 575.98px) {
    .recovery-card[b-2yzgi4hnk0] {
        padding: 20px;
    }

    .recovery-actions .btn[b-2yzgi4hnk0] {
        width: 100%;
    }
}
/* _content/Photo8/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-cil5xhapqw] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-cil5xhapqw] {
    flex: 1;
}

/* Full width layout for photographer (no sidebar) */
.page:has(main > .top-row.photographer-nav)[b-cil5xhapqw] {
    flex-direction: column;
}

/* Was linear-gradient(180deg, rgb(5,39,103), #3a0647) — the stock template's sidebar gradient in
   Photo8 colours. Against an app that is near-black with faint purple and blue glows, a saturated
   navy-to-plum band down the left read as a piece of a different design.

   This keeps the same two hues, at the weight the rest of the app uses them: the panel colour over
   the page background, with the glow suggested rather than stated, and a hairline to separate it
   from the content instead of a hard colour change. */
.sidebar[b-cil5xhapqw] {
    background: linear-gradient(180deg, rgba(139, 53, 255, 0.10) 0%, transparent 45%),
                linear-gradient(0deg, rgba(0, 140, 255, 0.08) 0%, transparent 40%),
                #080d1c;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.top-row[b-cil5xhapqw] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    overflow: visible;
}

/* Public navigation styling for gallery pages */
.top-row.pi-public-nav[b-cil5xhapqw] {
    background: linear-gradient(90deg, #0a0f1e 0%, #1a1633 50%, #0a0f1e 100%);
    border-bottom: 1px solid rgba(120, 0, 255, 0.3);
    height: 3.5rem;
}

/* Photographer navigation styling */
.top-row.photographer-nav[b-cil5xhapqw] {
    background: linear-gradient(90deg, #0a0f1e 0%, #1a1633 50%, #0a0f1e 100%);
    border-bottom: 1px solid rgba(120, 0, 255, 0.3);
    height: 4rem;
}

.top-row.photographer-nav .navbar-brand[b-cil5xhapqw] {
    color: white;
    font-size: 1.25rem;
}

.top-row.photographer-nav .navbar-brand img[b-cil5xhapqw] {
    filter: drop-shadow(0 0 8px rgba(120, 0, 255, 0.6));
}

.btn-photographer-account[b-cil5xhapqw],
.btn-photographer-logout[b-cil5xhapqw] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.375rem 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-photographer-account:hover[b-cil5xhapqw],
.btn-photographer-logout:hover[b-cil5xhapqw] {
    background: rgba(120, 0, 255, 0.2);
    border-color: rgba(120, 0, 255, 0.6);
    color: white;
    box-shadow: 0 0 15px rgba(120, 0, 255, 0.4);
    text-decoration: none;
}

    .top-row[b-cil5xhapqw]  a, .top-row[b-cil5xhapqw]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-cil5xhapqw]  a:hover, .top-row[b-cil5xhapqw]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-cil5xhapqw]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-cil5xhapqw] {
        justify-content: space-between;
    }

    .top-row[b-cil5xhapqw]  a, .top-row[b-cil5xhapqw]  .btn-link {
        margin-left: 0;
    }
}

/* On a phone the brand and a long photographer name cannot both fit on this bar. The brand
   anchor was being flex-shrunk to 38px while its contents needed 186px, so the logo and the
   "Photo Infinity" wordmark overflowed their own box and slid underneath the account button.
   Keep the logo as the home link, drop the wordmark, and let the name ellipsise instead. */
@media (max-width: 575.98px) {
    .top-row.photographer-nav .navbar-brand[b-cil5xhapqw] {
        flex: 0 0 auto;
    }

    .top-row.photographer-nav .navbar-brand span[b-cil5xhapqw] {
        display: none;
    }

    .btn-photographer-account[b-cil5xhapqw] {
        display: inline-block;
        max-width: 45vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 641px) {
    .page[b-cil5xhapqw] {
        flex-direction: row;
    }

    /* Full width main for photographer layout */
    .page:has(main > .top-row.photographer-nav)[b-cil5xhapqw] {
        flex-direction: column;
    }

    .page:has(main > .top-row.photographer-nav) main[b-cil5xhapqw] {
        width: 100%;
        max-width: 100%;
    }

    .sidebar[b-cil5xhapqw] {
        width: 250px;

        /* width alone is only a starting size for a flex item. main has flex-grow: 1, so a wide
           page — /orders with its six-column table — pulled the sidebar down to 129px and broke
           "Browse Photos" and "My Downloads" onto two lines each. */
        flex: 0 0 250px;

        position: sticky;
        top: 0;
        overflow-y: auto;
        overflow-x: hidden;

        /* Only here. Above this breakpoint the sidebar is a column beside the content, so a
           full-height gradient is the point of it. Below it, the sidebar stacks on top and its
           menu collapses to a hamburger — leaving 100vh of empty gradient that a customer had
           to scroll past before reaching any page at all. */
        min-height: 100vh;
    }

    .top-row[b-cil5xhapqw] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-cil5xhapqw]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    /* Remove padding for photographer layout */
    .page:has(main > .top-row.photographer-nav) .top-row[b-cil5xhapqw],
    .page:has(main > .top-row.photographer-nav) article[b-cil5xhapqw] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Remove padding for public gallery page */
    .page:has(.pi-gallery-page) article[b-cil5xhapqw] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* Remove padding for checkout page (true edge-to-edge) */
    .page:has(.pi-checkout-page) article[b-cil5xhapqw] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* Remove padding for order success page (true edge-to-edge) */
    .page:has(.pi-order-success-page) article[b-cil5xhapqw] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* Keep padding for non-photographer layout.

       .pi-admin-page joins checkout and order-success in the exclusion list: this is the rule that
       put 2rem of padding down the left of the article and 1.5rem down the right, which on a page
       that paints its own dark background showed as a white strip either side of it. The admin
       pages supply their own inner padding. */
    .page:not(:has(main > .top-row.photographer-nav)):not(:has(.pi-checkout-page)):not(:has(.pi-order-success-page)):not(:has(.pi-admin-page)) .top-row[b-cil5xhapqw],
    .page:not(:has(main > .top-row.photographer-nav)):not(:has(.pi-checkout-page)):not(:has(.pi-order-success-page)):not(:has(.pi-admin-page)) article[b-cil5xhapqw] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* _content/Photo8/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-htcj4wrssm] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-htcj4wrssm] {
    background-color: rgba(255, 255, 255, 0.5);
}

/* The sidebar's own header strip. rgba(0,0,0,0.4) over the old saturated gradient produced a
   muddy band; over the new surface it wants to be a lift rather than a darkening, with the same
   hairline the sidebar uses on its right edge. */
.top-row[b-htcj4wrssm] {
    min-height: 3.5rem;
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-brand[b-htcj4wrssm] {
    font-size: 1.1rem;
}

.bi[b-htcj4wrssm] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-htcj4wrssm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-htcj4wrssm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-htcj4wrssm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-htcj4wrssm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-htcj4wrssm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-htcj4wrssm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-htcj4wrssm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-htcj4wrssm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-htcj4wrssm] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-htcj4wrssm] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-htcj4wrssm] {
        padding-bottom: 1rem;
    }

    .nav-item[b-htcj4wrssm]  .nav-link {
        color: #cbd2e5;
        background: none;
        border: none;
        /* A left edge that is transparent until the link is current, so the active item gains an
           accent bar without the text shifting by 3px when it does. */
        border-left: 3px solid transparent;
        border-radius: 8px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

/* The current page was marked with a 37% white wash — the heaviest surface anywhere in the app,
   on the one element that sits beside every page. A soft blue tint and an accent bar in the brand
   colour say the same thing at the weight everything else is drawn at. */
.nav-item[b-htcj4wrssm]  a.active {
    background-color: rgba(0, 183, 255, 0.12);
    border-left-color: #00b7ff;
    color: #ffffff;
}

.nav-item[b-htcj4wrssm]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.nav-item[b-htcj4wrssm]  .nav-link:focus-visible {
    outline: 2px solid #00b7ff;
    outline-offset: -2px;
}

.nav-scrollable[b-htcj4wrssm] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-htcj4wrssm] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-htcj4wrssm] {
        display: none;
    }

    .nav-scrollable[b-htcj4wrssm] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
        overflow-x: hidden;
    }
}
/* _content/Photo8/Components/Pages/AcceptCollaborationInvite.razor.rz.scp.css */
/* This is the page someone lands on from an invitation email, often before they have any account
   at all, so it is the first thing they see of Photo8. It was plain Bootstrap on the browser's
   white — MainLayout paints no background — under the app's dark nav, in every one of its
   branches: the invitation, Invalid Invitation, Sign In Required and Wrong Account.

   These override the Bootstrap classes already in the markup rather than replacing them, the same
   approach Events.razor.css and TrialWelcome.razor.css take. */

.pi-invite-page[b-6s6jan810l] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: #e6ebf7;
    padding: 3rem 0;
}

/* Status Icons */
.status-icon-large[b-6s6jan810l] {
    font-size: 4rem;
}

.status-icon-medium[b-6s6jan810l] {
    font-size: 3rem;
}

/* Cards. The status branches mark themselves with border-danger / border-warning /
   border-success / border-primary, and those are left to Bootstrap: its border utilities are
   declared !important, so anything written here loses to them, and the full-strength colours read
   clearly against the dark fill anyway. What changes is the white fill underneath. */
.pi-invite-page .card[b-6s6jan810l] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.pi-invite-page .card-header.bg-primary[b-6s6jan810l] {
    background: linear-gradient(90deg, #3b2a8c, #123a63) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pi-invite-page .card-footer[b-6s6jan810l],
.pi-invite-page .card-footer.bg-light[b-6s6jan810l] {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Text */
.pi-invite-page h3[b-6s6jan810l],
.pi-invite-page h4[b-6s6jan810l],
.pi-invite-page h5[b-6s6jan810l],
.pi-invite-page h6[b-6s6jan810l] {
    color: #ffffff;
}

.pi-invite-page .text-muted[b-6s6jan810l] {
    color: #9ba5bc !important;
}

.pi-invite-page .text-danger[b-6s6jan810l] {
    color: #ff8585 !important;
}

.pi-invite-page .text-success[b-6s6jan810l] {
    color: #5fe3b0 !important;
}

.pi-invite-page .text-warning[b-6s6jan810l] {
    color: #ffc107 !important;
}

.pi-invite-page .text-primary[b-6s6jan810l] {
    color: #8ab4ff !important;
}

/* The tile behind the calendar icon on the invitation itself. */
.pi-invite-page .bg-light[b-6s6jan810l] {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Alerts */
.pi-invite-page .alert-info[b-6s6jan810l] {
    background: rgba(33, 150, 243, 0.12);
    border: 1px solid rgba(33, 150, 243, 0.35);
    color: #cfe4ff;
}

.pi-invite-page .alert-info h6[b-6s6jan810l] {
    color: #64b5f6;
}

.pi-invite-page .alert-light[b-6s6jan810l] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd2e5;
}

/* Buttons */
.pi-invite-page .btn-primary[b-6s6jan810l] {
    background: linear-gradient(90deg, #8b35ff, #00b7ff);
    border: none;
    color: #ffffff;
    font-weight: 600;
}

.pi-invite-page .btn-success[b-6s6jan810l] {
    background: linear-gradient(90deg, #1a9d6e, #0f7f8f);
    border: none;
    color: #ffffff;
    font-weight: 600;
}

.pi-invite-page .btn-outline-primary[b-6s6jan810l] {
    background: transparent;
    border: 1px solid rgba(0, 183, 255, 0.45);
    color: #8ab4ff;
}

.pi-invite-page .btn-outline-primary:hover[b-6s6jan810l] {
    background: rgba(0, 183, 255, 0.1);
    color: #ffffff;
}

.pi-invite-page .btn-outline-secondary[b-6s6jan810l] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd2e5;
}

.pi-invite-page .btn-outline-secondary:hover[b-6s6jan810l] {
    border-color: rgba(0, 183, 255, 0.5);
    color: #ffffff;
}

.pi-invite-page .btn:focus-visible[b-6s6jan810l] {
    outline: 2px solid #00b7ff;
    outline-offset: 2px;
}

/* Role badge on the invitation */
.pi-invite-page .badge.bg-info[b-6s6jan810l] {
    background: #2196f3 !important;
}

@media (max-width: 575.98px) {
    .pi-invite-page[b-6s6jan810l] {
        padding: 1.5rem 0;
    }

    /* The decline/accept pair sits in a d-md-flex row above this width and stacks below it;
       full width apiece keeps both tap targets honest. */
    .pi-invite-page .card-footer .btn[b-6s6jan810l] {
        width: 100%;
        margin: 0 0 0.5rem 0 !important;
    }
}
/* _content/Photo8/Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* Admin Dashboard Page Styles */

/* Premium Card */
.premium-card[b-g4yg3vm7gf] {
    background-color: #6f42c1;
    color: white;
}

/*
   A stat card that is also a link.

   Every other card in these rows is a read-only figure, so a link styled identically to them is
   a link nobody discovers - which is the whole reason this exists. The cue is deliberately small:
   these rows are scanned for numbers, and a card that shouts would cost more than the link gains.

   Kept off the wrapping <a> rather than the .card: an <a> in a column that some other rule has
   turned into a flex container shrinks to its content and collapses the card inside it, which is
   the trap documented against Dashboard.razor.css. Transform and box-shadow do not change layout,
   so they cannot cause it.
*/
.pi-stat-link[b-g4yg3vm7gf] {
    display: block;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pi-stat-link:hover[b-g4yg3vm7gf],
.pi-stat-link:focus-visible[b-g4yg3vm7gf] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.pi-stat-link:focus-visible[b-g4yg3vm7gf] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.pi-stat-link-arrow[b-g4yg3vm7gf] {
    opacity: 0.55;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.pi-stat-link:hover .pi-stat-link-arrow[b-g4yg3vm7gf] {
    opacity: 1;
    transform: translateX(2px);
}

/* Spelled out rather than left to the arrow alone: an icon is a hint, words are an answer. */
.pi-stat-link-cue[b-g4yg3vm7gf] {
    opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    .pi-stat-link[b-g4yg3vm7gf],
    .pi-stat-link-arrow[b-g4yg3vm7gf] {
        transition: none;
    }

    .pi-stat-link:hover[b-g4yg3vm7gf],
    .pi-stat-link:focus-visible[b-g4yg3vm7gf] {
        transform: none;
    }
}
/* _content/Photo8/Components/Pages/Admin/AdminPayouts.razor.rz.scp.css */
/* Admin Payouts Page Styles */

/* Modal Backdrop */
.payouts-modal-backdrop[b-cdlfpry6js] {
    background: rgba(0,0,0,0.5);
}

/* Toast Container */
.payouts-toast-container[b-cdlfpry6js] {
    z-index: 1100;
}
/* _content/Photo8/Components/Pages/Admin/AdminPhotoManagement.razor.rz.scp.css */
/* Admin Photo Management Page Styles */

/* Photo Thumbnail */
.admin-photo-thumbnail[b-1gs8qrkvkq] {
    height: 200px;
    object-fit: cover;
}

/* Empty State */
.admin-photo-empty-icon[b-1gs8qrkvkq] {
    font-size: 4rem;
}

/* Modal Backdrop */
.admin-modal-backdrop[b-1gs8qrkvkq] {
    background: rgba(0,0,0,0.5);
}

/* History Icon */
.history-icon-large[b-1gs8qrkvkq] {
    font-size: 2rem;
}

/* Breakdown cards. Each one links to the filter that lists exactly the rows it counted, so it
   needs to read as clickable without losing the solid bg-* colour it carries. */
.pi-stat-card[b-1gs8qrkvkq] {
    color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pi-stat-card:hover[b-1gs8qrkvkq],
.pi-stat-card:focus-visible[b-1gs8qrkvkq] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
}
/* _content/Photo8/Components/Pages/Admin/AdminPhotoReports.razor.rz.scp.css */
/* Admin Photo Reports Page Styles */

/* Reporter Avatar */
.reporter-avatar[b-d2545i92za] {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

/* Empty State */
.reports-empty-icon[b-d2545i92za] {
    font-size: 4rem;
}

/* Modal Backdrop */
.reports-modal-backdrop[b-d2545i92za] {
    background: rgba(0,0,0,0.5);
}
/* _content/Photo8/Components/Pages/Admin/AIModerationDashboard.razor.rz.scp.css */
/* AI Moderation Dashboard Page Styles */

/* Scrollable Table */
.moderation-table-container[b-u3z659y4kj] {
    max-height: 500px;
    overflow-y: auto;
}

.moderation-table-header[b-u3z659y4kj] {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

/* Clickable Rows */
.moderation-row-clickable[b-u3z659y4kj] {
    cursor: pointer;
}

/* Status Icon */
.moderation-status-icon[b-u3z659y4kj] {
    font-size: 2rem;
}

/* Progress Bar */
.moderation-progress-large[b-u3z659y4kj] {
    height: 25px;
}

/* Toggle Switch */
.moderation-toggle-switch[b-u3z659y4kj] {
    width: 3rem;
    height: 1.5rem;
}
/* _content/Photo8/Components/Pages/Admin/AzureUsageDashboard.razor.rz.scp.css */
/* Azure Usage Dashboard Page Styles */

/* Progress Bars */
.azure-progress-bar[b-bbvfxt2mlh] {
    height: 20px;
}

.azure-progress-bar-large[b-bbvfxt2mlh] {
    height: 25px;
}
/* _content/Photo8/Components/Pages/Admin/EventManagement.razor.rz.scp.css */
/*
   A clickable table row.

   The row is the target rather than a link in one cell: a row that highlights on hover and then
   does nothing when clicked is worse than one that never looked clickable at all. Bootstrap's
   .table-hover supplies the highlight; this supplies the part that says it will do something.

   A <tr> cannot be an <a>, so the affordance has to be built: pointer cursor, a visible focus
   ring for the keyboard (the row carries tabindex and a key handler), and the chevron in the
   last cell sliding a little on hover to say which way it goes.
*/
.pi-row-link[b-csyd6y5a1g] {
    cursor: pointer;
}

.pi-row-link:focus-visible[b-csyd6y5a1g] {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

.pi-row-link .bi-chevron-right[b-csyd6y5a1g] {
    transition: transform 0.15s ease;
}

.pi-row-link:hover .bi-chevron-right[b-csyd6y5a1g] {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .pi-row-link .bi-chevron-right[b-csyd6y5a1g] {
        transition: none;
    }
}

/* The sort buttons sit inside <th>, and Bootstrap's .btn-link brings its own colour and
   underline that fight the table header. */
th .btn-link[b-csyd6y5a1g] {
    vertical-align: baseline;
}

th .btn-link:hover[b-csyd6y5a1g] {
    text-decoration: underline;
}
/* _content/Photo8/Components/Pages/Admin/PhotographerMap.razor.rz.scp.css */
/*
   The map was a flat height: 600px inline.

   Taller is the ask, but a bigger fixed number is the wrong way to get it: 600px already fills
   most of a laptop viewport, and anything larger pushes the "Unmapped Photographers" table below
   the fold on exactly the screens where it is hardest to scroll back to. So the height follows
   the viewport, with both ends pinned - never so short the pins overlap, never taller than the
   window.

   Leaflet reads the container's height once when it initialises. These are CSS-only sizes that
   settle before the map is created, so no invalidateSize() call is needed; if a resize handler
   is ever added here, that stops being true.
*/
.pi-map[b-bhv458jatc] {
    height: clamp(420px, 78vh, 1000px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* On a phone the map is competing with the page for a much smaller window, and a map that takes
   the entire screen leaves nothing to tell you what you are looking at. */
@media (max-width: 767.98px) {
    .pi-map[b-bhv458jatc] {
        height: clamp(320px, 60vh, 520px);
    }
}
/* _content/Photo8/Components/Pages/Admin/UserManagement.razor.rz.scp.css */
/* User Management Page Styles */

/* Actions Column */
.user-actions-column[b-kz1j6a81x3] {
    width: 150px;
}

/* Modal Backdrop */
.user-modal-backdrop[b-kz1j6a81x3] {
    background-color: rgba(0,0,0,0.5);
}
/* _content/Photo8/Components/Pages/AIAnalysisDashboard.razor.rz.scp.css */
/* AI Analysis Dashboard Page Styles */

/* Photo Preview */
.ai-photo-preview[b-ehk80npe0b] {
    height: 200px;
    object-fit: cover;
}

/* Progress Bars */
.ai-progress-thin[b-ehk80npe0b] {
    height: 6px;
}

.ai-progress-mini[b-ehk80npe0b] {
    height: 4px;
}

/* Empty State */
.ai-empty-icon[b-ehk80npe0b] {
    font-size: 3rem;
}

/* Modal Backdrop */
.modal-backdrop-dark[b-ehk80npe0b] {
    background-color: rgba(0,0,0,0.5);
}
/* _content/Photo8/Components/Pages/Browse.razor.rz.scp.css */
/* Browse Page - Photo Infinity Theme */

/* Page Wrapper */
.pi-browse-page[b-f0931v9hud] {
    background: radial-gradient(ellipse at top, rgba(138, 43, 226, 0.15) 0%, rgba(0, 0, 0, 0) 60%),
                radial-gradient(ellipse at bottom, rgba(75, 0, 130, 0.1) 0%, rgba(0, 0, 0, 0) 60%),
                linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
    min-height: 100vh;
    color: #e0e0e0;
    padding: 2rem 0;
}

/* Breadcrumb */
.pi-breadcrumb[b-f0931v9hud] {
    margin-bottom: 1.5rem;
}

.pi-breadcrumb .breadcrumb[b-f0931v9hud] {
    background: transparent;
    padding: 0;
    margin: 0;
}

.pi-breadcrumb .breadcrumb-item[b-f0931v9hud],
.pi-breadcrumb .breadcrumb-item a[b-f0931v9hud] {
    color: #9ca3af;
    text-decoration: none;
}

.pi-breadcrumb .breadcrumb-item.active[b-f0931v9hud] {
    color: #e0e0e0;
}

.pi-breadcrumb .breadcrumb-item + .breadcrumb-item[b-f0931v9hud]::before {
    color: #6b7280;
}

/* Page Title */
.pi-page-title[b-f0931v9hud] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

.pi-title-icon[b-f0931v9hud] {
    color: #8a2be2;
    filter: drop-shadow(0 0 15px rgba(138, 43, 226, 0.6));
    margin-right: 1rem;
}

.gradient-text[b-f0931v9hud] {
    background: linear-gradient(135deg, #8a2be2 0%, #9d4edd 50%, #c77dff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

.pi-subtitle[b-f0931v9hud] {
    color: #9ca3af;
    font-size: 1.25rem;
    font-weight: 400;
}

/* Search Card */
.pi-search-card[b-f0931v9hud] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 16px;
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    padding: 1.5rem;
}

.pi-card-body[b-f0931v9hud] {
    padding: 0;
}

.pi-form-label[b-f0931v9hud] {
    color: #d1d5db;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.pi-form-control[b-f0931v9hud] {
    background: rgba(20, 20, 40, 0.8);
    border: 1px solid rgba(138, 43, 226, 0.4);
    color: #ffffff;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.pi-form-control:focus[b-f0931v9hud] {
    background: rgba(30, 30, 60, 0.9);
    border-color: #8a2be2;
    box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.25);
    color: #ffffff;
}

.pi-form-control[b-f0931v9hud]::placeholder {
    color: #6b7280;
}

/* Buttons */
.pi-btn-search[b-f0931v9hud] {
    background: linear-gradient(135deg, #8a2be2 0%, #9d4edd 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(138, 43, 226, 0.4);
}

.pi-btn-search:hover[b-f0931v9hud] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(138, 43, 226, 0.6);
    color: #ffffff;
}

.pi-btn-clear[b-f0931v9hud] {
    background: rgba(75, 85, 99, 0.3);
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: #d1d5db;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pi-btn-clear:hover[b-f0931v9hud] {
    background: rgba(75, 85, 99, 0.5);
    border-color: rgba(156, 163, 175, 0.5);
    color: #ffffff;
}

.pi-btn-gradient[b-f0931v9hud] {
    background: linear-gradient(135deg, #8a2be2 0%, #9d4edd 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px 0 rgba(138, 43, 226, 0.5);
}

.pi-btn-gradient:hover[b-f0931v9hud] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px 0 rgba(138, 43, 226, 0.7);
    color: #ffffff;
}

.pi-btn-customer[b-f0931v9hud] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px 0 rgba(59, 130, 246, 0.4);
}

.pi-btn-customer:hover[b-f0931v9hud] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px 0 rgba(59, 130, 246, 0.6);
    color: #ffffff;
}

.pi-btn-photographer[b-f0931v9hud] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px 0 rgba(34, 197, 94, 0.4);
}

.pi-btn-photographer:hover[b-f0931v9hud] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px 0 rgba(34, 197, 94, 0.6);
    color: #ffffff;
}

.pi-btn-secondary[b-f0931v9hud] {
    background: rgba(75, 85, 99, 0.3);
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: #d1d5db;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.pi-btn-secondary:hover[b-f0931v9hud] {
    background: rgba(75, 85, 99, 0.5);
    border-color: rgba(156, 163, 175, 0.5);
    color: #ffffff;
}

/* Loading */
.pi-spinner[b-f0931v9hud] {
    width: 3rem;
    height: 3rem;
    border: 0.3rem solid rgba(138, 43, 226, 0.2);
    border-top-color: #8a2be2;
    border-radius: 50%;
    animation: spin-b-f0931v9hud 1s linear infinite;
    display: inline-block;
}

@keyframes spin-b-f0931v9hud {
    to { transform: rotate(360deg); }
}

.pi-loading-text[b-f0931v9hud] {
    color: #9ca3af;
    font-size: 1.1rem;
}

/* Section Title */
.pi-section-title[b-f0931v9hud] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.pi-section-title i[b-f0931v9hud] {
    color: #8a2be2;
    margin-right: 0.75rem;
}

/* Photographer Card */
/* The cards are anchors now rather than divs with a click handler. These strip the link
   defaults so they look exactly as they did, and add the focus ring a div never had —
   previously nothing on this page could be reached by keyboard at all. */
.pi-card-link[b-f0931v9hud] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.pi-card-link:hover[b-f0931v9hud],
.pi-card-link:focus[b-f0931v9hud] {
    text-decoration: none;
    color: inherit;
}

.pi-card-link:focus-visible[b-f0931v9hud] {
    outline: 2px solid #a5b4fc;
    outline-offset: 3px;
}

.pi-photographer-card[b-f0931v9hud] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.7) 0%, rgba(20, 20, 40, 0.8) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.pi-photographer-card:hover[b-f0931v9hud] {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(138, 43, 226, 0.4);
    border-color: rgba(138, 43, 226, 0.6);
}

.pi-photographer-card .pi-card-body[b-f0931v9hud] {
    padding: 1.5rem;
}

.photographer-avatar[b-f0931v9hud] {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 2px solid rgba(138, 43, 226, 0.3);
}

.pi-avatar-placeholder[b-f0931v9hud] {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(157, 78, 221, 0.3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a2be2;
    font-size: 1.5rem;
}

.pi-photographer-card h6[b-f0931v9hud] {
    color: #ffffff;
    font-weight: 600;
}

.pi-photographer-card small[b-f0931v9hud] {
    color: #9ca3af;
}

.pi-card-text[b-f0931v9hud] {
    color: #d1d5db;
    font-size: 0.9rem;
    line-height: 1.5;
}

.pi-card-stats[b-f0931v9hud] {
    display: flex;
    justify-content: space-between;
    color: #9ca3af;
    font-size: 0.875rem;
}

.pi-card-stats i[b-f0931v9hud] {
    color: #8a2be2;
    margin-right: 0.25rem;
}

/* Event Card */
.pi-event-card[b-f0931v9hud] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.7) 0%, rgba(20, 20, 40, 0.8) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.pi-event-card:hover[b-f0931v9hud] {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(138, 43, 226, 0.4);
    border-color: rgba(138, 43, 226, 0.6);
}

/* contain, not cover. Photos here run from 3:2 to 16:9 to square, and cover crops whatever does
   not match the box — 24px off the top and bottom of a square source, 65px off the sides of a
   16:9 one. The watermark sits a few percent in from an edge, so any of those crops can remove
   it entirely, which is how these cards ended up showing unwatermarked-looking photos. Letterbox
   against the card's own background instead: the whole frame is visible, so the watermark always
   is too, whatever shape the photographer shot. */
.event-thumbnail[b-f0931v9hud] {
    aspect-ratio: 3 / 2;
    object-fit: contain;
    width: 100%;
    display: block;
    background: linear-gradient(135deg, #1b2340, #0d1120);
}

.pi-event-placeholder[b-f0931v9hud] {
    height: 150px;
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.5) 0%, rgba(20, 20, 40, 0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pi-event-placeholder i[b-f0931v9hud] {
    font-size: 2.5rem;
    color: rgba(138, 43, 226, 0.4);
}

.pi-event-body[b-f0931v9hud] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.4) 0%, rgba(20, 20, 40, 0.5) 100%);
}

.pi-event-title[b-f0931v9hud] {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
}

.pi-event-photographer[b-f0931v9hud] {
    color: #9ca3af;
    font-size: 0.875rem;
}

.pi-event-photographer i[b-f0931v9hud] {
    color: #8a2be2;
}

.pi-event-footer[b-f0931v9hud] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pi-event-footer small[b-f0931v9hud] {
    color: #9ca3af;
    font-size: 0.8rem;
}

.pi-event-footer small i[b-f0931v9hud] {
    color: #8a2be2;
    margin-right: 0.25rem;
}

.pi-badge[b-f0931v9hud] {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(157, 78, 221, 0.3) 100%);
    border: 1px solid rgba(138, 43, 226, 0.4);
    color: #c77dff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Empty State */
.pi-empty-state[b-f0931v9hud] {
    color: #e0e0e0;
}

.pi-empty-icon[b-f0931v9hud] {
    font-size: 4rem;
    color: rgba(138, 43, 226, 0.4);
    filter: drop-shadow(0 0 20px rgba(138, 43, 226, 0.3));
}

.pi-empty-state h3[b-f0931v9hud] {
    color: #ffffff;
    font-weight: 600;
}

.pi-empty-text[b-f0931v9hud] {
    color: #9ca3af;
    font-size: 1.1rem;
}

/* Alerts */
.pi-alert[b-f0931v9hud] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: #7dd3fc;
}

.pi-alert-info[b-f0931v9hud] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

.pi-alert i[b-f0931v9hud] {
    margin-right: 0.5rem;
}

/* CTA Card */
.pi-cta-card[b-f0931v9hud] {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.15) 0%, rgba(157, 78, 221, 0.15) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    box-shadow: 0 12px 40px 0 rgba(138, 43, 226, 0.3);
    overflow: hidden;
}

.pi-cta-body[b-f0931v9hud] {
    padding: 3rem 2rem;
}

.pi-cta-title[b-f0931v9hud] {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.pi-cta-text[b-f0931v9hud] {
    color: #d1d5db;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .pi-page-title[b-f0931v9hud] {
        font-size: 1.75rem;
    }

    .pi-subtitle[b-f0931v9hud] {
        font-size: 1rem;
    }

    .pi-section-title[b-f0931v9hud] {
        font-size: 1.5rem;
    }

    .pi-search-card[b-f0931v9hud] {
        padding: 1rem;
    }

    .pi-cta-body[b-f0931v9hud] {
        padding: 2rem 1.5rem;
    }

    .pi-cta-title[b-f0931v9hud] {
        font-size: 1.5rem;
    }

    .pi-cta-text[b-f0931v9hud] {
        font-size: 1rem;
    }
}
/* _content/Photo8/Components/Pages/BulkUpload.razor.rz.scp.css */
/* Photo Infinity Bulk Upload Styling */

/* The palette lives in app.css, on a real :root. It was redeclared here inside a ":root" block,
   which a component stylesheet cannot use — Blazor rewrites the selector to ":root[b-xxxxx]" and
   <html> never carries a component's scope attribute — so this block never defined anything. Four
   of its five names happened to be in the global palette already and resolved anyway; the fifth,
   --pi-card-bg, did not, which is why .pi-card below rendered transparent. It is in the global
   palette now. The other five stylesheets carrying this same dead block are listed there. */

/* Page wrapper with Photo Infinity background */
.pi-bulk-upload-page[b-yi8se2t537] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 35px 0;
}

.pi-bulk-upload-page .container[b-yi8se2t537] {
    color: white;
}

/* Page title */
.page-title[b-yi8se2t537] {
    font-size: 42px;
    margin: 0 0 10px;
    font-weight: 400;
}

.page-title .gradient-text[b-yi8se2t537] {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple), var(--pi-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.page-subtitle[b-yi8se2t537] {
    color: #9ba5bc;
    margin-bottom: 30px;
}

/* Breadcrumb styling */
.pi-bulk-upload-page[b-yi8se2t537]  .breadcrumb {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid var(--pi-line);
    border-radius: 12px;
    padding: 10px 16px;
}

.pi-bulk-upload-page[b-yi8se2t537]  .breadcrumb-item a {
    color: var(--pi-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.pi-bulk-upload-page[b-yi8se2t537]  .breadcrumb-item a:hover {
    color: var(--pi-purple);
}

.pi-bulk-upload-page[b-yi8se2t537]  .breadcrumb-item.active {
    color: #9ba5bc;
}

.pi-bulk-upload-page[b-yi8se2t537]  .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.3);
}

/* Main card container */
.pi-card[b-yi8se2t537] {
    background: var(--pi-card-bg);
    border: 1px solid var(--pi-line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    margin-bottom: 20px;
}

/* Inner cards (nested cards) */
.pi-card-inner[b-yi8se2t537] {
    background: rgba(11, 16, 36, 0.5);
    border: 1px solid var(--pi-line);
    border-radius: 14px;
    overflow: hidden;
}

.card-header-inner[b-yi8se2t537] {
    background: rgba(0, 183, 255, 0.1);
    border-bottom: 1px solid var(--pi-line);
    padding: 14px 18px;
}

.card-header-inner h5[b-yi8se2t537] {
    color: white;
    margin: 0;
}

.pi-card-inner .card-body[b-yi8se2t537] {
    padding: 18px;
}

/* File selection section */
.bulk-file-selection[b-yi8se2t537] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* File Input - Must be completely hidden */
.file-input-hidden[b-yi8se2t537] {
    display: none !important;
}

.pi-bulk-upload-page[b-yi8se2t537]  #photoFiles {
    display: none !important;
}

.pi-bulk-upload-page[b-yi8se2t537]  .file-input-hidden {
    display: none !important;
}

.pi-bulk-upload-page[b-yi8se2t537]  input[type="file"] {
    display: none !important;
}

/* Folder Scan Indicator */
.folder-scan-indicator[b-yi8se2t537] {
    display: none;
}

/* Buttons */
.pi-bulk-upload-page[b-yi8se2t537]  .btn-outline-info {
    background: linear-gradient(135deg, rgba(0, 183, 255, 0.15), rgba(139, 53, 255, 0.15));
    border: 2px solid var(--pi-blue);
    color: white;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 183, 255, 0.2);
}

.pi-bulk-upload-page[b-yi8se2t537]  .btn-outline-info:hover {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
    border-color: var(--pi-purple);
    color: white;
    box-shadow: 0 0 25px rgba(0, 183, 255, 0.6);
    transform: translateY(-2px);
}

.pi-bulk-upload-page[b-yi8se2t537]  .btn-primary {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
    border: none;
    color: white;
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 10px 24px;
}

.pi-bulk-upload-page[b-yi8se2t537]  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 183, 255, 0.4);
}

.pi-bulk-upload-page[b-yi8se2t537]  .btn-secondary {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #9ba5bc;
    transition: all 0.3s ease;
}

.pi-bulk-upload-page[b-yi8se2t537]  .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
}

.pi-bulk-upload-page[b-yi8se2t537]  .btn-outline-danger {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid #ff3d3d;
    color: #ff3d3d;
    transition: all 0.3s ease;
}

.pi-bulk-upload-page[b-yi8se2t537]  .btn-outline-danger:hover {
    background: #ff3d3d;
    color: white;
    box-shadow: 0 0 15px rgba(255, 61, 61, 0.5);
}

/* Alerts */
.pi-bulk-upload-page[b-yi8se2t537]  .alert {
    background: rgba(11, 16, 36, 0.6);
    border-radius: 12px;
    border: 1px solid var(--pi-line);
    color: white;
}

.pi-bulk-upload-page[b-yi8se2t537]  .alert-info {
    background: rgba(0, 183, 255, 0.1);
    border-color: rgba(0, 183, 255, 0.3);
    color: white;
}

.pi-bulk-upload-page[b-yi8se2t537]  .alert-success {
    background: rgba(0, 230, 118, 0.1);
    border-color: rgba(0, 230, 118, 0.3);
    color: white;
}

.pi-bulk-upload-page[b-yi8se2t537]  .alert-warning {
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.3);
    color: white;
}

.pi-bulk-upload-page[b-yi8se2t537]  .alert-danger {
    background: rgba(255, 61, 61, 0.1);
    border-color: rgba(255, 61, 61, 0.3);
    color: white;
}

/* Form elements */
.pi-bulk-upload-page[b-yi8se2t537]  .form-control {
    background: rgba(11, 16, 36, 0.8);
    border: 1px solid var(--pi-line);
    color: white;
    border-radius: 8px;
}

.pi-bulk-upload-page[b-yi8se2t537]  .form-control:focus {
    background: rgba(11, 16, 36, 0.9);
    border-color: var(--pi-blue);
    color: white;
    box-shadow: 0 0 0 0.2rem rgba(0, 183, 255, 0.25);
}

.pi-bulk-upload-page[b-yi8se2t537]  .form-text {
    color: #9ba5bc;
}

.pi-bulk-upload-page[b-yi8se2t537]  .text-muted {
    color: #9ba5bc !important;
}

.pi-bulk-upload-page[b-yi8se2t537]  .text-danger {
    color: #ff6b6b !important;
}

/* Progress Bars */
.progress-thick[b-yi8se2t537] {
    height: 22px;
    background: rgba(11, 16, 36, 0.8);
    border: 1px solid var(--pi-line);
    border-radius: 10px;
}

.progress-thin[b-yi8se2t537] {
    height: 6px;
    background: rgba(11, 16, 36, 0.8);
    border-radius: 6px;
}

.progress-medium[b-yi8se2t537] {
    height: 20px;
    background: rgba(11, 16, 36, 0.8);
    border: 1px solid var(--pi-line);
    border-radius: 10px;
}

.pi-bulk-upload-page[b-yi8se2t537]  .progress-bar {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
}

.pi-bulk-upload-page[b-yi8se2t537]  .progress-bar.bg-primary {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple)) !important;
}

.pi-bulk-upload-page[b-yi8se2t537]  .progress-bar.bg-info {
    background: linear-gradient(90deg, var(--pi-blue), #00e5ff) !important;
}

/* Preview Image */
.preview-image[b-yi8se2t537] {
    max-height: 600px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--pi-line);
}

/* Tag Badge */
.tag-badge-small[b-yi8se2t537] {
    font-size: 0.55em;
}

.pi-bulk-upload-page[b-yi8se2t537]  .badge {
    background: linear-gradient(135deg, rgba(0, 183, 255, 0.2), rgba(139, 53, 255, 0.2));
    border: 1px solid rgba(0, 183, 255, 0.5);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
}

/* Headings */
.pi-bulk-upload-page h4[b-yi8se2t537],
.pi-bulk-upload-page h5[b-yi8se2t537] {
    color: white;
}

/* Success Rate Display */
.success-rate-container[b-yi8se2t537] {
    /* Container for success rate visualization */
}

@media (max-width: 575.98px) {
    /* Back and Start share a justify-content-between row that never wraps. At 375px that left
       them 97px and 157px, so both labels broke across two lines and the pair stood 80px tall.
       The post-upload row has the same shape with longer labels still. Stacked, with the
       primary action on top. */
    .pi-bulk-upload-page .pi-action-row[b-yi8se2t537] {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .pi-bulk-upload-page[b-yi8se2t537]  .pi-action-row > .btn {
        width: 100%;
    }
}
/* _content/Photo8/Components/Pages/Cart.razor.rz.scp.css */
/* Cart Page - Photo Infinity Theme */

/* Page Wrapper */
.pi-cart-page[b-qum2v2s9rm] {
    background: radial-gradient(circle at 50% 0%, #1a0033 0%, #0a0015 50%, #000000 100%);
    min-height: 100vh;
    padding-bottom: 2rem;
    color: #e0e0e0;
}

/* Page Title */
.pi-page-title[b-qum2v2s9rm] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
}

.gradient-text[b-qum2v2s9rm] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Empty Cart */
.pi-empty-cart[b-qum2v2s9rm] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.cart-empty-icon[b-qum2v2s9rm] {
    font-size: 4rem;
    color: #667eea;
    filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.5));
}

.pi-empty-text[b-qum2v2s9rm] {
    color: #b0b0b0;
}

/* Cards */
.pi-card[b-qum2v2s9rm] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.pi-card-header[b-qum2v2s9rm] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
    padding: 1rem 1.5rem;
    border-radius: 15px 15px 0 0 !important;
}

.pi-card-header h5[b-qum2v2s9rm] {
    color: #ffffff;
    font-weight: 600;
}

/* Cart Items */
[b-qum2v2s9rm] .list-group-item {
    background: rgba(20, 20, 40, 0.6) !important;
    border-color: rgba(138, 43, 226, 0.2) !important;
    color: #e0e0e0 !important;
    transition: all 0.3s ease;
}

[b-qum2v2s9rm] .list-group-item:hover {
    background: rgba(30, 30, 60, 0.8) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
}

[b-qum2v2s9rm] .list-group-item h6 {
    color: #ffffff;
    font-weight: 600;
}

[b-qum2v2s9rm] .list-group-item small {
    color: #b0b0b0 !important;
}

/* The event and photographer names go back to the gallery. Flat grey with no underline
   made them read as captions, so nobody found them. */
[b-qum2v2s9rm] .list-group-item a {
    color: #a5b4fc !important;
    text-decoration: underline;
    text-decoration-color: rgba(165, 180, 252, 0.5);
    text-underline-offset: 2px;
}

[b-qum2v2s9rm] .list-group-item a:hover {
    color: #c7d2fe !important;
    text-decoration-color: currentColor;
}

/* Badges */
[b-qum2v2s9rm] .badge {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(138, 43, 226, 0.4);
    padding: 0.35em 0.65em;
}

/* Price Display */
.pi-price[b-qum2v2s9rm] {
    color: #f093fb;
    font-size: 1.25rem;
    text-shadow: 0 0 10px rgba(240, 147, 251, 0.3);
}

.pi-total-price[b-qum2v2s9rm] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* Buttons */
.pi-btn-gradient[b-qum2v2s9rm] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.4);
}

.pi-btn-gradient:hover[b-qum2v2s9rm] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.6);
    color: #ffffff;
}

.pi-btn-secondary[b-qum2v2s9rm] {
    background: rgba(30, 30, 60, 0.8);
    border: 1px solid rgba(138, 43, 226, 0.5);
    color: #e0e0e0;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.pi-btn-secondary:hover[b-qum2v2s9rm] {
    background: rgba(40, 40, 80, 0.9);
    border-color: rgba(138, 43, 226, 0.7);
    color: #ffffff;
}

.pi-btn-danger[b-qum2v2s9rm] {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.8) 0%, rgba(153, 27, 27, 0.9) 100%);
    border: 1px solid rgba(220, 38, 38, 0.5);
    color: #ffffff;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.pi-btn-danger:hover[b-qum2v2s9rm] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(185, 28, 28, 1) 100%);
    border-color: rgba(239, 68, 68, 0.7);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Info Box */
.pi-info-box[b-qum2v2s9rm] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    backdrop-filter: blur(5px);
}

.pi-info-box h6[b-qum2v2s9rm] {
    color: #667eea;
    font-weight: 600;
}

.pi-info-text[b-qum2v2s9rm] {
    color: #b0b0b0;
}

/* Photo Thumbnail — boxed to the same 100px as the bundle grid below, so a single
   photo does not stretch to the full column width on a phone. */
.cart-photo-thumbnail[b-qum2v2s9rm] {
    width: 100%;
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
}

/* "Choose which photos to include". Bootstrap's btn-outline-secondary grey lands at
   3.75:1 on this card, under the 4.5:1 minimum. */
.pi-btn-choose[b-qum2v2s9rm] {
    background: rgba(102, 126, 234, 0.12);
    border: 1px solid rgba(138, 43, 226, 0.5);
    color: #cbd5f5;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.pi-btn-choose:hover[b-qum2v2s9rm],
.pi-btn-choose:focus-visible[b-qum2v2s9rm] {
    background: rgba(102, 126, 234, 0.25);
    border-color: rgba(138, 43, 226, 0.8);
    color: #ffffff;
}

/* Tag Grid */
.cart-tag-grid[b-qum2v2s9rm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    max-height: 100px;
    max-width: 100px;
}

.cart-tag-photo[b-qum2v2s9rm] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
}

/* Item Type Icons */
.cart-item-icon[b-qum2v2s9rm] {
    font-size: 3rem;
    color: #667eea;
    filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.4));
}

[b-qum2v2s9rm] .bg-light {
    background: rgba(30, 30, 60, 0.5) !important;
    border: 1px solid rgba(138, 43, 226, 0.2);
}

/* Summary Sticky Card */
.cart-summary-sticky[b-qum2v2s9rm] {
    top: 20px;
}

/* Discount/Savings Display */
[b-qum2v2s9rm] .text-success {
    color: #4ade80 !important;
}

[b-qum2v2s9rm] .text-muted {
    color: #9ca3af !important;
}

[b-qum2v2s9rm] .text-decoration-line-through {
    opacity: 0.7;
}

/* Border Bottom */
[b-qum2v2s9rm] .border-bottom {
    border-color: rgba(138, 43, 226, 0.3) !important;
}

/* Loading State */
[b-qum2v2s9rm] .spinner-border {
    color: #667eea !important;
}

/* ── Photo chooser modal ──
   Dressed like the modals on the event, border and photo-management pages. It was the
   only one left rendering as a white panel over the dark site. */
.pi-chooser-modal[b-qum2v2s9rm]  .modal-content {
    background: #1a1a2e;
    border: 1px solid rgba(138, 43, 226, 0.35);
    color: #e0e0e0;
}

.pi-chooser-modal[b-qum2v2s9rm]  .modal-header {
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
}

.pi-chooser-modal[b-qum2v2s9rm]  .modal-footer {
    border-top: 1px solid rgba(138, 43, 226, 0.3);
}

.pi-chooser-modal[b-qum2v2s9rm]  .modal-title {
    color: #ffffff;
}

.pi-chooser-modal[b-qum2v2s9rm]  .btn-close {
    filter: invert(1);
}

.pi-chooser-modal[b-qum2v2s9rm]  .text-muted {
    color: #9ca3af !important;
}

.pi-chooser-modal[b-qum2v2s9rm]  h6 {
    color: #cbd5f5;
}

.pi-chooser-modal[b-qum2v2s9rm]  .alert-info {
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(138, 43, 226, 0.35);
    color: #cbd5f5;
}

.pi-chooser-modal[b-qum2v2s9rm]  .btn-outline-secondary {
    border-color: rgba(138, 43, 226, 0.5);
    color: #cbd5f5;
}

.pi-chooser-modal[b-qum2v2s9rm]  .btn-outline-secondary:hover {
    background: rgba(102, 126, 234, 0.25);
    border-color: rgba(138, 43, 226, 0.8);
    color: #ffffff;
}

/* Photo tiles. A label wrapping a hidden checkbox — clipped rather than display:none so
   it still takes keyboard focus, which is the whole point of the change. */
.pi-chooser-tile[b-qum2v2s9rm] {
    background: rgba(20, 20, 40, 0.6);
    border: 2px solid rgba(138, 43, 226, 0.25);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.pi-chooser-tile.is-selected[b-qum2v2s9rm] {
    border-color: #667eea;
    opacity: 1;
}

.pi-chooser-tile:hover[b-qum2v2s9rm] {
    opacity: 1;
}

.pi-chooser-tile:focus-within[b-qum2v2s9rm] {
    outline: 2px solid #a5b4fc;
    outline-offset: 2px;
    opacity: 1;
}

.pi-chooser-input[b-qum2v2s9rm] {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* contain: the tile is wider than it is tall while the thumbnail rendition is square, so cover
   cropped top and bottom — past the watermark, which sits in the bottom few percent. */
.pi-chooser-img[b-qum2v2s9rm] {
    width: 100%;
    height: 100px;
    object-fit: contain;
    background: rgba(5, 8, 22, 0.6);
    display: block;
}

.pi-chooser-name[b-qum2v2s9rm] {
    font-size: 0.7rem;
}

/* _content/Photo8/Components/Pages/Checkout.razor.rz.scp.css */
/* Photo Infinity Checkout Styling */

:root[b-zhnhsomh7c] {
    --pi-blue: #00b7ff;
    --pi-purple: #8b35ff;
    --pi-pink: #ff36c9;
    --pi-line: rgba(255, 255, 255, 0.08);
    --pi-card-bg: rgba(11, 16, 36, 0.85);
}

/* Page wrapper with Photo Infinity background */
.pi-checkout-page[b-zhnhsomh7c] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: #e0e0e0;
    padding: 35px 0;
}

.pi-checkout-page .container[b-zhnhsomh7c] {
    color: #e0e0e0;
}

/* Page title */
.page-title[b-zhnhsomh7c] {
    font-size: 34px;
    margin: 0 0 10px;
    font-weight: 400;
    color: white;
}

.page-title .gradient-text[b-zhnhsomh7c] {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple), var(--pi-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* Breadcrumb */
.pi-checkout-page[b-zhnhsomh7c]  .breadcrumb {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid var(--pi-line);
    border-radius: 12px;
    padding: 10px 16px;
}

.pi-checkout-page[b-zhnhsomh7c]  .breadcrumb-item a {
    color: var(--pi-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.pi-checkout-page[b-zhnhsomh7c]  .breadcrumb-item a:hover {
    color: var(--pi-purple);
}

.pi-checkout-page[b-zhnhsomh7c]  .breadcrumb-item.active {
    color: #9ba5bc;
}

.pi-checkout-page[b-zhnhsomh7c]  .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.3);
}

/* Card */
.pi-card[b-zhnhsomh7c] {
    background: var(--pi-card-bg);
    border: 1px solid var(--pi-line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pi-card h2[b-zhnhsomh7c] {
    font-size: 20px;
    margin: 0 0 20px;
    font-weight: 600;
    color: white;
}

/* Form labels */
.pi-card label[b-zhnhsomh7c] {
    display: block;
    color: #b8c2d8;
    margin: 0 0 7px;
    font-size: 14px;
    font-weight: 500;
}

/* Form inputs - using ::deep to override Bootstrap */
[b-zhnhsomh7c] .pi-card input.form-control,
[b-zhnhsomh7c] .pi-card .form-control {
    width: 100%;
    background-color: #070c1d !important;
    background: #070c1d !important;
    border: 1px solid #303b60 !important;
    border-radius: 12px;
    padding: 14px;
    color: white !important;
    font-size: 14px;
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset !important;
    box-shadow: none !important;
}

[b-zhnhsomh7c] .pi-card input::placeholder {
    color: #5a6480 !important;
    -webkit-text-fill-color: #5a6480 !important;
    opacity: 1;
}

[b-zhnhsomh7c] .pi-card input.form-control:focus,
[b-zhnhsomh7c] .pi-card .form-control:focus {
    background: #070c1d !important;
    background-color: #070c1d !important;
    border-color: var(--pi-purple) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139, 53, 255, 0.1) !important;
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset, 0 0 0 3px rgba(139, 53, 255, 0.1) !important;
}

[b-zhnhsomh7c] .pi-card input:-webkit-autofill,
[b-zhnhsomh7c] .pi-card input:-webkit-autofill:hover,
[b-zhnhsomh7c] .pi-card input:-webkit-autofill:focus,
[b-zhnhsomh7c] .pi-card input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset !important;
    -webkit-text-fill-color: white !important;
    border: 1px solid #303b60 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Info box (digital delivery notice) */
.pi-info-box[b-zhnhsomh7c] {
    background: linear-gradient(135deg, rgba(0, 183, 255, 0.12) 0%, rgba(139, 53, 255, 0.12) 100%);
    border: 1px solid rgba(139, 53, 255, 0.3);
    border-radius: 14px;
    padding: 16px;
    backdrop-filter: blur(5px);
}

.pi-info-box h6[b-zhnhsomh7c] {
    color: var(--pi-blue);
    font-weight: 600;
}

.pi-info-text[b-zhnhsomh7c] {
    color: #b8c2d8;
}

/* Terms checkbox row */
.pi-checkbox-row[b-zhnhsomh7c] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

[b-zhnhsomh7c] .pi-checkbox-row .form-check-input {
    margin-top: 3px;
    background-color: #070c1d;
    border-color: #303b60;
}

[b-zhnhsomh7c] .pi-checkbox-row .form-check-input:checked {
    background-color: var(--pi-purple);
    border-color: var(--pi-purple);
}

[b-zhnhsomh7c] .pi-checkbox-row .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(139, 53, 255, 0.2);
    border-color: var(--pi-purple);
}

.pi-checkbox-row .form-check-label[b-zhnhsomh7c] {
    color: #b8c2d8;
    font-size: 14px;
}

.pi-checkbox-row .form-check-label a[b-zhnhsomh7c] {
    color: var(--pi-blue);
}

.pi-checkbox-row .form-check-label a:hover[b-zhnhsomh7c] {
    color: var(--pi-purple);
}

/* Validation */
[b-zhnhsomh7c] .text-danger,
[b-zhnhsomh7c] .validation-message {
    color: #ff6b6b !important;
    font-size: 13px;
}

/* Buttons */
.pi-btn-gradient[b-zhnhsomh7c] {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue));
    border: none;
    color: white;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pi-btn-gradient:hover:not(:disabled)[b-zhnhsomh7c] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 53, 255, 0.4);
    color: white;
}

.pi-btn-gradient:disabled[b-zhnhsomh7c] {
    opacity: 0.7;
}

.pi-btn-secondary[b-zhnhsomh7c] {
    background: #111a32;
    border: 1px solid var(--pi-line);
    color: white;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pi-btn-secondary:hover[b-zhnhsomh7c] {
    background: #1a2540;
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.pi-btn-danger[b-zhnhsomh7c] {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #ff8a8a;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.pi-btn-danger:hover[b-zhnhsomh7c] {
    background: rgba(220, 38, 38, 0.3);
    border-color: rgba(220, 38, 38, 0.6);
    color: #ffb3b3;
}

/* Order summary items */
.pi-item-desc[b-zhnhsomh7c] {
    color: #9ba5bc;
}

.pi-price[b-zhnhsomh7c] {
    color: white;
}

.pi-total-price[b-zhnhsomh7c] {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple), var(--pi-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.25rem;
}

.pi-savings[b-zhnhsomh7c] {
    color: #4ade80;
}

.pi-divider[b-zhnhsomh7c] {
    border-color: var(--pi-line);
    opacity: 1;
}

.pi-summary-footer[b-zhnhsomh7c] {
    border-top: 1px solid var(--pi-line);
}

/* Empty checkout state */
.pi-empty-checkout[b-zhnhsomh7c] {
    background: var(--pi-card-bg);
    border: 1px solid var(--pi-line);
    border-radius: 20px;
}

.pi-empty-checkout h3[b-zhnhsomh7c] {
    color: white;
}

.checkout-empty-icon[b-zhnhsomh7c] {
    font-size: 4rem;
    color: var(--pi-purple);
    filter: drop-shadow(0 0 10px rgba(139, 53, 255, 0.4));
}

@media (max-width: 576px) {
    .page-title[b-zhnhsomh7c] {
        font-size: 26px;
    }
}
/* _content/Photo8/Components/Pages/CollaborationManagement.razor.rz.scp.css */
/* Collaboration Management Page Styles */

/* Empty State Icons */
.collab-empty-icon[b-34ao98jsq9] {
    font-size: 3rem;
}

/* Modal Backdrop */
.collab-modal-backdrop[b-34ao98jsq9] {
    background-color: rgba(0,0,0,0.5);
}
/* _content/Photo8/Components/Pages/CreateEvent.razor.rz.scp.css */
/* Photo Infinity Create Event Styling */

:root[b-1xl9pnbopn] {
    --pi-blue: #00b7ff;
    --pi-purple: #8b35ff;
    --pi-pink: #ff36c9;
    --pi-line: rgba(255, 255, 255, 0.08);
    --pi-card-bg: rgba(11, 16, 36, 0.85);
}

/* Page wrapper with Photo Infinity background */
.pi-create-event-page[b-1xl9pnbopn] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 35px 0;
}

.pi-create-event-page .container[b-1xl9pnbopn] {
    color: white;
}

/* Page title */
.page-title[b-1xl9pnbopn] {
    font-size: 42px;
    margin: 0 0 10px;
    font-weight: 400;
}

.page-title .gradient-text[b-1xl9pnbopn] {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple), var(--pi-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.page-subtitle[b-1xl9pnbopn] {
    color: #9ba5bc;
    margin-bottom: 30px;
}

/* Photo Infinity card styling */
.pi-card[b-1xl9pnbopn] {
    background: var(--pi-card-bg);
    border: 1px solid var(--pi-line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    margin-bottom: 20px;
}

.pi-card h2[b-1xl9pnbopn],
.pi-card h3[b-1xl9pnbopn] {
    font-size: 22px;
    margin: 0 0 20px;
    font-weight: 600;
    color: white;
}

/* Form inputs - using ::deep to override Bootstrap */
.pi-card label[b-1xl9pnbopn] {
    display: block;
    color: #b8c2d8;
    margin: 14px 0 7px;
    font-size: 14px;
    font-weight: 500;
}

[b-1xl9pnbopn] .pi-card input[type="text"],
[b-1xl9pnbopn] .pi-card input[type="date"],
[b-1xl9pnbopn] .pi-card input[type="number"],
[b-1xl9pnbopn] .pi-card textarea,
[b-1xl9pnbopn] .pi-card input.form-control,
[b-1xl9pnbopn] .pi-card textarea.form-control,
[b-1xl9pnbopn] .pi-card .form-control {
    width: 100%;
    background-color: #070c1d !important;
    background: #070c1d !important;
    border: 1px solid #303b60 !important;
    border-radius: 12px;
    padding: 14px;
    color: white !important;
    font-size: 14px;
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset !important;
    box-shadow: none !important;
}

[b-1xl9pnbopn] .pi-card input::placeholder,
[b-1xl9pnbopn] .pi-card textarea::placeholder {
    color: #5a6480 !important;
    -webkit-text-fill-color: #5a6480 !important;
    opacity: 1;
}

[b-1xl9pnbopn] .pi-card input:focus,
[b-1xl9pnbopn] .pi-card textarea:focus,
[b-1xl9pnbopn] .pi-card input.form-control:focus,
[b-1xl9pnbopn] .pi-card textarea.form-control:focus,
[b-1xl9pnbopn] .pi-card .form-control:focus {
    background: #070c1d !important;
    background-color: #070c1d !important;
    border-color: var(--pi-purple) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139, 53, 255, 0.1) !important;
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset, 0 0 0 3px rgba(139, 53, 255, 0.1) !important;
}

/* Webkit autofill override */
[b-1xl9pnbopn] .pi-card input:-webkit-autofill,
[b-1xl9pnbopn] .pi-card input:-webkit-autofill:hover,
[b-1xl9pnbopn] .pi-card input:-webkit-autofill:focus,
[b-1xl9pnbopn] .pi-card input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset !important;
    -webkit-text-fill-color: white !important;
    border: 1px solid #303b60 !important;
    transition: background-color 5000s ease-in-out 0s;
}

[b-1xl9pnbopn] .pi-card textarea {
    min-height: 110px;
    resize: vertical;
}

/* Two-column row for Event Date and Custom URL */
.pi-row[b-1xl9pnbopn] {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 15px;
}

@media (max-width: 768px) {
    .pi-row[b-1xl9pnbopn] {
        grid-template-columns: 1fr;
    }
}

/* Toggle option sections (Public Gallery, RAW Downloads, pricing options) */
/* The card is now a plain container; the clickable part is the .pi-toggle-trigger button
   inside it. It used to be a bare <div @onclick>, which no keyboard could reach — every
   gallery and pricing setting on this page was mouse-only. Padding moved to the trigger so
   the button still fills the card and the whole surface stays clickable. */
.pi-toggle-option[b-1xl9pnbopn] {
    border-radius: 14px;
    border: 2px solid var(--pi-line);
    margin-top: 12px;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
}

.pi-toggle-trigger[b-1xl9pnbopn] {
    display: block;
    width: 100%;
    padding: 16px;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 12px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Holds everything revealed under a trigger — here, the price block — and supplies the
   padding the card gave up. A wrapper rather than padding on the block itself, so EditEvent
   can show two price blocks under one trigger with their own spacing between them. */
.pi-toggle-details[b-1xl9pnbopn] {
    padding: 0 16px 16px;
}

.pi-toggle-option:hover[b-1xl9pnbopn] {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
}

.pi-toggle-option.active[b-1xl9pnbopn] {
    border-color: var(--pi-purple);
    box-shadow: 0 0 25px rgba(139, 53, 255, 0.3);
    background: rgba(139, 53, 255, 0.08);
}

.pi-toggle-option .toggle-icon[b-1xl9pnbopn] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #5a6480;
    margin-right: 12px;
    vertical-align: middle;
    position: relative;
    transition: all 0.3s ease;
}

.pi-toggle-option.active .toggle-icon[b-1xl9pnbopn] {
    border-color: var(--pi-purple);
    background: var(--pi-purple);
}

.pi-toggle-option.active .toggle-icon[b-1xl9pnbopn]::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* These are spans now, not div/p — a <button> may only contain phrasing content, so the
   block elements that used to sit here were invalid inside the trigger. display: block
   restores the stacking and lets the margins below apply. */
.pi-toggle-option .option-title[b-1xl9pnbopn] {
    display: block;
    font-weight: 600;
    color: white;
    font-size: 16px;
    margin-bottom: 4px;
}

.pi-toggle-option .option-description[b-1xl9pnbopn] {
    display: block;
    font-size: 13px;
    color: #9ba5bc;
    margin: 0;
}

.pi-toggle-option .option-note[b-1xl9pnbopn] {
    display: block;
    font-size: 13px;
    color: #d9b8ff;
    margin: 8px 0 0;
}

/* Inline price input for toggle options */
.pi-toggle-price[b-1xl9pnbopn] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.pi-toggle-price label[b-1xl9pnbopn] {
    margin: 0 0 8px;
}

.pi-toggle-price .price-input-group[b-1xl9pnbopn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pi-toggle-price .price-input-group span[b-1xl9pnbopn] {
    color: #9ba5bc;
    font-size: 18px;
    font-weight: 600;
}

[b-1xl9pnbopn] .pi-toggle-price input,
[b-1xl9pnbopn] .pi-toggle-price input.form-control {
    flex: 1;
    max-width: 150px;
    background: #070c1d !important;
    border: 1px solid #303b60 !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset !important;
}

/* Clickable section for Individual Photos (opens modal) */
.pi-clickable-section[b-1xl9pnbopn] {
    display: block;
    width: 100%;
    padding: 20px;
    border-radius: 14px;
    border: 2px solid var(--pi-line);
    margin-top: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    font: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.pi-clickable-section:hover[b-1xl9pnbopn] {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* Spans inside the button now (phrasing content only), so each needs display: block to
   keep stacking and honour its margin. */
.pi-clickable-section .section-icon[b-1xl9pnbopn] {
    display: block;
    font-size: 32px;
    color: var(--pi-blue);
    margin-bottom: 8px;
}

.pi-clickable-section .section-title[b-1xl9pnbopn] {
    display: block;
    font-weight: 600;
    color: white;
    font-size: 16px;
    margin-bottom: 4px;
}

.pi-clickable-section .section-description[b-1xl9pnbopn] {
    display: block;
    font-size: 13px;
    color: #9ba5bc;
    margin: 0;
}

/* Photo Packages display area */
.pi-packages[b-1xl9pnbopn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.pi-package[b-1xl9pnbopn] {
    display: block;
    width: 100%;
    padding: 20px;
    border: 1px solid #34416b;
    border-radius: 15px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    font: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
}

/* Keyboard users get no hover cue, so the focus ring is the only thing telling them where
   they are. Nothing on this page had one. */
.pi-toggle-trigger:focus-visible[b-1xl9pnbopn],
.pi-clickable-section:focus-visible[b-1xl9pnbopn],
.pi-package:focus-visible[b-1xl9pnbopn] {
    outline: 2px solid var(--pi-blue);
    outline-offset: 2px;
}

.pi-package:hover[b-1xl9pnbopn] {
    border-color: var(--pi-purple);
    transform: translateY(-3px);
}

.pi-package.featured[b-1xl9pnbopn] {
    border-color: var(--pi-purple);
    box-shadow: 0 0 25px rgba(139, 53, 255, 0.3);
}

/* display: block so the clickable tiles, whose children are spans inside a button, stack
   the same way the non-clickable featured tiles do. */
.pi-package .package-price[b-1xl9pnbopn] {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.pi-package .package-name[b-1xl9pnbopn] {
    display: block;
    font-size: 14px;
    color: #9ba5bc;
    margin: 0;
}

.pi-package .package-details[b-1xl9pnbopn] {
    font-size: 12px;
    color: #7a8599;
    margin-top: 4px;
}

/* Subtext */
.pi-subtext[b-1xl9pnbopn] {
    font-size: 13px;
    color: #9ba5bc;
    margin-top: 8px;
    margin-bottom: 16px;
}

/* Custom URL preview */
.url-preview[b-1xl9pnbopn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    padding: 4px 12px;
    background: rgba(0, 183, 255, 0.1);
    border: 1px solid rgba(0, 183, 255, 0.3);
    border-radius: 8px;
    color: var(--pi-blue);
    font-size: 13px;
    font-family: monospace;
}

.copy-url-btn[b-1xl9pnbopn] {
    background: none;
    border: none;
    color: var(--pi-blue);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 4px rgba(0, 183, 255, 0.6));
}

.copy-url-btn:hover[b-1xl9pnbopn] {
    color: var(--pi-purple);
    filter: drop-shadow(0 0 8px rgba(139, 53, 255, 0.8));
    transform: scale(1.1);
}

.copy-url-btn i[b-1xl9pnbopn] {
    font-size: 16px;
}

/* Buttons */
.pi-btn-primary[b-1xl9pnbopn] {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue));
    border: 0;
    color: white;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pi-btn-primary:hover[b-1xl9pnbopn] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 53, 255, 0.4);
}

.pi-btn-secondary[b-1xl9pnbopn] {
    background: #111a32;
    border: 1px solid var(--pi-line);
    color: white;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pi-btn-secondary:hover[b-1xl9pnbopn] {
    background: #1a2540;
    border-color: rgba(255, 255, 255, 0.15);
}

.pi-actions[b-1xl9pnbopn] {
    margin-top: 25px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

@media (max-width: 576px) {
    .pi-actions[b-1xl9pnbopn] {
        flex-direction: column-reverse;
    }

    .pi-actions button[b-1xl9pnbopn],
    .pi-actions a[b-1xl9pnbopn] {
        width: 100%;
    }
}

/* Modal styling - using ::deep for Bootstrap modal classes */
[b-1xl9pnbopn] .modal-content {
    background: #2a3a5c !important;
    border: 2px solid rgba(139, 53, 255, 0.6);
    border-radius: 20px;
    color: white;
    box-shadow: 0 25px 70px rgba(139, 53, 255, 0.5);
}

[b-1xl9pnbopn] .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(139, 53, 255, 0.15);
}

[b-1xl9pnbopn] .modal-body {
    background: #2a3a5c;
}

[b-1xl9pnbopn] .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
}

/* Modal input fields - force dark background */
[b-1xl9pnbopn] .modal-content input[type="text"],
[b-1xl9pnbopn] .modal-content input[type="number"],
[b-1xl9pnbopn] .modal-content input.form-control,
[b-1xl9pnbopn] .modal-content .form-control {
    background-color: #0d1628 !important;
    background: #0d1628 !important;
    border: 1px solid #303b60 !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px #0d1628 inset !important;
}

[b-1xl9pnbopn] .modal-content input:focus,
[b-1xl9pnbopn] .modal-content input.form-control:focus,
[b-1xl9pnbopn] .modal-content .form-control:focus {
    background: #0d1628 !important;
    background-color: #0d1628 !important;
    border-color: var(--pi-purple) !important;
    -webkit-box-shadow: 0 0 0px 1000px #0d1628 inset, 0 0 0 3px rgba(139, 53, 255, 0.2) !important;
}

[b-1xl9pnbopn] .modal-content input:-webkit-autofill,
[b-1xl9pnbopn] .modal-content input:-webkit-autofill:hover,
[b-1xl9pnbopn] .modal-content input:-webkit-autofill:focus,
[b-1xl9pnbopn] .modal-content input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #0d1628 inset !important;
    -webkit-text-fill-color: white !important;
    border: 1px solid #303b60 !important;
}

[b-1xl9pnbopn] .modal-title {
    color: white;
}

[b-1xl9pnbopn] .btn-close {
    filter: invert(1);
}

/* Validation messages - using ::deep for Blazor validation classes */
[b-1xl9pnbopn] .text-danger,
[b-1xl9pnbopn] .validation-message {
    color: #ff6b6b !important;
    font-size: 13px;
    margin-top: 4px;
}

[b-1xl9pnbopn] .text-success {
    color: #51cf66 !important;
}

/* Form text helpers */
[b-1xl9pnbopn] .form-text {
    color: #7a8599;
    font-size: 13px;
    margin-top: 4px;
}
/* _content/Photo8/Components/Pages/CustomerPortal.razor.rz.scp.css */
/* Customer Portal Page - Photo Infinity Theme */

/* Page Wrapper */
.pi-customer-portal-page[b-vbqzzgk427] {
    background: radial-gradient(circle at 50% 0%, #1a0033 0%, #0a0015 50%, #000000 100%);
    min-height: 100vh;
    padding-bottom: 2rem;
    color: #e0e0e0;
}

/* Page Header */
.pi-page-header[b-vbqzzgk427] {
    margin-bottom: 1.5rem;
}

.pi-title-icon[b-vbqzzgk427] {
    color: #667eea;
    filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.6));
}

.pi-page-title[b-vbqzzgk427] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.gradient-text[b-vbqzzgk427] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pi-page-subtitle[b-vbqzzgk427] {
    color: #b0b0b0;
    font-size: 1rem;
}

/* Stat Cards */
.pi-stat-card[b-vbqzzgk427] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    overflow: hidden;
}

.pi-stat-primary[b-vbqzzgk427] {
    border-color: rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(102, 126, 234, 0.1) 100%);
}

.pi-stat-success[b-vbqzzgk427] {
    border-color: rgba(34, 197, 94, 0.4);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
}

.pi-stat-info[b-vbqzzgk427] {
    border-color: rgba(6, 182, 212, 0.4);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.1) 100%);
}

.pi-stat-warning[b-vbqzzgk427] {
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
}

.pi-stat-body[b-vbqzzgk427] {
    padding: 1.5rem;
}

.pi-stat-value[b-vbqzzgk427] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.pi-stat-label[b-vbqzzgk427] {
    font-size: 0.875rem;
    color: #b0b0b0;
    margin: 0;
}

.pi-stat-icon[b-vbqzzgk427] {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Cards */
.pi-card[b-vbqzzgk427] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    overflow: hidden;
}

.pi-card-header[b-vbqzzgk427] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
    padding: 1rem 1.5rem;
}

.pi-card-header h5[b-vbqzzgk427] {
    color: #ffffff;
    font-weight: 600;
    margin: 0;
}

.pi-card-body[b-vbqzzgk427] {
    padding: 1.5rem;
    color: #e0e0e0;
}

/* Navigation Tabs */
.pi-nav-tabs[b-vbqzzgk427] {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: none;
}

.pi-nav-item[b-vbqzzgk427] {
    margin-bottom: 0;
}

.pi-nav-link[b-vbqzzgk427] {
    color: #b0b0b0;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.pi-nav-link:hover[b-vbqzzgk427] {
    color: #ffffff;
    background: rgba(102, 126, 234, 0.1);
}

.pi-nav-link.active[b-vbqzzgk427] {
    color: #ffffff;
    border-bottom-color: #667eea;
    background: rgba(102, 126, 234, 0.15);
}

/* Order Items */
.pi-order-item[b-vbqzzgk427] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.6) 0%, rgba(20, 20, 40, 0.7) 100%);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.pi-order-body[b-vbqzzgk427] {
    padding: 1.25rem;
}

.pi-order-item h6[b-vbqzzgk427] {
    color: #ffffff;
    font-weight: 600;
}

.pi-amount[b-vbqzzgk427] {
    color: #22c55e;
    font-size: 1.1rem;
}

/* Badges */
.pi-badge[b-vbqzzgk427] {
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pi-badge-success[b-vbqzzgk427] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.pi-badge-warning[b-vbqzzgk427] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.pi-badge-info[b-vbqzzgk427] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
}

.pi-badge-danger[b-vbqzzgk427] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.pi-badge-secondary[b-vbqzzgk427] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

/* Photo Cards */
.pi-photo-card[b-vbqzzgk427] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.pi-photo-card:hover[b-vbqzzgk427] {
    transform: translateY(-5px);
    border-color: rgba(138, 43, 226, 0.5);
}

/* contain: a 200px-tall box for an 800x533 photo cropped the sides, and the watermark sits a few
   percent in from one of them. Letterboxed, the saved photo shows whole. */
.pi-photo-img[b-vbqzzgk427] {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: rgba(5, 8, 22, 0.6);
    display: block;
}

.pi-photo-info[b-vbqzzgk427] {
    padding: 1rem;
}

.pi-photo-title[b-vbqzzgk427] {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.pi-photo-actions[b-vbqzzgk427] {
    padding: 0 1rem 1rem 1rem;
}

.pi-favorite-btn[b-vbqzzgk427] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pi-favorite-btn:hover[b-vbqzzgk427] {
    background: rgba(239, 68, 68, 1);
    transform: scale(1.1);
}

.pi-favorite-active[b-vbqzzgk427] {
    background: rgba(239, 68, 68, 0.9);
}

/* Download Items */
.pi-download-item[b-vbqzzgk427] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.6) 0%, rgba(20, 20, 40, 0.7) 100%);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.pi-download-body[b-vbqzzgk427] {
    padding: 1.25rem;
}

.pi-download-item h6[b-vbqzzgk427] {
    color: #ffffff;
    font-weight: 600;
}

/* Progress Bar */
.pi-progress[b-vbqzzgk427] {
    height: 8px;
    background: rgba(20, 20, 40, 0.8);
    border-radius: 10px;
    overflow: hidden;
}

.pi-progress-bar[b-vbqzzgk427] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
}

/* Buttons */
.pi-button[b-vbqzzgk427] {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.pi-button:hover[b-vbqzzgk427] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.5);
    color: white;
}

.pi-button-outline[b-vbqzzgk427] {
    background: transparent;
    border: 2px solid rgba(102, 126, 234, 0.5);
    color: #667eea;
}

.pi-button-outline:hover[b-vbqzzgk427] {
    background: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
    color: #667eea;
}

.pi-button-sm[b-vbqzzgk427] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;

    /* A button should never be narrower than the label inside it. Without this the label just
       carried on past the rounded edge, because overflow is visible by default and "Download"
       is one unbreakable word. */
    min-width: fit-content;
}

/* "Order #PB202607271355286937" is 26 characters, 20 of them an unbreakable token, and at the
   h6 default of 16px it filled 255px of a 279px column. Smaller, and on its own line above the
   rest of the card so it never has to compete for width.

   No overflow-wrap here: given a full-width line the token fits whole, and breaking it mid-token
   produced three ragged lines that were harder to read than the size ever was. */
.pi-order-ref[b-vbqzzgk427] {
    font-size: 0.8125rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: #ffffff;
}

/* Reference and date share a line, with the date pushed to the end on anything wider than a
   phone and dropping underneath on one. */
.pi-order-ref-line[b-vbqzzgk427] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(138, 43, 226, 0.18);
}

/* Icon and label on one line — the crushed column had wrapped them into two, which is what made
   the button 58px tall for a 20px label. */
.pi-download-btn[b-vbqzzgk427] {
    white-space: nowrap;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.pi-button-primary[b-vbqzzgk427] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.pi-button-primary:hover[b-vbqzzgk427] {
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.5);
}

.pi-button-success[b-vbqzzgk427] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.pi-button-success:hover[b-vbqzzgk427] {
    box-shadow: 0 4px 15px 0 rgba(34, 197, 94, 0.5);
}

.pi-button-danger[b-vbqzzgk427] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.pi-button-danger:hover[b-vbqzzgk427] {
    box-shadow: 0 4px 15px 0 rgba(239, 68, 68, 0.5);
}

/* Empty State */
.pi-empty-state[b-vbqzzgk427] {
    padding: 3rem 1rem;
}

.pi-empty-icon[b-vbqzzgk427] {
    font-size: 3rem;
    color: rgba(176, 176, 176, 0.5);
    filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.3));
}

.pi-empty-state h5[b-vbqzzgk427] {
    color: #b0b0b0;
    margin-top: 1rem;
}

/* Text Colors */
.pi-text-muted[b-vbqzzgk427] {
    color: #9ca3af;
}

/* Modal */
.pi-modal-content[b-vbqzzgk427] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.95) 0%, rgba(20, 20, 40, 0.98) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    color: #e0e0e0;

    /* Bootstrap's .modal-dialog sets pointer-events: none so clicks fall through to the
       backdrop, and its .modal-content puts them back. This markup swapped .modal-content for
       this class and so never restored them — every control in the dialog, the checkboxes,
       Cancel, Save and the close button, was unclickable. */
    pointer-events: auto;
}

/* Was display:block, which dropped the close button onto its own line under the title. */
.pi-modal-header[b-vbqzzgk427] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
    padding: 1.25rem 1.5rem;
}

.pi-modal-header .btn-close[b-vbqzzgk427] {
    filter: invert(1);
    opacity: 0.75;
    flex-shrink: 0;
}

.pi-modal-header .btn-close:hover[b-vbqzzgk427] {
    opacity: 1;
}

.pi-modal-header .modal-title[b-vbqzzgk427] {
    color: #ffffff;
    font-weight: 600;
}

.pi-modal-body[b-vbqzzgk427] {
    padding: 1.5rem;
}

.pi-modal-footer[b-vbqzzgk427] {
    border-top: 1px solid rgba(138, 43, 226, 0.3);
    padding: 1.25rem 1.5rem;
}

/* Form Controls */
[b-vbqzzgk427] .form-check-label {
    color: #e0e0e0;
}

[b-vbqzzgk427] .form-check-input {
    border-color: rgba(138, 43, 226, 0.5);
}

[b-vbqzzgk427] .form-check-input:checked {
    background-color: #667eea;
    border-color: #667eea;
}

/* Responsive */
@media (max-width: 768px) {
    .pi-page-title[b-vbqzzgk427] {
        font-size: 1.5rem;
    }

    .pi-stat-value[b-vbqzzgk427] {
        font-size: 1.5rem;
    }

    .pi-stat-icon[b-vbqzzgk427] {
        font-size: 2rem;
    }

    .pi-card-body[b-vbqzzgk427],
    .pi-order-body[b-vbqzzgk427],
    .pi-download-body[b-vbqzzgk427] {
        padding: 1rem;
    }

    .pi-nav-link[b-vbqzzgk427] {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* The full-width body override that used to sit here lives in wwwroot/app.css. Scoped CSS
   cannot reach body, .page, main or article — they belong to the layout, not this component,
   so they never carry the scope attribute the compiler appends to the selector. */
/* _content/Photo8/Components/Pages/Customer/Orders.razor.rz.scp.css */
/* Orders Page - Photo Infinity Theme */

/* Page Wrapper */
.pi-orders-page[b-tcnlp1tux7] {
    background: radial-gradient(circle at 50% 0%, #1a0033 0%, #0a0015 50%, #000000 100%);
    min-height: 100vh;
    padding-bottom: 2rem;
    color: #e0e0e0;
}

/* Page Header */
.pi-page-header[b-tcnlp1tux7] {
    margin-bottom: 1.5rem;
}

.pi-title-icon[b-tcnlp1tux7] {
    color: #667eea;
    filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.6));
}

.pi-page-title[b-tcnlp1tux7] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.gradient-text[b-tcnlp1tux7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Cards */
.pi-card[b-tcnlp1tux7] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    overflow: hidden;
}

.pi-card-header[b-tcnlp1tux7] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
    padding: 1rem 1.5rem;
}

.pi-card-header h5[b-tcnlp1tux7] {
    color: #ffffff;
    font-weight: 600;
    margin: 0;
}

.pi-card-body[b-tcnlp1tux7] {
    padding: 1.5rem;
    color: #e0e0e0;
}

/* Order Cards (Mobile) */
.pi-order-card[b-tcnlp1tux7] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.6) 0%, rgba(20, 20, 40, 0.7) 100%);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.pi-order-content[b-tcnlp1tux7] {
    padding: 1rem;
}

.pi-order-number[b-tcnlp1tux7] {
    color: #ffffff;
    font-weight: 600;
    /* Last resort on a very narrow phone. An order number is one unbreakable 20-character
       token, so without this it sets the row's minimum width and nothing else can fit. */
    overflow-wrap: anywhere;
}

/* Order number and status badge. On a 390px phone the number alone wants 182px of a 255px
   row and the badge another 99px, so the badge was pushed 10-14px past the card and clipped
   by its overflow:hidden — "PROCESSING" arrived as "PROCESSIN". Let it drop to its own line
   instead, still hard right so it stays in the same visual column as the desktop table. */
.pi-order-head[b-tcnlp1tux7] {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pi-order-head .pi-badge[b-tcnlp1tux7] {
    flex-shrink: 0;
    margin-left: auto;
}

.pi-stat-mini[b-tcnlp1tux7] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}

.pi-amount[b-tcnlp1tux7] {
    color: #22c55e;
}

/* Badges */
.pi-badge[b-tcnlp1tux7] {
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pi-badge-success[b-tcnlp1tux7] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.pi-badge-warning[b-tcnlp1tux7] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.pi-badge-danger[b-tcnlp1tux7] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.pi-badge-secondary[b-tcnlp1tux7] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

.pi-badge-info[b-tcnlp1tux7] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
}

.pi-badge-primary[b-tcnlp1tux7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Event Badge */
.pi-event-badge[b-tcnlp1tux7] {
    background: rgba(102, 126, 234, 0.2);
    color: #a3edfd;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    margin-right: 0.25rem;
    display: inline-block;
}

/* Code */
/* The order number is the widest thing in the table — 20 monospace characters that took 219px
   of the 682px available once the sidebar has had its 250px. Smaller, and with less padding
   around it, so the other five columns are not left fighting over the remainder. */
.pi-code[b-tcnlp1tux7] {
    background: rgba(102, 126, 234, 0.2);
    color: #a3edfd;
    padding: 0.25rem 0.45rem;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    white-space: nowrap;
}

.pi-nowrap[b-tcnlp1tux7] {
    white-space: nowrap;
}

/* Keep the view and download buttons on one line rather than stacking them. */
.pi-table tbody td:last-child .d-flex[b-tcnlp1tux7] {
    flex-wrap: nowrap;
}

/* Table */
.pi-table-responsive[b-tcnlp1tux7] {
    overflow-x: auto;
}

.pi-table[b-tcnlp1tux7] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
    color: #e0e0e0;

    /* Six columns need about this much to stay on one line each. Without a floor the table just
       shrank to whatever was left after the 250px sidebar, squeezing Items to 75px — enough to
       break "Super Duper Event" across three lines and stand the row 137px tall. The wrapper
       has had overflow-x: auto all along; it only ever had nothing to scroll. */
    min-width: 720px;
}

/* 1rem each side on six columns spent 192px of the table's 682px on padding alone, which is
   what pushed the dates onto three lines and stacked the action buttons. */
.pi-table thead th[b-tcnlp1tux7] {
    background: rgba(102, 126, 234, 0.15);
    color: #ffffff;
    font-weight: 600;
    padding: 0.85rem 0.6rem;
    border: none;
}

.pi-table thead th:first-child[b-tcnlp1tux7] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.pi-table thead th:last-child[b-tcnlp1tux7] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.pi-table tbody tr[b-tcnlp1tux7] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.6) 0%, rgba(20, 20, 40, 0.7) 100%);
    transition: all 0.3s ease;
}

/* The hover state used to be transform: translateX(5px). The table sits in a container with
   overflow-x: auto, so shifting a full-width row 5px to the right pushed it past the right edge
   and a horizontal scrollbar appeared under the pointer — and disappeared again the moment you
   moved off the row, so the whole table jumped.

   An inset shadow on the left edge gives the same "this row" cue without moving anything, so
   nothing can overflow. */
.pi-table tbody tr:hover[b-tcnlp1tux7] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    box-shadow: inset 3px 0 0 0 #00b7ff;
}

.pi-table tbody td[b-tcnlp1tux7] {
    padding: 0.85rem 0.6rem;
    border: none;
}

.pi-table tbody tr td:first-child[b-tcnlp1tux7] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.pi-table tbody tr td:last-child[b-tcnlp1tux7] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Buttons */
.pi-button[b-tcnlp1tux7] {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.pi-button:hover[b-tcnlp1tux7] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.5);
    color: white;
}

.pi-button-success[b-tcnlp1tux7] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.pi-button-success:hover[b-tcnlp1tux7] {
    box-shadow: 0 6px 20px 0 rgba(34, 197, 94, 0.5);
}

.pi-button-outline[b-tcnlp1tux7] {
    background: transparent;
    border: 2px solid rgba(102, 126, 234, 0.5);
    color: #667eea;
}

.pi-button-outline:hover[b-tcnlp1tux7] {
    background: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
    color: #667eea;
}

/* The mobile "Download Expired" button is disabled but only .pi-button-sm had a disabled
   style, so at full size it looked exactly like a button you could still press. */
.pi-button:disabled[b-tcnlp1tux7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pi-button:disabled:hover[b-tcnlp1tux7] {
    transform: none;
    box-shadow: none;
}

.pi-button-sm[b-tcnlp1tux7] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    display: inline-block;
    text-decoration: none;
    color: white;
}

.pi-button-sm.pi-button-success[b-tcnlp1tux7] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.pi-button-sm.pi-button-success:hover[b-tcnlp1tux7] {
    box-shadow: 0 4px 15px 0 rgba(34, 197, 94, 0.5);
}

.pi-button-sm.pi-button-outline[b-tcnlp1tux7] {
    background: transparent;
    border: 2px solid rgba(102, 126, 234, 0.5);
    color: #667eea;
}

.pi-button-sm.pi-button-outline:hover[b-tcnlp1tux7] {
    background: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
}

.pi-button-sm.pi-button-outline:disabled[b-tcnlp1tux7] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Empty State */
.pi-empty-state[b-tcnlp1tux7] {
    padding: 3rem 1rem;
}

.pi-empty-icon[b-tcnlp1tux7] {
    font-size: 4rem;
    color: rgba(176, 176, 176, 0.5);
    filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.3));
}

.pi-empty-state h3[b-tcnlp1tux7] {
    color: #b0b0b0;
    margin-top: 1rem;
}

/* Text Colors */
.pi-text-muted[b-tcnlp1tux7] {
    color: #9ca3af;
}

/* Responsive */
@media (max-width: 768px) {
    .pi-page-title[b-tcnlp1tux7] {
        font-size: 1.5rem;
    }

    .pi-card-body[b-tcnlp1tux7],
    .pi-order-content[b-tcnlp1tux7] {
        padding: 1rem;
    }

    .pi-stat-mini[b-tcnlp1tux7] {
        font-size: 1rem;
    }
}

/* The full-width body override that used to sit here lives in wwwroot/app.css. Scoped CSS
   cannot reach body, .page, main or article — they belong to the layout, not this component,
   so they never carry the scope attribute the compiler appends. */
/* _content/Photo8/Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard page background */
.dashboard-page[b-y0h8alu4cb] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 35px 20px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Disable hover transform for dashboard cards */
[b-y0h8alu4cb] .pi-stat-card:hover,
[b-y0h8alu4cb] .pi-nav-section .pi-card:hover,
[b-y0h8alu4cb] .row .pi-card:hover,
[b-y0h8alu4cb] .pi-activity:hover {
    transform: none !important;
    z-index: auto !important;
}

/* Ensure bottom section cards are positioned correctly */
[b-y0h8alu4cb] .row.g-3.mb-3 {
    position: relative;
    z-index: 1;
    clear: both;
}

[b-y0h8alu4cb] .row.g-3.mb-3 .col-lg-4 {
    display: flex;
}

[b-y0h8alu4cb] .row.g-3.mb-3 .pi-card {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Wider container for stat cards */
.dashboard-page .row[b-y0h8alu4cb] {
    margin-left: 0;
    margin-right: 0;
}

/* Dashboard header */
.dashboard-header[b-y0h8alu4cb] {
    font-size: 42px;
    margin: 0 0 10px;
    font-weight: 400;
}

.dashboard-header .gradient-text[b-y0h8alu4cb] {
    background: linear-gradient(90deg, #00b7ff, #8b35ff, #ff36c9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.dashboard-subtitle[b-y0h8alu4cb] {
    color: #9ba5bc;
    margin-bottom: 30px;
}

/* Stat cards with colored borders */
.pi-stat-card[b-y0h8alu4cb] {
    height: 150px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 24px;
    border-width: 2px;
}

.pi-stat-card .icon[b-y0h8alu4cb] {
    font-size: 48px;
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
}

.pi-stat-card .stat-content[b-y0h8alu4cb] {
    position: absolute;
    bottom: 22px;
    left: 22px;
}

.pi-stat-card .number[b-y0h8alu4cb] {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 5px 0;
    color: white;
}

.pi-stat-card .label[b-y0h8alu4cb] {
    font-size: 14px;
    margin: 0;
    color: #a7b1b0;
}

.pi-stat-card.blue[b-y0h8alu4cb] { border-color: #00b7ff; }
.pi-stat-card.green[b-y0h8alu4cb] { border-color: #2ecc71; }
.pi-stat-card.cyan[b-y0h8alu4cb] { border-color: #a3edfd; }
.pi-stat-card.gold[b-y0h8alu4cb] { border-color: #f2e562; }

/* Neon icon effects for stat cards */
.pi-stat-card .icon.neon-events[b-y0h8alu4cb] {
    color: #5881ca;
    filter: drop-shadow(0 0 8px #5881ca) 
            drop-shadow(0 0 15px #5881ca);
}

.pi-stat-card .icon.neon-photos[b-y0h8alu4cb] {
    color: #80ba7b;
    filter: drop-shadow(0 0 8px #80ba7b) 
            drop-shadow(0 0 15px #80ba7b);
}

.pi-stat-card .icon.neon-orders[b-y0h8alu4cb] {
    color: #a3edfd;
    filter: drop-shadow(0 0 8px #a3edfd) 
            drop-shadow(0 0 15px #a3edfd);
}

.pi-stat-card .icon.neon-revenue[b-y0h8alu4cb] {
    color: #f2e562;
    filter: drop-shadow(0 0 8px #f2e562) 
            drop-shadow(0 0 15px #f2e562);
}

/* Number colors with icon tints */
.pi-stat-card.blue .number[b-y0h8alu4cb] {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 10px rgba(88, 129, 202, 0.3);
}

.pi-stat-card.green .number[b-y0h8alu4cb] {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 10px rgba(128, 186, 123, 0.3);
}

.pi-stat-card.cyan .number[b-y0h8alu4cb] {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 10px rgba(163, 237, 253, 0.3);
}

.pi-stat-card.gold .number[b-y0h8alu4cb] {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 10px rgba(242, 229, 98, 0.3);
}

/* Navigation section */
.pi-nav-section[b-y0h8alu4cb] {
    display: block !important;
    visibility: visible !important;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.pi-nav-section .pi-card[b-y0h8alu4cb] {
    padding: 24px;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.pi-nav-section h2[b-y0h8alu4cb] {
    font-size: 24px;
    margin-bottom: 18px;
    font-weight: 600;
    color: white;
}

.pi-nav-grid[b-y0h8alu4cb] {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pi-nav-tile[b-y0h8alu4cb] {
    min-height: 120px;
    height: 120px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
    color: white;
    transition: all 0.2s;
}

.pi-nav-tile:hover[b-y0h8alu4cb] {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.pi-nav-tile .icon[b-y0h8alu4cb] {
    font-size: 32px;
}

/* Navigation tile specific colors with neon effects */
.pi-nav-tile.my-events[b-y0h8alu4cb] {
    border-color: #cc6698;
}

.pi-nav-tile.my-events .icon[b-y0h8alu4cb] {
    color: #cc6698;
    filter: drop-shadow(0 0 8px #cc6698);
}

.pi-nav-tile.my-events div:not(.icon)[b-y0h8alu4cb] {
    color: #8f898f;
}

.pi-nav-tile.create-event[b-y0h8alu4cb] {
    border-color: #669999;
}

.pi-nav-tile.create-event .icon[b-y0h8alu4cb] {
    color: #669999;
    filter: drop-shadow(0 0 8px #669999);
}

.pi-nav-tile.create-event div:not(.icon)[b-y0h8alu4cb] {
    color: #8f898f;
}

.pi-nav-tile.sales[b-y0h8alu4cb] {
    border-color: #ffcc66;
}

.pi-nav-tile.sales .icon[b-y0h8alu4cb] {
    color: #ffcc66;
    filter: drop-shadow(0 0 8px #ffcc66);
}

.pi-nav-tile.sales div:not(.icon)[b-y0h8alu4cb] {
    color: #8f898f;
}

.pi-nav-tile.my-payouts[b-y0h8alu4cb] {
    border-color: #66cc99;
}

.pi-nav-tile.my-payouts .icon[b-y0h8alu4cb] {
    color: #66cc99;
    filter: drop-shadow(0 0 8px #66cc99);
}

.pi-nav-tile.my-payouts div:not(.icon)[b-y0h8alu4cb] {
    color: #8f898f;
}

.pi-nav-tile.collaboration[b-y0h8alu4cb] {
    border-color: #9966cc;
}

.pi-nav-tile.collaboration .icon[b-y0h8alu4cb] {
    color: #9966cc;
    filter: drop-shadow(0 0 8px #9966cc);
}

.pi-nav-tile.collaboration div:not(.icon):not(.coming-soon)[b-y0h8alu4cb] {
    color: #8f898f;
}

.pi-nav-tile.collaboration.disabled[b-y0h8alu4cb] {
    cursor: not-allowed;
    opacity: 0.6;
}

.pi-nav-tile.collaboration.disabled:hover[b-y0h8alu4cb] {
    transform: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.pi-nav-tile .coming-soon[b-y0h8alu4cb] {
    font-size: 12px;
    color: #9966cc;
    margin-top: 4px;
    font-weight: 500;
}

.pi-nav-tile.watermark[b-y0h8alu4cb] {
    border-color: #a66b96;
}

.pi-nav-tile.watermark .icon[b-y0h8alu4cb] {
    color: #a66b96;
    filter: drop-shadow(0 0 8px #a66b96);
}

.pi-nav-tile.watermark div:not(.icon)[b-y0h8alu4cb] {
    color: #8f898f;
}

/* Old color classes - keeping for backwards compatibility */
.pi-nav-tile.blue[b-y0h8alu4cb] { border-color: #00b7ff; }
.pi-nav-tile.purple[b-y0h8alu4cb] { border-color: #8b35ff; }
.pi-nav-tile.green[b-y0h8alu4cb] { border-color: #2ecc71; }
.pi-nav-tile.cyan[b-y0h8alu4cb] { border-color: #a3edfd; }
.pi-nav-tile.pink[b-y0h8alu4cb] { border-color: #ff36c9; }

/* Bottom section grid */
.pi-bottom-grid[b-y0h8alu4cb] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    margin-top: 22px;
}

/* Section headers */
.pi-section-header[b-y0h8alu4cb] {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 600;
    display: flex;
    /* Was "between" — not a valid value, so the parser dropped it and this fell back to
       flex-start. That is what the design actually wants: the icon sits next to its label.
       Spelled out, because the obvious "correction" to space-between flings the icon and
       the text to opposite ends of the header. */
    justify-content: flex-start;
    align-items: center;
}

.pi-section-header i[b-y0h8alu4cb] {
    color: #807daa;
    margin-right: 8px;
}

/* Activity section */
.pi-activity[b-y0h8alu4cb] {
    margin-top: 22px;
    text-align: center;
    padding: 55px 22px;
    color: #9ba5bc;
    width: 100%;
}

.pi-activity .icon[b-y0h8alu4cb] {
    font-size: 48px;
    margin-bottom: 15px;
    color: #443fa4;
}

.pi-activity .pi-section-header i[b-y0h8alu4cb] {
    color: #807daa;
}

.pi-activity:has(table)[b-y0h8alu4cb],
.pi-activity:has(.pi-activity-card)[b-y0h8alu4cb] {
    padding: 25px 22px;
    text-align: left;
}

/* Recent Activity table — themed to match the rest of the dashboard instead of
   Bootstrap's default light table styling (which rendered as a jarring white box). */
[b-y0h8alu4cb] .pi-table {
    width: 100%;
    border-collapse: collapse;
    color: #cbd2e5;
}

[b-y0h8alu4cb] .pi-table th {
    padding: 12px 15px;
    border-bottom: 2px solid var(--pi-line);
    text-align: left;
    font-weight: 700;
    color: white;
}

[b-y0h8alu4cb] .pi-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--pi-line);
    text-align: left;
}

[b-y0h8alu4cb] .pi-table tbody tr:hover {
    background: rgba(0, 140, 255, 0.05);
}

/* Caps the Recent Activity list/table to roughly 10 rows tall (header + 10 data rows at ~44px
   each) — anything beyond that scrolls within this box instead of growing the page. */
.pi-activity-scroll[b-y0h8alu4cb] {
    max-height: 480px;
    overflow-y: auto;
}

[b-y0h8alu4cb] .pi-table thead th {
    position: sticky;
    top: 0;
    background: #0b1024;
    z-index: 1;
}

/* Recent Activity mobile card view — same dark theme as the table, for small screens */
.pi-activity-card[b-y0h8alu4cb] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--pi-line);
    border-radius: 10px;
    padding: 12px 15px;
}

/* Order numbers are ~20 characters, so on a phone they ran straight into the status badge
   with no gap. Hold the two apart, keep the badge at its natural width, and let the number
   wrap rather than push. */
.pi-activity-card > .d-flex[b-y0h8alu4cb] {
    gap: 10px;
}

.pi-activity-card .badge[b-y0h8alu4cb] {
    flex-shrink: 0;
    align-self: flex-start;
}

.pi-activity-card h6[b-y0h8alu4cb] {
    overflow-wrap: anywhere;
}

.pi-text-muted[b-y0h8alu4cb] {
    color: #9ba5bc;
}

/* Sits under a stat card's label — currently the net-of-fees figure beneath Total Revenue.
   Deliberately quieter than the label so the headline number still reads first. */
.pi-stat-sub[b-y0h8alu4cb] {
    color: #9ba5bc;
    font-size: 12px;
    margin-top: 2px;
}

/* Commission rate items */
.pi-commission-item[b-y0h8alu4cb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pi-commission-item i[b-y0h8alu4cb] {
    color: #807daa;
    margin-right: 8px;
}

.pi-commission-item:last-child[b-y0h8alu4cb] {
    border-bottom: none;
}

.pi-commission-badge[b-y0h8alu4cb] {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e1b4b 100%);
    border: 1px solid #3b82f6;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    color: #60a5fa;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

/* View All button */
.pi-view-all-btn[b-y0h8alu4cb] {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid #00b7ff;
    color: #00b7ff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.pi-view-all-btn:hover[b-y0h8alu4cb] {
    background: #00b7ff;
    color: white;
}

/* Make text-muted more visible on dark background */
[b-y0h8alu4cb] .text-muted {
    color: #9ba5bc !important;
    opacity: 1 !important;
}

[b-y0h8alu4cb] small.text-muted {
    color: #8a94a6 !important;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .pi-nav-grid[b-y0h8alu4cb] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .dashboard-page[b-y0h8alu4cb] {
        padding: 25px 30px;
    }

    .pi-bottom-grid[b-y0h8alu4cb] {
        grid-template-columns: 1fr;
    }

    .pi-nav-grid[b-y0h8alu4cb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-header[b-y0h8alu4cb] {
        font-size: 32px;
    }

    .pi-stat-card .number[b-y0h8alu4cb] {
        font-size: 28px;
    }

    .pi-nav-tile[b-y0h8alu4cb] {
        height: 100px;
    }
}

@media (max-width: 576px) {
    .dashboard-page[b-y0h8alu4cb] {
        padding: 20px;
    }

    /* One tile per row made this page about nine screens tall on a phone. Two fits
       comfortably at 375px (~160px per tile) and still leaves a generous tap target. */
    .pi-nav-grid[b-y0h8alu4cb] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Same reasoning for the stat cards, which Bootstrap drops to full width below md.
       No ::deep here: these columns are in this component's own markup, so they already
       carry the scope attribute. A leading ::deep would hang it off a non-existent
       ancestor instead, and the rule would never match. */
    .dashboard-page .col-xl-4.col-md-6[b-y0h8alu4cb] {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* At half width the absolutely-positioned number and icon overlap — "$256.95" already
       runs under the currency glyph, and a five-figure total is worse. Lay the card out in
       normal flow instead so the two can never collide, whatever the figure. */
    .pi-stat-card[b-y0h8alu4cb] {
        height: auto;
        min-height: 112px;
        padding: 16px;
        gap: 10px;
    }

    .pi-stat-card .icon[b-y0h8alu4cb] {
        position: static;
        transform: none;
        font-size: 28px;
        order: 2;
        flex: 0 0 auto;
    }

    .pi-stat-card .stat-content[b-y0h8alu4cb] {
        position: static;
        order: 1;
        min-width: 0;
    }

    .pi-stat-card .number[b-y0h8alu4cb] {
        font-size: 24px;
        overflow-wrap: anywhere;
    }
}
/* _content/Photo8/Components/Pages/EditEvent.razor.rz.scp.css */
/* Photo Infinity Edit Event Styling - Matching CreateEvent Layout */

:root[b-74t4vote6e] {
    --pi-blue: #00b7ff;
    --pi-purple: #8b35ff;
    --pi-pink: #ff36c9;
    --pi-line: rgba(255, 255, 255, 0.08);
    --pi-card-bg: rgba(11, 16, 36, 0.85);
}

/* Page wrapper with Photo Infinity background */
.pi-edit-event-page[b-74t4vote6e] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 35px 0;
}

.pi-edit-event-page .container[b-74t4vote6e] {
    color: white;
}

/* Page title */
.page-title[b-74t4vote6e] {
    font-size: 42px;
    margin: 0 0 10px;
    font-weight: 400;
}

.page-title .gradient-text[b-74t4vote6e] {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple), var(--pi-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.page-subtitle[b-74t4vote6e] {
    color: #9ba5bc;
    margin-bottom: 30px;
}

/* Loading spinner styling */
.pi-edit-event-page[b-74t4vote6e]  .spinner-border {
    color: var(--pi-purple) !important;
}

.pi-edit-event-page[b-74t4vote6e]  .text-muted {
    color: #9ba5bc !important;
}

/* Alert styling */
.pi-edit-event-page[b-74t4vote6e]  .alert {
    background: var(--pi-card-bg);
    border: 1px solid var(--pi-line);
    border-radius: 12px;
    color: white;
}

.pi-edit-event-page[b-74t4vote6e]  .alert-danger {
    border-color: #ff3d3d;
    background: rgba(255, 61, 61, 0.15);
}

/* Photo Infinity card styling */
.pi-card[b-74t4vote6e] {
    background: var(--pi-card-bg);
    border: 1px solid var(--pi-line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    margin-bottom: 20px;
}

.pi-card h2[b-74t4vote6e],
.pi-card h3[b-74t4vote6e] {
    font-size: 22px;
    margin: 0 0 20px;
    font-weight: 600;
    color: white;
}

/* Subtext */
.pi-subtext[b-74t4vote6e] {
    font-size: 13px;
    color: #9ba5bc;
    margin: 0 0 15px;
}

/* Form inputs - using ::deep to override Bootstrap */
.pi-card label[b-74t4vote6e] {
    display: block;
    color: #b8c2d8;
    margin: 14px 0 7px;
    font-size: 14px;
    font-weight: 500;
}

[b-74t4vote6e] .pi-card input[type="text"],
[b-74t4vote6e] .pi-card input[type="date"],
[b-74t4vote6e] .pi-card input[type="number"],
[b-74t4vote6e] .pi-card textarea,
[b-74t4vote6e] .pi-card input.form-control,
[b-74t4vote6e] .pi-card textarea.form-control,
[b-74t4vote6e] .pi-card .form-control {
    width: 100%;
    background-color: #070c1d !important;
    background: #070c1d !important;
    border: 1px solid #303b60 !important;
    border-radius: 12px;
    padding: 14px;
    color: white !important;
    font-size: 14px;
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset !important;
    box-shadow: none !important;
}

[b-74t4vote6e] .pi-card input::placeholder,
[b-74t4vote6e] .pi-card textarea::placeholder {
    color: #5a6480 !important;
    -webkit-text-fill-color: #5a6480 !important;
    opacity: 1;
}

[b-74t4vote6e] .pi-card input:focus,
[b-74t4vote6e] .pi-card textarea:focus,
[b-74t4vote6e] .pi-card input.form-control:focus,
[b-74t4vote6e] .pi-card textarea.form-control:focus,
[b-74t4vote6e] .pi-card .form-control:focus {
    background: #070c1d !important;
    background-color: #070c1d !important;
    border-color: var(--pi-purple) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139, 53, 255, 0.1) !important;
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset, 0 0 0 3px rgba(139, 53, 255, 0.1) !important;
}

/* Webkit autofill override */
[b-74t4vote6e] .pi-card input:-webkit-autofill,
[b-74t4vote6e] .pi-card input:-webkit-autofill:hover,
[b-74t4vote6e] .pi-card input:-webkit-autofill:focus,
[b-74t4vote6e] .pi-card input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset !important;
    -webkit-text-fill-color: white !important;
    border: 1px solid #303b60 !important;
    transition: background-color 5000s ease-in-out 0s;
}

[b-74t4vote6e] .pi-card textarea {
    min-height: 110px;
    resize: vertical;
}

/* Two-column row for Event Date and Custom URL */
.pi-row[b-74t4vote6e] {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 15px;
}

@media (max-width: 768px) {
    .pi-row[b-74t4vote6e] {
        grid-template-columns: 1fr;
    }
}

/* URL preview with copy button */
.url-preview[b-74t4vote6e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #9ba5bc;
    margin-left: 8px;
}

.copy-url-btn[b-74t4vote6e] {
    background: none;
    border: none;
    color: var(--pi-blue);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 4px rgba(0, 183, 255, 0.6));
}

.copy-url-btn:hover[b-74t4vote6e] {
    color: var(--pi-purple);
    filter: drop-shadow(0 0 8px rgba(139, 53, 255, 0.8));
    transform: scale(1.1);
}

.copy-url-btn i[b-74t4vote6e] {
    font-size: 16px;
}

/* Toggle option sections (Public Gallery, RAW Downloads, pricing options) */
/* The card is a plain container; the clickable part is the .pi-toggle-trigger button inside
   it. It used to be a bare <div @onclick>, which no keyboard could reach. Padding moved to
   the trigger so the button still fills the card and the whole surface stays clickable. */
.pi-toggle-option[b-74t4vote6e] {
    border-radius: 14px;
    border: 2px solid var(--pi-line);
    margin-top: 12px;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
}

.pi-toggle-trigger[b-74t4vote6e] {
    display: block;
    width: 100%;
    padding: 16px;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 12px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Holds everything revealed under a trigger — here, one or two price blocks — and supplies
   the padding the card gave up. A wrapper rather than padding on each block, so the two
   blocks under Sell Complete Gallery keep their own spacing from each other. */
.pi-toggle-details[b-74t4vote6e] {
    padding: 0 16px 16px;
}

.pi-toggle-option:hover[b-74t4vote6e] {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
}

.pi-toggle-option.active[b-74t4vote6e] {
    border-color: var(--pi-purple);
    box-shadow: 0 0 25px rgba(139, 53, 255, 0.3);
    background: rgba(139, 53, 255, 0.08);
}

.pi-toggle-option .toggle-icon[b-74t4vote6e] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #5a6480;
    margin-right: 12px;
    vertical-align: middle;
    position: relative;
    transition: all 0.3s ease;
}

.pi-toggle-option.active .toggle-icon[b-74t4vote6e] {
    border-color: var(--pi-purple);
    background: var(--pi-purple);
}

.pi-toggle-option.active .toggle-icon[b-74t4vote6e]::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Spans now, not div/p — a <button> may only contain phrasing content — so they need
   display: block to keep stacking and honour the margins below. */
.pi-toggle-option .option-title[b-74t4vote6e] {
    display: block;
    font-weight: 600;
    color: white;
    font-size: 16px;
    margin-bottom: 3px;
}

.pi-toggle-option .option-description[b-74t4vote6e] {
    display: block;
    font-size: 13px;
    color: #9ba5bc;
    margin: 0;
}

/* Inline price input for toggle options */
.pi-toggle-price[b-74t4vote6e] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.pi-toggle-price label[b-74t4vote6e] {
    margin: 0 0 8px;
}

.pi-toggle-price .price-input-group[b-74t4vote6e] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pi-toggle-price .price-input-group span[b-74t4vote6e] {
    color: #9ba5bc;
    font-size: 18px;
    font-weight: 600;
}

[b-74t4vote6e] .pi-toggle-price input,
[b-74t4vote6e] .pi-toggle-price input.form-control {
    flex: 1;
    max-width: 150px;
    background: #070c1d !important;
    border: 1px solid #303b60 !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset !important;
}

/* Clickable section for Individual Photos (opens modal) */
.pi-clickable-section[b-74t4vote6e] {
    display: block;
    width: 100%;
    padding: 20px;
    border-radius: 14px;
    border: 2px solid var(--pi-line);
    margin-top: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    font: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.pi-clickable-section:hover[b-74t4vote6e] {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.pi-clickable-section .section-icon[b-74t4vote6e] {
    display: block;
    font-size: 32px;
    color: var(--pi-blue);
    margin-bottom: 8px;
}

.pi-clickable-section .section-title[b-74t4vote6e] {
    display: block;
    font-weight: 600;
    color: white;
    font-size: 16px;
    margin-bottom: 4px;
}

.pi-clickable-section .section-description[b-74t4vote6e] {
    display: block;
    font-size: 13px;
    color: #9ba5bc;
    margin: 0;
}

/* Photo Packages display area */
.pi-packages[b-74t4vote6e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.pi-package[b-74t4vote6e] {
    display: block;
    width: 100%;
    padding: 20px;
    border: 1px solid #34416b;
    border-radius: 15px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    font: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.pi-package:hover[b-74t4vote6e] {
    border-color: var(--pi-purple);
    transform: translateY(-3px);
}

.pi-package.featured[b-74t4vote6e] {
    border-color: var(--pi-purple);
    box-shadow: 0 0 25px rgba(139, 53, 255, 0.3);
}

.pi-package .package-price[b-74t4vote6e] {
    display: block;
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.pi-package .package-name[b-74t4vote6e] {
    display: block;
    font-size: 14px;
    color: #b8c2d8;
    font-weight: 500;
}

/* Keyboard users get no hover cue, so the focus ring is the only thing telling them where
   they are. Nothing on this page had one. */
.pi-toggle-trigger:focus-visible[b-74t4vote6e],
.pi-clickable-section:focus-visible[b-74t4vote6e],
.pi-package:focus-visible[b-74t4vote6e] {
    outline: 2px solid var(--pi-blue);
    outline-offset: 2px;
}

/* Buttons */
.pi-btn-primary[b-74t4vote6e] {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue));
    border: 0;
    color: white;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pi-btn-primary:hover:not(:disabled)[b-74t4vote6e] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 53, 255, 0.4);
}

.pi-btn-primary:disabled[b-74t4vote6e] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pi-btn-secondary[b-74t4vote6e] {
    background: #111a32;
    border: 1px solid var(--pi-line);
    color: white;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.pi-btn-secondary:hover[b-74t4vote6e] {
    background: #1a2540;
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.pi-actions[b-74t4vote6e] {
    margin-top: 25px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

@media (max-width: 576px) {
    .pi-actions[b-74t4vote6e] {
        flex-direction: column-reverse;
    }

    .pi-actions button[b-74t4vote6e],
    .pi-actions a[b-74t4vote6e] {
        width: 100%;
    }
}

/* Modal styling - using ::deep for Bootstrap modal classes */
[b-74t4vote6e] .modal-content {
    background: #2a3a5c !important;
    border: 2px solid rgba(139, 53, 255, 0.6);
    border-radius: 20px;
    color: white;
    box-shadow: 0 25px 70px rgba(139, 53, 255, 0.5);
}

[b-74t4vote6e] .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(139, 53, 255, 0.15);
}

[b-74t4vote6e] .modal-title {
    color: white;
    font-weight: 600;
}

[b-74t4vote6e] .modal-body {
    background: #2a3a5c;
}

[b-74t4vote6e] .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
}

/* Modal input fields - force dark background */
[b-74t4vote6e] .modal-content input[type="text"],
[b-74t4vote6e] .modal-content input[type="number"],
[b-74t4vote6e] .modal-content input.form-control,
[b-74t4vote6e] .modal-content .form-control {
    background-color: #0d1628 !important;
    background: #0d1628 !important;
    border: 1px solid #303b60 !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px #0d1628 inset !important;
}

[b-74t4vote6e] .modal-content input::placeholder {
    color: #5a6480 !important;
    -webkit-text-fill-color: #5a6480 !important;
}

[b-74t4vote6e] .modal-content input:focus {
    border-color: var(--pi-purple) !important;
    box-shadow: 0 0 0 3px rgba(139, 53, 255, 0.1) !important;
    -webkit-box-shadow: 0 0 0px 1000px #0d1628 inset, 0 0 0 3px rgba(139, 53, 255, 0.1) !important;
}

[b-74t4vote6e] .modal-content .form-label {
    color: #b8c2d8;
    font-weight: 500;
}

[b-74t4vote6e] .modal-content .form-text {
    color: #9ba5bc;
}

[b-74t4vote6e] .modal-content .btn-close {
    filter: invert(1);
}

[b-74t4vote6e] .modal-content .btn-primary {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue));
    border: none;
}

[b-74t4vote6e] .modal-content .btn-secondary {
    background: #111a32;
    border: 1px solid var(--pi-line);
    color: white;
}

[b-74t4vote6e] .modal-content .btn-danger {
    background: #ff3d3d;
    border: none;
}

/* Validation messages */
.pi-edit-event-page[b-74t4vote6e]  .text-danger,
.pi-edit-event-page[b-74t4vote6e]  .validation-message {
    color: #ff6b6b !important;
    font-size: 13px;
    margin-top: 5px;
}

.pi-edit-event-page[b-74t4vote6e]  .text-success {
    color: #4ade80 !important;
}

.pi-edit-event-page[b-74t4vote6e]  .text-info {
    color: var(--pi-blue) !important;
}

/* Spinner */
.pi-edit-event-page[b-74t4vote6e]  .spinner-border-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}
/* _content/Photo8/Components/Pages/Error.razor.rz.scp.css */
/* Error - Photo Infinity Theme.
   Deliberately the same shape as NotFound.razor.css: /error and /not-found are the two pages a
   visitor lands on when something has gone wrong, and they were two entirely different designs —
   one a themed card, the other a bare red Bootstrap panel on a white container. */

.pi-error-page[b-92s2iq14ov] {
    min-height: 100vh;
    padding-bottom: 2rem;
    color: #e0e0e0;
}

.pi-error-card[b-92s2iq14ov] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    padding: 3rem 2rem;
}

.pi-error-icon[b-92s2iq14ov] {
    font-size: 4rem;
    color: #f0906b;
    filter: drop-shadow(0 0 12px rgba(240, 144, 107, 0.45));
}

.pi-error-title[b-92s2iq14ov] {
    margin-top: 1.25rem;
    font-size: 1.9rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pi-error-text[b-92s2iq14ov] {
    color: #b0b0b0;
    margin-bottom: 0;
}

.pi-error-reference[b-92s2iq14ov] {
    color: #b0b0b0;
    font-size: 0.9rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.pi-error-reference code[b-92s2iq14ov] {
    color: #cbd5f5;
    background: rgba(10, 10, 25, 0.7);
    border: 1px solid rgba(138, 43, 226, 0.35);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    display: inline-block;
    margin-top: 0.35rem;
    word-break: break-all;
}

.pi-error-btn[b-92s2iq14ov] {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    background: rgba(30, 30, 60, 0.85);
    border: 1px solid rgba(138, 43, 226, 0.5);
    color: #cbd5f5;
    transition: all 0.3s ease;
}

.pi-error-btn:hover[b-92s2iq14ov] {
    background: rgba(45, 45, 85, 0.95);
    border-color: rgba(138, 43, 226, 0.8);
    color: #ffffff;
}

.pi-error-btn-primary[b-92s2iq14ov] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.4);
}

.pi-error-btn-primary:hover[b-92s2iq14ov] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.6);
    color: #ffffff;
}

/* Development-only detail block. Scrolls in its own box rather than stretching the card. */
.pi-error-detail[b-92s2iq14ov] {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.85em;
    max-height: 24rem;
    overflow: auto;
    margin-bottom: 0;
}
/* _content/Photo8/Components/Pages/EventBorderManage.razor.rz.scp.css */
/* Photo Infinity Border Manage Styling */

:root[b-6y939r44we] {
    --pi-blue: #00b7ff;
    --pi-purple: #8b35ff;
    --pi-pink: #ff36c9;
    --pi-line: rgba(255, 255, 255, 0.08);
    --pi-card-bg: rgba(11, 16, 36, 0.85);
}

/* Page wrapper with Photo Infinity background */
.pi-border-manage-page[b-6y939r44we] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 35px 0;
}

.pi-border-manage-page .container[b-6y939r44we] {
    color: white;
}

/* Page title */
.page-title[b-6y939r44we] {
    font-size: 42px;
    margin: 0 0 10px;
    font-weight: 400;
}

.page-title .gradient-text[b-6y939r44we] {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple), var(--pi-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.page-subtitle[b-6y939r44we] {
    color: #9ba5bc;
    margin-bottom: 30px;
}

/* Breadcrumb styling */
.pi-border-manage-page[b-6y939r44we]  .breadcrumb {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid var(--pi-line);
    border-radius: 12px;
    padding: 10px 16px;
}

.pi-border-manage-page[b-6y939r44we]  .breadcrumb-item a {
    color: var(--pi-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.pi-border-manage-page[b-6y939r44we]  .breadcrumb-item a:hover {
    color: var(--pi-purple);
}

.pi-border-manage-page[b-6y939r44we]  .breadcrumb-item.active {
    color: #9ba5bc;
}

.pi-border-manage-page[b-6y939r44we]  .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.3);
}

/* Main card container */
.pi-card[b-6y939r44we] {
    background: var(--pi-card-bg);
    border: 1px solid var(--pi-line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    margin-bottom: 20px;
}

/* Info banner */
.pi-info-banner[b-6y939r44we] {
    background: rgba(0, 183, 255, 0.1);
    border: 1px solid rgba(0, 183, 255, 0.3);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.pi-info-banner i[b-6y939r44we] {
    color: var(--pi-blue);
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.pi-info-banner h5[b-6y939r44we] {
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.pi-info-banner p[b-6y939r44we] {
    color: #b8c2d8;
}

/* The folder picker is driven entirely by its button, so it stays hidden.
   #borderFilesIndividual used to be hidden here too, by id and !important, which beat the
   .border-drop-input rule below and left the drop zone's input at 0x0 and display: none — and a
   hidden input cannot receive a drop. */
.pi-border-manage-page[b-6y939r44we]  #borderFiles {
    display: none !important;
}

.pi-border-manage-page[b-6y939r44we]  .border-file-input {
    display: none !important;
}

/* The drop zone's own input: present and stretched over the whole zone rather than hidden, so
   the browser can drop files into it and a click anywhere on the zone opens the picker. Invisible,
   not display: none — a hidden input cannot receive a drop. */
.pi-border-manage-page[b-6y939r44we]  .border-drop-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    cursor: pointer;
    z-index: 2;
}

/* Border Drop Zone - Large area for drag and drop */
.border-drop-zone[b-6y939r44we] {
    position: relative;
    min-height: 280px;
    background: rgba(11, 16, 36, 0.5);
    border: 3px dashed rgba(0, 183, 255, 0.4);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    cursor: pointer;
}

.border-drop-zone:hover[b-6y939r44we] {
    border-color: var(--pi-blue);
    background: rgba(0, 183, 255, 0.08);
}

.border-drop-zone.drag-over[b-6y939r44we] {
    border-color: var(--pi-purple);
    background: rgba(139, 53, 255, 0.12);
    transform: scale(1.01);
}

.drop-zone-overlay[b-6y939r44we] {
    text-align: center;
    padding: 40px 20px;
    pointer-events: none;
}

.drop-zone-overlay i[b-6y939r44we] {
    font-size: 64px;
    background: linear-gradient(135deg, var(--pi-blue), var(--pi-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-bottom: 20px;
}

.drop-zone-overlay h3[b-6y939r44we] {
    color: white;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

.drop-zone-overlay p[b-6y939r44we] {
    color: #9ba5bc;
    font-size: 16px;
    margin: 0;
}

/* Compact file selection buttons */
.border-file-selection[b-6y939r44we] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.border-file-selection .text-muted[b-6y939r44we] {
    font-size: 14px;
}

/* Form elements styling */
.pi-border-manage-page[b-6y939r44we]  .form-text {
    color: #9ba5bc;
}

.pi-border-manage-page[b-6y939r44we]  .text-muted {
    color: #9ba5bc !important;
}

/* Buttons */
.pi-border-manage-page[b-6y939r44we]  .btn-outline-info {
    background: linear-gradient(135deg, rgba(0, 183, 255, 0.15), rgba(139, 53, 255, 0.15));
    border: 2px solid var(--pi-blue);
    color: white;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 183, 255, 0.2);
}

.pi-border-manage-page[b-6y939r44we]  .btn-outline-info:hover {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
    border-color: var(--pi-purple);
    color: white;
    box-shadow: 0 0 25px rgba(0, 183, 255, 0.6);
    transform: translateY(-2px);
}

.pi-border-manage-page[b-6y939r44we]  .btn-info {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.pi-border-manage-page[b-6y939r44we]  .btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 183, 255, 0.4);
}

.pi-border-manage-page[b-6y939r44we]  .btn-outline-danger {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid #ff3d3d;
    color: #ff3d3d;
    transition: all 0.3s ease;
}

.pi-border-manage-page[b-6y939r44we]  .btn-outline-danger:hover {
    background: #ff3d3d;
    color: white;
    box-shadow: 0 0 15px rgba(255, 61, 61, 0.5);
}

.pi-border-manage-page[b-6y939r44we]  .btn-danger {
    background: #ff3d3d;
    border: none;
    color: white;
}

.pi-border-manage-page[b-6y939r44we]  .btn-secondary {
    background: #607d8b;
    border: none;
    color: white;
}

.pi-border-manage-page[b-6y939r44we]  .btn-primary {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
    border: none;
    color: white;
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 10px 24px;
}

.pi-border-manage-page[b-6y939r44we]  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 183, 255, 0.4);
}

/* Alerts */
.pi-border-manage-page[b-6y939r44we]  .alert {
    border-radius: 12px;
    border: 1px solid;
    padding: 20px;
}

.pi-border-manage-page[b-6y939r44we]  .alert h4 {
    color: inherit;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.pi-border-manage-page[b-6y939r44we]  .alert p {
    color: inherit;
    margin-bottom: 16px;
}

.pi-border-manage-page[b-6y939r44we]  .alert p:last-child {
    margin-bottom: 0;
}

.pi-border-manage-page[b-6y939r44we]  .alert-warning {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffc107;
}

.pi-border-manage-page[b-6y939r44we]  .alert-warning i {
    color: #ffc107;
}

.pi-border-manage-page[b-6y939r44we]  .alert-danger {
    background: rgba(255, 61, 61, 0.15);
    border-color: rgba(255, 61, 61, 0.4);
    color: #ff6b6b;
}

.pi-border-manage-page[b-6y939r44we]  .alert-danger i {
    color: #ff6b6b;
}

.pi-border-manage-page[b-6y939r44we]  .alert-success {
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.pi-border-manage-page[b-6y939r44we]  .alert-success i {
    color: #2ecc71;
}

/* The page dressed warning, danger and success but never info, so the inherited-borders
   notice came through as Bootstrap's stock pale blue panel on a black page. */
.pi-border-manage-page[b-6y939r44we]  .alert-info {
    background: rgba(0, 183, 255, 0.12);
    border-color: rgba(0, 183, 255, 0.4);
    color: #cbd2e5;
}

.pi-border-manage-page[b-6y939r44we]  .alert-info strong {
    color: white;
}

.pi-border-manage-page[b-6y939r44we]  .alert-info i {
    color: var(--pi-blue);
}

/* Table styling */
.pi-border-manage-page[b-6y939r44we]  .table {
    color: white;
    margin-bottom: 0;
}

.pi-border-manage-page[b-6y939r44we]  .table-light {
    background: rgba(255, 255, 255, 0.05);
    color: #b8c2d8;
}

.pi-border-manage-page[b-6y939r44we]  .table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.pi-border-manage-page[b-6y939r44we]  .table th {
    border-color: var(--pi-line);
    font-weight: 600;
}

.pi-border-manage-page[b-6y939r44we]  .table td {
    border-color: var(--pi-line);
}

/* Form controls in table */
.pi-border-manage-page[b-6y939r44we]  .form-control,
.pi-border-manage-page[b-6y939r44we]  .form-control-sm {
    background: #070c1d !important;
    border: 1px solid #303b60 !important;
    color: white !important;
    border-radius: 8px;
    -webkit-text-fill-color: white !important;
}

.pi-border-manage-page[b-6y939r44we]  .form-control:focus,
.pi-border-manage-page[b-6y939r44we]  .form-control-sm:focus {
    border-color: var(--pi-purple) !important;
    box-shadow: 0 0 0 2px rgba(139, 53, 255, 0.2) !important;
}

.pi-border-manage-page[b-6y939r44we]  .form-control::placeholder {
    color: #5a6480 !important;
}

/* Progress bar */
.pi-border-manage-page[b-6y939r44we]  .progress {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--pi-line);
    border-radius: 10px;
    height: 24px;
}

.pi-border-manage-page[b-6y939r44we]  .progress-bar {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
    font-weight: 600;
}

/* Badge */
.pi-border-manage-page[b-6y939r44we]  .badge {
    border-radius: 8px;
    padding: 4px 10px;
}

.pi-border-manage-page[b-6y939r44we]  .badge.bg-secondary {
    background: #607d8b !important;
}

/* Border grid cards */
.pi-border-manage-page[b-6y939r44we]  .card {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid var(--pi-line);
    border-radius: 12px;
    color: white;
    transition: all 0.3s ease;
}

.pi-border-manage-page[b-6y939r44we]  .card:hover {
    border-color: var(--pi-purple);
    box-shadow: 0 8px 20px rgba(139, 53, 255, 0.3);
}

.pi-border-manage-page[b-6y939r44we]  .card .card-body {
    background: transparent;
}

.pi-border-manage-page[b-6y939r44we]  .card .card-text {
    color: white;
}

.pi-border-manage-page[b-6y939r44we]  .bg-secondary {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* Empty state */
.pi-border-manage-page .text-center.text-muted[b-6y939r44we] {
    color: #7a8599 !important;
}

.pi-border-manage-page .text-center.text-muted i[b-6y939r44we] {
    opacity: 0.3;
    color: #9ba5bc;
}

/* Section headers */
.pi-border-manage-page h5[b-6y939r44we] {
    color: white;
    font-weight: 600;
}

.pi-border-manage-page h5 i[b-6y939r44we] {
    color: var(--pi-blue);
    margin-right: 8px;
}

/* Modal styling */
.pi-border-manage-page[b-6y939r44we]  .modal-content {
    background: var(--pi-card-bg);
    border: 1px solid var(--pi-line);
    border-radius: 20px;
    color: white;
}

.pi-border-manage-page[b-6y939r44we]  .modal-header {
    border-bottom: 1px solid var(--pi-line);
}

.pi-border-manage-page[b-6y939r44we]  .modal-footer {
    border-top: 1px solid var(--pi-line);
}

.pi-border-manage-page[b-6y939r44we]  .modal-title {
    color: white;
}

.pi-border-manage-page[b-6y939r44we]  .btn-close {
    filter: invert(1);
}

/* Responsive */
@media (max-width: 768px) {
    .page-title[b-6y939r44we] {
        font-size: 32px;
    }
}
/* _content/Photo8/Components/Pages/EventPhotosUpload.razor.rz.scp.css */
/* Photo Infinity Upload Photos Styling */

:root[b-wvzallsim5] {
    --pi-blue: #008cff;
    --pi-purple: #8b35ff;
    --pi-pink: #ff35c8;
    --pi-line: #263153;
    --pi-panel: #0b1024;
    --pi-bg: #050816;
}

/* Page wrapper with Photo Infinity background */
.pi-upload-page[b-wvzallsim5] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                #050816;
    color: white;
    padding: 35px 50px;
}

/* Breadcrumb */
.pi-upload-page[b-wvzallsim5]  .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
    color: #9ba5bc;
}

.pi-upload-page[b-wvzallsim5]  .breadcrumb-item a {
    color: #9ba5bc;
    text-decoration: none;
}

.pi-upload-page[b-wvzallsim5]  .breadcrumb-item a:hover {
    color: var(--pi-blue);
}

.pi-upload-page[b-wvzallsim5]  .breadcrumb-item.active {
    color: #9ba5bc;
}

.pi-upload-page[b-wvzallsim5]  .breadcrumb-item + .breadcrumb-item::before {
    color: #9ba5bc;
}

/* Main card */
.pi-card[b-wvzallsim5] {
    background: #0b1024;
    border: 1px solid var(--pi-line);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Page title area */
.pi-upload-header[b-wvzallsim5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.pi-upload-page h1[b-wvzallsim5] {
    font-size: 40px;
    margin: 0 0 5px 0;
    font-weight: 400;
}

.pi-upload-page h1 i[b-wvzallsim5] {
    color: var(--pi-blue);
}

.gradient-text[b-wvzallsim5] {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple), var(--pi-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.pi-subtitle[b-wvzallsim5] {
    color: #9ba5bc;
    margin: 0;
}

/* Back button */
.pi-upload-page[b-wvzallsim5]  .btn-back {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue));
    border: none;
    color: white;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pi-upload-page[b-wvzallsim5]  .btn-back:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 140, 255, 0.4);
}

/* Section headings */
.pi-upload-page h3[b-wvzallsim5],
.pi-upload-page h5[b-wvzallsim5] {
    color: white;
    margin-top: 20px;
    margin-bottom: 15px;
}

/* Drop zone */
.drop-zone[b-wvzallsim5] {
    position: relative;
    border: 2px dashed #3b4a72;
    border-radius: 18px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.03);
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    cursor: pointer;
}

.drop-zone:hover[b-wvzallsim5] {
    border-color: var(--pi-blue);
    background: rgba(0, 140, 255, 0.05);
}

.drop-zone.drag-over[b-wvzallsim5] {
    border-color: var(--pi-blue);
    background: rgba(0, 140, 255, 0.1);
    transform: scale(1.01);
}

/* Hide the InputFile completely but keep it functional */
.drop-zone[b-wvzallsim5]  input[type="file"],
.drop-zone[b-wvzallsim5]  .form-control {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    cursor: pointer;
    z-index: 2;
}

.pi-upload-page[b-wvzallsim5]  #photoFileInput {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    cursor: pointer;
}

.drop-zone-overlay[b-wvzallsim5] {
    pointer-events: none;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.drop-zone-overlay i[b-wvzallsim5] {
    font-size: 55px;
    color: #00aaff;
    margin-bottom: 20px;
}

.drop-zone-overlay p[b-wvzallsim5] {
    color: white;
    margin: 5px 0;
}

.drop-zone-overlay p:last-child[b-wvzallsim5] {
    color: #9ba5bc;
}

/* Info text */
.pi-upload-page[b-wvzallsim5]  .form-text {
    color: #aab5cc;
    margin-top: 20px;
}

/* Empty state */
.upload-empty-state[b-wvzallsim5] {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #9ba5bc;
}

.upload-empty-state i[b-wvzallsim5] {
    font-size: 55px;
    color: #00aaff;
    margin-bottom: 20px;
}

.upload-empty-state h2[b-wvzallsim5] {
    color: white;
    font-size: 24px;
    margin-bottom: 10px;
}

/* Alerts */
.pi-upload-page[b-wvzallsim5]  .alert {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    color: #ffc107;
}

.pi-upload-page[b-wvzallsim5]  .alert-danger {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
    color: #dc3545;
}

.pi-upload-page[b-wvzallsim5]  .alert-success {
    background: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.3);
    color: #198754;
}

.pi-upload-page[b-wvzallsim5]  .alert-warning {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

/* Buttons */
.pi-upload-page[b-wvzallsim5]  .btn-primary {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
}

.pi-upload-page[b-wvzallsim5]  .btn-outline-primary {
    background: transparent;
    border: 2px solid var(--pi-blue);
    color: var(--pi-blue);
    padding: 10px 20px;
    border-radius: 10px;
}

.pi-upload-page[b-wvzallsim5]  .btn-outline-primary:hover {
    background: var(--pi-blue);
    color: white;
}

.pi-upload-page[b-wvzallsim5]  .btn-outline-secondary {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid var(--pi-line);
    color: #9ba5bc;
}

.pi-upload-page[b-wvzallsim5]  .btn-outline-danger {
    background: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
}

/* Form controls */
.pi-upload-page[b-wvzallsim5]  .form-control,
.pi-upload-page[b-wvzallsim5]  .form-select {
    background: rgba(11, 16, 36, 0.8);
    border: 1px solid var(--pi-line);
    color: white;
    border-radius: 8px;
}

.pi-upload-page[b-wvzallsim5]  .form-control:focus,
.pi-upload-page[b-wvzallsim5]  .form-select:focus {
    background: rgba(11, 16, 36, 0.9);
    border-color: var(--pi-blue);
    color: white;
    box-shadow: 0 0 0 0.2rem rgba(0, 140, 255, 0.25);
}

.pi-upload-page[b-wvzallsim5]  .form-check-input {
    background-color: rgba(11, 16, 36, 0.8);
    border-color: var(--pi-line);
}

.pi-upload-page[b-wvzallsim5]  .form-check-input:checked {
    background-color: var(--pi-blue);
    border-color: var(--pi-blue);
}

/* List group items */
.pi-upload-page[b-wvzallsim5]  .list-group-item {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid var(--pi-line);
    color: white;
    margin-bottom: 8px;
    border-radius: 10px;
}

/* Progress bars.
   The rule below used to be `background: linear-gradient(...)` — the shorthand, which resets
   background-image, and at a higher specificity than Bootstrap's own. That silently cancelled
   .progress-bar-striped (it works by setting background-image) and left .progress-bar-animated
   animating stripes that were no longer being drawn. So the markup asked for a striped, animated
   bar and what appeared was a flat block of colour, frozen. Every state now paints its own
   background-image, and the shorthand is not used anywhere here. */
.pi-upload-page[b-wvzallsim5]  .progress {
    background: rgba(11, 16, 36, 0.8);
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
}

.pi-upload-page[b-wvzallsim5]  .progress-bar {
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
    transition: width 0.15s linear;
}

/* Transferring — real percentage, with stripes moving over the brand gradient so it reads as
   active even while a large file sits on one number for a few seconds. */
.pi-upload-page[b-wvzallsim5]  .progress-bar.pi-transferring {
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0 6px, rgba(255, 255, 255, 0) 6px 12px),
        linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
    animation: pi-upload-stripes-b-wvzallsim5 0.8s linear infinite;
}

/* Processing — server-side work with no measurable progress. Full width, and a highlight sweeps
   across it, so it is visibly indeterminate rather than pretending to be a percentage. */
.pi-upload-page[b-wvzallsim5]  .progress-bar.pi-processing {
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
    background-size: 40% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    animation: pi-upload-sweep-b-wvzallsim5 1.2s ease-in-out infinite;
}

.pi-upload-page[b-wvzallsim5]  .progress-bar.pi-done {
    background-image: linear-gradient(90deg, #1f9d55, #34d399);
}

.pi-upload-page[b-wvzallsim5]  .progress-bar.pi-failed {
    background-image: linear-gradient(90deg, #b91c1c, #ef4444);
}

@keyframes pi-upload-stripes-b-wvzallsim5 {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 17px 0, 0 0; }
}

@keyframes pi-upload-sweep-b-wvzallsim5 {
    from { background-position: -40% 0, 0 0; }
    to   { background-position: 140% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pi-upload-page[b-wvzallsim5]  .progress-bar.pi-transferring,
    .pi-upload-page[b-wvzallsim5]  .progress-bar.pi-processing {
        animation: none;
    }
}

/* Upload preview */
.upload-preview-image[b-wvzallsim5] {
    max-height: 600px;
    object-fit: contain;
    border-radius: 12px;
}

/* Badge */
.pi-upload-page[b-wvzallsim5]  .badge {
    background: rgba(0, 140, 255, 0.2);
    color: var(--pi-blue);
    border: 1px solid var(--pi-blue);
}

/* Text colors */
.pi-upload-page[b-wvzallsim5]  .text-muted {
    color: #9ba5bc !important;
}

.pi-upload-page[b-wvzallsim5]  .text-primary {
    color: var(--pi-blue) !important;
}

/* This page had no responsive rules at all. On a phone the title and its Back button share a
   justify-content-between row that does not stack, so a long event name wrapped to three lines
   and the button landed on top of it. */
@media (max-width: 767.98px) {
    .pi-upload-header[b-wvzallsim5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .pi-upload-page h1[b-wvzallsim5] {
        font-size: 28px;
    }

    .pi-upload-header .btn-back[b-wvzallsim5] {
        align-self: flex-start;
    }

    /* Page 50px + card 25px + drop zone 32px, doubled for both sides, ate 214px of a 375px
       screen and left the drop zone 161px of usable width. Pull each layer in. */
    .pi-upload-page[b-wvzallsim5] {
        padding: 20px 14px;
    }

    .pi-card[b-wvzallsim5] {
        padding: 16px;
    }

    .drop-zone[b-wvzallsim5] {
        padding: 1.25rem;
        min-height: 200px;
    }

    /* A camera filename plus its size, a status and a delete button cannot share a row here;
       let the row wrap and keep long names from pushing the delete button off the edge. */
    .pi-upload-page[b-wvzallsim5]  .list-group-item h6 {
        overflow-wrap: anywhere;
        font-size: 14px;
    }

    .pi-upload-page[b-wvzallsim5]  .list-group-item .d-flex.w-100 {
        gap: 10px;
    }

    /* Upload options sit two-up on desktop; stack them rather than halving each field. */
    .pi-upload-page[b-wvzallsim5]  .col-md-6 {
        width: 100%;
    }
}
/* _content/Photo8/Components/Pages/Events.razor.rz.scp.css */
/* ===========================
   Photo Infinity — Events List Page
   =========================== */

/* Page Wrapper */
.pi-events-page[b-wsfvt55j5b] {
    min-height: 100vh;
    background: radial-gradient(circle at top right, #1a1a2e 0%, #0f0f1e 50%, #000000 100%);
    padding: 2rem 0;
    color: #e0e0e0;
}

/* Page Title */
.pi-events-page .page-title[b-wsfvt55j5b] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
}

.pi-events-page .gradient-text[b-wsfvt55j5b] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Create Event Button */
.pi-events-page[b-wsfvt55j5b]  .btn-create-event {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #fff;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pi-events-page[b-wsfvt55j5b]  .btn-create-event:hover {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    transform: translateY(-2px);
}

/* Alerts */
.pi-events-page[b-wsfvt55j5b]  .alert {
    border-radius: 12px;
    border: none;
}

.pi-events-page[b-wsfvt55j5b]  .alert-warning {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffd54f;
}

.pi-events-page[b-wsfvt55j5b]  .alert-warning h4 {
    color: #ffc107;
}

.pi-events-page[b-wsfvt55j5b]  .alert-info {
    background: rgba(33, 150, 243, 0.2);
    border: 1px solid rgba(33, 150, 243, 0.4);
    color: #90caf9;
}

.pi-events-page[b-wsfvt55j5b]  .alert-info h5 {
    color: #64b5f6;
}

/* Event Cards */
.pi-events-page .event-card[b-wsfvt55j5b] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.pi-events-page .event-card .card-img-top[b-wsfvt55j5b] {
    border: none;
}

.pi-events-page .event-card .card-body[b-wsfvt55j5b] {
    background: rgba(255, 255, 255, 0.02);
}

.pi-events-page .event-card .card-title[b-wsfvt55j5b] {
    color: #fff;
    font-weight: 600;
}

.pi-events-page .event-card .card-text[b-wsfvt55j5b] {
    color: #bbb !important;
}

.pi-events-page .event-card .card-text em[b-wsfvt55j5b] {
    color: #888;
}

.pi-events-page .event-card .text-muted[b-wsfvt55j5b] {
    color: #aaa !important;
}

/* Badges */
.pi-events-page[b-wsfvt55j5b]  .badge.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.pi-events-page[b-wsfvt55j5b]  .badge.bg-success {
    background: #4caf50 !important;
}

.pi-events-page[b-wsfvt55j5b]  .badge.bg-info {
    background: #2196f3 !important;
}

.pi-events-page[b-wsfvt55j5b]  .badge.bg-secondary {
    background: #6c757d !important;
}

.pi-events-page[b-wsfvt55j5b]  .badge.bg-warning {
    background: #ffc107 !important;
    color: #000 !important;
}

.pi-events-page[b-wsfvt55j5b]  .badge.bg-danger {
    background: #f44336 !important;
}

/* Buttons */
.pi-events-page[b-wsfvt55j5b]  .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #fff;
    font-weight: 600;
}

.pi-events-page[b-wsfvt55j5b]  .btn-primary:hover {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    transform: translateY(-2px);
}

.pi-events-page[b-wsfvt55j5b]  .btn-outline-secondary {
    background: transparent;
    border: 1px solid #6c757d;
    color: #adb5bd;
}

.pi-events-page[b-wsfvt55j5b]  .btn-outline-secondary:hover {
    background: #6c757d;
    color: #fff;
}

.pi-events-page[b-wsfvt55j5b]  .btn-outline-success {
    background: transparent;
    border: 1px solid #4caf50;
    color: #4caf50;
}

.pi-events-page[b-wsfvt55j5b]  .btn-outline-success:hover {
    background: #4caf50;
    color: #fff;
}

.pi-events-page[b-wsfvt55j5b]  .btn-outline-info {
    background: transparent;
    border: 1px solid #2196f3;
    color: #2196f3;
}

.pi-events-page[b-wsfvt55j5b]  .btn-outline-info:hover {
    background: #2196f3;
    color: #fff;
}

.pi-events-page[b-wsfvt55j5b]  .btn-outline-danger {
    background: transparent;
    border: 1px solid #f44336;
    color: #f44336;
}

.pi-events-page[b-wsfvt55j5b]  .btn-outline-danger:hover {
    background: #f44336;
    color: #fff;
}

/* Empty State */
.pi-events-page[b-wsfvt55j5b]  .text-center.py-5 {
    color: #e0e0e0 !important;
}

.pi-events-page[b-wsfvt55j5b]  .text-center.py-5 .bi-calendar-x {
    color: #9ca3af !important;
}

.pi-events-page[b-wsfvt55j5b]  .text-center.py-5 h3 {
    color: #d1d5db !important;
}

.pi-events-page[b-wsfvt55j5b]  .text-center.py-5 p {
    color: #9ca3af !important;
}

.pi-events-page[b-wsfvt55j5b]  .text-center.py-5 .text-muted {
    color: #9ca3af !important;
}

/* Modal Overrides */
.pi-events-page[b-wsfvt55j5b]  .modal-content {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
}

.pi-events-page[b-wsfvt55j5b]  .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pi-events-page[b-wsfvt55j5b]  .modal-header.bg-danger {
    background: rgba(244, 67, 54, 0.2) !important;
    border-bottom: 1px solid rgba(244, 67, 54, 0.4);
}

.pi-events-page[b-wsfvt55j5b]  .modal-header.bg-danger .modal-title {
    color: #ff5252;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body {
    color: #e0e0e0;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body p {
    color: #bbb;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .text-muted {
    color: #999 !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body small {
    color: #aaa;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body h6 {
    color: #fff;
    font-weight: 600;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body ul {
    color: #d1d5db;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body li {
    color: #d1d5db;
    margin-bottom: 0.5rem;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body li strong {
    color: #fff;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .alert-danger {
    background: rgba(244, 67, 54, 0.15) !important;
    border: 1px solid rgba(244, 67, 54, 0.4) !important;
    color: #ffcdd2 !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .alert-danger h6 {
    color: #ff5252 !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .alert-danger p {
    color: #ffcdd2 !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .alert-warning {
    background: rgba(255, 193, 7, 0.15) !important;
    border: 1px solid rgba(255, 193, 7, 0.4) !important;
    color: #ffe082 !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .alert-warning h6 {
    color: #ffc107 !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .alert-warning ul,
.pi-events-page[b-wsfvt55j5b]  .modal-body .alert-warning li {
    color: #ffe082 !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .alert-light {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #e0e0e0 !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .alert-light h6 {
    color: #90caf9 !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .alert-light p {
    color: #bbb !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .text-warning {
    color: #ffc107 !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-body .text-info {
    color: #64b5f6 !important;
}

.pi-events-page[b-wsfvt55j5b]  .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pi-events-page[b-wsfvt55j5b]  .modal-title {
    color: #fff;
}

.pi-events-page[b-wsfvt55j5b]  .btn-close-white {
    filter: brightness(1.5);
}

/* Progress Bar */
.pi-events-page[b-wsfvt55j5b]  .progress {
    background-color: rgba(255, 255, 255, 0.1);
}

.pi-events-page[b-wsfvt55j5b]  .progress-bar.bg-info {
    background: linear-gradient(90deg, #2196f3 0%, #64b5f6 100%) !important;
}

/* Spinner */
.pi-events-page[b-wsfvt55j5b]  .spinner-border {
    border-color: rgba(255, 255, 255, 0.2);
    border-right-color: #667eea;
}

/* Debug Info */
.pi-events-page[b-wsfvt55j5b]  .alert-info strong {
    color: #90caf9;
}

.pi-events-page[b-wsfvt55j5b]  .alert-info br {
    display: block;
    margin: 0.25rem 0;
}

/* The one badge in the status row that is a link rather than a span, and so the one that owes a
   usable tap target. Bootstrap's .badge .small put it at 21px tall, under the 24px minimum, on
   the only route from this card to the border page.

   inline-flex with a min-height rather than extra padding: padding would grow the badge in both
   directions and set it out of line with the plain spans beside it, whereas this centres the
   existing text inside a taller box and leaves the row looking the same. */
.pi-events-page[b-wsfvt55j5b]  .pi-badge-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .pi-events-page .page-title[b-wsfvt55j5b] {
        font-size: 2rem;
    }
}
/* _content/Photo8/Components/Pages/EventView.razor.rz.scp.css */
/* Photo Infinity Event View Styling */

:root[b-973ukjufkd] {
    --pi-blue: #00b7ff;
    --pi-purple: #8b35ff;
    --pi-pink: #ff36c9;
    --pi-line: rgba(255, 255, 255, 0.08);
    --pi-card-bg: rgba(11, 16, 36, 0.85);
}

/* Page wrapper with background */
.pi-event-view-page[b-973ukjufkd] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 35px 0;
}

.pi-event-view-page .container-fluid[b-973ukjufkd] {
    color: white;
}

/* Breadcrumb styling */
.pi-event-view-page[b-973ukjufkd]  .breadcrumb {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid var(--pi-line);
    border-radius: 12px;
    padding: 10px 16px;
}

.pi-event-view-page[b-973ukjufkd]  .breadcrumb-item a {
    color: var(--pi-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.pi-event-view-page[b-973ukjufkd]  .breadcrumb-item a:hover {
    color: var(--pi-purple);
}

.pi-event-view-page[b-973ukjufkd]  .breadcrumb-item.active {
    color: #9ba5bc;
}

.pi-event-view-page[b-973ukjufkd]  .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.3);
}

/* Event header */
.pi-event-view-page h1[b-973ukjufkd] {
    color: white;
    font-weight: 600;
    font-size: 42px;
    margin-bottom: 10px;
}

.pi-event-view-page h1 i[b-973ukjufkd] {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple), var(--pi-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pi-event-view-page[b-973ukjufkd]  .text-muted {
    color: #9ba5bc !important;
}

.pi-event-view-page[b-973ukjufkd]  .lead {
    color: #b8c2d8;
}

/* Button group styling */
.pi-event-view-page[b-973ukjufkd]  .btn-group {
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
}

.pi-event-view-page[b-973ukjufkd]  .btn-outline-primary {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid var(--pi-blue);
    color: var(--pi-blue);
    transition: all 0.3s ease;
}

.pi-event-view-page[b-973ukjufkd]  .btn-outline-primary:hover {
    background: var(--pi-blue);
    color: white;
    box-shadow: 0 0 15px rgba(0, 183, 255, 0.5);
}

/* Upload Photos button - Green/Teal theme */
.pi-event-view-page[b-973ukjufkd]  .btn-upload-photos {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid #00e676;
    color: #00e676;
    transition: all 0.3s ease;
    font-weight: 500;
}

.pi-event-view-page[b-973ukjufkd]  .btn-upload-photos:hover {
    background: #00e676;
    color: #0b1024;
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.5);
}

/* Bulk Upload button - Purple/Violet theme */
.pi-event-view-page[b-973ukjufkd]  .btn-bulk-upload {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid var(--pi-purple);
    color: var(--pi-purple);
    transition: all 0.3s ease;
    font-weight: 500;
}

.pi-event-view-page[b-973ukjufkd]  .btn-bulk-upload:hover {
    background: var(--pi-purple);
    color: white;
    box-shadow: 0 0 15px rgba(139, 53, 255, 0.5);
}

.pi-event-view-page[b-973ukjufkd]  .btn-success {
    background: linear-gradient(90deg, #00c853, #00e676);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.pi-event-view-page[b-973ukjufkd]  .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 200, 83, 0.4);
}

.pi-event-view-page[b-973ukjufkd]  .btn-outline-info {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid var(--pi-purple);
    color: var(--pi-purple);
    transition: all 0.3s ease;
}

.pi-event-view-page[b-973ukjufkd]  .btn-outline-info:hover {
    background: var(--pi-purple);
    color: white;
    box-shadow: 0 0 15px rgba(139, 53, 255, 0.5);
}

.pi-event-view-page[b-973ukjufkd]  .btn-outline-danger {
    background: rgba(11, 16, 36, 0.6);
    border: 1px solid #ff3d3d;
    color: #ff3d3d;
    transition: all 0.3s ease;
}

.pi-event-view-page[b-973ukjufkd]  .btn-outline-danger:hover {
    background: #ff3d3d;
    color: white;
    box-shadow: 0 0 15px rgba(255, 61, 61, 0.5);
}

/* Statistics cards with colored borders (matching Dashboard style) */
.pi-event-view-page[b-973ukjufkd]  .card {
    background: var(--pi-card-bg);
    border: 1px solid var(--pi-line);
    border-radius: 20px;
    color: white;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* Statistics cards with colored borders instead of fills */
.pi-event-view-page[b-973ukjufkd]  .card.bg-primary {
    background: var(--pi-card-bg) !important;
    border: 2px solid #00b7ff !important;
}

.pi-event-view-page[b-973ukjufkd]  .card.bg-success {
    background: var(--pi-card-bg) !important;
    border: 2px solid #2ecc71 !important;
}

.pi-event-view-page[b-973ukjufkd]  .card.bg-info {
    background: var(--pi-card-bg) !important;
    border: 2px solid #a3edfd !important;
}

.pi-event-view-page[b-973ukjufkd]  .card.bg-warning {
    background: var(--pi-card-bg) !important;
    border: 2px solid #f2e562 !important;
}

.pi-event-view-page[b-973ukjufkd]  .card.bg-secondary {
    background: var(--pi-card-bg) !important;
    border: 2px solid #607d8b !important;
}

.pi-event-view-page[b-973ukjufkd]  .card.bg-light {
    background: var(--pi-card-bg) !important;
    border: 2px solid #ff9800 !important;
}

/* Neon icon effects for stat cards */
.pi-event-view-page[b-973ukjufkd]  .card.bg-primary .bi-images {
    color: #5881ca;
    filter: drop-shadow(0 0 8px #5881ca) 
            drop-shadow(0 0 15px #5881ca);
}

.pi-event-view-page[b-973ukjufkd]  .card.bg-success .bi-bag-check {
    color: #80ba7b;
    filter: drop-shadow(0 0 8px #80ba7b) 
            drop-shadow(0 0 15px #80ba7b);
}

.pi-event-view-page[b-973ukjufkd]  .card.bg-info .bi-cart-check {
    color: #a3edfd;
    filter: drop-shadow(0 0 8px #a3edfd) 
            drop-shadow(0 0 15px #a3edfd);
}

.pi-event-view-page[b-973ukjufkd]  .card.bg-warning .bi-currency-dollar {
    color: #f2e562;
    filter: drop-shadow(0 0 8px #f2e562) 
            drop-shadow(0 0 15px #f2e562);
}

/* Borders card icon - neon orange/amber glow */
.pi-event-view-page[b-973ukjufkd]  .card.bg-secondary .bi-border-style,
.pi-event-view-page[b-973ukjufkd]  .card.bg-light .bi-border-style {
    color: #ff9800;
    filter: drop-shadow(0 0 8px #ff9800) 
            drop-shadow(0 0 15px #ff9800);
}

/* Lighten text in borders cards */
.pi-event-view-page[b-973ukjufkd]  .card.bg-secondary .card-title,
.pi-event-view-page[b-973ukjufkd]  .card.bg-light .card-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

.pi-event-view-page[b-973ukjufkd]  .card.bg-secondary .card-text,
.pi-event-view-page[b-973ukjufkd]  .card.bg-light .card-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.pi-event-view-page[b-973ukjufkd]  .card.bg-light .text-dark {
    color: rgba(255, 255, 255, 0.95) !important;
}

.pi-event-view-page[b-973ukjufkd]  .card-header {
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--pi-line);
    padding: 16px 20px;
    border-radius: 20px 20px 0 0;
}

.pi-event-view-page[b-973ukjufkd]  .card-header h5 {
    margin: 0;
    font-weight: 600;
    color: white;
    font-size: 18px;
}

.pi-event-view-page[b-973ukjufkd]  .card-header h5 i {
    color: var(--pi-blue);
    margin-right: 8px;
}

.pi-event-view-page[b-973ukjufkd]  .card-body {
    padding: 20px;
}

.pi-event-view-page[b-973ukjufkd]  .card-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

.pi-event-view-page[b-973ukjufkd]  .card-text {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
}

/* Badges */
.pi-event-view-page[b-973ukjufkd]  .badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
}

.pi-event-view-page[b-973ukjufkd]  .badge.bg-success {
    background: linear-gradient(90deg, #00c853, #00e676) !important;
    border: none;
}

.pi-event-view-page[b-973ukjufkd]  .badge.bg-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pi-event-view-page[b-973ukjufkd]  .badge.bg-info {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue)) !important;
    border: none;
}

.pi-event-view-page[b-973ukjufkd]  .badge.bg-primary {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple)) !important;
    border: none;
}

.pi-event-view-page[b-973ukjufkd]  .badge.bg-light {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white !important;
}

/* Code/link display */
.pi-event-view-page[b-973ukjufkd]  code {
    background: rgba(0, 183, 255, 0.1);
    border: 1px solid rgba(0, 183, 255, 0.3);
    border-radius: 6px;
    padding: 4px 8px;
    color: var(--pi-blue);
    font-family: monospace;
    font-size: 13px;
}

/* Alerts */
.pi-event-view-page[b-973ukjufkd]  .alert {
    border-radius: 14px;
    border: 1px solid var(--pi-line);
}

.pi-event-view-page[b-973ukjufkd]  .alert-info {
    background: rgba(0, 183, 255, 0.15);
    border-color: rgba(0, 183, 255, 0.3);
    color: white;
}

.pi-event-view-page[b-973ukjufkd]  .alert-success {
    background: rgba(0, 200, 83, 0.15);
    border-color: rgba(0, 200, 83, 0.3);
    color: white;
}

.pi-event-view-page[b-973ukjufkd]  .alert-warning {
    background: rgba(255, 152, 0, 0.15);
    border-color: rgba(255, 152, 0, 0.3);
    color: white;
}

.pi-event-view-page[b-973ukjufkd]  .progress {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.pi-event-view-page[b-973ukjufkd]  .progress-bar {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple));
}

/* Links */
.pi-event-view-page a:not(.btn)[b-973ukjufkd] {
    color: var(--pi-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.pi-event-view-page a:not(.btn):hover[b-973ukjufkd] {
    color: var(--pi-purple);
}

/* Button link styling */
.pi-event-view-page[b-973ukjufkd]  .btn-link {
    color: var(--pi-blue);
    text-decoration: none;
}

.pi-event-view-page[b-973ukjufkd]  .btn-link:hover {
    color: var(--pi-purple);
}

/* Small buttons */
.pi-event-view-page[b-973ukjufkd]  .btn-sm {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 8px;
}

.pi-event-view-page[b-973ukjufkd]  .btn-info {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue));
    border: none;
    color: white;
}

.pi-event-view-page[b-973ukjufkd]  .btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 53, 255, 0.4);
}

/* Modal & delete confirmation styling */
.pi-event-view-page[b-973ukjufkd]  .modal-content {
    background: #2a3a5c !important;
    border: 2px solid rgba(139, 53, 255, 0.6);
    border-radius: 20px;
    color: white;
    box-shadow: 0 25px 70px rgba(139, 53, 255, 0.5);
}

.pi-event-view-page[b-973ukjufkd]  .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(139, 53, 255, 0.15);
}

.pi-event-view-page[b-973ukjufkd]  .modal-body {
    background: #2a3a5c;
}

.pi-event-view-page[b-973ukjufkd]  .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
}

.pi-event-view-page[b-973ukjufkd]  .modal-title {
    color: white;
}

.pi-event-view-page[b-973ukjufkd]  .btn-close {
    filter: invert(1);
}

/* Text colors */
.pi-event-view-page[b-973ukjufkd]  .text-success {
    color: #51cf66 !important;
}

.pi-event-view-page[b-973ukjufkd]  .text-warning {
    color: #ffc107 !important;
}

.pi-event-view-page[b-973ukjufkd]  .text-danger {
    color: #ff6b6b !important;
}

/* Spinner */
.pi-event-view-page[b-973ukjufkd]  .spinner-border {
    color: var(--pi-blue);
}

/* Additional specificity for text elements */
.pi-event-view-page p[b-973ukjufkd],
.pi-event-view-page strong[b-973ukjufkd] {
    color: white;
}

.pi-event-view-page[b-973ukjufkd]  .small {
    color: #9ba5bc;
}

/* ── Sub-events ──
   Tiles for the sub-events created from an uploaded folder structure. Bootstrap's
   list-group renders light-on-white, which reads as unstyled against this dark page,
   so these are built from the page's own tokens instead. */

.pi-event-view-page .pi-subevent-intro[b-973ukjufkd] {
    color: #9ba5bc;
    font-size: 14px;
    margin-bottom: 18px;
}

.pi-event-view-page .pi-subevent-intro strong[b-973ukjufkd] {
    color: #d8dEEA;
    font-weight: 600;
}

.pi-event-view-page .pi-subevent-grid[b-973ukjufkd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.pi-event-view-page .pi-subevent-tile[b-973ukjufkd] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--pi-line);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.pi-event-view-page .pi-subevent-tile:hover[b-973ukjufkd] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(0, 183, 255, 0.45);
    transform: translateY(-2px);
}

.pi-event-view-page .pi-subevent-thumb[b-973ukjufkd] {
    position: relative;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
}

.pi-event-view-page .pi-subevent-thumb img[b-973ukjufkd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pi-event-view-page .pi-subevent-thumb-empty[b-973ukjufkd] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: 24px;
}

/* Count sits on the thumbnail so it stays readable when names are long */
.pi-event-view-page .pi-subevent-count[b-973ukjufkd] {
    position: absolute;
    right: 4px;
    bottom: 4px;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(5, 8, 22, 0.85);
    border: 1px solid var(--pi-line);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 18px;
}

.pi-event-view-page .pi-subevent-info[b-973ukjufkd] {
    min-width: 0;
    flex: 1 1 auto;
}

.pi-event-view-page .pi-subevent-name[b-973ukjufkd] {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pi-event-view-page .pi-subevent-meta[b-973ukjufkd] {
    color: #9ba5bc;
    font-size: 12.5px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pi-event-view-page .pi-subevent-meta i[b-973ukjufkd] {
    color: var(--pi-blue);
    margin-right: 3px;
}

.pi-event-view-page .pi-subevent-dot[b-973ukjufkd] {
    margin: 0 6px;
    opacity: 0.45;
}

.pi-event-view-page .pi-subevent-chevron[b-973ukjufkd] {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.28);
    font-size: 14px;
    transition: color 0.25s ease, transform 0.25s ease;
}

.pi-event-view-page .pi-subevent-tile:hover .pi-subevent-chevron[b-973ukjufkd] {
    color: var(--pi-blue);
    transform: translateX(3px);
}

@media (max-width: 575.98px) {
    .pi-event-view-page .pi-subevent-grid[b-973ukjufkd] {
        grid-template-columns: 1fr;
    }
}

/* The event title and its action buttons sit in one justify-content-between row, which does
   not stack. On a phone that squeezed the title into a narrow column beside the buttons —
   "Little League" broke across two lines while four buttons stacked alongside it. Put the
   title on its own row and let the buttons wrap into a grid underneath. */
@media (max-width: 767.98px) {
    .pi-event-view-page .d-flex.justify-content-between.align-items-start[b-973ukjufkd] {
        flex-direction: column;
        gap: 1rem;
    }

    .pi-event-view-page .btn-group[b-973ukjufkd] {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .pi-event-view-page .btn-group > .btn[b-973ukjufkd] {
        flex: 1 1 auto;
    }

    /* Same shape of problem, three more places. These card headers put a heading and a
       control in one non-wrapping row, so on a phone the heading got whatever was left:
       "Sub-Events (3)" broke after the word, and "Photos (0) directly in this event"
       wrapped around the Manage All Photos button beside it. */
    .pi-event-view-page .card-header.d-flex.justify-content-between.align-items-center[b-973ukjufkd],
    .pi-event-view-page .card-body > .d-flex.justify-content-between.align-items-center[b-973ukjufkd] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .pi-event-view-page .card-header.d-flex.justify-content-between.align-items-center .btn[b-973ukjufkd],
    .pi-event-view-page .card-body > .d-flex.justify-content-between.align-items-center .btn[b-973ukjufkd] {
        width: 100%;
    }

    /* The border prompt is icon + message + button on one row. At 375px the message was left
       about 180px of a 351px card and wrapped over six lines. Icon and message keep the first
       row; the button takes its own, full width. */
    .pi-event-view-page .alert.d-flex.align-items-center[b-973ukjufkd] {
        flex-wrap: wrap;
    }

    .pi-event-view-page .alert.d-flex.align-items-center > .btn[b-973ukjufkd] {
        flex: 1 0 100%;
    }

    /* Bootstrap's flex-grow-1 sets grow but leaves flex-basis auto, so once wrapping is on
       the message claims its max-content width, overflows the space left by the icon and
       drops to the next line. A zero basis lets it shrink and share the icon's row. */
    .pi-event-view-page .alert.d-flex.align-items-center > .flex-grow-1[b-973ukjufkd] {
        flex-basis: 0;
        min-width: 0;
    }
}
/* _content/Photo8/Components/Pages/Features.razor.rz.scp.css */
/* Only the mobile navigation lives here. The rest of this page is inline styles, matching the
   home page it was built alongside; these rules are here because they need a media query, which
   an inline style attribute cannot express. */

@media (max-width: 991.98px) {
    /* The navbar is translucent by design, which is fine as a thin strip but not once the menu
       expands over the page heading — the text reads straight through the links. Give the opened
       panel its own backdrop. Same treatment as the home page. */
    #navbarNav.show[b-r5po407n57] {
        background: rgba(8, 12, 24, 0.97);
        border-radius: 12px;
        margin-top: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    /* mx-auto centres each link on its own line at this width, so they stagger. */
    #navbarNav .navbar-nav[b-r5po407n57] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #navbarNav .nav-link[b-r5po407n57] {
        text-align: left;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}
/* _content/Photo8/Components/Pages/Home.razor.rz.scp.css */
/* Home Page Styles */

/* Icon Sizes */
.quick-action-icon[b-t3kd488bu0] {
    font-size: 2rem;
}

.feature-icon[b-t3kd488bu0] {
    font-size: 3rem;
}

/* Hero Section */
.hero-background[b-t3kd488bu0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.hero-gradient-bg[b-t3kd488bu0] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        rgba(10, 15, 30, 1) 0%, 
        rgba(30, 20, 60, 1) 25%, 
        rgba(20, 25, 50, 1) 50%, 
        rgba(25, 15, 45, 1) 75%, 
        rgba(10, 20, 35, 1) 100%);
}

.hero-noise[b-t3kd488bu0] {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 400 400%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%221.2%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');
    opacity: 0.08;
    mix-blend-mode: overlay;
}

.hero-content[b-t3kd488bu0] {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Navigation */
.navbar-home[b-t3kd488bu0] {
    background: rgba(10, 15, 30, 0.7);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(100, 200, 255, 0.1);
}

.navbar-brand-home[b-t3kd488bu0] {
    margin-right: 0;
}

.navbar-brand-text[b-t3kd488bu0] {
    color: white;
    font-size: 1.1rem;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.nav-link-home[b-t3kd488bu0] {
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}

.btn-login[b-t3kd488bu0] {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    font-weight: 600;
    border-radius: 8px;
}

.btn-signup[b-t3kd488bu0] {
    background: linear-gradient(135deg, #3fc8f6 0%, #765bff 35%, #8b33f2 65%, #da30aa 100%);
    border: none;
    color: white;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(63, 200, 246, 0.4);
}

/* Hero Section */
.hero-section[b-t3kd488bu0] {
    padding-top: 80px;
    padding-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
}

.hero-glow[b-t3kd488bu0] {
    position: absolute;
    top: -30%;
    right: -15%;
    width: 60%;
    height: 120%;
    background: radial-gradient(circle, rgba(139, 51, 242, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.hero-container[b-t3kd488bu0] {
    z-index: 1;
}

.hero-badge[b-t3kd488bu0] {
    background: linear-gradient(135deg, #00d4ff 0%, #667eea 100%);
    border-radius: 20px;
    font-weight: 600;
}

.hero-title[b-t3kd488bu0] {
    line-height: 1.1;
}

.hero-title-white[b-t3kd488bu0] {
    color: white;
}

.hero-title-gradient[b-t3kd488bu0] {
    background: linear-gradient(135deg, #3fc8f6 0%, #765bff 50%, #da30aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle[b-t3kd488bu0] {
    color: rgba(255,255,255,0.6);
    font-size: 1.1rem;
    max-width: 550px;
}

.btn-cta-primary[b-t3kd488bu0] {
    background: linear-gradient(135deg, #3fc8f6 0%, #765bff 50%, #8b33f2 75%, #da30aa 100%);
    border: none;
    color: white;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(63, 200, 246, 0.3);
}

.btn-cta-secondary[b-t3kd488bu0] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    font-weight: 600;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

/* Feature Cards */
.feature-card-mini[b-t3kd488bu0] {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    min-height: 120px;
}

.feature-card-title[b-t3kd488bu0] {
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.feature-card-text[b-t3kd488bu0] {
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
}

/* Gallery Demo */
.gallery-demo-container[b-t3kd488bu0] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.gallery-demo-header-title[b-t3kd488bu0] {
    color: white;
    font-weight: 700;
}

.gallery-demo-header-subtitle[b-t3kd488bu0] {
    color: rgba(255,255,255,0.5);
}

.gallery-badge[b-t3kd488bu0] {
    background: linear-gradient(135deg, #3fc8f6 0%, #8b33f2 100%);
    border-radius: 20px;
    font-weight: 700;
}

.search-input-demo[b-t3kd488bu0] {
    background: rgba(0, 8, 16, 0.6);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 1rem 1.25rem;
    font-size: 1rem;
    border-radius: 16px;
    font-weight: 500;
}

.search-label[b-t3kd488bu0] {
    color: rgba(255,255,255,0.6);
}

.search-text[b-t3kd488bu0] {
    color: white;
}

.gallery-card[b-t3kd488bu0] {
    border-radius: 12px;
    min-height: 180px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.35);
}

/* The photo gets its own row rather than being a background behind the whole card.
   As a background at center/cover it was cropped to the card's shape, and the caption bar
   then sat on top of whatever survived — both of which land on the watermark, which is a
   few percent in from the bottom-right corner. A 150 square drawn cover into roughly
   200x180 loses about 10px top and bottom against a watermark band of about 8; the 3:2
   event covers lose about 35px from each side, taking the end of the text with them.

   The same crop was fixed on /browse, the public gallery, the cart and the customer portal.
   Those were all object-fit: cover on an <img>, and this is background-size: cover on a
   <div>, which is why a sweep for the former did not find it.

   contain, letterboxed against the card, so the whole frame shows whatever shape it was
   shot in and the mark stays on it. */
.gallery-card-media[b-t3kd488bu0] {
    flex: 1 1 auto;
    min-height: 130px;
    background-color: rgba(0, 0, 0, 0.35);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.gallery-card-media.is-placeholder[b-t3kd488bu0] {
    background-image: linear-gradient(135deg, #2a4858 0%, #3d3073 100%);
    background-size: cover;
}

.gallery-card-1[b-t3kd488bu0] {
    background: linear-gradient(135deg, #2a4858 0%, #3d3073 100%);
}

.gallery-card-2[b-t3kd488bu0] {
    background: linear-gradient(135deg, #5a3d7a 0%, #6b2d7f 100%);
}

.gallery-card-3[b-t3kd488bu0] {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

.gallery-card-footer[b-t3kd488bu0] {
    background: rgba(0,0,0,0.9);
    padding: 0.875rem;
    border-radius: 0 0 12px 12px;
}

.gallery-card-title[b-t3kd488bu0] {
    color: white;
    font-weight: 600;
}

.gallery-card-subtitle[b-t3kd488bu0] {
    color: rgba(255,255,255,0.6);
    font-size: 0.75rem;
}

.gallery-card-price[b-t3kd488bu0] {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Footer Links */
.footer-link[b-t3kd488bu0] {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
}

/* Hover Effects */
.card-clickable:hover[b-t3kd488bu0] {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.feature-card[b-t3kd488bu0] {
    transition: all 0.3s ease;
}

.feature-card:hover[b-t3kd488bu0] {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.4) !important;
}

/* Smooth scroll behavior */
html[b-t3kd488bu0] {
    scroll-behavior: smooth;
}

/* Gradient text animation */
.gradient-text[b-t3kd488bu0] {
    animation: gradient-shift-b-t3kd488bu0 6s ease infinite;
    background-size: 200% auto;
}

@keyframes gradient-shift-b-t3kd488bu0 {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

/* Button hover effects */
.btn[b-t3kd488bu0] {
    transition: all 0.3s ease;
}

.btn:hover[b-t3kd488bu0] {
    transform: translateY(-2px);
}

/* Navigation backdrop on scroll */
.navbar[b-t3kd488bu0] {
    transition: all 0.3s ease;
}
/* _content/Photo8/Components/Pages/MySubscription.razor.rz.scp.css */
/* Photo Infinity Subscription Page Styling */

.subscription-container[b-er8foht6ai] {
    min-height: 100vh;
    padding: 40px 70px;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%), #050816;
    color: white;
}

.subscription-title[b-er8foht6ai] {
    font-size: 40px;
    margin: 0 0 35px 0;
    font-weight: 700;
}

.subscription-title .gradient-text[b-er8foht6ai] {
    background: linear-gradient(90deg, #008cff, #8b35ff, #ff35c8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subscription-layout[b-er8foht6ai] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 800px;
}

.pi-card[b-er8foht6ai] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(38, 49, 83, 0.6);
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    margin-bottom: 18px;
    /* wwwroot/app.css has a global .pi-card rule with height: 100% for a different page's card
       grid; without an explicit height here that bleeds in here too and stretches every card on
       this page to match the combined height of all of them stacked together. */
    height: auto;
}

.pi-card h3[b-er8foht6ai] {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: white;
}

/* Status Card */
.status-box[b-er8foht6ai] {
    background: rgba(0, 140, 255, 0.15);
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.status-box h5[b-er8foht6ai] {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.status-box p[b-er8foht6ai] {
    margin: 5px 0;
    color: #cbd2e5;
    font-size: 15px;
}

.status-box strong[b-er8foht6ai] {
    color: white;
}

/* Status variants */
.status-box.trial[b-er8foht6ai] {
    background: rgba(0, 140, 255, 0.15);
}

.status-box.active[b-er8foht6ai] {
    background: rgba(0, 200, 123, 0.15);
}

.status-box.warning[b-er8foht6ai] {
    background: rgba(255, 159, 67, 0.15);
}

/* Subscribe button */
.subscribe-btn[b-er8foht6ai] {
    background: linear-gradient(90deg, #008f55, #00c77b);
    padding: 14px;
    border-radius: 10px;
    text-align: center;
    color: white;
    text-decoration: none;
    display: block;
    font-weight: 600;
    font-size: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
}

.subscribe-btn:hover[b-er8foht6ai] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 200, 123, 0.3);
    color: white;
    text-decoration: none;
}


/* The row holding Renew / Manage Billing / Turn Off Auto-Renew. .renew-btn is display:block,
   so without this the buttons stack and touch; gap spaces them in both directions and
   flex-wrap keeps them apart rather than squeezed on a narrow screen. */
.subscription-actions[b-er8foht6ai] {
    display: flex;
    flex-wrap: wrap;
    /* stretch, not center: the two buttons carry different padding and font sizes on purpose —
       one is the primary action — and centring them left Manage Billing 52px tall beside a 47px
       Turn Off Auto-Renew. Stretch gives every button in a row the height of the tallest, and
       keeps doing so if another is added. */
    align-items: stretch;
    gap: 10px;
    margin-top: 12px;
}


/* The clause after the Auto-renew badge. Bootstrap's .text-muted resolves to near-black
   (rgba(33,37,41,.75)) which is unreadable on this card's dark panel — the sentence was rendered,
   sized and positioned, and simply could not be seen. #9ba5bc is the muted colour the rest of this
   page uses. */
.renew-note[b-er8foht6ai] {
    color: #9ba5bc;
    font-size: 13px;
}

/* Renew button */
.renew-btn[b-er8foht6ai] {
    background: linear-gradient(90deg, #8b35ff, #008cff);
    padding: 14px;
    border-radius: 10px;
    text-align: center;
    color: white;
    text-decoration: none;
    display: block;
    font-weight: 600;
    font-size: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
}

.renew-btn:hover[b-er8foht6ai] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 53, 255, 0.4);
    color: white;
    text-decoration: none;
}

/* Cancel Auto-Renew */
.cancel-autorenew-btn[b-er8foht6ai] {
    background: transparent;
    border: 1px solid rgba(255, 67, 54, 0.5);
    color: #ff4336;
    padding: 12px 14px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.cancel-autorenew-btn:hover:not(:disabled)[b-er8foht6ai] {
    background: rgba(255, 67, 54, 0.1);
    transform: translateY(-2px);
}

.cancel-autorenew-btn:disabled[b-er8foht6ai] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cancel-confirm[b-er8foht6ai] {
    margin-top: 12px;
    padding: 15px;
    background: rgba(255, 67, 54, 0.08);
    border: 1px solid rgba(255, 67, 54, 0.25);
    border-radius: 10px;
}

.cancel-confirm p[b-er8foht6ai] {
    margin: 0 0 12px 0;
    color: #cbd2e5;
    font-size: 14px;
}

.cancel-confirm .link-btn[b-er8foht6ai] {
    margin-left: 10px;
}

/* Inline Renewal Options */
.renewal-options[b-er8foht6ai] {
    margin-top: 15px;
    padding-top: 18px;
    border-top: 1px solid rgba(38, 49, 83, 0.6);
}

.renewal-options-header[b-er8foht6ai] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.renewal-options-header h5[b-er8foht6ai] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.link-btn[b-er8foht6ai] {
    background: none;
    border: none;
    color: #9ba5bc;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
}

.link-btn:hover:not(:disabled)[b-er8foht6ai] {
    color: white;
    text-decoration: underline;
}

.link-btn:disabled[b-er8foht6ai] {
    opacity: 0.5;
    cursor: not-allowed;
}

.renewal-plan-grid[b-er8foht6ai] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.renewal-plan-option[b-er8foht6ai] {
    background: rgba(5, 8, 22, 0.6);
    border: 1px solid rgba(38, 49, 83, 0.6);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.renewal-plan-name[b-er8foht6ai] {
    font-size: 15px;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.renewal-save-badge[b-er8foht6ai] {
    background: rgba(255, 159, 67, 0.2);
    color: #ff9f43;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.renewal-plan-price[b-er8foht6ai] {
    font-size: 26px;
    font-weight: 700;
    color: white;
}

.renewal-plan-price span[b-er8foht6ai] {
    font-size: 14px;
    font-weight: 500;
    color: #9ba5bc;
}

.balance-renew-btn[b-er8foht6ai] {
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    background: transparent;
    border: 1px solid rgba(0, 140, 255, 0.5);
    color: #008cff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.balance-renew-btn:hover:not(:disabled)[b-er8foht6ai] {
    background: rgba(0, 140, 255, 0.1);
    transform: translateY(-2px);
}

.balance-renew-btn:disabled[b-er8foht6ai] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .renewal-plan-grid[b-er8foht6ai] {
        grid-template-columns: 1fr;
    }
}

/* History Table */
.history-table[b-er8foht6ai] {
    width: 100%;
    border-collapse: collapse;
}

.history-table thead th[b-er8foht6ai] {
    padding: 12px;
    border-bottom: 1px solid rgba(38, 49, 83, 0.6);
    text-align: left;
    color: #9ba5bc;
    font-weight: 600;
    font-size: 14px;
}

.history-table tbody td[b-er8foht6ai] {
    padding: 12px;
    border-bottom: 1px solid rgba(38, 49, 83, 0.6);
    color: #cbd2e5;
    font-size: 15px;
}

.history-table tbody tr:last-child td[b-er8foht6ai] {
    border-bottom: none;
}

.history-table tbody tr:hover[b-er8foht6ai] {
    background: rgba(139, 53, 255, 0.05);
}

/* Badges */
.badge[b-er8foht6ai] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.badge.success[b-er8foht6ai] {
    background: rgba(0, 200, 123, 0.2);
    color: #00c77b;
}

.badge.info[b-er8foht6ai] {
    background: rgba(0, 140, 255, 0.2);
    color: #008cff;
}

.badge.warning[b-er8foht6ai] {
    background: rgba(255, 159, 67, 0.2);
    color: #ff9f43;
}

.badge.danger[b-er8foht6ai] {
    background: rgba(255, 67, 54, 0.2);
    color: #ff4336;
}

.badge.secondary[b-er8foht6ai] {
    background: rgba(139, 149, 174, 0.2);
    color: #8b95ae;
}

/* Pay-from-balance opt-in */
.balance-opt-in-checkbox[b-er8foht6ai] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #cbd2e5;
    font-size: 14px;
}

.balance-opt-in-checkbox input[type="checkbox"][b-er8foht6ai] {
    width: 18px;
    height: 18px;
    accent-color: #8b35ff;
    cursor: pointer;
}

/* Help Section */
.help-text[b-er8foht6ai] {
    color: #9ba5bc;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.help-text strong[b-er8foht6ai] {
    color: white;
    display: block;
    margin-bottom: 4px;
}

/* Loading state */
.loading-state[b-er8foht6ai] {
    text-align: center;
    padding: 60px 20px;
}

.loading-spinner[b-er8foht6ai] {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(139, 53, 255, 0.2);
    border-top-color: #8b35ff;
    border-radius: 50%;
    animation: spin-b-er8foht6ai 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin-b-er8foht6ai {
    to { transform: rotate(360deg); }
}

/* Empty state */
.empty-state[b-er8foht6ai] {
    text-align: center;
    padding: 40px 20px;
    color: #9ba5bc;
}

.empty-state i[b-er8foht6ai] {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 768px) {
    .subscription-container[b-er8foht6ai] {
        padding: 20px;
    }

    .subscription-title[b-er8foht6ai] {
        font-size: 32px;
    }

    .history-table[b-er8foht6ai] {
        font-size: 13px;
    }

    .history-table thead th[b-er8foht6ai],
    .history-table tbody td[b-er8foht6ai] {
        padding: 8px;
    }
}
/* _content/Photo8/Components/Pages/NotFound.razor.rz.scp.css */
/* Not Found - Photo Infinity Theme */

.pi-notfound-page[b-6888btp1n3] {
    min-height: 100vh;
    padding-bottom: 2rem;
    color: #e0e0e0;
}

.pi-notfound-card[b-6888btp1n3] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    padding: 3rem 2rem;
}

.pi-notfound-icon[b-6888btp1n3] {
    font-size: 4rem;
    color: #667eea;
    filter: drop-shadow(0 0 12px rgba(102, 126, 234, 0.5));
}

.pi-notfound-title[b-6888btp1n3] {
    margin-top: 1.25rem;
    font-size: 1.9rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pi-notfound-text[b-6888btp1n3] {
    color: #b0b0b0;
    margin-bottom: 0;
}

.pi-notfound-btn[b-6888btp1n3] {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    background: rgba(30, 30, 60, 0.85);
    border: 1px solid rgba(138, 43, 226, 0.5);
    color: #cbd5f5;
    transition: all 0.3s ease;
}

.pi-notfound-btn:hover[b-6888btp1n3] {
    background: rgba(45, 45, 85, 0.95);
    border-color: rgba(138, 43, 226, 0.8);
    color: #ffffff;
}

.pi-notfound-btn-primary[b-6888btp1n3] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.4);
}

.pi-notfound-btn-primary:hover[b-6888btp1n3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.6);
    color: #ffffff;
}
/* _content/Photo8/Components/Pages/OrderSuccess.razor.rz.scp.css */
/* Order Success Page - Photo Infinity Theme */

/* Page Wrapper */
.pi-order-success-page[b-b35qu6dbwz] {
    background: radial-gradient(circle at 50% 0%, #1a0033 0%, #0a0015 50%, #000000 100%);
    min-height: 100vh;
    padding-bottom: 2rem;
    color: #e0e0e0;
}

/* Page Header */
.pi-page-header[b-b35qu6dbwz] {
    margin-bottom: 2rem;
}

.pi-success-icon-wrapper[b-b35qu6dbwz] {
    display: inline-block;
}

.pi-success-icon[b-b35qu6dbwz] {
    font-size: 5rem;
    color: #22c55e;
    filter: drop-shadow(0 0 25px rgba(34, 197, 94, 0.7));
}

.pi-warning-icon[b-b35qu6dbwz] {
    color: #f59e0b;
    filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.6));
}

/* The header icon for every status that is not Completed. .pi-success-icon carried the size as
   well as the colour, so the non-success variants needed their own size or they rendered at
   body text height under a 2.5rem heading. */
.pi-status-icon[b-b35qu6dbwz] {
    font-size: 5rem;
}

.pi-page-title[b-b35qu6dbwz] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.gradient-text[b-b35qu6dbwz] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pi-page-subtitle[b-b35qu6dbwz] {
    color: #b0b0b0;
    font-size: 1.1rem;
}

/* Cards */
.pi-card[b-b35qu6dbwz] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    overflow: hidden;
    height: auto;
}

.pi-card-success[b-b35qu6dbwz] {
    border-color: rgba(34, 197, 94, 0.4);
}

.pi-card-warning[b-b35qu6dbwz] {
    border-color: rgba(245, 158, 11, 0.4);
}

.pi-card-header[b-b35qu6dbwz] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
    padding: 1rem 1.5rem;
    color: #ffffff;
}

.pi-card-header-success[b-b35qu6dbwz] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(21, 128, 61, 0.2) 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.3);
    padding: 1rem 1.5rem;
    color: #ffffff;
}

.pi-card-header h5[b-b35qu6dbwz],
.pi-card-header-success h5[b-b35qu6dbwz] {
    color: #ffffff;
    font-weight: 600;
    margin: 0;
}

.pi-card-body[b-b35qu6dbwz] {
    padding: 1.5rem;
    color: #e0e0e0;
}

/* Purchased line items.
   The item name is an uploader's filename, which can be one long unbroken token — on a real
   order "565180462_1104525721891953_5521276436975493271_n (1).jpg - Standard" made the row
   467px wide inside a 362px card and pushed the price 65px past the right edge, where it was
   clipped away entirely. A flex item defaults to min-width:auto and so refuses to shrink below
   its longest word; min-width:0 lifts that, and anywhere lets the token wrap. The price then
   has to be told not to shrink, or it gives up its own width instead. */
.pi-item-main[b-b35qu6dbwz] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pi-item-price[b-b35qu6dbwz] {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: 0.75rem;
}

/* Labels and Text */
.pi-label[b-b35qu6dbwz] {
    color: #9ca3af;
    font-weight: 500;
}

.pi-code[b-b35qu6dbwz] {
    background: rgba(102, 126, 234, 0.2);
    color: #a3edfd;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
}

.pi-success-text[b-b35qu6dbwz] {
    color: #22c55e !important;
    font-size: 1.2rem;
}

.pi-text-muted[b-b35qu6dbwz] {
    color: #9ca3af;
}

/* Buttons */
.pi-button[b-b35qu6dbwz] {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.pi-button:hover[b-b35qu6dbwz] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.5);
    color: white;
}

.pi-button-success[b-b35qu6dbwz] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.pi-button-success:hover[b-b35qu6dbwz] {
    box-shadow: 0 6px 20px 0 rgba(34, 197, 94, 0.5);
}

.pi-button-outline[b-b35qu6dbwz] {
    background: transparent;
    border: 2px solid rgba(102, 126, 234, 0.5);
    color: #667eea;
}

.pi-button-outline:hover[b-b35qu6dbwz] {
    background: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
    color: #667eea;
}

/* Alerts */
.pi-alert[b-b35qu6dbwz] {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 1px solid;
}

.pi-alert-success[b-b35qu6dbwz] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(21, 128, 61, 0.15) 100%);
    border-color: rgba(34, 197, 94, 0.3);
    color: #e0e0e0;
}

.pi-alert-link[b-b35qu6dbwz] {
    color: #22c55e;
    font-weight: 600;
    text-decoration: underline;
}

.pi-alert-link:hover[b-b35qu6dbwz] {
    color: #16a34a;
}

/* Spinners */
.pi-spinner[b-b35qu6dbwz] {
    color: #667eea;
}

.pi-spinner-warning[b-b35qu6dbwz] {
    color: #f59e0b;
}

/* Responsive */
@media (max-width: 768px) {
    .pi-page-title[b-b35qu6dbwz] {
        font-size: 2rem;
    }

    .pi-success-icon[b-b35qu6dbwz] {
        font-size: 4rem;
    }

    .pi-card-body[b-b35qu6dbwz] {
        padding: 1rem;
    }
}

/* The full-width body override that used to sit here lives in wwwroot/app.css. Scoped CSS
   cannot reach body, .page, main or article — they belong to the layout, not this component,
   so they never carry the scope attribute the compiler appends to the selector. */
/* _content/Photo8/Components/Pages/Payouts.razor.rz.scp.css */
/* Photo Infinity Payouts Page Styling */

/* Color variables matching Photo Infinity design */
[b-yh4920j2o6] :root {
    --pi-bg: #050816;
    --pi-panel: rgba(11, 16, 36, 0.85);
    --pi-line: rgba(255, 255, 255, 0.08);
    --pi-blue: #00b7ff;
    --pi-green: #2ecc71;
    --pi-cyan: #a3edfd;
    --pi-gold: #f2e562;
    --pi-purple: #8b35ff;
    --pi-pink: #ff36c9;
}

/* Page container with gradient background */
.payouts-container[b-yh4920j2o6] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.22), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 35px 50px;
}

/* Page title styling */
.page-title[b-yh4920j2o6] {
    font-size: 42px;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.page-title .gradient-text[b-yh4920j2o6] {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple), var(--pi-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-subtitle[b-yh4920j2o6] {
    color: #9ba5bc;
    font-size: 16px;
    margin-bottom: 30px;
}

/* Alert banners */
.pi-alert[b-yh4920j2o6] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid var(--pi-line);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pi-alert.success[b-yh4920j2o6] {
    border-color: var(--pi-green);
    background: rgba(46, 204, 113, 0.12);
}

.pi-alert.warning[b-yh4920j2o6] {
    border-color: var(--pi-gold);
    background: rgba(242, 229, 98, 0.12);
}

.pi-alert.error[b-yh4920j2o6] {
    border-color: #ff4444;
    background: rgba(255, 68, 68, 0.12);
}

/* Metric cards grid */
/* auto-fit rather than a fixed count, so removing or adding a metric card cannot leave a
   hole in the row or force an awkward wrap. */
.metrics-grid[b-yh4920j2o6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 30px;
}

/* Card base styling */
.pi-card[b-yh4920j2o6] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid var(--pi-line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* Metric card specific styling */
.metric-card[b-yh4920j2o6] {
    height: 180px;
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    padding-bottom: 15px;
}

.metric-card.gold[b-yh4920j2o6] {
    border-color: var(--pi-gold);
}

.metric-card.green[b-yh4920j2o6] {
    border-color: var(--pi-green);
}

.metric-card.blue[b-yh4920j2o6] {
    border-color: var(--pi-blue);
}

.metric-card.purple[b-yh4920j2o6] {
    border-color: var(--pi-purple);
}

.metric-icon[b-yh4920j2o6] {
    font-size: 28px;
    margin-bottom: 8px;
}

.metric-icon.gold[b-yh4920j2o6] { color: var(--pi-gold); }
.metric-icon.green[b-yh4920j2o6] { color: var(--pi-green); }
.metric-icon.blue[b-yh4920j2o6] { color: var(--pi-blue); }
.metric-icon.purple[b-yh4920j2o6] { color: var(--pi-purple); }

.metric-value[b-yh4920j2o6] {
    font-size: 34px;
    font-weight: 800;
    margin: 0 0 6px 0;
}

.metric-label[b-yh4920j2o6] {
    font-size: 15px;
    color: white;
    font-weight: 700;
    margin: 0;
}

.metric-sublabel[b-yh4920j2o6] {
    font-size: 12px;
    color: #9ba5bc;
    margin-top: 2px;
    line-height: 1.3;
}

/* Full-width layout for overview section */
.overview-row[b-yh4920j2o6] {
    margin-top: 22px;
}

/* Earnings chart */
.chart-card[b-yh4920j2o6] {
    min-height: 260px;
}

.chart-title[b-yh4920j2o6] {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

/* Completed payouts, one bar each. Replaces .chart-graph/.chart-line, which drew a fixed
   rising line unconnected to any data. */
.payout-bars[b-yh4920j2o6] {
    height: 150px;
    margin-top: 25px;
    padding: 10px 20px 0;
    background: linear-gradient(180deg, rgba(0, 140, 255, 0.15), transparent);
    border-radius: 15px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.payout-bar-slot[b-yh4920j2o6] {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.payout-bar[b-yh4920j2o6] {
    width: 100%;
    max-width: 46px;
    background: linear-gradient(180deg, var(--pi-blue), rgba(0, 140, 255, 0.25));
    border-radius: 6px 6px 0 0;
    box-shadow: 0 0 10px rgba(0, 140, 255, 0.35);
}

.payout-bar-label[b-yh4920j2o6] {
    font-size: 11px;
    color: #9ba5bc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.chart-empty[b-yh4920j2o6] {
    height: 150px;
    margin-top: 25px;
    background: linear-gradient(180deg, rgba(0, 140, 255, 0.08), transparent);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #9ba5bc;
    text-align: center;
    padding: 0 20px;
}

.chart-empty i[b-yh4920j2o6] {
    font-size: 28px;
    opacity: 0.45;
}

.chart-empty p[b-yh4920j2o6] {
    margin: 0;
    font-size: 14px;
}

/* With a year of payouts each slot is ~11px on a phone, so the dates clip to "M." and read as
   noise. The bars still carry the shape, and the exact figures are in the history table below. */
@media (max-width: 576px) {
    .payout-bar-label[b-yh4920j2o6] {
        display: none;
    }
}

.chart-note[b-yh4920j2o6] {
    color: #9ba5bc;
    margin-top: 15px;
    font-size: 14px;
}

/* Payment account card */
.payment-card-content[b-yh4920j2o6] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.payment-card-content h2[b-yh4920j2o6] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.payment-card-content p[b-yh4920j2o6] {
    color: #9ba5bc;
    font-size: 14px;
    margin: 0;
}

/* Buttons */
.pi-button[b-yh4920j2o6] {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue));
    border: 0;
    color: white;
    padding: 13px 25px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.pi-button:hover[b-yh4920j2o6] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.pi-button:disabled[b-yh4920j2o6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pi-button-secondary[b-yh4920j2o6] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid var(--pi-line);
}

/* Notice/alert cards */
.notice-card[b-yh4920j2o6] {
    border-color: var(--pi-blue);
    background: rgba(0, 140, 255, 0.12);
    margin-top: 22px;
}

.notice-card h3[b-yh4920j2o6] {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.notice-card p[b-yh4920j2o6] {
    margin: 0;
    color: #cbd2e5;
}

/* Request payout section */
.request-payout-card[b-yh4920j2o6] {
    margin-top: 22px;
}

.payout-breakdown[b-yh4920j2o6] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--pi-line);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.payout-row[b-yh4920j2o6] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--pi-line);
}

.payout-row:last-child[b-yh4920j2o6] {
    border-bottom: none;
    font-weight: 700;
    font-size: 18px;
}

.request-payout-card input.form-control[b-yh4920j2o6] {
    max-width: 220px;
}

.payout-row.total[b-yh4920j2o6] {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 2px solid var(--pi-green);
}

.payout-speed-options[b-yh4920j2o6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 15px 0;
}

/* A <label> now, wrapping a real radio, so the whole card stays clickable while the control
   underneath is focusable and announces properly. display: block keeps it filling the row the
   way the div did. */
.speed-option[b-yh4920j2o6] {
    display: block;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--pi-line);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
}

/* Hidden from view but not from focus or the accessibility tree — display: none or
   visibility: hidden would take it back out of the tab order and undo the point. */
.speed-option-input[b-yh4920j2o6] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The card is the only visible indication of focus, since the radio itself is off-screen. */
.speed-option:focus-within[b-yh4920j2o6] {
    outline: 2px solid var(--pi-blue);
    outline-offset: 2px;
}

.speed-option:hover[b-yh4920j2o6] {
    border-color: var(--pi-blue);
}

.speed-option.selected[b-yh4920j2o6] {
    border-color: var(--pi-green);
    background: rgba(46, 204, 113, 0.1);
}

.speed-badge[b-yh4920j2o6] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.speed-badge.free[b-yh4920j2o6] {
    background: var(--pi-green);
    color: white;
}

.speed-badge.fee[b-yh4920j2o6] {
    background: var(--pi-gold);
    color: #000;
}

/* Tabs */
.pi-tabs[b-yh4920j2o6] {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    border-bottom: 2px solid var(--pi-line);
}

.pi-tab[b-yh4920j2o6] {
    background: transparent;
    border: none;
    color: #9ba5bc;
    padding: 15px 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.pi-tab:hover[b-yh4920j2o6] {
    color: var(--pi-blue);
}

.pi-tab.active[b-yh4920j2o6] {
    color: white;
    border-bottom-color: var(--pi-blue);
}

.tab-badge[b-yh4920j2o6] {
    display: inline-block;
    background: var(--pi-gold);
    color: #000;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    margin-left: 6px;
}

/* Tab content */
.tab-content[b-yh4920j2o6] {
    margin-top: 22px;
}

/* Tables */
.pi-table-card[b-yh4920j2o6] {
    margin-top: 22px;

    /* Scroll, don't clip. .pi-card in app.css sets overflow: hidden so its rounded corners crop
       their contents, which is right for a photo and wrong for a table: the pending-orders table
       is 852px of columns and on a 375px phone it sat in a 335px card with the overflow simply
       cut off. Gross, commission, processing, net and the date were all past the edge with no way
       to reach them — the page told a photographer what they had earned and hid the number.
       overflow-y stays hidden, which is what keeps the corners clean. */
    overflow-x: auto;
}

[b-yh4920j2o6] .pi-table {
    width: 100%;
    border-collapse: collapse;
    color: #cbd2e5;
}

[b-yh4920j2o6] .pi-table th {
    padding: 15px;
    border-bottom: 2px solid var(--pi-line);
    text-align: left;
    font-weight: 700;
    color: white;
}

[b-yh4920j2o6] .pi-table td {
    padding: 15px;
    border-bottom: 1px solid var(--pi-line);
    text-align: left;
}

[b-yh4920j2o6] .pi-table tbody tr:hover {
    background: rgba(0, 140, 255, 0.05);
}

[b-yh4920j2o6] .pi-table tfoot {
    font-weight: 700;
    border-top: 2px solid var(--pi-green);
}

/* Status badges */
.status-badge[b-yh4920j2o6] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.pending[b-yh4920j2o6] { background: #6c757d; color: white; }
.status-badge.approved[b-yh4920j2o6] { background: #17a2b8; color: white; }
.status-badge.processing[b-yh4920j2o6] { background: var(--pi-gold); color: #000; }
.status-badge.completed[b-yh4920j2o6] { background: var(--pi-green); color: white; }
.status-badge.failed[b-yh4920j2o6] { background: #dc3545; color: white; }
.status-badge.cancelled[b-yh4920j2o6] { background: #6c757d; color: white; }

/* Payment settings form */
.settings-content[b-yh4920j2o6] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.form-section[b-yh4920j2o6] {
    margin-bottom: 25px;
}

.form-label[b-yh4920j2o6] {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: white;
}

.form-text[b-yh4920j2o6] {
    color: #9ba5bc;
    font-size: 13px;
    margin-top: 5px;
}

.form-control-plain[b-yh4920j2o6] {
    color: #cbd2e5;
    padding: 10px 0;
    font-size: 15px;
}

.radio-group[b-yh4920j2o6] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--pi-line);
    border-radius: 12px;
    padding: 20px;
}

.radio-option[b-yh4920j2o6] {
    margin-bottom: 15px;
}

.radio-option:last-child[b-yh4920j2o6] {
    margin-bottom: 0;
}

.bank-status[b-yh4920j2o6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-radius: 10px;
    margin: 15px 0;
}

.bank-status.connected[b-yh4920j2o6] {
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid var(--pi-green);
}

.bank-status.not-connected[b-yh4920j2o6] {
    background: rgba(242, 229, 98, 0.12);
    border: 1px solid var(--pi-gold);
}

/* Info card */
.info-card[b-yh4920j2o6] {
    border-color: var(--pi-cyan);
}

.info-card h6[b-yh4920j2o6] {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.info-card ul[b-yh4920j2o6] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-card li[b-yh4920j2o6] {
    padding: 8px 0;
    color: #9ba5bc;
    font-size: 13px;
}

.info-card li[b-yh4920j2o6]::before {
    content: "•";
    color: var(--pi-cyan);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-right: 8px;
}

/* Responsive design */
@media (max-width: 1200px) {
    .overview-row[b-yh4920j2o6] {
        grid-template-columns: 1fr;
    }

    .settings-content[b-yh4920j2o6] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .payouts-container[b-yh4920j2o6] {
        padding: 20px;
    }

    .page-title[b-yh4920j2o6] {
        font-size: 32px;
    }

    /* Two up rather than stacked. One card per row put a single figure in roughly 250px of
       screen, so the page opened on almost nothing but a number. */
    .metrics-grid[b-yh4920j2o6] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .metric-card[b-yh4920j2o6] {
        height: auto;
        min-height: 130px;
    }

    .metric-value[b-yh4920j2o6] {
        font-size: 24px;
    }

    .metric-icon[b-yh4920j2o6] {
        font-size: 22px;
        margin-bottom: 4px;
    }

    .metric-label[b-yh4920j2o6] {
        font-size: 13px;
    }

    .pi-tabs[b-yh4920j2o6] {
        flex-direction: column;
        border-bottom: none;
    }

    .pi-tab[b-yh4920j2o6] {
        border-bottom: 1px solid var(--pi-line);
        border-left: 3px solid transparent;
    }

    .pi-tab.active[b-yh4920j2o6] {
        border-bottom: 1px solid var(--pi-line);
        border-left-color: var(--pi-blue);
    }
}
/* _content/Photo8/Components/Pages/PhotoManagement.razor.rz.scp.css */
/* ===========================
   Photo Infinity — Photo Management Page
   =========================== */

/* Page Wrapper */
.pi-photo-management-page[b-hln7asls8z] {
    min-height: 100vh;
    background: radial-gradient(circle at top right, #1a1a2e 0%, #0f0f1e 50%, #000000 100%);
    padding: 2rem 0;
    color: #e0e0e0;
}

/* Breadcrumb */
.pi-photo-management-page[b-hln7asls8z]  .breadcrumb {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.pi-photo-management-page[b-hln7asls8z]  .breadcrumb-item + .breadcrumb-item::before {
    color: #888;
}

.pi-photo-management-page[b-hln7asls8z]  .breadcrumb-item a {
    color: #4fc3f7;
    text-decoration: none;
    transition: color 0.2s;
}

.pi-photo-management-page[b-hln7asls8z]  .breadcrumb-item a:hover {
    color: #81d4fa;
}

.pi-photo-management-page[b-hln7asls8z]  .breadcrumb-item.active {
    color: #aaa;
}

/* Page Title */
.pi-photo-management-page .page-title[b-hln7asls8z] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.pi-photo-management-page .gradient-text[b-hln7asls8z] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pi-photo-management-page .page-subtitle[b-hln7asls8z] {
    color: #bbb;
    font-size: 1rem;
}

/* Cards */
.pi-photo-management-page .pi-card[b-hln7asls8z] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.pi-photo-management-page[b-hln7asls8z]  .card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    color: #e0e0e0;
}

.pi-photo-management-page[b-hln7asls8z]  .card-body {
    padding: 1.5rem;
}

.pi-photo-management-page[b-hln7asls8z]  .card-title {
    color: #fff;
    font-weight: 600;
}

/* Page header — the title and the two upload buttons shared a single non-wrapping flex
   row. On a 375px screen "Bulk Upload" landed at 369-474px: off the viewport, and
   unreachable, because the body clips horizontal overflow. It wraps now. */
.pi-photo-management-page .pi-page-head[b-hln7asls8z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Same story for the bar that appears once photos are selected: six buttons in a row
   that never wrapped. */
.pi-photo-management-page .pi-bulk-bar[b-hln7asls8z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Buttons — a plain gapped row rather than Bootstrap's .btn-group, which fuses its
   children by zeroing the inner corners. That rule outranks the 8px radius set below
   (0,4,0 against 0,3,0), so "Upload More Photos" was rendering with two square corners
   on its right edge and nothing joined to them. */
.pi-photo-management-page .pi-btn-row[b-hln7asls8z] {
    gap: 0.5rem;
    display: flex;
    flex-wrap: wrap;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-upload-photos {
    background: transparent;
    border: 2px solid #4caf50;
    color: #4caf50;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-upload-photos:hover {
    background: #4caf50;
    color: #fff;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
}

.pi-photo-management-page[b-hln7asls8z]  .btn-bulk-upload {
    background: transparent;
    border: 2px solid #ff9800;
    color: #ff9800;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-bulk-upload:hover {
    background: #ff9800;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.5);
}

.pi-photo-management-page[b-hln7asls8z]  .btn-secondary {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid #6c757d;
    color: #adb5bd;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-secondary:hover {
    background: #6c757d;
    color: #fff;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #fff;
    font-weight: 600;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-primary:hover {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    transform: translateY(-2px);
}

.pi-photo-management-page[b-hln7asls8z]  .btn-success {
    background: transparent;
    border: 2px solid #4caf50;
    color: #4caf50;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-success:hover {
    background: #4caf50;
    color: #fff;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-outline-success {
    background: transparent;
    border: 1px solid #4caf50;
    color: #4caf50;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-outline-success:hover {
    background: #4caf50;
    color: #fff;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-outline-secondary {
    background: transparent;
    border: 1px solid #6c757d;
    color: #adb5bd;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-outline-secondary:hover {
    background: #6c757d;
    color: #fff;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-outline-primary {
    background: transparent;
    border: 1px solid #667eea;
    color: #667eea;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-outline-primary:hover {
    background: #667eea;
    color: #fff;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-outline-warning {
    background: transparent;
    border: 1px solid #ffc107;
    color: #ffc107;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-outline-warning:hover {
    background: #ffc107;
    color: #000;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-danger {
    background: transparent;
    border: 2px solid #f44336;
    color: #f44336;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-danger:hover {
    background: #f44336;
    color: #fff;
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.5);
}

.pi-photo-management-page[b-hln7asls8z]  .btn-outline-danger {
    background: transparent;
    border: 1px solid #f44336;
    color: #f44336;
}

.pi-photo-management-page[b-hln7asls8z]  .btn-outline-danger:hover {
    background: #f44336;
    color: #fff;
}

/* Form Controls */
.pi-photo-management-page[b-hln7asls8z]  .form-select,
.pi-photo-management-page[b-hln7asls8z]  .form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
    border-radius: 8px;
}

.pi-photo-management-page[b-hln7asls8z]  .form-select:focus,
.pi-photo-management-page[b-hln7asls8z]  .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #667eea;
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.pi-photo-management-page[b-hln7asls8z]  .form-select option {
    background: #1a1a2e;
    color: #e0e0e0;
}

.pi-photo-management-page[b-hln7asls8z]  .form-label {
    color: #bbb;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Alerts */
.pi-photo-management-page[b-hln7asls8z]  .alert {
    border-radius: 8px;
    border: none;
}

.pi-photo-management-page[b-hln7asls8z]  .alert-info {
    background: rgba(33, 150, 243, 0.2);
    border: 1px solid rgba(33, 150, 243, 0.4);
    color: #90caf9;
}

.pi-photo-management-page[b-hln7asls8z]  .alert-success {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: #81c784;
}

.pi-photo-management-page[b-hln7asls8z]  .alert-danger {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #e57373;
}

.pi-photo-management-page[b-hln7asls8z]  .alert-warning {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffd54f;
}

/* Badges */
.pi-photo-management-page[b-hln7asls8z]  .badge {
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    font-weight: 500;
}

.pi-photo-management-page[b-hln7asls8z]  .badge.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.pi-photo-management-page[b-hln7asls8z]  .badge.bg-success {
    background: #4caf50 !important;
}

.pi-photo-management-page[b-hln7asls8z]  .badge.bg-info {
    background: #2196f3 !important;
}

.pi-photo-management-page[b-hln7asls8z]  .badge.bg-warning {
    background: #ffc107 !important;
    color: #000 !important;
}

.pi-photo-management-page[b-hln7asls8z]  .badge.bg-danger {
    background: #f44336 !important;
}

.pi-photo-management-page[b-hln7asls8z]  .badge.bg-secondary {
    background: #6c757d !important;
}

/* Checkboxes */
.pi-photo-management-page[b-hln7asls8z]  .form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.pi-photo-management-page[b-hln7asls8z]  .form-check-input:checked {
    background-color: #667eea;
    border-color: #667eea;
}

/* Photo Grid */
.pi-photo-management-page[b-hln7asls8z]  .photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.pi-photo-management-page[b-hln7asls8z]  .photo-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pi-photo-management-page[b-hln7asls8z]  .photo-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Photo tiles — the thumbnail well was Bootstrap's bg-light, a near-white panel behind a
   letterboxed image on an otherwise black page. */
.pi-photo-management-page[b-hln7asls8z]  .pi-thumb {
    height: 150px;
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.pi-photo-management-page[b-hln7asls8z]  .pi-thumb img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Toast — was pinned at right:20px with a 300px floor, which leaves 55px of a 375px
   screen and no room to grow. */
.pi-toast[b-hln7asls8z] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100;
    min-width: 300px;
}

/* Pagination */
.pi-photo-management-page[b-hln7asls8z]  .pagination {
    margin-top: 2rem;
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.pi-photo-management-page[b-hln7asls8z]  .page-link {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
}

.pi-photo-management-page[b-hln7asls8z]  .page-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.pi-photo-management-page[b-hln7asls8z]  .page-item.active .page-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: #fff;
}

/* Modal Overrides */
.pi-photo-management-page[b-hln7asls8z]  .modal-content {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
}

.pi-photo-management-page[b-hln7asls8z]  .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pi-photo-management-page[b-hln7asls8z]  .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pi-photo-management-page[b-hln7asls8z]  .modal-title {
    color: #fff;
}

/* Spinner */
.pi-photo-management-page[b-hln7asls8z]  .spinner-border {
    border-color: rgba(255, 255, 255, 0.2);
    border-right-color: #667eea;
}

/* Empty State - No Photos Found */
.pi-photo-management-page[b-hln7asls8z]  .text-center.py-5 {
    color: #e0e0e0 !important;
}

.pi-photo-management-page[b-hln7asls8z]  .text-center.py-5 .bi-images {
    color: #9ca3af !important;
}

.pi-photo-management-page[b-hln7asls8z]  .text-center.py-5 h4 {
    color: #d1d5db !important;
}

.pi-photo-management-page[b-hln7asls8z]  .text-center.py-5 p,
.pi-photo-management-page[b-hln7asls8z]  .text-center.py-5 .text-muted {
    color: #9ca3af !important;
}

/* ===========================
   Phones and small tablets
   =========================== */
@media (max-width: 767.98px) {
    .pi-photo-management-page[b-hln7asls8z] {
        padding: 1rem 0;
    }

    .pi-photo-management-page[b-hln7asls8z]  .breadcrumb {
        padding: 0.5rem 0.75rem;
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }

    /* 2.5rem put "Management" on its own line and straight through the buttons beside it. */
    .pi-photo-management-page .page-title[b-hln7asls8z] {
        font-size: 1.75rem;
    }

    .pi-photo-management-page .page-subtitle[b-hln7asls8z] {
        font-size: 0.9rem;
    }

    /* Title above, both upload buttons sharing the row below it. */
    .pi-photo-management-page .pi-page-head[b-hln7asls8z] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .pi-photo-management-page .pi-page-head .pi-btn-row[b-hln7asls8z] {
        width: 100%;
    }

    .pi-photo-management-page[b-hln7asls8z]  .pi-page-head .pi-btn-row .btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.5rem 0.5rem;
        font-size: 0.9rem;
    }

    /* Count on its own line, then the six actions wrapping across full width. */
    .pi-photo-management-page .pi-bulk-bar[b-hln7asls8z] {
        flex-direction: column;
        align-items: stretch;
    }

    .pi-photo-management-page .pi-bulk-bar .pi-btn-row[b-hln7asls8z] {
        width: 100%;
    }

    .pi-photo-management-page[b-hln7asls8z]  .pi-bulk-bar .pi-btn-row .btn {
        flex: 1 1 auto;
    }

    /* 1.5rem each side plus the row gutters left the filter fields well short of the
       card they sit in. */
    .pi-photo-management-page[b-hln7asls8z]  .card-body {
        padding: 1rem;
    }

    .pi-photo-management-page[b-hln7asls8z]  .card-header .form-check-label {
        font-size: 0.9rem;
    }

    /* Clear Filters is alone on its row down here, so it may as well be reachable. */
    .pi-photo-management-page[b-hln7asls8z]  .card-body .col-md-3 > .btn-secondary {
        width: 100%;
    }

    .pi-photo-management-page[b-hln7asls8z]  .pi-thumb {
        height: 120px;
    }

    .pi-photo-management-page[b-hln7asls8z]  .pagination .page-link {
        padding: 0.375rem 0.6rem;
        font-size: 0.9rem;
    }

    .pi-toast[b-hln7asls8z] {
        top: 12px;
        left: 12px;
        right: 12px;
        min-width: 0;
    }
}

/* Moderation state notices.
   Bootstrap's .alert-warning / .alert-danger are pale blocks built for a white page, and this one
   is a near-black radial gradient - they read as a hole punched in the design, and .btn-outline-dark
   inside one is close to invisible here. These follow the page's own idiom instead: a translucent
   tint of the state colour over the dark ground, with the colour carried by a left rule. */
.pi-photo-management-page .pi-state-notice[b-hln7asls8z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    line-height: 1.45;
}

.pi-photo-management-page .pi-state-notice + .pi-state-notice[b-hln7asls8z] {
    margin-top: 0.75rem;
}

.pi-photo-management-page .pi-state-notice > i[b-hln7asls8z] {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.pi-photo-management-page .pi-state-notice > span[b-hln7asls8z] {
    flex: 1 1 18rem;
}

.pi-photo-management-page .pi-state-notice strong[b-hln7asls8z] {
    color: #fff;
}

.pi-photo-management-page .pi-state-notice a[b-hln7asls8z] {
    color: inherit;
    text-decoration: underline;
}

.pi-photo-management-page .pi-state-notice-held[b-hln7asls8z] {
    background: rgba(255, 152, 0, 0.12);
    border-color: rgba(255, 152, 0, 0.35);
    border-left-color: #ff9800;
}

.pi-photo-management-page .pi-state-notice-held > i[b-hln7asls8z] {
    color: #ffb74d;
}

.pi-photo-management-page .pi-state-notice-removed[b-hln7asls8z] {
    background: rgba(220, 53, 69, 0.14);
    border-color: rgba(220, 53, 69, 0.38);
    border-left-color: #dc3545;
}

.pi-photo-management-page .pi-state-notice-removed > i[b-hln7asls8z] {
    color: #ef5350;
}

/* margin-left:auto only once there is room for it - below that the button wraps to its own line
   and a left margin would shove it off-centre against the text above it. */
.pi-photo-management-page .pi-state-notice-btn[b-hln7asls8z] {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

.pi-photo-management-page .pi-state-notice-btn:hover[b-hln7asls8z],
.pi-photo-management-page .pi-state-notice-btn:focus-visible[b-hln7asls8z] {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

@media (min-width: 576px) {
    .pi-photo-management-page .pi-state-notice-btn[b-hln7asls8z] {
        margin-left: auto;
    }
}
/* _content/Photo8/Components/Pages/PublicGallery.razor.rz.scp.css */
/* Photo Infinity - Customer Gallery Page Styles */

/* CSS Variables for Photo Infinity Theme */
[b-bqcu8udnm2] :root {
    --pi-bg: #050816;
    --pi-panel: #0b1024;
    --pi-line: #263153;
    --pi-blue: #008cff;
    --pi-purple: #8b35ff;
    --pi-pink: #ff35c8;
}

/* Override body margins when gallery page is active */
[b-bqcu8udnm2] body:has(.pi-gallery-page) {
    margin: 0 !important;
    padding: 0 !important;
    background: #050816 !important;
}

/* Page Wrapper */
.pi-gallery-page[b-bqcu8udnm2] {
    background: radial-gradient(circle at top center, #1a2744 0%, #050816 50%);
    min-height: 100vh;
    color: white;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Remove Bootstrap container padding that creates white borders */
.pi-gallery-page .container[b-bqcu8udnm2],
.pi-gallery-page .pi-gallery-container[b-bqcu8udnm2] {
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Header Section */
.pi-gallery-header[b-bqcu8udnm2] {
    background: rgba(11, 16, 36, 0.6);
    border-bottom: 1px solid var(--pi-line);
    padding: 2rem 0;
    margin-bottom: 2rem;
}

.pi-photographer-name[b-bqcu8udnm2] {
    color: white;
    font-weight: 700;
}

.pi-bio[b-bqcu8udnm2] {
    color: #9aa5bd;
}

/* Container */
.pi-gallery-container[b-bqcu8udnm2] {
    margin-bottom: 3rem;
}

/* Event Title */
.pi-event-title[b-bqcu8udnm2] {
    font-size: 2.5rem;
    color: white;
    font-weight: 700;
}

.gradient-text[b-bqcu8udnm2] {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple), var(--pi-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Event Meta */
.pi-event-description[b-bqcu8udnm2] {
    color: #9aa5bd;
}

.pi-event-meta[b-bqcu8udnm2] {
    color: #9aa5bd;
}

/* Search Card */
.pi-search-card[b-bqcu8udnm2] {
    background: var(--pi-panel);
    border: 1px solid var(--pi-line);
    border-radius: 18px;
    padding: 20px;
}

.pi-search-card .input-group-text[b-bqcu8udnm2] {
    background: #070c1d;
    border: 1px solid var(--pi-line);
    color: #9aa5bd;
}

.pi-search-card .form-control[b-bqcu8udnm2] {
    background: #070c1d;
    border: 1px solid var(--pi-line);
    color: white;
    padding: 15px;
}

.pi-search-card .form-control[b-bqcu8udnm2]::placeholder {
    color: #6b7280;
}

.pi-search-card .form-control:focus[b-bqcu8udnm2] {
    background: #0a0f1f;
    border-color: var(--pi-blue);
    color: white;
    box-shadow: 0 0 0 0.25rem rgba(0, 140, 255, 0.15);
}

/* Gradient Button */
.pi-btn-gradient[b-bqcu8udnm2] {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue));
    color: white;
    border: 0;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
}

.pi-btn-gradient:hover[b-bqcu8udnm2] {
    background: linear-gradient(90deg, #9d4aff, #1a9cff);
    color: white;
}

/* Cards */
.pi-card[b-bqcu8udnm2] {
    background: var(--pi-panel);
    border: 1px solid var(--pi-line);
    border-radius: 18px;
}

.pi-card .card-body[b-bqcu8udnm2] {
    color: white;
}

.pi-card h6[b-bqcu8udnm2] {
    color: white;
}

.pi-card .text-muted[b-bqcu8udnm2] {
    color: #9aa5bd !important;
}

.pi-card .small[b-bqcu8udnm2] {
    color: #9aa5bd !important;
}

/* Filter Alert */
.pi-filter-alert[b-bqcu8udnm2] {
    background: rgba(11, 16, 36, 0.8);
    border: 1px solid var(--pi-line);
    color: #9aa5bd;
}

.pi-filter-alert strong[b-bqcu8udnm2] {
    color: white;
}

.pi-filter-alert .btn-outline-secondary[b-bqcu8udnm2] {
    border-color: var(--pi-line);
    color: #9aa5bd;
}

.pi-filter-alert .btn-outline-secondary:hover[b-bqcu8udnm2] {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--pi-blue);
    color: white;
}

/* Photo Grid - Work with Bootstrap's row/col system */
.pi-photo-grid[b-bqcu8udnm2] {
    /* Remove the CSS grid that conflicts with Bootstrap */
}

/* Photo Card */
/* Report and save. Was an inline style repeated on each button; shared here so the pair keeps
   the same size and the heart cannot drift out of line with the flag. */
.pi-photo-action[b-bqcu8udnm2] {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.45);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pi-photo-action:hover[b-bqcu8udnm2],
.pi-photo-action:focus-visible[b-bqcu8udnm2] {
    background: rgba(0, 0, 0, 0.75);
    border-color: #ffffff;
}

/* Saved state. Filled and red — the outline heart alone reads as decoration rather than as
   something you have already done. */
.pi-heart-on[b-bqcu8udnm2] {
    color: #f87171;
}

.pi-photo-card[b-bqcu8udnm2] {
    background: #111a32;
    border: 1px solid var(--pi-line);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pi-photo-card:hover[b-bqcu8udnm2] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Photo image container - ensure position relative for border overlay */
.pi-photo-card .position-relative[b-bqcu8udnm2] {
    position: relative !important;
    width: 100%;
    display: block;
}

.pi-photo-card .card-img-top[b-bqcu8udnm2] {
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 400px;
    object-fit: contain;
    background: linear-gradient(135deg, #31527c, #121a30);
    display: block;
}

/* Border overlay image */
.pi-photo-card .position-relative img[alt="border overlay"][b-bqcu8udnm2] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    pointer-events: none !important;
    z-index: 1;
}

.pi-photo-card .card-body[b-bqcu8udnm2] {
    background: #111a32;
    color: white;
    flex: 0 0 auto;
    padding: 0.75rem;
}

.pi-photo-card .card-footer[b-bqcu8udnm2] {
    background: #0d1426;
    border-top: 1px solid var(--pi-line);
    padding: 0.75rem;
    margin-top: auto;
}

/* Photo Controls (border selection) */
.pi-border-selector[b-bqcu8udnm2] {
    background: #0d1426 !important;
    border-top: 1px solid var(--pi-line) !important;
}

.pi-border-thumb[b-bqcu8udnm2] {
    width: 48px !important;
    height: 48px !important;
    overflow: hidden !important;
    border-radius: 6px;
}

.pi-photo-card .border-top.bg-light[b-bqcu8udnm2] {
    background: #0d1426 !important;
    border-top: 1px solid var(--pi-line) !important;
}

.pi-photo-card .d-flex.gap-1.p-1.border-top.bg-light[b-bqcu8udnm2] {
    background: #0d1426 !important;
    border-top: 1px solid var(--pi-line) !important;
}

/* Override any bg-light within photo cards */
.pi-photo-card .bg-light[b-bqcu8udnm2] {
    background: #0d1426 !important;
}

/* Override bg-white within photo cards */
.pi-photo-card .bg-white[b-bqcu8udnm2] {
    background: #0d1426 !important;
}

/* Tag Pills inside Photos */
.pi-photo-card .btn-outline-secondary[b-bqcu8udnm2] {
    border-color: var(--pi-line);
    color: #9aa5bd;
    background: transparent;
}

.pi-photo-card .btn-outline-secondary:hover[b-bqcu8udnm2] {
    background: rgba(139, 53, 255, 0.2);
    border-color: var(--pi-purple);
    color: white;
}

.pi-photo-card .btn-secondary[b-bqcu8udnm2] {
    background: var(--pi-purple);
    border-color: var(--pi-purple);
    color: white;
}

/* Buy Button */
.pi-btn-buy[b-bqcu8udnm2] {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue));
    color: white;
    border: 0;
    width: 100%;
    font-weight: 500;
}

.pi-btn-buy:hover[b-bqcu8udnm2] {
    background: linear-gradient(90deg, #9d4aff, #1a9cff);
    color: white;
}

/* Event Cards (for event listing view) */
.pi-event-card[b-bqcu8udnm2] {
    background: var(--pi-panel);
    border: 1px solid var(--pi-line);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pi-event-card:hover[b-bqcu8udnm2] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.pi-event-card .card-img-top[b-bqcu8udnm2] {
    background: linear-gradient(135deg, #31527c, #121a30);
}

/* Sub-event section covers and tag-scope covers. Same rule as the event covers below: the source
   is a 150px square and these boxes are not square, so cover was cropping past the watermark. */
.pi-cover-thumb[b-bqcu8udnm2] {
    width: 100%;
    height: 140px;
    object-fit: contain;
    background: linear-gradient(135deg, #1b2340, #0d1120);
    display: block;
}

/* contain, for the same reason as the browse cards: cover crops whatever does not match the box,
   and the watermark sits close enough to the edge that any crop can take it. Letterboxed against
   the card's existing gradient, the whole photo — and so the whole watermark — is always shown. */
.pi-event-cover[b-bqcu8udnm2] {
    aspect-ratio: 3 / 2;
    object-fit: contain;
    width: 100%;
    display: block;
}

.pi-event-card .card-body[b-bqcu8udnm2] {
    background: var(--pi-panel);
}

.pi-event-card .card-title[b-bqcu8udnm2] {
    color: white !important;
}

.pi-event-card .card-text[b-bqcu8udnm2],
.pi-event-card .text-muted[b-bqcu8udnm2] {
    color: #9aa5bd !important;
}

/* Empty State */
.pi-gallery-page .text-center.py-5[b-bqcu8udnm2] {
    color: #9aa5bd;
}

.pi-gallery-page .text-center.py-5 h4[b-bqcu8udnm2] {
    color: white;
}

.pi-gallery-page .text-center.py-5 .text-muted[b-bqcu8udnm2] {
    color: #9aa5bd !important;
}

.pi-gallery-page .text-center.py-5 i[b-bqcu8udnm2] {
    color: #6b7280 !important;
}

/* Alert Overrides */
.pi-gallery-page .alert-warning[b-bqcu8udnm2] {
    background: rgba(139, 53, 255, 0.15);
    border: 1px solid var(--pi-line);
    color: #9aa5bd;
}

.pi-gallery-page .alert-warning h4[b-bqcu8udnm2] {
    color: white;
}

.pi-gallery-page .alert-warning strong[b-bqcu8udnm2] {
    color: white;
}

/* Badge Overrides */
.pi-gallery-page .badge.bg-secondary[b-bqcu8udnm2] {
    background: #374151 !important;
    color: white;
}

/* --pi-blue is a bright fill, so it needs dark text on it. White gave 2.28:1 — below the 4.5:1
   AA floor, and worse than the plain Bootstrap badge this was overriding. Dark reads 8.9:1. */
.pi-gallery-page .badge.bg-info[b-bqcu8udnm2] {
    background: var(--pi-blue) !important;
    color: #05121c;
}

.pi-gallery-page .badge.bg-success[b-bqcu8udnm2] {
    background: #10b981 !important;
}

/* Button Overrides */
.pi-gallery-page .btn-outline-secondary[b-bqcu8udnm2] {
    border-color: var(--pi-line);
    color: #9aa5bd;
}

.pi-gallery-page .btn-outline-secondary:hover[b-bqcu8udnm2] {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--pi-blue);
    color: white;
}

.pi-gallery-page .btn-primary[b-bqcu8udnm2] {
    background: var(--pi-blue);
    border-color: var(--pi-blue);
}

.pi-gallery-page .btn-primary:hover[b-bqcu8udnm2] {
    background: #1a9cff;
    border-color: #1a9cff;
}

.pi-gallery-page .btn-link[b-bqcu8udnm2] {
    color: var(--pi-blue);
}

.pi-gallery-page .btn-link:hover[b-bqcu8udnm2] {
    color: #1a9cff;
}

/* Input Group Overrides for Tag Search */
.pi-gallery-page .input-group-text[b-bqcu8udnm2] {
    background: #070c1d;
    border: 1px solid var(--pi-line);
    color: #9aa5bd;
}

.pi-gallery-page .form-control[b-bqcu8udnm2] {
    background: #070c1d;
    border: 1px solid var(--pi-line);
    color: white;
}

.pi-gallery-page .form-control[b-bqcu8udnm2]::placeholder {
    color: #6b7280;
}

.pi-gallery-page .form-control:focus[b-bqcu8udnm2] {
    background: #0a0f1f;
    border-color: var(--pi-blue);
    color: white;
    box-shadow: 0 0 0 0.25rem rgba(0, 140, 255, 0.15);
}

/* Tag Pills in Purchase Section */
.pi-gallery-page .border.rounded-pill[b-bqcu8udnm2] {
    background: rgba(11, 16, 36, 0.5);
    border-color: var(--pi-line) !important;
}

.pi-gallery-page .border.rounded-pill.border-success[b-bqcu8udnm2] {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1);
}

/* Modal Overrides */
.pi-gallery-page[b-bqcu8udnm2]  .modal-content {
    background: var(--pi-panel);
    border: 1px solid var(--pi-line);
    color: white;
}

.pi-gallery-page[b-bqcu8udnm2]  .modal-header {
    border-bottom: 1px solid var(--pi-line);
}

.pi-gallery-page[b-bqcu8udnm2]  .modal-footer {
    border-top: 1px solid var(--pi-line);
}

.pi-gallery-page[b-bqcu8udnm2]  .modal-title {
    color: white;
}

.pi-gallery-page[b-bqcu8udnm2]  .btn-close {
    filter: invert(1);
}

/* Photo Detail Modal */
.pi-photo-modal[b-bqcu8udnm2] {
    z-index: 1050;
}

.pi-photo-modal .modal-content[b-bqcu8udnm2] {
    background: #1a2744;
    border: 1px solid var(--pi-line);
    border-radius: 20px;
    color: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.pi-photo-modal .modal-header[b-bqcu8udnm2] {
    border-bottom: 1px solid var(--pi-line);
    background: #0f1a30;
    border-radius: 20px 20px 0 0;
    padding: 1.25rem;
}

.pi-photo-modal .modal-footer[b-bqcu8udnm2] {
    border-top: 1px solid var(--pi-line);
    background: #0f1a30;
    border-radius: 0 0 20px 20px;
    padding: 1.25rem;
}

.pi-photo-modal .modal-title[b-bqcu8udnm2] {
    color: white;
    font-weight: 600;
}

.pi-photo-modal .btn-close[b-bqcu8udnm2] {
    filter: invert(1);
    opacity: 0.8;
}

.pi-photo-modal .btn-close:hover[b-bqcu8udnm2] {
    opacity: 1;
}

.pi-photo-modal .modal-body[b-bqcu8udnm2] {
    background: #1a2744;
    padding: 1.5rem;
}

.pi-photo-modal .form-label[b-bqcu8udnm2] {
    color: white;
    font-weight: 500;
}

.pi-photo-modal p[b-bqcu8udnm2] {
    color: #9aa5bd;
}

.pi-photo-modal p strong[b-bqcu8udnm2] {
    color: white;
}

/* Modal buttons */
.pi-photo-modal .pi-btn-buy[b-bqcu8udnm2] {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue));
    color: white;
    border: 0;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
}

.pi-photo-modal .pi-btn-buy:hover[b-bqcu8udnm2] {
    background: linear-gradient(90deg, #9d4aff, #1a9cff);
    color: white;
}

.pi-photo-modal .pi-btn-close[b-bqcu8udnm2] {
    border-color: var(--pi-line);
    color: #9aa5bd;
    background: transparent;
}

.pi-photo-modal .pi-btn-close:hover[b-bqcu8udnm2] {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--pi-blue);
    color: white;
}

/* Modal border selector buttons */
.pi-photo-modal .btn-outline-secondary[b-bqcu8udnm2] {
    border-color: var(--pi-line);
    color: #9aa5bd;
}

.pi-photo-modal .btn-outline-secondary:hover[b-bqcu8udnm2] {
    background: rgba(139, 53, 255, 0.2);
    border-color: var(--pi-purple);
    color: white;
}

.pi-photo-modal .btn-secondary[b-bqcu8udnm2] {
    background: var(--pi-purple);
    border-color: var(--pi-purple);
    color: white;
}
/* _content/Photo8/Components/Pages/RetrieveDownloads.razor.rz.scp.css */
/* My Downloads Page - Photo Infinity Theme */

/* Page Wrapper */
.pi-downloads-page[b-5fegcv4dlr] {
    background: radial-gradient(circle at 50% 0%, #1a0033 0%, #0a0015 50%, #000000 100%);
    min-height: 100vh;
    padding-bottom: 2rem;
    color: #e0e0e0;
}

/* Page Header */
.pi-page-header[b-5fegcv4dlr] {
    margin-bottom: 2rem;
}

.pi-icon-hero[b-5fegcv4dlr] {
    font-size: 3.5rem;
    color: #667eea;
    filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.6));
    display: block;
    margin-bottom: 1rem;
}

.pi-page-title[b-5fegcv4dlr] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.gradient-text[b-5fegcv4dlr] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pi-page-subtitle[b-5fegcv4dlr] {
    color: #b0b0b0;
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Cards */
.pi-card[b-5fegcv4dlr] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

    /* app.css gives every .pi-card height: 100%, which is what makes cards in a grid line up.
       There is one card on this page, in a column that stretches, so it inherited a height of
       607px for 239px of content and trailed 345px of empty panel under the button. */
    height: auto;
}

.pi-card-header-success[b-5fegcv4dlr] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(21, 128, 61, 0.2) 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.3);
    padding: 1rem 1.5rem;
    border-radius: 15px 15px 0 0 !important;
    color: #ffffff;
}

.pi-card-header-success h5[b-5fegcv4dlr] {
    color: #ffffff;
    font-weight: 600;
}

/* Nav Pills (Email/Phone Toggle) */
.pi-signed-in-email[b-5fegcv4dlr] {
    color: #ffffff;
    overflow-wrap: anywhere;
}

/* Nav Pills (Email/Phone Toggle) */
.pi-nav-pills[b-5fegcv4dlr] {
    background: rgba(20, 20, 40, 0.5);
    border-radius: 10px;
    padding: 0.5rem;
}

[b-5fegcv4dlr] .pi-nav-pills .nav-link {
    color: #b0b0b0;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

[b-5fegcv4dlr] .pi-nav-pills .nav-link:hover {
    color: #ffffff;
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(138, 43, 226, 0.3);
}

[b-5fegcv4dlr] .pi-nav-pills .nav-link.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.4);
}

/* Form Controls */
[b-5fegcv4dlr] .form-label {
    color: #e0e0e0;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

[b-5fegcv4dlr] .form-control {
    background: rgba(20, 20, 40, 0.6);
    border: 1px solid rgba(138, 43, 226, 0.3);
    color: #ffffff;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

[b-5fegcv4dlr] .form-control:focus {
    background: rgba(30, 30, 60, 0.8);
    border-color: #667eea;
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
    color: #ffffff;
}

[b-5fegcv4dlr] .form-control::placeholder {
    color: #6b7280;
}

/* Buttons */
.pi-btn-gradient[b-5fegcv4dlr] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.4);
}

.pi-btn-gradient:hover:not(:disabled)[b-5fegcv4dlr] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.6);
    color: #ffffff;
}

.pi-btn-gradient:disabled[b-5fegcv4dlr] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pi-btn-secondary[b-5fegcv4dlr] {
    background: rgba(30, 30, 60, 0.8);
    border: 1px solid rgba(138, 43, 226, 0.5);
    color: #e0e0e0;
    font-weight: 600;
    padding: 0.375rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.pi-btn-secondary:hover[b-5fegcv4dlr] {
    background: rgba(40, 40, 80, 0.9);
    border-color: rgba(138, 43, 226, 0.7);
    color: #ffffff;
}

.pi-btn-success[b-5fegcv4dlr] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.8) 0%, rgba(21, 128, 61, 0.9) 100%);
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: #ffffff;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.pi-btn-success:hover:not(:disabled)[b-5fegcv4dlr] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(21, 128, 61, 1) 100%);
    border-color: rgba(34, 197, 94, 0.7);
    color: #ffffff;
    transform: translateY(-1px);
}

.pi-btn-success:disabled[b-5fegcv4dlr] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Download Items (signed-in list) */
.pi-download-item[b-5fegcv4dlr] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.6) 0%, rgba(20, 20, 40, 0.7) 100%);
    border: 1px solid rgba(138, 43, 226, 0.25);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.pi-download-item:hover[b-5fegcv4dlr] {
    border-color: rgba(138, 43, 226, 0.45);
}

.pi-download-body[b-5fegcv4dlr] {
    padding: 1.25rem;
}

/* The order number is a 20-character unbreakable token. On its own line above the detail
   columns it fits whole; sharing a row it set the minimum width for everything else. */
.pi-order-ref[b-5fegcv4dlr] {
    font-size: 0.8125rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: #ffffff;
}

.pi-order-ref-line[b-5fegcv4dlr] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(138, 43, 226, 0.18);
}

.pi-item-count[b-5fegcv4dlr] {
    color: #e0e0e0;
    font-size: 0.9375rem;
}

/* The number the customer came here for, so it is the one thing on the row that is not muted. */
.pi-downloads-left[b-5fegcv4dlr] {
    color: #34d399;
    font-weight: 600;
    font-size: 0.9375rem;
}

/* Icon and label on one line — wrapped, they stood a 20px label in a 58px button. */
.pi-download-btn[b-5fegcv4dlr] {
    white-space: nowrap;
}

.pi-empty-icon[b-5fegcv4dlr] {
    font-size: 3.5rem;
    color: rgba(176, 176, 176, 0.5);
    filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.3));
}

/* List Group (Order List) */
[b-5fegcv4dlr] .list-group-item {
    background: rgba(20, 20, 40, 0.6) !important;
    border-color: rgba(138, 43, 226, 0.2) !important;
    color: #e0e0e0 !important;
    border-radius: 10px !important;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

[b-5fegcv4dlr] .list-group-item:hover {
    background: rgba(30, 30, 60, 0.8) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
}

[b-5fegcv4dlr] .list-group-item h6 {
    color: #ffffff;
    font-weight: 600;
}

/* Badges */
[b-5fegcv4dlr] .badge {
    padding: 0.35em 0.65em;
    border-radius: 6px;
    font-weight: 600;
}

[b-5fegcv4dlr] .badge.bg-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.8) 0%, rgba(21, 128, 61, 0.9) 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

[b-5fegcv4dlr] .badge.bg-secondary {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%) !important;
    border: 1px solid rgba(138, 43, 226, 0.4);
    color: #b0b0b0 !important;
}

/* Alerts */
.pi-alert[b-5fegcv4dlr] {
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid;
    backdrop-filter: blur(10px);
}

.pi-alert-warning[b-5fegcv4dlr] {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(202, 138, 4, 0.15) 100%);
    border-color: rgba(234, 179, 8, 0.3);
    color: #fbbf24;
}

.pi-alert-warning h5[b-5fegcv4dlr] {
    color: #fbbf24;
}

.pi-alert-warning p[b-5fegcv4dlr] {
    color: #d1d5db;
}

.pi-alert-danger[b-5fegcv4dlr] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.pi-alert-icon[b-5fegcv4dlr] {
    font-size: 2rem;
    display: block;
}

/* Success Icons & Text */
.pi-icon-success[b-5fegcv4dlr] {
    color: #34d399;
    filter: drop-shadow(0 0 15px rgba(52, 211, 153, 0.5));
}

.pi-success-title[b-5fegcv4dlr] {
    color: #ffffff;
    font-weight: 700;
}

/* Text Utilities */
.pi-text-muted[b-5fegcv4dlr] {
    color: #b0b0b0;
}

.pi-info-text[b-5fegcv4dlr] {
    color: #9ca3af;
}

[b-5fegcv4dlr] small.text-muted {
    color: #9ca3af !important;
}

/* HR Divider */
[b-5fegcv4dlr] hr {
    border-color: rgba(138, 43, 226, 0.3);
    opacity: 1;
}

/* Spinner */
[b-5fegcv4dlr] .spinner-border {
    color: #ffffff !important;
}

/* Validation Messages */
[b-5fegcv4dlr] .text-danger {
    color: #f87171 !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
/* _content/Photo8/Components/Pages/Sales.razor.rz.scp.css */
/* Sales Analytics Page Styles */

.sales-analytics-page[b-v9fodl77c3] {
    min-height: 100vh;
    color: white;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.22), transparent 35%),
                radial-gradient(circle at 10% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    padding: 35px 50px;
}

.sales-analytics-page .title-section[b-v9fodl77c3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.sales-analytics-page h1[b-v9fodl77c3] {
    font-size: 42px;
    margin: 0;
    font-weight: 600;
}

.sales-analytics-page .gradient-text[b-v9fodl77c3] {
    background: linear-gradient(90deg, #008cff, #8b35ff, #ff35c8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sales-analytics-page .subtitle[b-v9fodl77c3] {
    color: #9ba5bc;
    font-size: 16px;
    margin-top: 8px;
}

.sales-analytics-page .period-selector[b-v9fodl77c3] {
    position: relative;
    display: inline-block;
}

.sales-analytics-page .period-dropdown[b-v9fodl77c3] {
    padding: 10px 40px 10px 18px;
    border-radius: 12px;
    border: 1px solid #263153;
    background: #0b1124;
    color: white;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 150px;
    transition: all 0.2s ease;
}

.sales-analytics-page .period-dropdown:hover[b-v9fodl77c3] {
    background: #121832;
    border-color: #3d4c73;
}

.sales-analytics-page .period-dropdown:focus[b-v9fodl77c3] {
    outline: none;
    border-color: #008cff;
    box-shadow: 0 0 0 2px rgba(0, 140, 255, 0.1);
}

.sales-analytics-page .period-dropdown option[b-v9fodl77c3] {
    background: #0b1124;
    color: white;
    padding: 10px;
}

.sales-analytics-page .dropdown-arrow[b-v9fodl77c3] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ba5bc;
    pointer-events: none;
    font-size: 12px;
}

.sales-analytics-page .analytics-card[b-v9fodl77c3] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid #263153;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    height: 100%;
}

.sales-analytics-page .kpi-card[b-v9fodl77c3] {
    height: 145px;
    position: relative;
    overflow: hidden;
}

.sales-analytics-page .kpi-card.blue[b-v9fodl77c3] { 
    border-color: #008cff;
    background: linear-gradient(135deg, rgba(0, 16, 40, 0.95) 0%, rgba(0, 32, 80, 0.85) 100%);
}

.sales-analytics-page .kpi-card.green[b-v9fodl77c3] { 
    border-color: #00dc9a;
    background: linear-gradient(135deg, rgba(0, 24, 16, 0.95) 0%, rgba(0, 48, 32, 0.85) 100%);
}

.sales-analytics-page .kpi-card.cyan[b-v9fodl77c3] { 
    border-color: #00d5ff;
    background: linear-gradient(135deg, rgba(0, 20, 32, 0.95) 0%, rgba(0, 40, 64, 0.85) 100%);
}

.sales-analytics-page .kpi-card.gold[b-v9fodl77c3] { 
    border-color: #ffd000;
    background: linear-gradient(135deg, rgba(32, 24, 0, 0.95) 0%, rgba(48, 36, 0, 0.85) 100%);
}

.sales-analytics-page .kpi-label[b-v9fodl77c3] {
    color: white;
    font-size: 14px;
    margin-top: 8px;
    font-weight: 500;
}

.sales-analytics-page .kpi-value[b-v9fodl77c3] {
    font-size: 38px;
    font-weight: 800;
    margin: 0;
}

.sales-analytics-page .kpi-detail[b-v9fodl77c3] {
    font-size: 12px;
    color: white;
    opacity: 0.8;
    margin-top: 4px;
}

.sales-analytics-page .kpi-icon[b-v9fodl77c3] {
    font-size: 48px;
    opacity: 0.9;
    min-width: 60px;
    text-align: right;
}

.sales-analytics-page .kpi-icon i[b-v9fodl77c3] {
    display: inline-block;
}

/* Neon glow effects */
.sales-analytics-page .blue-glow[b-v9fodl77c3] {
    color: #008cff;
    filter: drop-shadow(0 0 8px #008cff) drop-shadow(0 0 12px rgba(0, 140, 255, 0.5));
}

.sales-analytics-page .green-glow[b-v9fodl77c3] {
    color: #00dc9a;
    filter: drop-shadow(0 0 8px #00dc9a) drop-shadow(0 0 12px rgba(0, 220, 154, 0.5));
}

.sales-analytics-page .cyan-glow[b-v9fodl77c3] {
    color: #00d5ff;
    filter: drop-shadow(0 0 8px #00d5ff) drop-shadow(0 0 12px rgba(0, 213, 255, 0.5));
}

.sales-analytics-page .gold-glow[b-v9fodl77c3] {
    color: #ffd000;
    filter: drop-shadow(0 0 8px #ffd000) drop-shadow(0 0 12px rgba(255, 208, 0, 0.5));
}

.sales-analytics-page .chart-container[b-v9fodl77c3] {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ba5bc;
}

.sales-analytics-page .chart-title[b-v9fodl77c3] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sales-analytics-page .chart-title i[b-v9fodl77c3] {
    font-size: 22px;
    opacity: 0.9;
}

/* Icon colors for chart titles */
.sales-analytics-page .icon-blue[b-v9fodl77c3] {
    color: #008cff;
}

.sales-analytics-page .icon-green[b-v9fodl77c3] {
    color: #00dc9a;
}

.sales-analytics-page .icon-cyan[b-v9fodl77c3] {
    color: #00d5ff;
}

.sales-analytics-page .icon-gold[b-v9fodl77c3] {
    color: #ffd000;
}

.sales-analytics-page .icon-purple[b-v9fodl77c3] {
    color: #9b59b6;
}

.sales-analytics-page .empty-state[b-v9fodl77c3] {
    text-align: center;
    padding: 40px 20px;
    color: white;
    opacity: 0.8;
}

.sales-analytics-page .empty-state-icon[b-v9fodl77c3] {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.4;
}

.sales-analytics-page .empty-state-icon i[b-v9fodl77c3] {
    font-size: 3rem;
}

.sales-analytics-page .data-table[b-v9fodl77c3] {
    width: 100%;
    color: white;
}

.sales-analytics-page .data-table .bi[b-v9fodl77c3] {
    flex-shrink: 0;
}

.sales-analytics-page .data-table th[b-v9fodl77c3] {
    color: white;
    font-weight: 500;
    font-size: 13px;
    padding: 10px;
    border-bottom: 1px solid #263153;
    opacity: 0.8;
}

.sales-analytics-page .data-table td[b-v9fodl77c3] {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(38, 49, 83, 0.3);
}

.sales-analytics-page .data-table tr:hover[b-v9fodl77c3] {
    background: rgba(255, 255, 255, 0.02);
}

/* Show roughly 10 rows before scrolling for long lists (Top Selling Photos, Event Performance) */
.sales-analytics-page .scrollable-table[b-v9fodl77c3] {
    max-height: 480px;
    overflow-y: auto;
}

.sales-analytics-page .scrollable-table .data-table thead th[b-v9fodl77c3] {
    position: sticky;
    top: 0;
    background: #0b1024;
    z-index: 1;
    opacity: 1;
}

/* Table column widths */
.sales-analytics-page .col-trend[b-v9fodl77c3] {
    width: 150px;
}

.sales-analytics-page .col-photo-name[b-v9fodl77c3] {
    max-width: 150px;
}

.sales-analytics-page .col-event-name[b-v9fodl77c3] {
    max-width: 120px;
}

/* Table icons */
.sales-analytics-page .table-icon[b-v9fodl77c3] {
    font-size: 18px;
}

.sales-analytics-page .table-icon.icon-cyan[b-v9fodl77c3] {
    color: #00d5ff;
}

.sales-analytics-page .table-icon.icon-gold[b-v9fodl77c3] {
    color: #ffd000;
}

/* Table text styles */
.sales-analytics-page .event-name-secondary[b-v9fodl77c3] {
    color: white;
    font-size: 13px;
    opacity: 0.8;
}

.sales-analytics-page .event-date-secondary[b-v9fodl77c3] {
    color: white;
    font-size: 12px;
    opacity: 0.7;
}

.sales-analytics-page .progress-bar-custom[b-v9fodl77c3] {
    height: 8px;
    background: rgba(38, 49, 83, 0.5);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.sales-analytics-page .progress-fill[b-v9fodl77c3] {
    height: 100%;
    background: linear-gradient(90deg, #008cff, #8b35ff);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.sales-analytics-page .progress-fill.blue-fill[b-v9fodl77c3] {
    background: #008cff;
}

.sales-analytics-page .progress-fill.green-fill[b-v9fodl77c3] {
    background: #00dc9a;
}

/* Revenue breakdown styles */
.sales-analytics-page .revenue-label[b-v9fodl77c3] {
    color: white;
    opacity: 0.8;
}

.sales-analytics-page .revenue-total-divider[b-v9fodl77c3] {
    border-top: 1px solid #263153;
    padding-top: 1rem;
}

.sales-analytics-page .insight-number[b-v9fodl77c3] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
}

.sales-analytics-page .insight-number.blue[b-v9fodl77c3] { 
    color: #008cff; 
}

.sales-analytics-page .insight-number.green[b-v9fodl77c3] { 
    color: #00dc9a; 
}

.sales-analytics-page .insight-number.cyan[b-v9fodl77c3] { 
    color: #00d5ff; 
}

.sales-analytics-page .insight-number.gold[b-v9fodl77c3] { 
    color: #ffd000; 
}

.sales-analytics-page .insight-label[b-v9fodl77c3] {
    color: white;
    font-size: 14px;
    opacity: 0.8;
}

.sales-analytics-page .insight-detail[b-v9fodl77c3] {
    color: white;
    font-size: 12px;
    margin-top: 4px;
    opacity: 0.7;
}

.sales-analytics-page .badge-custom[b-v9fodl77c3] {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.sales-analytics-page .badge-primary[b-v9fodl77c3] {
    background: rgba(0, 140, 255, 0.2);
    color: #008cff;
}

.sales-analytics-page .spinner-container[b-v9fodl77c3] {
    text-align: center;
    padding: 80px 20px;
    color: #9ba5bc;
}

.sales-analytics-page .spinner[b-v9fodl77c3] {
    border: 3px solid rgba(38, 49, 83, 0.3);
    border-top: 3px solid #008cff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin-b-v9fodl77c3 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin-b-v9fodl77c3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sales-analytics-page[b-v9fodl77c3] {
        padding: 20px;
    }

    .sales-analytics-page h1[b-v9fodl77c3] {
        font-size: 32px;
    }

    .sales-analytics-page .title-section[b-v9fodl77c3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* 575.98, matching Bootstrap's sm boundary rather than the 768 used above, so this only
   applies where the cards are actually a single column.

   All three tables sit in overflow-x: auto wrappers, which is the right call in principle —
   but at 375px the wrapper is 290px against a 328px table, and the column that fell off the
   right was Net Revenue. The one number the page exists to report was the one you had to
   swipe to find, on every row.

   table-layout: fixed pins the table to the wrapper. The money column is given a fixed width
   and never truncates; the photo and event names take what is left and ellipsis instead, both
   of which already carry the full text in a title attribute.

   Scoped to .scrollable-table, which is the two four-column tables. Daily Sales Trend has five
   columns in a plain .table-responsive, and the same fixed widths squeezed its Total Revenue
   down to "$215...". It keeps its horizontal scroll, where the money was already visible and
   only the decorative Trend bar fell off the edge. */
@media (max-width: 575.98px) {
    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .data-table {
        table-layout: fixed;
        width: 100%;
    }

    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .data-table th,
    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .data-table td {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 13px;
    }

    /* The row icon costs about 32px of a 290px table and says nothing the filename does not. */
    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .data-table .table-icon {
        display: none;
    }

    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .data-table th:last-child,
    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .data-table td:last-child {
        width: 4.6rem;
        text-align: right;
    }

    /* Values never wrap or clip; the heading above them may wrap onto two lines. */
    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .data-table td:last-child {
        white-space: nowrap;
        overflow: visible;
    }

    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .data-table th:nth-last-child(2),
    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .data-table td:nth-last-child(2) {
        width: 3rem;
    }

    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .data-table td:first-child,
    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .data-table td:nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sales-analytics-page[b-v9fodl77c3]  .scrollable-table .event-name-secondary {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* _content/Photo8/Components/Pages/StripeConnectKyc.razor.rz.scp.css */
/* Photo Infinity Stripe Connect KYC form styling — matches Payouts.razor.css */

[b-qy296r8qcq] :root {
    --pi-bg: #050816;
    --pi-panel: rgba(11, 16, 36, 0.85);
    --pi-line: rgba(255, 255, 255, 0.08);
    --pi-blue: #00b7ff;
    --pi-green: #2ecc71;
    --pi-cyan: #a3edfd;
    --pi-gold: #f2e562;
    --pi-purple: #8b35ff;
    --pi-pink: #ff36c9;
}

.kyc-container[b-qy296r8qcq] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.22), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 35px 50px;
}

.kyc-content[b-qy296r8qcq] {
    max-width: 760px;
    margin: 0 auto;
}

.page-title[b-qy296r8qcq] {
    font-size: 36px;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.page-title .gradient-text[b-qy296r8qcq] {
    background: linear-gradient(90deg, var(--pi-blue), var(--pi-purple), var(--pi-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-subtitle[b-qy296r8qcq] {
    color: #9ba5bc;
    font-size: 15px;
    margin-bottom: 30px;
}

.pi-alert[b-qy296r8qcq] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid var(--pi-line);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pi-alert.error[b-qy296r8qcq] {
    border-color: #ff4444;
    background: rgba(255, 68, 68, 0.12);
}

.pi-card[b-qy296r8qcq] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid var(--pi-line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    margin-bottom: 20px;
}

.chart-title[b-qy296r8qcq] {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.form-section[b-qy296r8qcq] {
    margin-bottom: 20px;
}

/* The date of birth is a fieldset so its three boxes share one accessible name, and a fieldset
   arrives with a browser default border, inset padding and a legend that floats inside that
   border — none of which belongs on these cards. Reset to render exactly like the plain
   .form-section div it replaced. min-width:0 matters too: a fieldset defaults to min-content
   width, which stops the grid row inside it from shrinking on a narrow screen. */
fieldset.form-section[b-qy296r8qcq] {
    border: 0;
    margin-inline: 0;
    padding: 0;
    min-width: 0;
}

legend.form-label[b-qy296r8qcq] {
    float: none;
    width: auto;
    padding: 0;
}

.form-row[b-qy296r8qcq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-row.three[b-qy296r8qcq] {
    grid-template-columns: 1fr 1fr 1fr;
}

.form-label[b-qy296r8qcq] {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: white;
}

.form-text[b-qy296r8qcq] {
    color: #9ba5bc;
    font-size: 13px;
    margin-top: 5px;
}

[b-qy296r8qcq] .form-control,
[b-qy296r8qcq] input[type="text"],
[b-qy296r8qcq] input[type="number"] {
    width: 100%;
    background-color: #070c1d !important;
    background: #070c1d !important;
    border: 1px solid #303b60 !important;
    border-radius: 12px;
    padding: 14px;
    color: white !important;
    font-size: 14px;
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px #070c1d inset !important;
}

[b-qy296r8qcq] .form-control:focus {
    background: #070c1d !important;
    background-color: #070c1d !important;
    border-color: var(--pi-purple) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139, 53, 255, 0.1) !important;
}

.ssn-input-wrap[b-qy296r8qcq] {
    position: relative;
}

.ssn-input-wrap[b-qy296r8qcq]  .form-control {
    padding-right: 44px;
}

.ssn-toggle[b-qy296r8qcq] {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #9ba5bc;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
}

.ssn-toggle:hover[b-qy296r8qcq] {
    color: white;
}

[b-qy296r8qcq] .validation-message {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

.pi-button[b-qy296r8qcq] {
    background: linear-gradient(90deg, var(--pi-purple), var(--pi-blue));
    border: 0;
    color: white;
    padding: 13px 25px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.pi-button:hover[b-qy296r8qcq] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.pi-button:disabled[b-qy296r8qcq] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .kyc-container[b-qy296r8qcq] {
        padding: 20px;
    }

    .form-row[b-qy296r8qcq],
    .form-row.three[b-qy296r8qcq] {
        grid-template-columns: 1fr;
    }
}
/* _content/Photo8/Components/Pages/Subscribe.razor.rz.scp.css */
/* Photo Infinity Subscribe Page Styling */

.subscribe-container[b-zvn3b91y64] {
    min-height: 100vh;
    padding: 40px 70px;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%), #050816;
    color: white;
}

.subscribe-header[b-zvn3b91y64] {
    text-align: center;
    margin-bottom: 40px;
}

.subscribe-title[b-zvn3b91y64] {
    font-size: 40px;
    margin: 0 0 20px 0;
    font-weight: 700;
}

.subscribe-title .gradient-text[b-zvn3b91y64] {
    background: linear-gradient(90deg, #008cff, #8b35ff, #ff35c8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Trial/Status Alert */
.status-alert[b-zvn3b91y64] {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 12px;
    margin-top: 15px;
    font-size: 15px;
}

.status-alert.trial[b-zvn3b91y64] {
    background: rgba(0, 140, 255, 0.15);
    color: #008cff;
}

.status-alert.active[b-zvn3b91y64] {
    background: rgba(0, 200, 123, 0.15);
    color: #00c77b;
}

.status-alert strong[b-zvn3b91y64] {
    color: white;
}

/* Error Message */
.error-message[b-zvn3b91y64] {
    background: rgba(255, 67, 54, 0.15);
    border: 1px solid rgba(255, 67, 54, 0.3);
    padding: 15px 20px;
    border-radius: 12px;
    color: #ff4336;
    text-align: center;
    margin-bottom: 30px;
}

/* Success Message */
.success-message[b-zvn3b91y64] {
    background: rgba(0, 200, 123, 0.15);
    border: 1px solid rgba(0, 200, 123, 0.3);
    padding: 15px 20px;
    border-radius: 12px;
    color: #00c77b;
    text-align: center;
    margin-bottom: 30px;
}

.success-message a[b-zvn3b91y64] {
    color: #00c77b;
    font-weight: 600;
    margin-left: 8px;
    text-decoration: underline;
}

/* Plans Layout
   minmax(320px, 400px) capped every column at 400px, so two of them needed 830px of content once
   the 30px gap was counted — about a 985px viewport allowing for this container's 70px side
   padding. Below that the grid fell to a single 400px column and the Yearly plan started below
   the fold, which is the wrong way to fail on the one screen whose whole job is comparing two
   prices. Note the band this broke in: a narrowed window or a small laptop, not a phone, since
   the media query at the bottom of this file already collapses to one column under 768px on
   purpose.

   1fr lets the two columns share whatever width is there instead of each insisting on 400px,
   which keeps them abreast down to that media query. max-width holds them near the original
   400px on a wide screen, which is what the fixed value was reaching for. */
.plans-grid[b-zvn3b91y64] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    justify-content: center;
    max-width: 860px;
    margin: 0 auto 40px;
}

/* Plan Card */
.plan-card[b-zvn3b91y64] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(38, 49, 83, 0.6);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}

.plan-card:hover[b-zvn3b91y64] {
    transform: translateY(-5px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
}

.plan-card.featured[b-zvn3b91y64] {
    border: 2px solid #ff9f43;
    position: relative;
}

/* Plan Header */
.plan-header[b-zvn3b91y64] {
    padding: 25px;
    text-align: center;
    position: relative;
}

.plan-header.monthly[b-zvn3b91y64] {
    background: linear-gradient(135deg, #008f55, #00c77b);
}

.plan-header.yearly[b-zvn3b91y64] {
    background: linear-gradient(135deg, #ff9f43, #ffa94d);
}

.plan-header h3[b-zvn3b91y64] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.badge-save[b-zvn3b91y64] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff4336;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

/* Plan Body */
.plan-body[b-zvn3b91y64] {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.plan-price[b-zvn3b91y64] {
    text-align: center;
    margin-bottom: 20px;
}

.plan-price .currency[b-zvn3b91y64] {
    font-size: 24px;
    font-weight: 600;
    color: #9ba5bc;
    vertical-align: top;
}

.plan-price .amount[b-zvn3b91y64] {
    font-size: 48px;
    font-weight: 700;
    color: white;
}

.plan-price .period[b-zvn3b91y64] {
    font-size: 18px;
    color: #9ba5bc;
}

.plan-description[b-zvn3b91y64] {
    text-align: center;
    color: #9ba5bc;
    margin-bottom: 25px;
    font-size: 14px;
}

/* Features List */
.features-list[b-zvn3b91y64] {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex: 1;
}

.features-list li[b-zvn3b91y64] {
    padding: 10px 0;
    color: #cbd2e5;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.features-list li i[b-zvn3b91y64] {
    color: #00c77b;
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Subscribe Button */
.subscribe-btn[b-zvn3b91y64] {
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s;
    width: 100%;
}

.subscribe-btn:hover:not(:disabled)[b-zvn3b91y64] {
    transform: translateY(-2px);
}

.subscribe-btn:disabled[b-zvn3b91y64] {
    opacity: 0.7;
    cursor: not-allowed;
}

.subscribe-btn.monthly[b-zvn3b91y64] {
    background: linear-gradient(90deg, #008f55, #00c77b);
}

.subscribe-btn.monthly:hover:not(:disabled)[b-zvn3b91y64] {
    box-shadow: 0 8px 25px rgba(0, 200, 123, 0.4);
}

.subscribe-btn.yearly[b-zvn3b91y64] {
    background: linear-gradient(90deg, #ff9f43, #ffa94d);
    color: #1a1a1a;
}

.subscribe-btn.yearly:hover:not(:disabled)[b-zvn3b91y64] {
    box-shadow: 0 8px 25px rgba(255, 159, 67, 0.4);
}

/* Pay From Balance Button */
.balance-btn[b-zvn3b91y64] {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    background: transparent;
    border: 1px solid rgba(0, 140, 255, 0.5);
    color: #008cff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    width: 100%;
}

.balance-btn:hover:not(:disabled)[b-zvn3b91y64] {
    background: rgba(0, 140, 255, 0.1);
    transform: translateY(-2px);
}

.balance-btn:disabled[b-zvn3b91y64] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Manage Subscription link.
   Takes the place of Subscribe in both cards when Stripe is already billing the photographer —
   see the note on HasLiveStripeSubscription in Subscribe.razor for why buying again is not
   offered there. An anchor, not a button, because it navigates. */
.manage-btn[b-zvn3b91y64] {
    display: block;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    background: rgba(0, 140, 255, 0.12);
    border: 1px solid rgba(0, 140, 255, 0.5);
    color: #008cff;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.manage-btn:hover[b-zvn3b91y64],
.manage-btn:focus-visible[b-zvn3b91y64] {
    background: rgba(0, 140, 255, 0.2);
    color: #6bb6ff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* The alert carries a link to My Subscription once there is a live subscription to manage. Left
   unstyled it inherited the alert's own green and lost its underline, reading as plain text. */
.status-alert a[b-zvn3b91y64] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Footer */
.subscribe-footer[b-zvn3b91y64] {
    text-align: center;
    color: #9ba5bc;
    font-size: 14px;
    margin-top: 20px;
}

.subscribe-footer i[b-zvn3b91y64] {
    color: #00c77b;
}

.back-link[b-zvn3b91y64] {
    display: inline-block;
    margin-top: 15px;
    color: #008cff;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.2s;
}

.back-link:hover[b-zvn3b91y64] {
    color: #6bb6ff;
    text-decoration: none;
}

/* Loading State */
.loading-state[b-zvn3b91y64] {
    text-align: center;
    padding: 80px 20px;
}

.loading-spinner[b-zvn3b91y64] {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(139, 53, 255, 0.2);
    border-top-color: #8b35ff;
    border-radius: 50%;
    animation: spin-b-zvn3b91y64 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin-b-zvn3b91y64 {
    to { transform: rotate(360deg); }
}

.loading-text[b-zvn3b91y64] {
    color: #9ba5bc;
    font-size: 16px;
}

/* Button Spinner */
.btn-spinner[b-zvn3b91y64] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-zvn3b91y64 0.8s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .subscribe-container[b-zvn3b91y64] {
        padding: 20px;
    }

    .subscribe-title[b-zvn3b91y64] {
        font-size: 32px;
    }

    .plans-grid[b-zvn3b91y64] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .plan-price .amount[b-zvn3b91y64] {
        font-size: 40px;
    }
}
/* _content/Photo8/Components/Pages/SubscribeSuccess.razor.rz.scp.css */
/* Subscribe Success Page - Photo Infinity Theme */

/* Page Wrapper */
.pi-subscribe-success-page[b-3z868xxnl8] {
    background: radial-gradient(circle at 50% 0%, #1a0033 0%, #0a0015 50%, #000000 100%);
    min-height: 100vh;
    padding-bottom: 2rem;
    color: #e0e0e0;
}

.success-wrapper[b-3z868xxnl8] {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px 0;
}

/* Loading / Pending State */
.loading-state[b-3z868xxnl8] {
    text-align: center;
    padding: 4rem 1rem;
}

.pi-spinner[b-3z868xxnl8] {
    color: #667eea;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
}

.loading-text[b-3z868xxnl8] {
    font-size: 1.1rem;
    color: #b0b0b0;
    max-width: 480px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

/* Success / Error Content */
.success-content[b-3z868xxnl8], .error-content[b-3z868xxnl8] {
    text-align: center;
}

.success-icon[b-3z868xxnl8] {
    font-size: 6rem;
    color: #22c55e;
    filter: drop-shadow(0 0 25px rgba(34, 197, 94, 0.7));
    margin-bottom: 1.5rem;
    animation: scaleIn-b-3z868xxnl8 0.5s ease-out;
}

.error-icon[b-3z868xxnl8] {
    font-size: 6rem;
    color: #f59e0b;
    filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.6));
    margin-bottom: 1.5rem;
    animation: scaleIn-b-3z868xxnl8 0.5s ease-out;
}

.success-title[b-3z868xxnl8], .error-title[b-3z868xxnl8] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card */
.pi-card[b-3z868xxnl8] {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    margin-top: 2rem;
    animation: slideUp-b-3z868xxnl8 0.6s ease-out;
}

.success-message[b-3z868xxnl8] {
    font-size: 1.25rem;
    color: #e0e0e0;
    margin-bottom: 1.5rem;
}

.gradient-text[b-3z868xxnl8] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.expiry-info[b-3z868xxnl8] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    color: #e0e0e0;
    margin: 1.5rem 0;
}

.expiry-info i[b-3z868xxnl8] {
    font-size: 1.5rem;
    color: #a78bfa;
}

/* Sits under the renewal date, and only when there is a recurring charge to disclose. */
.renewal-note[b-3z868xxnl8] {
    color: #9ba5bc;
    font-size: 0.9rem;
    max-width: 34rem;
    margin: -0.5rem auto 0;
    line-height: 1.5;
}

.renewal-note a[b-3z868xxnl8] {
    color: #a78bfa;
}

.next-steps[b-3z868xxnl8] {
    margin: 2.5rem 0;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 15px;
}

.next-steps h3[b-3z868xxnl8] {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.benefits-list[b-3z868xxnl8] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    text-align: left;
}

.benefits-list li[b-3z868xxnl8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.05rem;
    color: #e0e0e0;
    padding: 0.75rem;
    background: rgba(30, 30, 60, 0.6);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.benefits-list li:hover[b-3z868xxnl8] {
    transform: translateX(5px);
    border-color: rgba(138, 43, 226, 0.4);
}

.benefits-list i[b-3z868xxnl8] {
    font-size: 1.3rem;
    color: #a78bfa;
}

/* Buttons */
.pi-button[b-3z868xxnl8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.pi-button:hover:not(:disabled)[b-3z868xxnl8] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.5);
    color: white;
}

.pi-button:disabled[b-3z868xxnl8] {
    opacity: 0.7;
    cursor: not-allowed;
}

.pi-button-outline[b-3z868xxnl8] {
    background: transparent;
    border: 2px solid rgba(102, 126, 234, 0.5);
    color: #a5b4fc;
}

.pi-button-outline:hover[b-3z868xxnl8] {
    background: rgba(102, 126, 234, 0.15);
    border-color: #667eea;
    color: #c7d2fe;
}

.btn-dashboard[b-3z868xxnl8] {
    margin-top: 2rem;
    padding: 1rem 3rem;
    font-size: 1.1rem;
}

/* Error State */
.error-message[b-3z868xxnl8] {
    font-size: 1.1rem;
    color: #b0b0b0;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.error-actions[b-3z868xxnl8] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes scaleIn-b-3z868xxnl8 {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slideUp-b-3z868xxnl8 {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .success-title[b-3z868xxnl8], .error-title[b-3z868xxnl8] {
        font-size: 2rem;
    }

    .pi-card[b-3z868xxnl8] {
        padding: 2rem 1.5rem;
    }

    .benefits-list[b-3z868xxnl8] {
        grid-template-columns: 1fr;
    }

    .error-actions[b-3z868xxnl8] {
        flex-direction: column;
    }

    .error-actions .pi-button[b-3z868xxnl8] {
        width: 100%;
    }
}
/* _content/Photo8/Components/Pages/TagPhotos.razor.rz.scp.css */
/* ===========================
   Photo Infinity — Tag Photos Page
   =========================== */

/* Page Wrapper */
.pi-tag-photos-page[b-244ypeegbs] {
    min-height: 100vh;
    background: radial-gradient(circle at top right, #1a1a2e 0%, #0f0f1e 50%, #000000 100%);
    padding: 2rem 0;
    color: #e0e0e0;
}

/* Breadcrumb */
.pi-tag-photos-page[b-244ypeegbs]  .breadcrumb {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.pi-tag-photos-page[b-244ypeegbs]  .breadcrumb-item + .breadcrumb-item::before {
    color: #888;
}

.pi-tag-photos-page[b-244ypeegbs]  .breadcrumb-item a {
    color: #4fc3f7;
    text-decoration: none;
    transition: color 0.2s;
}

.pi-tag-photos-page[b-244ypeegbs]  .breadcrumb-item a:hover {
    color: #81d4fa;
}

.pi-tag-photos-page[b-244ypeegbs]  .breadcrumb-item.active {
    color: #aaa;
}

/* Main Card */
.pi-tag-photos-page .pi-card[b-244ypeegbs] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

/* Card Header */
.pi-tag-photos-page .pi-card .card-header[b-244ypeegbs] {
    background: rgba(33, 150, 243, 0.15);
    border-bottom: 1px solid rgba(33, 150, 243, 0.3);
    padding: 1.5rem;
}

.pi-tag-photos-page .pi-card .card-header h3[b-244ypeegbs] {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
}

.pi-tag-photos-page .gradient-text[b-244ypeegbs] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pi-tag-photos-page .photo-counter[b-244ypeegbs] {
    background: rgba(255, 255, 255, 0.15);
    color: #90caf9;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    border: 1px solid rgba(144, 202, 249, 0.3);
}

/* Card Body */
.pi-tag-photos-page .pi-card .card-body[b-244ypeegbs] {
    background: rgba(255, 255, 255, 0.02);
    padding: 2rem;
}

/* Loading State */
.pi-tag-photos-page[b-244ypeegbs]  .spinner-border.text-info {
    border-color: rgba(33, 150, 243, 0.2);
    border-right-color: #2196f3;
}

/* Alerts */
.pi-tag-photos-page[b-244ypeegbs]  .alert-danger {
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #ffcdd2;
}

.pi-tag-photos-page[b-244ypeegbs]  .alert-danger h4 {
    color: #ff5252;
}

/* Empty State */
.pi-tag-photos-page[b-244ypeegbs]  .text-center.py-5 {
    color: #e0e0e0;
}

.pi-tag-photos-page[b-244ypeegbs]  .text-center.py-5 .bi-check2-circle {
    color: #4caf50 !important;
}

.pi-tag-photos-page[b-244ypeegbs]  .text-center.py-5 h4 {
    color: #fff;
}

.pi-tag-photos-page[b-244ypeegbs]  .text-center.py-5 p {
    color: #bbb;
}

/* Filter Toggle */
.pi-tag-photos-page[b-244ypeegbs]  .form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.pi-tag-photos-page[b-244ypeegbs]  .form-check-input:checked {
    background-color: #2196f3;
    border-color: #2196f3;
}

.pi-tag-photos-page[b-244ypeegbs]  .form-check-label {
    color: #e0e0e0;
}

/* Progress Bar */
.pi-tag-photos-page[b-244ypeegbs]  .progress {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.pi-tag-photos-page[b-244ypeegbs]  .progress-bar.bg-info {
    background: linear-gradient(90deg, #2196f3 0%, #64b5f6 100%) !important;
}

/* Photo Preview */
.pi-tag-photos-page[b-244ypeegbs]  img.img-fluid {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pi-tag-photos-page[b-244ypeegbs]  .text-muted {
    color: #aaa !important;
}

.pi-tag-photos-page[b-244ypeegbs]  .text-muted a {
    color: #64b5f6;
    text-decoration: none;
}

.pi-tag-photos-page[b-244ypeegbs]  .text-muted a:hover {
    color: #90caf9;
}

/* Form Controls */
.pi-tag-photos-page[b-244ypeegbs]  .form-label {
    color: #e0e0e0;
    font-weight: 600;
}

.pi-tag-photos-page[b-244ypeegbs]  .form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
    border-radius: 8px;
}

.pi-tag-photos-page[b-244ypeegbs]  .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #2196f3;
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

.pi-tag-photos-page[b-244ypeegbs]  .form-control::placeholder {
    color: #888;
}

.pi-tag-photos-page[b-244ypeegbs]  .form-text {
    color: #999;
}

.pi-tag-photos-page[b-244ypeegbs]  kbd {
    background: rgba(255, 255, 255, 0.15);
    color: #90caf9;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

/* Buttons */
.pi-tag-photos-page[b-244ypeegbs]  .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #fff;
    font-weight: 600;
}

.pi-tag-photos-page[b-244ypeegbs]  .btn-primary:hover {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    transform: translateY(-2px);
}

.pi-tag-photos-page[b-244ypeegbs]  .btn-info {
    background: #2196f3;
    border: none;
    color: #fff;
    font-weight: 600;
}

.pi-tag-photos-page[b-244ypeegbs]  .btn-info:hover {
    background: #1976d2;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
}

.pi-tag-photos-page[b-244ypeegbs]  .btn-outline-info {
    background: transparent;
    border: 1px solid #2196f3;
    color: #2196f3;
}

.pi-tag-photos-page[b-244ypeegbs]  .btn-outline-info:hover {
    background: #2196f3;
    color: #fff;
}

.pi-tag-photos-page[b-244ypeegbs]  .btn-outline-secondary {
    background: transparent;
    border: 1px solid #6c757d;
    color: #adb5bd;
}

.pi-tag-photos-page[b-244ypeegbs]  .btn-outline-secondary:hover {
    background: #6c757d;
    color: #fff;
}

.pi-tag-photos-page[b-244ypeegbs]  .btn-success {
    background: #4caf50;
    border: none;
    color: #fff;
    font-weight: 600;
}

.pi-tag-photos-page[b-244ypeegbs]  .btn-success:hover {
    background: #45a049;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}

/* Badges */
.pi-tag-photos-page[b-244ypeegbs]  .badge.bg-warning {
    background: #ffc107 !important;
    color: #000 !important;
}

.pi-tag-photos-page[b-244ypeegbs]  .badge.bg-info {
    background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%) !important;
    color: #fff !important;
    border: none;
}

.pi-tag-photos-page[b-244ypeegbs]  .badge .btn-close-white {
    filter: brightness(1.5);
    opacity: 0.8;
}

.pi-tag-photos-page[b-244ypeegbs]  .badge .btn-close-white:hover {
    opacity: 1;
}

/* Card Footer */
.pi-tag-photos-page .pi-card .card-footer[b-244ypeegbs] {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
}

.pi-tag-photos-page .pi-card .card-footer small[b-244ypeegbs] {
    color: #aaa;
}

/* Spinner */
.pi-tag-photos-page[b-244ypeegbs]  .spinner-border {
    border-color: rgba(255, 255, 255, 0.2);
    border-right-color: #2196f3;
}

/* Recently Used Tags - Button States */
.pi-tag-photos-page[b-244ypeegbs]  .btn-sm.btn-info {
    background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%);
    border: none;
}

.pi-tag-photos-page[b-244ypeegbs]  .btn-sm.btn-outline-info {
    background: transparent;
    border: 1px solid #2196f3;
}

/* Text Colors */
.pi-tag-photos-page[b-244ypeegbs]  .text-success {
    color: #4caf50 !important;
}

.pi-tag-photos-page[b-244ypeegbs]  .fst-italic {
    color: #888;
}

.pi-tag-photos-page[b-244ypeegbs]  strong {
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .pi-tag-photos-page .pi-card .card-header h3[b-244ypeegbs] {
        font-size: 1.5rem;
    }

    .pi-tag-photos-page .photo-counter[b-244ypeegbs] {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
    }

}

/* 767.98, not 768: Bootstrap turns col-md-* into columns at min-width 768px, so a
   max-width: 768px rule would overlap it by a pixel and stack them where Bootstrap has
   already put them side by side.

   The photo and the tag panel share a .row, which is a wrapping flex container. Once the
   columns stack, the photo column's flex line sizes to the image and the caption beneath it
   spills 50px past the column's own box — so "Add Tags" from the next column rendered
   straight over the filename. Laying the row out as plain blocks gives each column its
   content height back. It already overflowed by 29px before the sub-event name went into
   the caption; that change only made it obvious. */
@media (max-width: 767.98px) {
    .pi-tag-photos-page[b-244ypeegbs]  .card-body > .row {
        display: block;
    }
}
/* _content/Photo8/Components/Pages/TrialWelcome.razor.rz.scp.css */
/* The page a photographer lands on the moment they finish registering. It was plain Bootstrap on
   the browser's white, under the app's dark photographer nav, so the first thing a new account
   saw looked like a different product from everything after it.

   These override the Bootstrap classes already in the markup rather than replacing them, the same
   approach Events.razor.css takes. */

.pi-trial-page[b-urnp25doz5] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: #e6ebf7;
    padding: 3rem 0;
}

.pi-trial-page h1[b-urnp25doz5] {
    color: #ffffff !important;
}

.pi-trial-page .lead[b-urnp25doz5] {
    color: #cbd2e5 !important;
}

/* Cards */
.pi-trial-page .card[b-urnp25doz5] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.pi-trial-page .card-header[b-urnp25doz5] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pi-trial-page .card-header.bg-success[b-urnp25doz5] {
    background: linear-gradient(90deg, #1a7f5a, #0f5f6b) !important;
    color: #ffffff;
}

.pi-trial-page .card-footer[b-urnp25doz5] {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #9ba5bc !important;
}

.pi-trial-page .card-body[b-urnp25doz5] {
    color: #cbd2e5;
}

/* The circular gift badge above the heading */
.pi-trial-page .bg-success.rounded-circle[b-urnp25doz5] {
    background: linear-gradient(135deg, #1a7f5a, #0f5f6b) !important;
}

/* Headings inside the card */
.pi-trial-page .text-success[b-urnp25doz5] {
    color: #5fe3b0 !important;
}

.pi-trial-page .text-info[b-urnp25doz5] {
    color: #64b5f6 !important;
}

.pi-trial-page .text-primary[b-urnp25doz5] {
    color: #8ab4ff !important;
}

.pi-trial-page .text-muted[b-urnp25doz5] {
    color: #9ba5bc !important;
}

.pi-trial-page li[b-urnp25doz5] {
    color: #cbd2e5;
}

/* Alerts */
.pi-trial-page .alert-info[b-urnp25doz5] {
    background: rgba(33, 150, 243, 0.12);
    border: 1px solid rgba(33, 150, 243, 0.35);
    color: #cfe4ff;
}

.pi-trial-page .alert-info h6[b-urnp25doz5] {
    color: #64b5f6;
}

.pi-trial-page .alert-warning[b-urnp25doz5] {
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.35);
    color: #ffe6a3;
}

.pi-trial-page .alert-warning h6[b-urnp25doz5] {
    color: #ffc107;
}

/* "Get Started Now" panel — bg-light is white by default, which was the brightest thing on the
   page and sat in the middle of it. */
.pi-trial-page .bg-light[b-urnp25doz5] {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pi-trial-page .bg-light h6[b-urnp25doz5] {
    color: #ffffff;
}

.pi-trial-page .bg-primary.rounded-circle[b-urnp25doz5] {
    background: linear-gradient(135deg, #8b35ff, #00b7ff) !important;
}

/* Buttons */
.pi-trial-page .btn-success[b-urnp25doz5] {
    background: linear-gradient(90deg, #1a9d6e, #0f7f8f);
    border: none;
    color: #ffffff;
    font-weight: 700;
}

.pi-trial-page .btn-success:hover[b-urnp25doz5] {
    opacity: 0.92;
    color: #ffffff;
}

.pi-trial-page .btn-outline-primary[b-urnp25doz5] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #cbd2e5;
    font-weight: 600;
}

.pi-trial-page .btn-outline-primary:hover[b-urnp25doz5] {
    border-color: rgba(0, 183, 255, 0.6);
    background: rgba(0, 183, 255, 0.08);
    color: #ffffff;
}

.pi-trial-page .btn:focus-visible[b-urnp25doz5] {
    outline: 2px solid #00b7ff;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .pi-trial-page[b-urnp25doz5] {
        padding: 1.5rem 0;
    }

    /* p-5 on the card body is 3rem a side, which leaves very little room for the two columns
       inside it at this width. */
    .pi-trial-page .card-body.p-5[b-urnp25doz5] {
        padding: 1.5rem !important;
    }

    /* Side by side these run off the card; stacked they get a full-width tap target each. */
    .pi-trial-page .btn-lg[b-urnp25doz5] {
        display: block;
        width: 100%;
        margin: 0 0 0.75rem 0 !important;
    }
}
/* _content/Photo8/Components/Pages/UploadPhotos.razor.rz.scp.css */
/* Photo Infinity Upload Photos styling — the page previously rendered as a bare white
   Bootstrap card on the dark app background. Matches the Create Event page. */

.pi-upload-page[b-ullt3hyifw] {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, 0.2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, 0.15), transparent 35%),
                #050816;
    color: white;
    padding: 35px 0 60px;
}

.pi-upload-page .container[b-ullt3hyifw] {
    max-width: 820px;
    color: white;
}

.page-title[b-ullt3hyifw] {
    font-size: 42px;
    margin: 0 0 10px;
    font-weight: 400;
}

.page-title .gradient-text[b-ullt3hyifw] {
    background: linear-gradient(90deg, #00b7ff, #8b35ff, #ff36c9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.page-subtitle[b-ullt3hyifw] {
    color: #9ba5bc;
    margin-bottom: 30px;
}

.pi-card[b-ullt3hyifw] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 26px;
    margin-bottom: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pi-card h2[b-ullt3hyifw] {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 18px;
    color: white;
}

.pi-card label[b-ullt3hyifw] {
    display: block;
    margin: 0 0 8px;
    color: #ddd;
    font-size: 15px;
}

/* ::deep because InputSelect/InputText render their own elements. */
[b-ullt3hyifw] .pi-card .form-control,
[b-ullt3hyifw] .pi-card .form-select {
    width: 100%;
    padding: 13px 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #080d18;
    color: white;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[b-ullt3hyifw] .pi-card .form-control::placeholder {
    color: #6b7689;
}

[b-ullt3hyifw] .pi-card .form-control:focus,
[b-ullt3hyifw] .pi-card .form-select:focus {
    outline: none;
    border-color: rgba(0, 183, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 183, 255, 0.12);
    background: #080d18;
    color: white;
}

/* The dropdown list itself is drawn by the OS, so its options need explicit colours or they
   render as dark-on-dark on some platforms. */
[b-ullt3hyifw] .pi-card .form-select option {
    background: #080d18;
    color: white;
}

/* Event picker sits beside its "new event" shortcut, stacking on narrow screens. */
.pi-event-row[b-ullt3hyifw] {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.pi-event-row > :first-child[b-ullt3hyifw] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Needs to outrank ".pi-card label { display: block }" above, which otherwise stacks the
   box above its own text. */
.pi-card label.pi-check[b-ullt3hyifw] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
    cursor: pointer;
}

[b-ullt3hyifw] .pi-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #00b7ff;
    cursor: pointer;
}

.pi-check span[b-ullt3hyifw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pi-check strong[b-ullt3hyifw] {
    color: white;
    font-weight: 600;
}

.pi-check small[b-ullt3hyifw] {
    color: #9ba5bc;
}

.pi-help[b-ullt3hyifw] {
    color: #9ba5bc;
    font-size: 13px;
    margin-top: 8px;
}

.pi-actions[b-ullt3hyifw] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
}

.pi-btn-primary[b-ullt3hyifw],
.pi-btn-secondary[b-ullt3hyifw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.pi-btn-primary[b-ullt3hyifw] {
    background: linear-gradient(90deg, #8b35ff, #00b7ff);
    color: white;
}

.pi-btn-primary:hover:not(:disabled)[b-ullt3hyifw] {
    opacity: 0.9;
    transform: translateY(-1px);
    color: white;
}

.pi-btn-primary:disabled[b-ullt3hyifw] {
    opacity: 0.45;
    cursor: not-allowed;
}

.pi-btn-secondary[b-ullt3hyifw] {
    background: rgba(11, 16, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd2e5;
}

.pi-btn-secondary:hover[b-ullt3hyifw] {
    border-color: rgba(0, 183, 255, 0.5);
    color: white;
}

/* Loading, no-events and subscription-required states */
.pi-upload-state[b-ullt3hyifw],
.pi-upload-notice[b-ullt3hyifw] {
    text-align: center;
    padding: 45px 26px;
}

.pi-upload-state p[b-ullt3hyifw],
.pi-upload-notice p[b-ullt3hyifw] {
    color: #9ba5bc;
    margin: 10px 0 20px;
}

.pi-upload-state-icon[b-ullt3hyifw] {
    font-size: 42px;
    color: #443fa4;
    display: block;
    margin-bottom: 12px;
}

.pi-upload-notice[b-ullt3hyifw] {
    border-color: rgba(242, 229, 98, 0.5);
}

.pi-upload-notice h2 i[b-ullt3hyifw] {
    color: #f2e562;
    margin-right: 6px;
}

@media (max-width: 575.98px) {
    .page-title[b-ullt3hyifw] {
        font-size: 32px;
    }

    .pi-upload-page[b-ullt3hyifw] {
        padding: 25px 0 40px;
    }

    .pi-card[b-ullt3hyifw] {
        padding: 20px;
    }

    /* The picker and its shortcut cannot share a row at this width without squeezing the
       event names down to a few characters. */
    .pi-event-row[b-ullt3hyifw] {
        flex-direction: column;
    }

    .pi-actions[b-ullt3hyifw] {
        flex-direction: column-reverse;
    }

    .pi-actions .pi-btn-primary[b-ullt3hyifw],
    .pi-actions .pi-btn-secondary[b-ullt3hyifw] {
        width: 100%;
    }
}
/* _content/Photo8/Components/Pages/WatermarkSettings.razor.rz.scp.css */
/* Photo Infinity Design System - Watermark Settings */

/* Declared on the page container, not on :root. This is a scoped stylesheet, so Blazor rewrites
   every selector to carry the component's b-xxxxx attribute — ":root" became ":root[b-xxxxx]",
   which matches nothing, because <html> is not part of this component. None of these variables
   were ever defined, and each var() below silently fell back: the save button and radio accents
   lost their colour, and .gradient-text kept its "color: transparent" while losing the gradient
   that was supposed to show through it, so the word "Settings" in the heading rendered invisible. */

/* Page Container */
.watermark-container[b-m2zgk0bnht] {
    --bg: #050816;
    --panel: #0b1024;
    --line: #263153;
    --blue: #008cff;
    --purple: #8b35ff;
    --pink: #ff35c8;
    --green: #00dc9a;
    margin: 0;
    color: #fff;
    min-height: 100vh;
    background: radial-gradient(circle at 80% 0%, rgba(139, 53, 255, .2), transparent 35%),
                radial-gradient(circle at 15% 40%, rgba(0, 140, 255, .15), transparent 35%),
                #050816;
    padding: 0;
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
}

/* Top Header Section */
.top-section[b-m2zgk0bnht] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 32px 45px 0 45px;
}

.page-title[b-m2zgk0bnht] {
    font-size: 40px;
    margin: 0;
}

.gradient-text[b-m2zgk0bnht] {
    background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.subtitle[b-m2zgk0bnht] {
    color: #9ba5bc;
    margin-top: 8px;
}

.save-btn[b-m2zgk0bnht] {
    background: linear-gradient(90deg, var(--purple), var(--blue));
    border: 0;
    color: white;
    padding: 13px 25px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.save-btn:hover[b-m2zgk0bnht] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 53, 255, 0.4);
}

.save-btn:disabled[b-m2zgk0bnht] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Grid Layout */
.grid-layout[b-m2zgk0bnht] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 22px;
    padding: 0 45px 45px 45px;
}

/* Card Styles */
.infinity-card[b-m2zgk0bnht] {
    background: rgba(11, 16, 36, .85);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
    backdrop-filter: blur(10px);
}

.infinity-card h2[b-m2zgk0bnht] {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Notice/Alert Box */
.notice-box[b-m2zgk0bnht] {
    background: rgba(0, 140, 255, .12);
    border: 1px solid #006cff;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.notice-box b[b-m2zgk0bnht] {
    display: block;
    margin-bottom: 8px;
}

/* Switch/Toggle Section */
.switch-section[b-m2zgk0bnht] {
    padding: 0;
    border: none;
    border-radius: 14px;
    margin: 15px 0;
}

.switch-section b[b-m2zgk0bnht] {
    font-size: 16px;
}

.switch-section small[b-m2zgk0bnht] {
    color: #9ba5bc;
    display: block;
    margin-top: 4px;
}

/* Custom Toggle Switch */
.toggle-wrapper[b-m2zgk0bnht] {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.infinity-toggle-radio[b-m2zgk0bnht] {
    width: 24px;
    height: 24px;
    border: 2px solid #303a5b;
    border-radius: 50%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    transition: all 0.3s;
    position: relative;
    background: #070c1d;
}

.infinity-toggle-radio:checked[b-m2zgk0bnht] {
    border-color: var(--purple);
    background: var(--purple);
    box-shadow: 0 0 8px rgba(139, 53, 255, 0.6);
}

.infinity-toggle-radio:checked[b-m2zgk0bnht]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.infinity-toggle-radio:hover[b-m2zgk0bnht] {
    border-color: var(--purple);
}

.toggle-switch[b-m2zgk0bnht] {
    width: 24px;
    height: 24px;
    border: 2px solid #303a5b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s;
    flex-shrink: 0;
}

.toggle-circle[b-m2zgk0bnht] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.3s;
}

.toggle-circle.active[b-m2zgk0bnht] {
    background: linear-gradient(135deg, var(--purple), var(--blue));
}

.toggle-wrapper label[b-m2zgk0bnht] {
    cursor: pointer;
    flex: 1;
}

/* Form Elements */
.form-section[b-m2zgk0bnht] {
    margin-bottom: 24px;
}

.form-section h3[b-m2zgk0bnht] {
    color: #fff;
    font-size: 18px;
    margin-bottom: 12px;
}

.form-label[b-m2zgk0bnht] {
    display: block;
    color: #c4ccdd;
    margin: 16px 0 8px;
    font-weight: 500;
}

/* Bootstrap's .form-text is #6c757d, near-unreadable on this panel. */
.form-text[b-m2zgk0bnht] {
    color: #9ba5bc;
    font-size: .85rem;
    margin-top: 6px;
}

.infinity-input[b-m2zgk0bnht] {
    width: 100%;
    background: #070c1d;
    border: 1px solid #303a5b;
    border-radius: 12px;
    padding: 14px;
    color: white;
    font-size: 14px;
    transition: border-color 0.2s;
}

.infinity-input:focus[b-m2zgk0bnht] {
    outline: none;
    border-color: var(--purple);
}

.infinity-input[b-m2zgk0bnht]::placeholder {
    color: #6b7280;
}

/* File Input */
.infinity-file-input[b-m2zgk0bnht] {
    width: 100%;
    background: #070c1d;
    border: 1px solid #303a5b;
    border-radius: 12px;
    padding: 14px;
    color: white;
    cursor: pointer;
}

.infinity-file-input[b-m2zgk0bnht]::file-selector-button {
    background: var(--purple);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    margin-right: 12px;
    cursor: pointer;
}

/* Radio Buttons */
.radio-group[b-m2zgk0bnht] {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    flex-wrap: wrap;
    gap: 12px;
}

.radio-option[b-m2zgk0bnht] {
    flex: 1;
    min-width: 120px;
}

.radio-option label[b-m2zgk0bnht] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c4ccdd;
    cursor: pointer;
}

.radio-option input[type="radio"][b-m2zgk0bnht] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #303a5b;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
    background: #070c1d;
}

.radio-option input[type="radio"]:checked[b-m2zgk0bnht] {
    border-color: var(--purple);
    background: var(--purple);
    box-shadow: 0 0 8px rgba(139, 53, 255, 0.6);
}

.radio-option input[type="radio"]:checked[b-m2zgk0bnht]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.radio-option input[type="radio"]:hover[b-m2zgk0bnht] {
    border-color: var(--purple);
}

/* Position Grid */
.position-grid[b-m2zgk0bnht] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0;
}

.position-option[b-m2zgk0bnht] {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.position-option label[b-m2zgk0bnht] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #c4ccdd;
    flex: 1;
}

.position-option input[type="radio"][b-m2zgk0bnht] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #303a5b;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
    background: #070c1d;
}

.position-option input[type="radio"]:checked[b-m2zgk0bnht] {
    border-color: var(--purple);
    background: var(--purple);
    box-shadow: 0 0 8px rgba(139, 53, 255, 0.6);
}

.position-option input[type="radio"]:checked[b-m2zgk0bnht]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.position-option input[type="radio"]:hover[b-m2zgk0bnht] {
    border-color: var(--purple);
}

.infinity-radio[b-m2zgk0bnht] {
    accent-color: var(--purple);
}

/* Range Slider */
.infinity-range[b-m2zgk0bnht] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

/* Webkit (Chrome, Safari, Edge) */
.infinity-range[b-m2zgk0bnht]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #303a5b;
}

.infinity-range[b-m2zgk0bnht]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 0 0 3px var(--purple), 0 2px 12px rgba(139, 53, 255, 0.8);
    margin-top: -8px;
    border: none;
}

.infinity-range[b-m2zgk0bnht]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 3px var(--purple), 0 4px 16px rgba(139, 53, 255, 1);
    transform: scale(1.1);
}

/* Firefox */
.infinity-range[b-m2zgk0bnht]::-moz-range-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #303a5b;
    border: none;
}

.infinity-range[b-m2zgk0bnht]::-moz-range-progress {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--purple), var(--blue));
}

.infinity-range[b-m2zgk0bnht]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: 3px solid var(--purple);
    box-shadow: 0 2px 12px rgba(139, 53, 255, 0.8);
}

.infinity-range[b-m2zgk0bnht]::-moz-range-thumb:hover {
    box-shadow: 0 4px 16px rgba(139, 53, 255, 1);
}

/* For Webkit browsers, we'll use a JavaScript-free CSS approach with custom styling */
#watermarkSize[b-m2zgk0bnht] {
    background: linear-gradient(to right, 
        var(--purple) 0%, 
        var(--blue) 50%, 
        #303a5b 50%, 
        #303a5b 100%);
}

#watermarkOpacity[b-m2zgk0bnht] {
    background: linear-gradient(to right, 
        var(--purple) 0%, 
        var(--blue) 50%, 
        #303a5b 50%, 
        #303a5b 100%);
}

.range-labels[b-m2zgk0bnht] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
}

/* Preview Section */
.preview-card[b-m2zgk0bnht] {
    margin-bottom: 22px;
}

/* The whole sample, not a slice of it. This was a fixed 260px box with object-fit: cover, so a
   900x1350 sample showed one 260px band of its bottom edge — and the page then set
   object-position from the watermark position on top, panning that band around. The mark is
   already drawn in the right place by the server, so there is nothing to pan: the job here is to
   show the entire picture, which is the only way to judge how the watermark sits on it. */
.preview-card img[b-m2zgk0bnht] {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    border-radius: 15px;
    display: block;
    background: #0a0f1e;
}

.preview-placeholder[b-m2zgk0bnht] {
    width: 100%;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #070c1d;
    border-radius: 15px;
    color: #6b7280;
    flex-direction: column;
}

.preview-placeholder i[b-m2zgk0bnht] {
    font-size: 3rem;
    margin-bottom: 12px;
}

.card-footer[b-m2zgk0bnht] {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: #9ba5bc;
}

/* Tips Section */
.tip-item[b-m2zgk0bnht] {
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    color: #c4ccdd;
    font-size: 14px;
}

.tip-item:last-child[b-m2zgk0bnht] {
    border-bottom: none;
}

/* Status Box */
.status-box[b-m2zgk0bnht] {
    margin-top: 20px;
    padding: 18px;
    border-radius: 14px;
}

.status-box.success[b-m2zgk0bnht] {
    background: rgba(0, 220, 154, .12);
    border: 1px solid rgba(0, 220, 154, .4);
    color: var(--green);
}

.status-box.warning[b-m2zgk0bnht] {
    background: rgba(255, 193, 7, .12);
    border: 1px solid rgba(255, 193, 7, .4);
    color: #ffc107;
}

.status-box b[b-m2zgk0bnht] {
    display: block;
    margin-bottom: 4px;
}

/* Protection Level Bar */
.protection-level[b-m2zgk0bnht] {
    margin: 20px 0;
}

.protection-bar[b-m2zgk0bnht] {
    width: 100%;
    height: 8px;
    background: #303a5b;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.protection-fill[b-m2zgk0bnht] {
    height: 100%;
    transition: width 0.3s ease;
}

.protection-fill.success[b-m2zgk0bnht] {
    background: var(--green);
}

.protection-fill.warning[b-m2zgk0bnht] {
    background: #ffc107;
}

.protection-fill.danger[b-m2zgk0bnht] {
    background: #ff4444;
}

.protection-desc[b-m2zgk0bnht] {
    font-size: 13px;
    color: #9ba5bc;
}

/* Checkbox Styling */
.infinity-checkbox[b-m2zgk0bnht] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.infinity-checkbox input[type="checkbox"][b-m2zgk0bnht] {
    width: 20px;
    height: 20px;
    accent-color: var(--purple);
    cursor: pointer;
}

.infinity-checkbox label[b-m2zgk0bnht] {
    color: #c4ccdd;
    cursor: pointer;
    font-weight: 500;
}

/* Watermark Image Preview */
.watermark-image-preview[b-m2zgk0bnht] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: #070c1d;
    border: 1px solid #303a5b;
    border-radius: 12px;
    margin-top: 8px;
}

.watermark-image-preview img[b-m2zgk0bnht] {
    max-width: 100px;
    max-height: 100px;
    border-radius: 8px;
}

.remove-btn[b-m2zgk0bnht] {
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid #ff4444;
    color: #ff4444;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.remove-btn:hover[b-m2zgk0bnht] {
    background: rgba(255, 68, 68, 0.3);
}

/* Loading Spinner */
.spinner[b-m2zgk0bnht] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-m2zgk0bnht 0.8s linear infinite;
    margin-right: 8px;
}

@keyframes spin-b-m2zgk0bnht {
    to { transform: rotate(360deg); }
}

/* Loading State */
.loading-state[b-m2zgk0bnht] {
    text-align: center;
    padding: 80px 20px;
    color: #9ba5bc;
}

.loading-state .spinner[b-m2zgk0bnht] {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .grid-layout[b-m2zgk0bnht] {
        grid-template-columns: 1fr;
    }

    .watermark-container[b-m2zgk0bnht] {
        padding: 20px;
    }

    .page-title[b-m2zgk0bnht] {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .top-section[b-m2zgk0bnht] {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .radio-group[b-m2zgk0bnht] {
        flex-direction: column;
    }

    .position-grid[b-m2zgk0bnht] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* _content/Photo8/Components/Shared/CartBadge.razor.rz.scp.css */
/* This button rides in the header of pages with very different backgrounds — the dark customer
   pages and the white Bootstrap cards of Account/Manage — so an outline style, which borrows the
   contrast of whatever is behind it, cannot be right on both. Bootstrap's own #0d6efd measured
   4.43:1 on the dark pages, and giving it the lighter --pi-blue instead pushed Account/Manage down
   to 2.28:1 against white.

   Filled instead: the text contrasts against the button's own background, so the page behind it
   stops mattering. #05121c on --pi-blue is 8.9:1 wherever it lands. */
.btn-outline-primary[b-evzb0xr7xp] {
    color: #05121c;
    background-color: var(--pi-blue, #00b7ff);
    border-color: var(--pi-blue, #00b7ff);
}

.btn-outline-primary:hover[b-evzb0xr7xp],
.btn-outline-primary:focus-visible[b-evzb0xr7xp] {
    color: #05121c;
    background-color: #4fd0ff;
    border-color: #4fd0ff;
}
/* _content/Photo8/Components/Shared/ConfirmDialog.razor.rz.scp.css */
/* Confirm dialog.
   The light appearance is Bootstrap's and is left alone — several hosts (/collaboration,
   /collaboration/accept) are white pages where it already belongs. Everything below is the
   opt-in dark variant, switched on with Theme="dark". */

/* Backdrop. Was an inline style; a class so the dark variant can go deeper without !important. */
.pi-confirm-modal[b-dtopi50g7a] {
    background-color: rgba(0, 0, 0, 0.5);
}

.pi-confirm-dark[b-dtopi50g7a] {
    background-color: rgba(5, 2, 15, 0.72);
}

.pi-confirm-dark .modal-content[b-dtopi50g7a] {
    background: #1a1a2e;
    border: 1px solid rgba(138, 43, 226, 0.35);
    border-radius: 14px;
    color: #e0e0e0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* The same gradient .pi-card-header uses across the site, so the dialog header matches the
   card headers sitting directly behind it rather than introducing a colour of its own. */
.pi-confirm-dark .modal-header[b-dtopi50g7a] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 14px 14px 0 0;
    padding: 1rem 1.25rem;
}

.pi-confirm-dark .modal-title[b-dtopi50g7a] {
    color: #ffffff;
    font-weight: 600;
}

/* No colour here on purpose: it inherits #e0e0e0 from .modal-content, and so does any
   BodyContent the calling page passes in, which carries that page's scope attribute rather
   than this component's and cannot be reached from here. */
.pi-confirm-dark .modal-body[b-dtopi50g7a] {
    padding: 1.25rem;
}

.pi-confirm-dark .modal-footer[b-dtopi50g7a] {
    border-top: 1px solid rgba(138, 43, 226, 0.3);
    padding: 0.85rem 1.25rem;
}

/* Intent rides on the icon alone. The header itself stays the house gradient whatever the
   ConfirmColor — a coloured band across the top reads as an error that has already happened,
   and the confirm button below is already the right colour and says what it will do. */
.pi-confirm-dark .pi-confirm-danger .modal-title i[b-dtopi50g7a] {
    color: #fca5a5;
}

.pi-confirm-dark .pi-confirm-warning .modal-title i[b-dtopi50g7a] {
    color: #fcd34d;
}

.pi-confirm-dark .pi-confirm-primary .modal-title i[b-dtopi50g7a] {
    color: #a5b4fc;
}

.pi-confirm-dark .pi-confirm-success .modal-title i[b-dtopi50g7a] {
    color: #86efac;
}

/* Cancel. Bootstrap's solid grey is legible but belongs to the light dialog. */
.pi-confirm-dark .btn-secondary[b-dtopi50g7a] {
    background: rgba(30, 30, 60, 0.85);
    border: 1px solid rgba(138, 43, 226, 0.5);
    color: #e0e0e0;
}

.pi-confirm-dark .btn-secondary:hover[b-dtopi50g7a] {
    background: rgba(45, 45, 85, 0.95);
    border-color: rgba(138, 43, 226, 0.8);
    color: #ffffff;
}

/* The confirm button keeps Bootstrap's solid colour — it is the action being agreed to, and
   red, amber, blue and green all carry on this background. */

.pi-confirm-dark .btn:focus-visible[b-dtopi50g7a],
.pi-confirm-dark .btn-close:focus-visible[b-dtopi50g7a] {
    outline: 2px solid #a5b4fc;
    outline-offset: 2px;
    box-shadow: none;
}

.pi-confirm-dark .btn-close[b-dtopi50g7a] {
    opacity: 0.75;
}

.pi-confirm-dark .btn-close:hover[b-dtopi50g7a] {
    opacity: 1;
}
/* _content/Photo8/Components/Shared/LegalPageShell.razor.rz.scp.css */
/* Readable long-form text on the dark landing-page background. */
.legal-body[b-yu6yf2lraa] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    line-height: 1.75;
}

.legal-body[b-yu6yf2lraa]  h2 {
    color: white;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 2.5rem 0 0.75rem;
}

.legal-body[b-yu6yf2lraa]  h2:first-child {
    margin-top: 0;
}

.legal-body[b-yu6yf2lraa]  h3 {
    color: white;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.75rem 0 0.5rem;
}

.legal-body[b-yu6yf2lraa]  p {
    margin-bottom: 1rem;
}

.legal-body[b-yu6yf2lraa]  ul {
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}

.legal-body[b-yu6yf2lraa]  li {
    margin-bottom: 0.5rem;
}

.legal-body[b-yu6yf2lraa]  a {
    color: #3fc8f6;
}

.legal-body[b-yu6yf2lraa]  strong {
    color: rgba(255, 255, 255, 0.95);
}

/* Set apart the short summary that opens each policy. */
.legal-body[b-yu6yf2lraa]  .legal-summary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid #3fc8f6;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.legal-body[b-yu6yf2lraa]  .legal-summary p:last-child {
    margin-bottom: 0;
}
/* _content/Photo8/Components/Shared/PasswordRequirementsDisplay.razor.rz.scp.css */
/* Photo Infinity Password Requirements Styling */

.password-requirements[b-dbd7gkcmpo] {
    margin-top: 10px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(38, 49, 83, 0.6);
    border-radius: 12px;
}

.requirements-title[b-dbd7gkcmpo] {
    display: block;
    color: #b9c3d8;
    margin-bottom: 10px;
    font-weight: 600;
}

.requirements-grid[b-dbd7gkcmpo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.requirement-item[b-dbd7gkcmpo] {
    display: flex;
    align-items: center;
}

.requirement-text[b-dbd7gkcmpo] {
    display: flex;
    align-items: center;
    color: #9ba5bc;
    gap: 8px;
}

.requirement-text.met[b-dbd7gkcmpo] {
    color: #2ecc71;
}

.requirement-icon[b-dbd7gkcmpo] {
    flex-shrink: 0;
}

.requirement-strikethrough[b-dbd7gkcmpo] {
    text-decoration: line-through;
}

.progress-container[b-dbd7gkcmpo] {
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 12px;
}

.progress-bar[b-dbd7gkcmpo] {
    height: 100%;
    background: #008cff;
    transition: width 0.3s ease;
}

.progress-bar.complete[b-dbd7gkcmpo] {
    background: #2ecc71;
}

.requirements-status[b-dbd7gkcmpo] {
    display: block;
    color: #9ba5bc;
    margin-top: 8px;
}

.requirements-complete[b-dbd7gkcmpo] {
    color: #2ecc71;
    margin-left: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .requirements-grid[b-dbd7gkcmpo] {
        grid-template-columns: 1fr;
    }
}
/* _content/Photo8/Components/Shared/PayFromBalanceToggle.razor.rz.scp.css */
.pi-autorenew-toggle[b-50c85mwpiv] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    color: #cbd2e5;
    font-size: 13px;
    line-height: 1.4;
}

.pi-autorenew-toggle input[type="checkbox"][b-50c85mwpiv] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    accent-color: #8b35ff;
    cursor: pointer;
}

/* Disabled has to look disabled. Left as-is the box kept the pointer cursor and full contrast,
   so a photographer who cannot use this yet had no cue beyond clicking and nothing happening. */
.pi-autorenew-toggle input[type="checkbox"]:disabled[b-50c85mwpiv] {
    cursor: not-allowed;
    accent-color: #6b7490;
}

.pi-autorenew-toggle:has(input:disabled)[b-50c85mwpiv] {
    cursor: default;
    color: #97a0b8;
}

.pi-toggle-note[b-50c85mwpiv] {
    color: #97a0b8;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px;
}