/* /Components/Account/Modals/PersonalInformationSettingsModal.razor.rz.scp.css */
.buffer-modal-overlay[b-7dhx5h37gn] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.buffer-modal-overlay.visible[b-7dhx5h37gn] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.buffer-modal-dialog[b-7dhx5h37gn] {
    position: relative;
    width: min(500px, calc(100% - 40px));
    max-height: 90vh;
    overflow-y: auto;
}

.buffer-modal-content[b-7dhx5h37gn] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.buffer-modal-header[b-7dhx5h37gn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
}

.buffer-modal-title[b-7dhx5h37gn] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.buffer-modal-body[b-7dhx5h37gn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.buffer-modal-footer[b-7dhx5h37gn] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.buffer-btn-footer[b-7dhx5h37gn] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    min-width: 120px;
}

.form-group[b-7dhx5h37gn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-7dhx5h37gn] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
    display: block;
}

.buffer-input[b-7dhx5h37gn] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 0px;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.buffer-input:hover[b-7dhx5h37gn] {
    border-color: #999;
    background-color: white;
}

.buffer-input:focus[b-7dhx5h37gn] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.buffer-input:disabled[b-7dhx5h37gn] {
    background-color: rgba(0, 0, 0, 0.03);
    color: #999;
    cursor: not-allowed;
    border-color: #ddd;
}

.required-indicator[b-7dhx5h37gn] {
    color: #e74c3c;
}

.consent-link[b-7dhx5h37gn] {
    color: #333;
    text-decoration: underline;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-weight: 500;
}

.consent-link:hover[b-7dhx5h37gn] {
    opacity: 0.7;
}

.buffer-spinner[b-7dhx5h37gn] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-7dhx5h37gn 0.6s linear infinite;
}

@keyframes spin-b-7dhx5h37gn {
    to { transform: rotate(360deg); }
}
/* /Components/Account/Pages/AccessDenied.razor.rz.scp.css */
.access-denied-page[b-dgt0wd0w8w] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 2rem;
}

.access-denied-card[b-dgt0wd0w8w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
    width: 100%;
    padding: 3rem 2rem;
    border: 1px solid var(--color-light-gray, #D9D9D9);
    background: var(--color-white, #fff);
}

.access-denied-icon[b-dgt0wd0w8w] {
    font-size: 56px;
    color: var(--color-black, #000);
    margin-bottom: 1.25rem;
    line-height: 1;
}

.access-denied-title[b-dgt0wd0w8w] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0 0 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.access-denied-body[b-dgt0wd0w8w] {
    color: var(--color-gray, #666);
    margin: 0 0 2rem;
    font-size: 1rem;
    line-height: 1.5;
}
/* /Components/Account/Pages/AccountSettings.razor.rz.scp.css */
/* ============================== Loading / Error States ============================== */

/* Inline loading and error alerts inherit Bootstrap alert styles.
   No additional overrides needed at the page level - all section
   styles are scoped to their respective shared components. */
/* /Components/Account/Pages/ConfirmEmail.razor.rz.scp.css */
.confirm-email-wrap[b-n6z9am502o] {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem 3rem;
}

.confirm-email-card[b-n6z9am502o] {
    max-width: 480px;
    width: 100%;
    text-align: center;
    padding: 2.5rem 2rem;
    border: 1px solid #e0e0e0;
    background: #fff;
}

.confirm-icon[b-n6z9am502o] {
    font-size: 3rem;
    display: block;
    margin: 0 auto 1.25rem;
    color: #212529;
}

.confirm-icon--error[b-n6z9am502o] {
    color: #6c757d;
}

.confirm-heading[b-n6z9am502o] {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 0 1rem;
    color: #212529;
}

.confirm-body[b-n6z9am502o] {
    font-size: 0.95rem;
    color: #495057;
    margin: 0 0 0.75rem;
    line-height: 1.6;
}

.confirm-action[b-n6z9am502o] {
    margin-top: 1.75rem;
}
/* /Components/Account/Pages/ForgotPassword.razor.rz.scp.css */
/* =========================================================
   ForgotPassword.razor.css
   ========================================================= */
/* ========================================
   FORM BASE
======================================== */



.form-label[b-w3z9doc8rv] {
    font-size: 0.95rem;
    font-weight: 500;
}

/* ========================================
   INPUT PILL STYLE (MATCH LOGIN)
======================================== */

.form-control input-pill valid[b-w3z9doc8rv] {
    width: 100%;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    /* FIX: force visible black border */
    border: 1.5px solid #000;
    font-size: 1rem;
    height: 48px;
    transition: all 0.2s ease-in-out;
    background-color: transparent; /* ensure no overlay washout */
}


    .input-pill:focus[b-w3z9doc8rv] {
        outline: none;
        border: 2px solid #000; /* slightly stronger */
    }


/* ========================================
   ERROR + VALIDATION
======================================== */


.validation-message[b-w3z9doc8rv] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ========================================
   RESPONSIVE BEHAVIOUR
   (progressively shrink input)
======================================== */

/* Tablets */
@media (max-width: 992px) {
    .input-pill[b-w3z9doc8rv] {
        height: 44px;
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
    }
}

/* Small tablets / large phones */
@media (max-width: 768px) {
    .input-pill[b-w3z9doc8rv] {
        height: 42px;
        padding: 0.6rem 0.9rem;
        font-size: 0.9rem;
    }

    .form-label[b-w3z9doc8rv] {
        font-size: 0.9rem;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .input-pill[b-w3z9doc8rv] {
        height: 40px;
        padding: 0.55rem 0.85rem;
        font-size: 0.85rem;
    }

    .form-label[b-w3z9doc8rv] {
        font-size: 0.85rem;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .input-pill[b-w3z9doc8rv] {
        height: 38px;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ====================================
FIX: Autofill styling for WHITE forms
==================================== */
.form-white input.input-pill:-webkit-autofill[b-w3z9doc8rv],
.form-white input.input-pill:-webkit-autofill:hover[b-w3z9doc8rv],
.form-white input.input-pill:-webkit-autofill:focus[b-w3z9doc8rv],
.form-white input.input-pill:-webkit-autofill:active[b-w3z9doc8rv] {

    /* FIX: force readable text */
    -webkit-text-fill-color: #3D3D3D !important;
    color: #3D3D3D !important;
    /* FIX: correct border */
    border: 1px solid #3D3D3D !important;
    background-color: #ffffff !important;
}
/* /Components/Account/Pages/ForgotPasswordConfirmation.razor.rz.scp.css */
/*
    File:           ForgotPasswordConfirmation.razor.css

    Purpose:        Styling for ForgotPasswordConfirmation.razor.
*/

/* ===================== Intro Text ===================== */
.confirmation-intro[b-1wi3jq0sxh] {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* ===================== Column Heading Override ===================== */
:deep(.content-column) h3[b-1wi3jq0sxh] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-black);
    margin: 0 0 1.5rem 0;
    letter-spacing: 0.3px;
}

/* ===================== Steps List ===================== */
.steps-list[b-1wi3jq0sxh] {
    margin: 0 0 1.5rem 0;
    padding-left: 1.5rem;
    color: #555;
    line-height: 1.8;
}

    .steps-list li[b-1wi3jq0sxh] {
        margin-bottom: 0.75rem;
        font-size: 0.9rem;
    }

/* ===================== Tip Text ===================== */
.tip-text[b-1wi3jq0sxh] {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* ===================== Actions ===================== */
.confirmation-actions[b-1wi3jq0sxh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
}

/* ===================== Retry Link ===================== */
.retry-link[b-1wi3jq0sxh] {
    color: var(--color-black);
    text-decoration: none;
    font-size: 0.9rem;
    font-style: italic;
    transition: color 0.3s ease;
}

    .retry-link:hover[b-1wi3jq0sxh] {
        text-decoration: underline;
    }

/* ===================== Button Overrides ===================== */
:deep(.btn-primary)[b-1wi3jq0sxh] {
    background-color: var(--color-black);
    color: var(--color-white);
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 0.875rem 2rem;
    border: 1px solid var(--color-black);
}

:deep(.btn-primary:hover)[b-1wi3jq0sxh] {
    background-color: #333;
    border-color: #333;
}

:deep(.btn-primary:active)[b-1wi3jq0sxh] {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}
/* /Components/Account/Pages/InternalRegister.razor.rz.scp.css */
.access-gate[b-so16ob5fu9] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 64px 20px;
    min-height: 60vh;
}

.access-gate-card[b-so16ob5fu9] {
    width: min(440px, 100%);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.access-gate-title[b-so16ob5fu9] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.access-gate-text[b-so16ob5fu9] {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}

.access-gate-field[b-so16ob5fu9] {
    display: flex;
    flex-direction: column;
}

.access-gate-email[b-so16ob5fu9] {
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    color: #1a1a1a;
    font-family: inherit;
    transition: all 0.2s ease;
}

.access-gate-email:focus[b-so16ob5fu9] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.access-gate-input[b-so16ob5fu9] {
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.8rem;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
    transition: all 0.2s ease;
}

.access-gate-input:focus[b-so16ob5fu9] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.access-gate-btn[b-so16ob5fu9] {
    width: 100%;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .access-gate[b-so16ob5fu9] {
        padding: 32px 16px;
    }

    .access-gate-card[b-so16ob5fu9] {
        padding: 28px;
    }
}
/* /Components/Forms/Admin/BlogPosts/BlogPostForm.razor.rz.scp.css */
.bp-slug-wrap[b-cdwwnxtgqu] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bp-slug-gen[b-cdwwnxtgqu] {
    align-self: flex-start;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    background: transparent;
    border: 1px solid var(--color-mid);
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-mid);
    transition: border-color 0.15s, color 0.15s;
}

.bp-slug-gen:hover[b-cdwwnxtgqu] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.bp-upload-wrap[b-cdwwnxtgqu] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bp-upload-error[b-cdwwnxtgqu] {
    color: var(--color-error, #dc3545);
    font-size: 0.85rem;
    margin: 0;
}

.bp-cover-preview[b-cdwwnxtgqu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.bp-cover-img[b-cdwwnxtgqu] {
    max-height: 120px;
    max-width: 240px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--color-light-border, #ddd);
}

.bp-cover-remove[b-cdwwnxtgqu] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    background: transparent;
    border: 1px solid var(--color-error, #dc3545);
    border-radius: 4px;
    color: var(--color-error, #dc3545);
    cursor: pointer;
    transition: background 0.15s;
}

.bp-cover-remove:hover[b-cdwwnxtgqu] {
    background: rgba(220, 53, 69, 0.08);
}
/* /Components/Forms/Admin/Policies/PolicyForm.razor.rz.scp.css */
.policy-sections-container[b-v8dnlvrbsm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.policy-section-card[b-v8dnlvrbsm] {
    border: 1px solid #ddd;
    padding: 16px;

    background-color: #f9f9f9;
    transition: all 0.3s ease;
}

.policy-section-card:hover[b-v8dnlvrbsm] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.policy-section-card strong[b-v8dnlvrbsm] {
    display: block;
    margin-bottom: 4px;
    font-size: 1rem;
}

.policy-section-card p[b-v8dnlvrbsm] {
    margin: 4px 0;
    font-size: 0.9rem;
    color: #666;
}

.policy-section-content[b-v8dnlvrbsm] {
    padding: 12px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
   
    font-size: 0.95rem;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.6;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.policy-section-content p[b-v8dnlvrbsm] {
    margin: 1em 0;
    font-size: 0.95rem;
    color: #333;
}

.policy-section-content ul[b-v8dnlvrbsm],
.policy-section-content ol[b-v8dnlvrbsm] {
    margin: 1em 0 1em 2em;
    color: #333;
}

.policy-section-content li[b-v8dnlvrbsm] {
    margin: 0.5em 0;
    color: #333;
}

.policy-section-content strong[b-v8dnlvrbsm] {
    font-weight: 600;
}

.policy-section-content em[b-v8dnlvrbsm] {
    font-style: italic;
}

.policy-section-content u[b-v8dnlvrbsm] {
    text-decoration: underline;
}

.policy-section-card-header[b-v8dnlvrbsm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.policy-section-card-actions[b-v8dnlvrbsm] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.policy-add-section[b-v8dnlvrbsm] {
    padding: 16px;
    border-radius: 4px;
    background-color: #fafafa;
    margin: 60px 20px 20px 20px;
}

.policy-add-section-actions[b-v8dnlvrbsm] {
    margin-top: 16px;
}

.policy-section-error[b-v8dnlvrbsm] {
    color: var(--color-error, #dc3545);
    font-size: 0.875rem;
    margin: 0 0 12px 0;
}

.btn-outline-danger[b-v8dnlvrbsm] {
    color: #666;
    border-color: transparent;
    background-color: transparent;
    padding: 4px 8px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.btn-outline-danger:hover[b-v8dnlvrbsm] {
    color: #333;
    background-color: transparent;
    border-color: transparent;
    transform: scale(1.2);
}
/* /Components/Forms/Admin/Products/ProductForm.razor.rz.scp.css */
.product-media-container[b-c021oqb0xd] {
    margin-top: 16px;
    margin-bottom: 24px;
}

.product-media-list[b-c021oqb0xd] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.product-media-card[b-c021oqb0xd] {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;

    overflow: hidden;
    background-color: #fff;
    transition: transform 0.2s ease;
    width: 220px;
    flex-shrink: 0;
    position: relative;
}

.product-media-card:hover[b-c021oqb0xd] {
    transform: scale(1.02);
}

.product-media-header[b-c021oqb0xd] {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 8px;
}

.product-media-expand[b-c021oqb0xd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.2s ease;
    color: #000;
}

.product-media-expand:hover[b-c021oqb0xd] {
    transform: scale(1.15);
}

.product-media-expand ion-icon[b-c021oqb0xd] {
    width: 20px;
    height: 20px;
}

.product-media-close[b-c021oqb0xd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.2s ease;
    color: #000;
}

.product-media-close:hover[b-c021oqb0xd] {
    transform: scale(1.15);
}

.product-media-close ion-icon[b-c021oqb0xd] {
    width: 20px;
    height: 20px;
}

.product-media-image[b-c021oqb0xd] {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background-color: #f5f5f5;
    display: block;
}

.product-media-details[b-c021oqb0xd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.product-media-filename[b-c021oqb0xd] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1a1a1a;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    max-height: 2.6em;
}

.product-media-primary[b-c021oqb0xd] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #333;
    cursor: pointer;
    user-select: none;
    padding: 6px 10px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 16px;
    width: fit-content;
    transition: all 0.2s ease;
}

.product-media-primary:hover[b-c021oqb0xd] {
    background-color: #efefef;
    border-color: #999;
}

.product-media-primary input[type="radio"][b-c021oqb0xd] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
}

.product-media-primary span[b-c021oqb0xd] {
    font-weight: 500;
}

.product-media-alt[b-c021oqb0xd] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: inherit;
    box-sizing: border-box;
    background-color: #fafafa;
    transition: all 0.2s ease;
}

.product-media-alt[b-c021oqb0xd]::placeholder {
    font-size: 0.8rem;
    color: #999;
}

.product-media-alt:focus[b-c021oqb0xd] {
    outline: none;
    border-color: #333;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .product-media-card[b-c021oqb0xd] {
        width: 200px;
    }

    .product-media-image[b-c021oqb0xd] {
        height: 120px;
    }

    .product-media-details[b-c021oqb0xd] {
        padding: 10px;
        gap: 8px;
    }
}

/* ========================================
   TAGS SECTION - MODERN & POLISHED STYLING
   ======================================== */

.tags-container[b-c021oqb0xd] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
}

.tags-container > label[b-c021oqb0xd] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Input wrapper for add tag */
.tags-input-wrapper[b-c021oqb0xd] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.tags-input[b-c021oqb0xd] {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
  
 
  
      
    background-color: #fafafa;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.tags-input:focus[b-c021oqb0xd] {
    outline: none;
    border-color: #333;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tags-input[b-c021oqb0xd]::placeholder {
    color: #999;
    font-size: 0.9rem;
}

/* Add tag button uses Button component primary variant - override form padding if needed */
.tags-input-wrapper .btn-add-tag[b-c021oqb0xd] {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Existing tags selector */
.tags-selector[b-c021oqb0xd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tags-selector > label[b-c021oqb0xd] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.tags-list[b-c021oqb0xd] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    background-color: #f9f9f9;
  
    border: 1px solid #e8e8e8;
    min-height: 50px;
}

/* Individual tag button */
.tag-button[b-c021oqb0xd] {
    padding: 8px 14px;
    border: 2px solid #ddd;
    border-radius: 20px;
    background-color: #fff;
    color: #333;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.tag-button:hover[b-c021oqb0xd] {
    border-color: #999;
    background-color: #f5f5f5;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

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

/* Selected state for tag button */
.tag-button.selected[b-c021oqb0xd] {
    background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
    color: #fff;
    border-color: #333;
    box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
}

.tag-button.selected:hover[b-c021oqb0xd] {
    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
    border-color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(51, 51, 51, 0.25);
}

/* Selected tags display */
.selected-tags[b-c021oqb0xd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.selected-tags > label[b-c021oqb0xd] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.tags-display[b-c021oqb0xd] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(51, 51, 51, 0.02) 0%, rgba(26, 26, 26, 0.02) 100%);
 
  
    min-height: 50px;
}

/* Tag chip */
.tag-chip[b-c021oqb0xd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
    color: #fff;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(51, 51, 51, 0.15);
    animation: slideIn-b-c021oqb0xd 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideIn-b-c021oqb0xd {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Tag remove button */
.tag-remove[b-c021oqb0xd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    border: none;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
}

.tag-remove:hover[b-c021oqb0xd] {
    background-color: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

.tag-remove:active[b-c021oqb0xd] {
    transform: scale(0.95);
}

/* Responsive design for tags */
@media (max-width: 768px) {
    .tags-input-wrapper[b-c021oqb0xd] {
        flex-direction: column;
    }

    .btn-add-tag[b-c021oqb0xd] {
        width: 100%;
    }

    .tags-list[b-c021oqb0xd] {
        padding: 10px;
    }

    .tag-button[b-c021oqb0xd] {
        padding: 7px 12px;
        font-size: 0.8rem;
    }

    .tag-chip[b-c021oqb0xd] {
        padding: 7px 10px;
        font-size: 0.8rem;
    }

    .tags-container > label[b-c021oqb0xd] {
        font-size: 0.85rem;
    }
}

/* Dark mode support (if your app has dark mode) */
@media (prefers-color-scheme: dark) {
    .tags-input[b-c021oqb0xd] {
        background-color: #1a1a1a;
        border-color: #333;
        color: #fff;
    }

    .tags-input:focus[b-c021oqb0xd] {
        border-color: #666;
        background-color: #222;
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08);
    }

    .tags-list[b-c021oqb0xd] {
        background-color: #1a1a1a;
        border-color: #333;
    }

    .tag-button[b-c021oqb0xd] {
        background-color: #222;
        color: #e0e0e0;
        border-color: #333;
    }

    .tag-button:hover[b-c021oqb0xd] {
        background-color: #2a2a2a;
        border-color: #555;
    }

    .tags-display[b-c021oqb0xd] {
        background-color: rgba(51, 51, 51, 0.05);
        border-color: #333;
    }
}
/* /Components/Forms/Admin/Products/SizeForm.razor.rz.scp.css */
@keyframes pulse-red-b-hkwvo6ojlw {
    0%, 100% {
        color: #ff0000;
        opacity: 1;
        transform: scale(1);
    }
    50% {
        color: #ff6666;
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes refresh-rotate-b-hkwvo6ojlw {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

[b-hkwvo6ojlw] ion-icon[name="radio-outline"] {
    animation: pulse-red-b-hkwvo6ojlw 1.5s infinite !important;
}

[b-hkwvo6ojlw] ion-icon[name="refresh-outline"].refresh-rotating {
    animation: refresh-rotate-b-hkwvo6ojlw 0.6s linear !important;
}
/* /Components/Forms/Admin/Promotions/BrandPromotionForm.razor.rz.scp.css */
/* Brand Promotion Form Styling */
/* /Components/Forms/Admin/Promotions/CategoryPromotionForm.razor.rz.scp.css */
/* Category Promotion Form Styling */
/* /Components/Forms/Admin/Promotions/GeneralPromotionForm.razor.rz.scp.css */
/* General Promotion Form Styling */
.gp-container[b-qjf054fmve] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}
/* /Components/Forms/Admin/Promotions/ProductDiscountPromotionOptionForm.razor.rz.scp.css */
[b-3whqhsj8ii] .condition-operator-select {
    color-scheme: light;
}

[b-3whqhsj8ii] .condition-operator-select option {
    color: #333;
    background-color: white;
}

[b-3whqhsj8ii] .condition-operator-select option:checked {
    background: linear-gradient(#08c, #08c);
    color: white;
}

[b-3whqhsj8ii] .condition-operator-select option:hover {
    background-color: #e8f0ff;
}
/* /Components/Forms/Admin/Promotions/ProductPromotionForm.razor.rz.scp.css */
/* Product Promotion Form Styling */
/* /Components/Forms/Admin/Promotions/PromotionForm.razor.rz.scp.css */
/* Styling handled in app.css for grid spanning and global form layout */

/* Make nested option forms span 2 columns */
form.form-white[b-j8d1bprzj0] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}


/* /Components/Forms/Admin/Promotions/ShippingPromotionForm.razor.rz.scp.css */
/* Shipping Promotion Form Styling */

/* /Components/Forms/Public/Applications/BusinessApplicationForm.razor.rz.scp.css */
.treatment-checkboxes[b-tjb4gqzp5k] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

.treatment-checkboxes .form-check[b-tjb4gqzp5k] {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .treatment-checkboxes[b-tjb4gqzp5k] {
        grid-template-columns: 1fr;
    }
}

/* /Components/Layout/AdminBase.razor.rz.scp.css */
/* Admin Base Layout Styles */

/* ====================================
   Content area
======================================= */
.admin-layout-content[b-m76mr98e2t] {
    margin-left: 280px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
}

.admin-layout-main[b-m76mr98e2t] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 3rem;
    background-color: #ffffff;
}

.admin-layout-main > :first-child[b-m76mr98e2t] {
    margin-top: 0;
}

/* ====================================
   Responsive
======================================= */
@media (max-width: 991px) {
    .admin-layout-content[b-m76mr98e2t] {
        margin-left: 240px;
    }

    .admin-layout-main[b-m76mr98e2t] {
        padding: 1.5rem 2rem;
    }
}

@media (max-width: 768px) {
    /* Sidebar is hidden by its own component styles at this breakpoint;
       push content down below the mobile top bar instead */
    .admin-layout-content[b-m76mr98e2t] {
        margin-left: 0;
        padding-top: 56px;
    }

    .admin-layout-main[b-m76mr98e2t] {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .admin-layout-main[b-m76mr98e2t] {
        padding: 1rem;
    }
}
/* /Components/Layout/AdminMobileMenu.razor.rz.scp.css */
/*
    File:       AdminMobileMenu.razor.css

    Purpose:    Mobile top bar (hamburger) + slide-in left drawer for admin
                navigation on small screens. Hidden entirely on desktop.
*/


/* ====================================
   Mobile top bar
======================================= */
.adm-topbar[b-t9aekecapj] {
    display: none;
}

@media (max-width: 768px) {
    /* Show the mobile top bar */
    .adm-topbar[b-t9aekecapj] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        padding: 0 1rem;
        background: #ffffff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        z-index: 9000;
    }

    .adm-topbar__hamburger[b-t9aekecapj] {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.25rem;
        flex-shrink: 0;
    }

        .adm-topbar__hamburger ion-icon[b-t9aekecapj] {
            font-size: 28px;
            color: #1a1a1a;
        }

    .adm-topbar__brand[b-t9aekecapj] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        text-decoration: none;
        color: #1a1a1a;
    }

    .adm-topbar__title[b-t9aekecapj] {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.2;
        color: #000000;
    }

    .adm-topbar__sub[b-t9aekecapj] {
        font-size: 0.7rem;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #a0a0a0;
        line-height: 1.2;
    }
}


/* ====================================
   Overlay (full-screen dim backdrop)
======================================= */
.adm-mobile-overlay[b-t9aekecapj] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9998;
}


/* ====================================
   Panel (slides in from left)
======================================= */
.adm-mobile-panel[b-t9aekecapj] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 9999;
    animation: admSlideInLeft-b-t9aekecapj 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ====================================
   Brand row + close button
======================================= */
.adm-mobile-brand[b-t9aekecapj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.adm-mobile-close[b-t9aekecapj] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    flex-shrink: 0;
}

    .adm-mobile-close ion-icon[b-t9aekecapj] {
        font-size: 24px;
        color: #1a1a1a;
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .adm-mobile-close:hover ion-icon[b-t9aekecapj] {
        color: #444;
        transform: scale(1.1);
    }


/* ====================================
   Animation
======================================= */
@keyframes admSlideInLeft-b-t9aekecapj {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
/* /Components/Layout/AdminSidebar.razor.rz.scp.css */
/*
    File:       AdminSidebar.razor.css

    Purpose:    Scoped styles for the admin sidebar mobile hamburger and full-screen overlay.
                Desktop sidebar styles live in app.css (.bh-sidebar).
*/


/* ====================================
   Mobile Hamburger Button
   (right-aligned, fixed, mobile only)
======================================= */
.admin-mobile-hamburger[b-qiqytyaw19] {
    display: none;
}

@media (max-width: 768px) {
    .admin-mobile-hamburger[b-qiqytyaw19] {
        display: flex;
        position: fixed;
        top: 0.75rem;
        right: 1rem;
        z-index: 1000;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        padding: 0.4rem 0.55rem;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.2s ease;
    }

    .admin-mobile-hamburger:hover[b-qiqytyaw19] {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
    }

    .admin-mobile-hamburger ion-icon[b-qiqytyaw19] {
        font-size: 24px;
        color: #1a1a1a;
        display: block;
    }
}


/* ====================================
   Overlay Backdrop
======================================= */
.admin-mobile-overlay[b-qiqytyaw19] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9998;
}


/* ====================================
   Overlay Panel
   Uses .bh-sidebar class to inherit
   all nav/link/footer styles from app.css
======================================= */
.admin-mobile-panel[b-qiqytyaw19] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    border-right: none !important;
    overflow-y: auto;
    z-index: 9999;
    animation: adminPanelSlideUp-b-qiqytyaw19 0.25s ease;
}


/* ====================================
   Close Button
======================================= */
.admin-mobile-close-btn[b-qiqytyaw19] {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    z-index: 1;
}

    .admin-mobile-close-btn ion-icon[b-qiqytyaw19] {
        font-size: 28px;
        color: #1a1a1a;
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .admin-mobile-close-btn:hover ion-icon[b-qiqytyaw19] {
        color: #444;
        transform: scale(1.1);
    }


/* ====================================
   Animation
======================================= */
@keyframes adminPanelSlideUp-b-qiqytyaw19 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */

/* Layout container */
.page[b-fry6f882mv] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.content[b-fry6f882mv] {
    flex: 1;
}

/* Top-row padding for page content is not necessary because
   NavMenu uses 'position: sticky', which keeps flow height. */


/* Error UI (unchanged from template with minor tidy) */
#blazor-error-ui[b-fry6f882mv] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-fry6f882mv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ====================================
   Root Variables
======================================= */
:root[b-6r3z8parmc] {
    --color-primary: #000000;
    --color-primary-hover: #000000;
    --color-text-on-primary: #ffffff;
    --color-text-default: #000000;
    --color-brand-accent1: #FFFFFF;
    --color-brand-accent2: #F5D1B0;
    --color-neutral-dark: #191818;
    --color-neutral-light: #FBFAF9;
    --color-error: #e50000;
    --color-success: #26b050;
    --color-focus: #000000;
    --radius-none: 0px;
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 24px;
    --radius-round: 50%;
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    --font-family-base: "Montserrat", Arial, sans-serif;
    --font-size-base: 16px;
}

/* ====================================
   Top Navigation Band
======================================= */
.nav-top-band[b-6r3z8parmc] {
    width: 100%;
    height: 2.5rem;
    text-transform: uppercase;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 1500;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

/* ====================================
   Top Row Layout
======================================= */
.top-row[b-6r3z8parmc] {
    min-height: 4.5rem;
    background: #09122A;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
}

/* ====================================
   Navbar Inner Container (Flex like Bootstrap)
======================================= */
.top-row[b-6r3z8parmc] {
    min-height: 4.5rem;
    background: #09122A;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
}

/* Brand */
.navbar-brand[b-6r3z8parmc] {
    font-size: 1.1rem;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

/* Hamburger (mobile-first: visible) */
.hamburger-wrapper[b-6r3z8parmc] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ====================================
   Center Area
======================================= */
.nav-center-wrapper[b-6r3z8parmc] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.nav-desktop[b-6r3z8parmc] {
    display: none;
    gap: 1.5rem;
    white-space: nowrap;
}

.right-nav-image[b-6r3z8parmc] {
    height: 25px;
    width: auto;
    display: block;
}

/* ====================================
   Right Slot
======================================= */
.nav-right-slot[b-6r3z8parmc] {
    flex: 0 0 auto;
    display: none;
    width: 150px;
    align-items: center;
    justify-content: flex-end;
    color: white;
    margin-right: 1.5rem;
}

/* Hide right slot when JS detects wrapping */
.nav-root.right-hidden .nav-right-slot[b-6r3z8parmc] {
    display: none !important;
}

/* ====================================
   Hamburger Icon Bars
======================================= */
.navbar-toggler[b-6r3z8parmc] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .navbar-toggler[b-6r3z8parmc]::before,
    .navbar-toggler[b-6r3z8parmc]::after,
    .navbar-toggler span[b-6r3z8parmc] {
        content: "";
        position: absolute;
        width: 22px;
        height: 2px;
        background: white;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .navbar-toggler[b-6r3z8parmc]::before {
        transform: translateY(-6px);
    }

    .navbar-toggler span[b-6r3z8parmc] {
        transform: translateY(0px);
    }

    .navbar-toggler[b-6r3z8parmc]::after {
        transform: translateY(6px);
    }

    .navbar-toggler:checked[b-6r3z8parmc]::before {
        transform: rotate(45deg);
    }

    .navbar-toggler:checked span[b-6r3z8parmc] {
        opacity: 0;
    }

    .navbar-toggler:checked[b-6r3z8parmc]::after {
        transform: rotate(-45deg);
    }

/* ====================================
   Mobile Dropdown
======================================= */
.nav-scrollable[b-6r3z8parmc] {
    display: none;
    width: 100%;
}

    .nav-scrollable.is-open[b-6r3z8parmc] {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(3px);
        padding: 0.25rem 0.5rem;
        z-index: 1200;
    }

/* ====================================
   Nav List + Links
======================================= */
.nav-horizontal[b-6r3z8parmc] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.nav-item[b-6r3z8parmc] {
    font-size: 0.95rem;
}

    .nav-item[b-6r3z8parmc]  .nav-link {
        position: relative;
        white-space: nowrap;
        font-family: "Montserrat";
        font-size: 16px;
        font-weight: 400;
        display: flex;
        align-items: center;
        height: 3rem;
        padding: 0 1.25rem;
        color: white;
        text-decoration: none;
        background: transparent;
        border-radius: 6px;
        opacity: 1;
        transition: opacity 160ms ease, transform 120ms ease;
        will-change: opacity, transform;
    }

        .nav-item[b-6r3z8parmc]  .nav-link::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 8px;
            width: 100%;
            height: 2px;
            background-color: white;
            border-radius: 2px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 240ms ease;
            z-index: 1;
        }

        .nav-item[b-6r3z8parmc]  .nav-link:hover {
            opacity: 0.85;
        }

            .nav-item[b-6r3z8parmc]  .nav-link:hover::after {
                transform: scaleX(1);
            }

        .nav-item[b-6r3z8parmc]  .nav-link:active {
            opacity: 0.65;
            transform: translateY(0.5px) scale(0.99);
        }

    .nav-item[b-6r3z8parmc]  a.active::after {
        transform: scaleX(1);
    }

    .nav-item[b-6r3z8parmc]  .nav-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
        border-radius: 6px;
    }

/* ====================================
   Bootstrap Expand Breakpoints
======================================= */
@media (min-width: 576px) {
    .navbar-expand-sm .hamburger-wrapper[b-6r3z8parmc] {
        display: none;
    }

    .navbar-expand-sm .nav-scrollable[b-6r3z8parmc] {
        display: none !important;
    }

    .navbar-expand-sm .nav-desktop[b-6r3z8parmc] {
        display: flex;
    }

    .navbar-expand-sm .nav-right-slot[b-6r3z8parmc] {
        display: inline-flex;
    }

    .navbar-expand-sm .nav-horizontal[b-6r3z8parmc] {
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 768px) {
    .navbar-expand-md .hamburger-wrapper[b-6r3z8parmc] {
        display: none;
    }

    .navbar-expand-md .nav-scrollable[b-6r3z8parmc] {
        display: none !important;
    }

    .navbar-expand-md .nav-desktop[b-6r3z8parmc] {
        display: flex;
    }

    .navbar-expand-md .nav-right-slot[b-6r3z8parmc] {
        display: inline-flex;
    }

    .navbar-expand-md .nav-horizontal[b-6r3z8parmc] {
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .hamburger-wrapper[b-6r3z8parmc] {
        display: none;
    }

    .navbar-expand-lg .nav-scrollable[b-6r3z8parmc] {
        display: none !important;
    }

    .navbar-expand-lg .nav-desktop[b-6r3z8parmc] {
        display: flex;
    }

    .navbar-expand-lg .nav-right-slot[b-6r3z8parmc] {
        display: inline-flex;
    }

    .navbar-expand-lg .nav-horizontal[b-6r3z8parmc] {
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 1200px) {
    .navbar-expand-xl .hamburger-wrapper[b-6r3z8parmc] {
        display: none;
    }

    .navbar-expand-xl .nav-scrollable[b-6r3z8parmc] {
        display: none !important;
    }

    .navbar-expand-xl .nav-desktop[b-6r3z8parmc] {
        display: flex;
    }

    .navbar-expand-xl .nav-right-slot[b-6r3z8parmc] {
        display: inline-flex;
    }

    .navbar-expand-xl .nav-horizontal[b-6r3z8parmc] {
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 1400px) {
    .navbar-expand-xxl .hamburger-wrapper[b-6r3z8parmc] {
        display: none;
    }

    .navbar-expand-xxl .nav-scrollable[b-6r3z8parmc] {
        display: none !important;
    }

    .navbar-expand-xxl .nav-desktop[b-6r3z8parmc] {
        display: flex;
    }

    .navbar-expand-xxl .nav-right-slot[b-6r3z8parmc] {
        display: inline-flex;
    }

    .navbar-expand-xxl .nav-horizontal[b-6r3z8parmc] {
        flex-direction: row;
        align-items: center;
    }
}

/* ====================================
   Mobile Layout
======================================= */
@media (max-width: 767.98px) {
    .nav-horizontal[b-6r3z8parmc] {
        flex-direction: column;
        width: 100%;
    }

    .nav-item[b-6r3z8parmc]  .nav-link {
        width: 100%;
        height: 2.75rem;
        text-align: center;
    }
}

.nav-root .navbar-brand[b-6r3z8parmc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.nav-root .brand-logo[b-6r3z8parmc] {
    display: block;
    height: 28px; /* overridden inline by BrandLogoHeightPx */
    width: auto;
}

nav-root[b-6r3z8parmc] {
    top:0 !important;
}
/* ====================================
   Misc
======================================= */
.bi[b-6r3z8parmc] {
    display: none !important;
}

.logout-form[b-6r3z8parmc] {
    margin: 0;
}

.body--menu-open[b-6r3z8parmc] {
    overflow: hidden;
}
/* /Components/Layout/PublicBase.razor.rz.scp.css */
/* ====================================================================================================
   File:       PublicBase.razor.css
   Purpose:    Layout styles for the PublicBase shared layout component.
                Covers back-to-top button and responsive adjustments.
==================================================================================================== */


/* ---------- Back To Top Button ---------- */

.back-to-top[b-jgpvs7f0n7] {
    position: fixed;
    bottom: 8rem;
    right: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1000;
    opacity: 0.8;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    .back-to-top ion-icon[b-jgpvs7f0n7] {
        font-size: 42px;
        color: #333;
    }

    .back-to-top:hover[b-jgpvs7f0n7] {
        transform: scale(1.1);
        opacity: 1;
    }

    .back-to-top:active[b-jgpvs7f0n7] {
        transform: scale(0.95);
    }


/* ====================================
   Responsive
==================================== */

@media (max-width: 768px) {
    .back-to-top[b-jgpvs7f0n7] {
        bottom: 8rem;
        right: 20px;
    }

        .back-to-top ion-icon[b-jgpvs7f0n7] {
            font-size: 36px;
        }
}

@media (max-width: 480px) {
    .back-to-top[b-jgpvs7f0n7] {
        bottom: 8rem;
        right: 16px;
    }

        .back-to-top ion-icon[b-jgpvs7f0n7] {
            font-size: 32px;
        }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-r6lsvl918j],
.components-reconnect-repeated-attempt-visible[b-r6lsvl918j],
.components-reconnect-failed-visible[b-r6lsvl918j],
.components-pause-visible[b-r6lsvl918j],
.components-resume-failed-visible[b-r6lsvl918j],
.components-rejoining-animation[b-r6lsvl918j] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-r6lsvl918j],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-r6lsvl918j],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-r6lsvl918j],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-r6lsvl918j],
#components-reconnect-modal.components-reconnect-retrying[b-r6lsvl918j],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-r6lsvl918j],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-r6lsvl918j],
#components-reconnect-modal.components-reconnect-failed[b-r6lsvl918j],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-r6lsvl918j] {
    display: block;
}


#components-reconnect-modal[b-r6lsvl918j] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-r6lsvl918j 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-r6lsvl918j 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-r6lsvl918j 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-r6lsvl918j]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-r6lsvl918j 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-r6lsvl918j {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-r6lsvl918j {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-r6lsvl918j {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-r6lsvl918j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-r6lsvl918j] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-r6lsvl918j] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-r6lsvl918j] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-r6lsvl918j] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-r6lsvl918j] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-r6lsvl918j] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-r6lsvl918j 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-r6lsvl918j] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-r6lsvl918j {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Modals/Admin/AccountTypeDefaultModal.razor.rz.scp.css */
.erp-modal-overlay[b-2hya5ara31] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.erp-modal-overlay.visible[b-2hya5ara31] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.erp-modal-dialog[b-2hya5ara31] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.erp-modal-content[b-2hya5ara31] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.erp-modal-header[b-2hya5ara31] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.erp-modal-title[b-2hya5ara31] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.erp-modal-body[b-2hya5ara31] {
    margin-bottom: 24px;
}

.erp-modal-footer[b-2hya5ara31] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.erp-current-values[b-2hya5ara31] {
    margin-bottom: 24px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.03);
}

.current-values-header[b-2hya5ara31] {
    margin-bottom: 12px;
}

.erp-defaults-list[b-2hya5ara31] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 250px;
    overflow-y: auto;
}

.erp-default-item[b-2hya5ara31] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    font-size: 13px;
}

.erp-default-info[b-2hya5ara31] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.erp-default-company[b-2hya5ara31] {
    font-weight: 500;
    color: #1a1a1a;
}

.erp-default-type[b-2hya5ara31] {
    font-size: 12px;
    color: #666;
}

.erp-default-price[b-2hya5ara31] {
    font-size: 12px;
}

.erp-default-price code[b-2hya5ara31] {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

code[b-2hya5ara31] {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.form-group[b-2hya5ara31] {
    margin-bottom: 16px;
}

.form-label[b-2hya5ara31] {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    color: #1a1a1a;
}

.erp-select[b-2hya5ara31],
.erp-input[b-2hya5ara31] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.8);
    transition: border-color 0.2s;
}

.erp-select:focus[b-2hya5ara31],
.erp-input:focus[b-2hya5ara31] {
    outline: none;
    border-color: #666;
    background: rgba(255, 255, 255, 1);
}

.erp-select:disabled[b-2hya5ara31],
.erp-input:disabled[b-2hya5ara31] {
    background: rgba(0, 0, 0, 0.03);
    color: #999;
    cursor: not-allowed;
}

.form-hint[b-2hya5ara31] {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #999;
}

.erp-spinner[b-2hya5ara31] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: #1a1a1a;
    border-radius: 50%;
    animation: spin-b-2hya5ara31 0.8s linear infinite;
    margin-right: 6px;
}

@keyframes spin-b-2hya5ara31 {
    to { transform: rotate(360deg); }
}

.erp-cancel-btn[b-2hya5ara31] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.erp-edit-btn[b-2hya5ara31],
.erp-add-btn[b-2hya5ara31],
.erp-btn-footer[b-2hya5ara31] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
}

.alert[b-2hya5ara31] {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 2px;
    font-size: 0.9rem;
}

.alert-danger[b-2hya5ara31] {
    background: rgba(211, 47, 47, 0.1);
    border: 1px solid rgba(211, 47, 47, 0.3);
    color: #c62828;
}

/* /Components/Modals/Admin/BrandContactEmailModal.razor.rz.scp.css */
.buffer-modal-overlay[b-ezk2jnpy6o] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.buffer-modal-overlay.visible[b-ezk2jnpy6o] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.buffer-modal-dialog[b-ezk2jnpy6o] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.buffer-modal-content[b-ezk2jnpy6o] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.buffer-modal-header[b-ezk2jnpy6o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.buffer-modal-title[b-ezk2jnpy6o] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.buffer-modal-body[b-ezk2jnpy6o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.buffer-modal-footer[b-ezk2jnpy6o] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.bce-body-text[b-ezk2jnpy6o] {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1rem;
}

.brand-buffers-list[b-ezk2jnpy6o] {
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-buffer-item[b-ezk2jnpy6o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background-color: white;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    min-height: 48px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.brand-buffer-item:hover[b-ezk2jnpy6o] {
    border-color: #bbb;
    background-color: #fafafa;
}

.brand-buffer-item.is-selected[b-ezk2jnpy6o] {
    border-color: #333;
    background-color: #f5f5f5;
}

.brand-buffer-info[b-ezk2jnpy6o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.brand-buffer-name[b-ezk2jnpy6o] {
    font-weight: 500;
    color: #333;
    flex: 0 0 auto;
}

.brand-buffer-value[b-ezk2jnpy6o] {
    color: #666;
    font-weight: 400;
    flex: 0 0 auto;
}

.bce-not-configured[b-ezk2jnpy6o] {
    color: #aaa;
}

.bce-inactive[b-ezk2jnpy6o] {
    color: #aaa;
    font-size: 0.78rem;
}

.bce-edit-form[b-ezk2jnpy6o] {
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    display: grid;
    gap: 16px;
}

.bce-edit-form .form-group[b-ezk2jnpy6o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bce-edit-form .form-label[b-ezk2jnpy6o] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
}

.bce-edit-form .buffer-input[b-ezk2jnpy6o] {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    color: #333;
    font-family: inherit;
    transition: all 0.2s ease;
}

.bce-edit-form .buffer-input:hover[b-ezk2jnpy6o] {
    border-color: #999;
    background-color: white;
}

.bce-edit-form .buffer-input:focus[b-ezk2jnpy6o] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bce-edit-form .bce-input-readonly[b-ezk2jnpy6o] {
    background-color: #f5f5f5;
    color: #333;
    cursor: not-allowed;
}

.bce-edit-form .form-hint[b-ezk2jnpy6o] {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

.bce-checkbox[b-ezk2jnpy6o] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
}

.bce-checkbox input[b-ezk2jnpy6o] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.buffer-btn-footer[b-ezk2jnpy6o] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
}

.buffer-btn-footer-danger[b-ezk2jnpy6o] {
    color: #c0392b;
    border-color: #c0392b;
}

.buffer-spinner[b-ezk2jnpy6o] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: bce-spin-b-ezk2jnpy6o 0.6s linear infinite;
    margin-right: 6px;
}

@keyframes bce-spin-b-ezk2jnpy6o {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .buffer-modal-dialog[b-ezk2jnpy6o] {
        width: calc(100% - 30px);
        max-height: 90vh;
    }

    .buffer-modal-content[b-ezk2jnpy6o] {
        padding: 24px;
    }

    .brand-buffer-item[b-ezk2jnpy6o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .brand-buffer-info[b-ezk2jnpy6o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}
/* /Components/Modals/Admin/BrandEmailRoutingSettingsModal.razor.rz.scp.css */
.buffer-modal-overlay[b-nuppsa8mlm] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.buffer-modal-overlay.visible[b-nuppsa8mlm] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.buffer-modal-dialog[b-nuppsa8mlm] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.buffer-modal-content[b-nuppsa8mlm] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.buffer-modal-header[b-nuppsa8mlm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.buffer-modal-title[b-nuppsa8mlm] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.buffer-current-values[b-nuppsa8mlm] {
    margin-bottom: 24px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.03);
}

.current-values-header[b-nuppsa8mlm] {
    margin-bottom: 12px;
}

.buffer-modal-body[b-nuppsa8mlm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.buffer-edit-btn[b-nuppsa8mlm] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.form-label[b-nuppsa8mlm] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
}

.buffer-input[b-nuppsa8mlm],
.buffer-select[b-nuppsa8mlm] {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    color: #333;
    font-family: inherit;
    transition: all 0.2s ease;
}

.buffer-input:hover[b-nuppsa8mlm],
.buffer-select:hover[b-nuppsa8mlm] {
    border-color: #999;
    background-color: white;
}

.buffer-input:focus[b-nuppsa8mlm],
.buffer-select:focus[b-nuppsa8mlm] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.buffer-modal-footer[b-nuppsa8mlm] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.brand-buffers-list[b-nuppsa8mlm] {
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-buffer-item[b-nuppsa8mlm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background-color: white;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    min-height: 48px;
}

.brand-buffer-name[b-nuppsa8mlm] {
    font-weight: 500;
    color: #333;
    flex: 0 0 auto;
}

.brand-buffer-value[b-nuppsa8mlm] {
    color: #666;
    font-weight: 400;
    text-decoration: none;
    flex: 0 0 auto;
    margin-left: 24px;
}

.buffer-btn-footer[b-nuppsa8mlm] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
}

.buffer-spinner[b-nuppsa8mlm] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: spin-b-nuppsa8mlm 0.6s linear infinite;
    margin-right: 6px;
}

.form-check[b-nuppsa8mlm] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.form-check-input[b-nuppsa8mlm] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #333;
}

.form-check-label[b-nuppsa8mlm] {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    margin: 0;
}

@keyframes spin-b-nuppsa8mlm {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .buffer-modal-dialog[b-nuppsa8mlm] {
        width: calc(100% - 30px);
        max-height: 90vh;
    }

    .buffer-modal-content[b-nuppsa8mlm] {
        padding: 24px;
    }

    .brand-buffer-item[b-nuppsa8mlm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .brand-buffer-value[b-nuppsa8mlm] {
        margin-left: 0;
    }
}
/* /Components/Modals/Admin/BrandPriceGroupOverrideModal.razor.rz.scp.css */
.erp-modal-overlay[b-xmuvq408zd] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.erp-modal-overlay.visible[b-xmuvq408zd] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.erp-modal-dialog[b-xmuvq408zd] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.erp-modal-content[b-xmuvq408zd] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.erp-modal-header[b-xmuvq408zd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.erp-modal-title[b-xmuvq408zd] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.erp-modal-body[b-xmuvq408zd] {
    margin-bottom: 24px;
}

.erp-modal-footer[b-xmuvq408zd] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.erp-current-values[b-xmuvq408zd] {
    margin-bottom: 24px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.03);
}

.current-values-header[b-xmuvq408zd] {
    margin-bottom: 12px;
}

.erp-overrides-list[b-xmuvq408zd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 250px;
    overflow-y: auto;
}

.erp-override-item[b-xmuvq408zd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    font-size: 13px;
    gap: 12px;
}

.erp-override-info[b-xmuvq408zd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.erp-override-company[b-xmuvq408zd] {
    font-weight: 500;
    color: #1a1a1a;
}

.erp-override-brand[b-xmuvq408zd] {
    font-size: 12px;
    color: #666;
}

.erp-override-type[b-xmuvq408zd] {
    font-size: 11px;
    color: #999;
    font-style: italic;
}

.erp-override-price[b-xmuvq408zd] {
    font-size: 12px;
}

.erp-override-price code[b-xmuvq408zd] {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    white-space: nowrap;
}

code[b-xmuvq408zd] {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.form-group[b-xmuvq408zd] {
    margin-bottom: 16px;
}

.form-label[b-xmuvq408zd] {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    color: #1a1a1a;
}

.erp-select[b-xmuvq408zd],
.erp-input[b-xmuvq408zd] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.8);
    transition: border-color 0.2s;
}

.erp-select:focus[b-xmuvq408zd],
.erp-input:focus[b-xmuvq408zd] {
    outline: none;
    border-color: #666;
    background: rgba(255, 255, 255, 1);
}

.erp-select:disabled[b-xmuvq408zd],
.erp-input:disabled[b-xmuvq408zd] {
    background: rgba(0, 0, 0, 0.03);
    color: #999;
    cursor: not-allowed;
}

.form-hint[b-xmuvq408zd] {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #999;
}

.erp-spinner[b-xmuvq408zd] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: #1a1a1a;
    border-radius: 50%;
    animation: spin-b-xmuvq408zd 0.8s linear infinite;
    margin-right: 6px;
}

@keyframes spin-b-xmuvq408zd {
    to { transform: rotate(360deg); }
}

.erp-cancel-btn[b-xmuvq408zd] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.erp-edit-btn[b-xmuvq408zd],
.erp-add-btn[b-xmuvq408zd],
.erp-btn-footer[b-xmuvq408zd] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
}

.alert[b-xmuvq408zd] {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 2px;
    font-size: 0.9rem;
}

.alert-danger[b-xmuvq408zd] {
    background: rgba(211, 47, 47, 0.1);
    border: 1px solid rgba(211, 47, 47, 0.3);
    color: #c62828;
}

.alert-warning[b-xmuvq408zd] {
    background: rgba(251, 188, 5, 0.1);
    border: 1px solid rgba(251, 188, 5, 0.3);
    color: #f57f17;
}

.erp-company-select-wrapper[b-xmuvq408zd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.erp-company-display[b-xmuvq408zd] {
    background: rgba(33, 150, 243, 0.05);
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 4px;
    padding: 12px;
}

.erp-company-name[b-xmuvq408zd] {
    font-weight: 600;
    color: #1565c0;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.erp-brands-in-company[b-xmuvq408zd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.erp-brands-preview[b-xmuvq408zd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(33, 150, 243, 0.2);
}

.preview-label[b-xmuvq408zd] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    white-space: nowrap;
}

.erp-brand-display[b-xmuvq408zd] {
    padding: 12px 0;
}

.erp-brand-item[b-xmuvq408zd] {
    display: inline-flex;
    align-items: center;
    background: rgba(33, 150, 243, 0.08);
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 6px 6px 6px 0;
    color: #1565c0;
    font-size: 0.9rem;
    font-weight: 500;
}

.erp-brand-badge[b-xmuvq408zd] {
    display: inline-flex;
    align-items: center;
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.4);
    border-radius: 3px;
    padding: 6px 10px;
    color: #2e7d32;
    font-size: 0.85rem;
    font-weight: 500;
}

/* /Components/Modals/Admin/ChangePasswordModal.razor.rz.scp.css */
.buffer-modal-overlay[b-izn7n61ikf] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.buffer-modal-overlay.visible[b-izn7n61ikf] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.buffer-modal-dialog[b-izn7n61ikf] {
    position: relative;
    width: min(500px, calc(100% - 40px));
    max-height: 90vh;
    overflow-y: auto;
}

.buffer-modal-content[b-izn7n61ikf] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.buffer-modal-header[b-izn7n61ikf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
}

.buffer-modal-title[b-izn7n61ikf] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.buffer-modal-body[b-izn7n61ikf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.buffer-modal-footer[b-izn7n61ikf] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.buffer-btn-footer[b-izn7n61ikf] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    min-width: 120px;
}

.form-group[b-izn7n61ikf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-izn7n61ikf] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
    display: block;
}

.buffer-input[b-izn7n61ikf] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 0px;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.buffer-input:hover[b-izn7n61ikf] {
    border-color: #999;
    background-color: white;
}

.buffer-input:focus[b-izn7n61ikf] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.buffer-input:disabled[b-izn7n61ikf] {
    background-color: rgba(0, 0, 0, 0.03);
    color: #999;
    cursor: not-allowed;
    border-color: #ddd;
}

.required-indicator[b-izn7n61ikf] {
    color: #e74c3c;
}

.password-hint[b-izn7n61ikf] {
    margin: 0;
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
    padding-top: 4px;
}

.buffer-spinner[b-izn7n61ikf] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-izn7n61ikf 0.6s linear infinite;
}

@keyframes spin-b-izn7n61ikf {
    to { transform: rotate(360deg); }
}
/* /Components/Modals/Admin/CustomerLinkPeriodSettingsModal.razor.rz.scp.css */
.link-settings-modal-overlay[b-0cxbqg3068] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.link-settings-modal-overlay.visible[b-0cxbqg3068] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.link-settings-modal-dialog[b-0cxbqg3068] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.link-settings-modal-content[b-0cxbqg3068] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.link-settings-modal-header[b-0cxbqg3068] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
}

.link-settings-modal-title[b-0cxbqg3068] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.link-settings-modal-body[b-0cxbqg3068] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.link-settings-modal-body p[b-0cxbqg3068] {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
}

.form-group[b-0cxbqg3068] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-0cxbqg3068] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
}

.link-settings-input[b-0cxbqg3068] {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    color: #333;
    font-family: inherit;
    transition: all 0.2s ease;
}

.link-settings-input:hover[b-0cxbqg3068] {
    border-color: #999;
    background-color: white;
}

.link-settings-input:focus[b-0cxbqg3068] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.form-hint[b-0cxbqg3068] {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    font-style: italic;
}

.form-check[b-0cxbqg3068] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.form-check-input[b-0cxbqg3068] {
    margin-top: 4px;
    cursor: pointer;
}

.form-check-label[b-0cxbqg3068] {
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-text.text-muted[b-0cxbqg3068] {
    color: #666 !important;
    font-size: 0.85rem;
    margin: 0;
}

.link-settings-modal-footer[b-0cxbqg3068] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.link-settings-btn-footer[b-0cxbqg3068] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
}

.link-settings-spinner[b-0cxbqg3068] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-0cxbqg3068 0.6s linear infinite;
    margin-right: 8px;
}

@keyframes spin-b-0cxbqg3068 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .link-settings-modal-dialog[b-0cxbqg3068] {
        width: calc(100% - 30px);
    }

    .link-settings-modal-content[b-0cxbqg3068] {
        padding: 24px;
    }

    .link-settings-modal-title[b-0cxbqg3068] {
        font-size: 1.1rem;
    }

    .link-settings-modal-footer[b-0cxbqg3068] {
        flex-direction: column-reverse;
    }
}
/* /Components/Modals/Admin/DiscountGroupLookupModal.razor.rz.scp.css */
/* Reuse the same styling as other buffer modals for consistency */
.buffer-modal-overlay[b-d77ltajosj] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.buffer-modal-overlay.visible[b-d77ltajosj] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.buffer-modal-dialog[b-d77ltajosj] {
    position: relative;
    width: min(700px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.buffer-modal-content[b-d77ltajosj] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.buffer-modal-header[b-d77ltajosj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.buffer-modal-title[b-d77ltajosj] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.buffer-modal-body[b-d77ltajosj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.form-group[b-d77ltajosj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-d77ltajosj] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
}

.buffer-input[b-d77ltajosj] {
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    font-size: 0.95rem;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.8);
    color: #1a1a1a;
}

.buffer-input:focus[b-d77ltajosj] {
    outline: none;
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.buffer-input:disabled[b-d77ltajosj] {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

.form-hint[b-d77ltajosj] {
    font-size: 0.85rem;
    color: #666;
    margin: 8px 0 0 0;
}

.buffer-modal-footer[b-d77ltajosj] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 24px;
}

.buffer-edit-btn[b-d77ltajosj] {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
    font-size: 0.8rem;
    width: 100%;
    justify-content: center;
}

.erp-spinner[b-d77ltajosj] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-top-color: #0066ff;
    border-radius: 50%;
    animation: spin-b-d77ltajosj 0.6s linear infinite;
}

@keyframes spin-b-d77ltajosj {
    to {
        transform: rotate(360deg);
    }
}

.discount-lookup-result[b-d77ltajosj] {
    border-radius: 4px;
}

.discount-table-wrapper[b-d77ltajosj] {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.discount-table-wrapper table[b-d77ltajosj] {
    font-size: 0.85rem;
}

.discount-table-wrapper th[b-d77ltajosj] {
    font-weight: 600;
    color: #333;
    text-align: left;
}

.discount-table-wrapper td[b-d77ltajosj] {
    color: #555;
    border-bottom: 1px solid #eee;
}

.discount-table-wrapper tbody tr:hover[b-d77ltajosj] {
    background-color: #f9f9f9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .buffer-modal-content[b-d77ltajosj] {
        padding: 24px;
    }

    .buffer-modal-dialog[b-d77ltajosj] {
        width: calc(100% - 20px);
    }

    .buffer-modal-title[b-d77ltajosj] {
        font-size: 1.1rem;
    }

    .discount-table-wrapper[b-d77ltajosj] {
        max-height: 300px;
    }
}
/* /Components/Modals/Admin/ERPCompanyConfigurationModal.razor.rz.scp.css */
.erp-modal-overlay[b-m2j9rxa2f9] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.erp-modal-overlay.visible[b-m2j9rxa2f9] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.erp-modal-dialog[b-m2j9rxa2f9] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.erp-modal-content[b-m2j9rxa2f9] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.erp-modal-header[b-m2j9rxa2f9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.erp-modal-title[b-m2j9rxa2f9] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.erp-current-values[b-m2j9rxa2f9] {
    margin-bottom: 24px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.03);
}

.current-values-header[b-m2j9rxa2f9] {
    margin-bottom: 12px;
}

.erp-companies-list[b-m2j9rxa2f9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 250px;
    overflow-y: auto;
}

.erp-company-item[b-m2j9rxa2f9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    font-size: 13px;
    transition: all 0.2s ease;
}

.erp-company-item:hover[b-m2j9rxa2f9] {
    background-color: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.1);
}

.erp-company-info[b-m2j9rxa2f9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.erp-company-name[b-m2j9rxa2f9] {
    font-weight: 500;
    color: #1a1a1a;
}

.erp-company-brand[b-m2j9rxa2f9] {
    font-size: 12px;
    color: #666;
}

.erp-company-status[b-m2j9rxa2f9] {
    padding: 3px 8px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.erp-company-status.active[b-m2j9rxa2f9] {
    background-color: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.erp-company-status.inactive[b-m2j9rxa2f9] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

.erp-modal-body[b-m2j9rxa2f9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.erp-edit-btn[b-m2j9rxa2f9] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.erp-add-btn[b-m2j9rxa2f9] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.erp-cancel-btn[b-m2j9rxa2f9] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.form-group[b-m2j9rxa2f9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-m2j9rxa2f9] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
}

.erp-select[b-m2j9rxa2f9],
.erp-input[b-m2j9rxa2f9] {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    color: #333;
    font-family: inherit;
    transition: all 0.2s ease;
}

.erp-select:hover[b-m2j9rxa2f9],
.erp-input:hover[b-m2j9rxa2f9] {
    border-color: #999;
    background-color: white;
}

.erp-select:focus[b-m2j9rxa2f9],
.erp-input:focus[b-m2j9rxa2f9] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.form-hint[b-m2j9rxa2f9] {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    font-style: italic;
}

.form-check[b-m2j9rxa2f9] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.form-check-input[b-m2j9rxa2f9] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #333;
}

.form-check-label[b-m2j9rxa2f9] {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    margin: 0;
}

.alert[b-m2j9rxa2f9] {
    padding: 12px 14px;
    border-radius: 0px;
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid;
}

.alert-danger[b-m2j9rxa2f9] {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
    color: #991b1b;
}

.erp-modal-footer[b-m2j9rxa2f9] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.erp-btn-footer[b-m2j9rxa2f9] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
}

.erp-spinner[b-m2j9rxa2f9] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-m2j9rxa2f9 0.6s linear infinite;
}

@keyframes spin-b-m2j9rxa2f9 {
    to { transform: rotate(360deg); }
}

.erp-multiselect-container[b-m2j9rxa2f9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    max-height: 200px;
    overflow-y: auto;
}

.erp-checkbox-item[b-m2j9rxa2f9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 2px;
}

.erp-checkbox-item:hover[b-m2j9rxa2f9] {
    background-color: rgba(0, 0, 0, 0.02);
}

.erp-checkbox-item input[type="checkbox"][b-m2j9rxa2f9] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #333;
    flex-shrink: 0;
}

.erp-checkbox-label[b-m2j9rxa2f9] {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    margin: 0;
    flex: 1;
}

@media (max-width: 768px) {
    .erp-modal-dialog[b-m2j9rxa2f9] {
        width: calc(100% - 30px);
    }

    .erp-modal-content[b-m2j9rxa2f9] {
        padding: 24px;
    }

    .erp-modal-title[b-m2j9rxa2f9] {
        font-size: 1.1rem;
    }

    .erp-modal-footer[b-m2j9rxa2f9] {
        flex-direction: column-reverse;
    }

    .erp-btn[b-m2j9rxa2f9] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Modals/Admin/GenerateAccessCodeModal.razor.rz.scp.css */
.acode-modal-overlay[b-337h1iwwzi] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.acode-modal-overlay.visible[b-337h1iwwzi] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.acode-modal-dialog[b-337h1iwwzi] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.acode-modal-content[b-337h1iwwzi] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.acode-modal-header[b-337h1iwwzi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}

.acode-modal-title[b-337h1iwwzi] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.acode-intro[b-337h1iwwzi] {
    font-size: 0.9rem;
    color: #555;
    margin: 0 0 20px;
}

.acode-result[b-337h1iwwzi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.acode-result-label[b-337h1iwwzi] {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
}

.acode-result-code[b-337h1iwwzi] {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.6rem;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.acode-result-meta[b-337h1iwwzi] {
    font-size: 0.85rem;
    color: #666;
}

.acode-modal-body[b-337h1iwwzi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.form-group[b-337h1iwwzi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-337h1iwwzi] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
}

.acode-input[b-337h1iwwzi] {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    color: #333;
    font-family: inherit;
    transition: all 0.2s ease;
}

.acode-input:hover[b-337h1iwwzi] {
    border-color: #999;
    background-color: white;
}

.acode-input:focus[b-337h1iwwzi] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.form-hint[b-337h1iwwzi] {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    font-style: italic;
}

.acode-generate-btn[b-337h1iwwzi] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.acode-active[b-337h1iwwzi] {
    margin-bottom: 24px;
}

.acode-active-header[b-337h1iwwzi] {
    margin-bottom: 12px;
}

.acode-list[b-337h1iwwzi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
}

.acode-list-item[b-337h1iwwzi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.acode-list-info[b-337h1iwwzi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.acode-list-code[b-337h1iwwzi] {
    font-weight: 600;
    letter-spacing: 0.2rem;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.acode-list-meta[b-337h1iwwzi] {
    font-size: 0.8rem;
    color: #777;
}

.acode-modal-footer[b-337h1iwwzi] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.acode-btn-footer[b-337h1iwwzi] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
}

.acode-spinner[b-337h1iwwzi] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-337h1iwwzi 0.6s linear infinite;
}

@keyframes spin-b-337h1iwwzi {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .acode-modal-dialog[b-337h1iwwzi] {
        width: calc(100% - 30px);
    }

    .acode-modal-content[b-337h1iwwzi] {
        padding: 24px;
    }

    .acode-modal-title[b-337h1iwwzi] {
        font-size: 1.1rem;
    }

    .acode-result-code[b-337h1iwwzi] {
        font-size: 2rem;
        letter-spacing: 0.4rem;
    }
}
/* /Components/Modals/Admin/LiveAccountSettingsModal.razor.rz.scp.css */
/* Reuse the same styling as QuantityBufferSettingsModal for consistency */
.buffer-modal-overlay[b-fsxcjynait] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.buffer-modal-overlay.visible[b-fsxcjynait] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.buffer-modal-dialog[b-fsxcjynait] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.buffer-modal-content[b-fsxcjynait] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.buffer-modal-header[b-fsxcjynait] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.buffer-current-values[b-fsxcjynait] {
    margin-bottom: 24px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.03);
}

.current-values-header[b-fsxcjynait] {
    margin-bottom: 12px;
}

.buffer-modal-title[b-fsxcjynait] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.buffer-modal-body[b-fsxcjynait] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.buffer-edit-btn[b-fsxcjynait] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.form-group[b-fsxcjynait] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-fsxcjynait] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
}

.buffer-select[b-fsxcjynait],
.buffer-input[b-fsxcjynait] {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    color: #333;
    font-family: inherit;
    transition: all 0.2s ease;
}

.buffer-select:hover[b-fsxcjynait],
.buffer-input:hover[b-fsxcjynait] {
    border-color: #999;
    background-color: white;
}

.buffer-select:focus[b-fsxcjynait],
.buffer-input:focus[b-fsxcjynait] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.form-hint[b-fsxcjynait] {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    font-style: italic;
}

.buffer-modal-footer[b-fsxcjynait] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.brand-buffers-list[b-fsxcjynait] {
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-buffer-item[b-fsxcjynait] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background-color: white;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.04);

    min-height: 48px;
}

.brand-buffer-name[b-fsxcjynait] {
    font-weight: 500;
    color: #333;
    flex: 0 0 auto;
}

.brand-buffer-value[b-fsxcjynait] {
    color: #666;
    font-weight: 400;
    text-decoration: none;
    flex: 0 0 auto;
    margin-left: 24px;
}

.buffer-btn-footer[b-fsxcjynait] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
}

.buffer-spinner[b-fsxcjynait] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: spin-b-fsxcjynait 0.6s linear infinite;
    margin-right: 6px;
}

@keyframes spin-b-fsxcjynait {
    to { transform: rotate(360deg); }
}
/* /Components/Modals/Admin/LiveDiscountGroupSettingsModal.razor.rz.scp.css */
/* Reuse the same styling as QuantityBufferSettingsModal for consistency */
.buffer-modal-overlay[b-u6glvfsier] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.buffer-modal-overlay.visible[b-u6glvfsier] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.buffer-modal-dialog[b-u6glvfsier] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.buffer-modal-content[b-u6glvfsier] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.buffer-modal-header[b-u6glvfsier] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.buffer-current-values[b-u6glvfsier] {
    margin-bottom: 24px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.03);
}

.current-values-header[b-u6glvfsier] {
    margin-bottom: 12px;
}

.buffer-modal-title[b-u6glvfsier] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.buffer-modal-body[b-u6glvfsier] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.buffer-edit-btn[b-u6glvfsier] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.form-group[b-u6glvfsier] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-u6glvfsier] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
}

.buffer-select[b-u6glvfsier],
.buffer-input[b-u6glvfsier] {
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    font-size: 0.95rem;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.8);
    color: #1a1a1a;
}

.buffer-select:focus[b-u6glvfsier],
.buffer-input:focus[b-u6glvfsier] {
    outline: none;
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.form-hint[b-u6glvfsier] {
    font-size: 0.85rem;
    color: #666;
    margin: 8px 0 0 0;
}

.buffer-modal-footer[b-u6glvfsier] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 24px;
}

.buffer-btn-footer[b-u6glvfsier] {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
    font-size: 0.8rem;
}

.buffer-spinner[b-u6glvfsier] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-top-color: #0066ff;
    border-radius: 50%;
    animation: spin-b-u6glvfsier 0.6s linear infinite;
}

@keyframes spin-b-u6glvfsier {
    to {
        transform: rotate(360deg);
    }
}

.brand-buffers-list[b-u6glvfsier] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-buffer-item[b-u6glvfsier] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background-color: white;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    min-height: 48px;
}

.brand-buffer-name[b-u6glvfsier] {
    font-weight: 500;
    color: #333;
    flex: 0 0 auto;
}

.brand-buffer-value[b-u6glvfsier] {
    color: #666;
    font-weight: 400;
    text-decoration: none;
    flex: 0 0 auto;
    margin-left: 24px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .buffer-modal-content[b-u6glvfsier] {
        padding: 24px;
    }

    .buffer-modal-dialog[b-u6glvfsier] {
        width: calc(100% - 20px);
    }

    .buffer-modal-title[b-u6glvfsier] {
        font-size: 1.1rem;
    }
}
/* /Components/Modals/Admin/LiveInventorySettingsModal.razor.rz.scp.css */
/* Reuse the same styling as QuantityBufferSettingsModal for consistency */
.buffer-modal-overlay[b-wmv6g5frk1] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.buffer-modal-overlay.visible[b-wmv6g5frk1] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.buffer-modal-dialog[b-wmv6g5frk1] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.buffer-modal-content[b-wmv6g5frk1] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.buffer-modal-header[b-wmv6g5frk1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.buffer-current-values[b-wmv6g5frk1] {
    margin-bottom: 24px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.03);
}

.current-values-header[b-wmv6g5frk1] {
    margin-bottom: 12px;
}

.buffer-modal-title[b-wmv6g5frk1] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.buffer-modal-body[b-wmv6g5frk1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.buffer-edit-btn[b-wmv6g5frk1] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.form-group[b-wmv6g5frk1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-wmv6g5frk1] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
}

.buffer-select[b-wmv6g5frk1],
.buffer-input[b-wmv6g5frk1] {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    color: #333;
    font-family: inherit;
    transition: all 0.2s ease;
}

.buffer-select:hover[b-wmv6g5frk1],
.buffer-input:hover[b-wmv6g5frk1] {
    border-color: #999;
    background-color: white;
}

.buffer-select:focus[b-wmv6g5frk1],
.buffer-input:focus[b-wmv6g5frk1] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.form-hint[b-wmv6g5frk1] {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    font-style: italic;
}

.buffer-modal-footer[b-wmv6g5frk1] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.brand-buffers-list[b-wmv6g5frk1] {
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-buffer-item[b-wmv6g5frk1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background-color: white;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
  
    min-height: 48px;
}

.brand-buffer-name[b-wmv6g5frk1] {
    font-weight: 500;
    color: #333;
    flex: 0 0 auto;
}

.brand-buffer-value[b-wmv6g5frk1] {
    color: #666;
    font-weight: 400;
    text-decoration: none;
    flex: 0 0 auto;
    margin-left: 24px;
}

.buffer-btn-footer[b-wmv6g5frk1] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
}

.buffer-spinner[b-wmv6g5frk1] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: spin-b-wmv6g5frk1 0.6s linear infinite;
    margin-right: 6px;
}

@keyframes spin-b-wmv6g5frk1 {
    to { transform: rotate(360deg); }
}

/* /Components/Modals/Admin/LiveUnitPriceSettingsModal.razor.rz.scp.css */
/* Reuse the same styling as QuantityBufferSettingsModal for consistency */
.buffer-modal-overlay[b-ec76ek1q7a] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.buffer-modal-overlay.visible[b-ec76ek1q7a] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.buffer-modal-dialog[b-ec76ek1q7a] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.buffer-modal-content[b-ec76ek1q7a] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.buffer-modal-header[b-ec76ek1q7a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.buffer-current-values[b-ec76ek1q7a] {
    margin-bottom: 24px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.03);
}

.current-values-header[b-ec76ek1q7a] {
    margin-bottom: 12px;
}

.buffer-modal-title[b-ec76ek1q7a] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.buffer-modal-body[b-ec76ek1q7a] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.buffer-edit-btn[b-ec76ek1q7a] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.form-group[b-ec76ek1q7a] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-ec76ek1q7a] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
}

.buffer-select[b-ec76ek1q7a],
.buffer-input[b-ec76ek1q7a] {
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    font-size: 0.95rem;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.8);
    color: #1a1a1a;
}

.buffer-select:focus[b-ec76ek1q7a],
.buffer-input:focus[b-ec76ek1q7a] {
    outline: none;
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.form-hint[b-ec76ek1q7a] {
    font-size: 0.85rem;
    color: #666;
    margin: 8px 0 0 0;
}

.buffer-modal-footer[b-ec76ek1q7a] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 24px;
}

.buffer-btn-footer[b-ec76ek1q7a] {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
    font-size: 0.8rem;
}

.buffer-spinner[b-ec76ek1q7a] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-top-color: #0066ff;
    border-radius: 50%;
    animation: spin-b-ec76ek1q7a 0.6s linear infinite;
}

@keyframes spin-b-ec76ek1q7a {
    to {
        transform: rotate(360deg);
    }
}

.brand-buffers-list[b-ec76ek1q7a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-buffer-item[b-ec76ek1q7a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background-color: white;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    min-height: 48px;
}

.brand-buffer-name[b-ec76ek1q7a] {
    font-weight: 500;
    color: #333;
    flex: 0 0 auto;
}

.brand-buffer-value[b-ec76ek1q7a] {
    color: #666;
    font-weight: 400;
    text-decoration: none;
    flex: 0 0 auto;
    margin-left: 24px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .buffer-modal-content[b-ec76ek1q7a] {
        padding: 24px;
    }

    .buffer-modal-dialog[b-ec76ek1q7a] {
        width: calc(100% - 20px);
    }

    .buffer-modal-title[b-ec76ek1q7a] {
        font-size: 1.1rem;
    }
}
/* /Components/Modals/Admin/QuantityBufferSettingsModal.razor.rz.scp.css */
.buffer-modal-overlay[b-1g2m6tvnm3] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.buffer-modal-overlay.visible[b-1g2m6tvnm3] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.buffer-modal-dialog[b-1g2m6tvnm3] {
    position: relative;
    width: min(600px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.buffer-modal-content[b-1g2m6tvnm3] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.buffer-modal-header[b-1g2m6tvnm3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.buffer-current-values[b-1g2m6tvnm3] {
    margin-bottom: 24px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.03);
 
   
}

.current-values-header[b-1g2m6tvnm3] {
    margin-bottom: 12px;
}

.buffer-modal-title[b-1g2m6tvnm3] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.buffer-modal-body[b-1g2m6tvnm3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.buffer-edit-btn[b-1g2m6tvnm3] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
}

.form-group[b-1g2m6tvnm3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-1g2m6tvnm3] {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
}

.buffer-select[b-1g2m6tvnm3],
.buffer-input[b-1g2m6tvnm3] {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    color: #333;
    font-family: inherit;
    transition: all 0.2s ease;
}

.buffer-select:hover[b-1g2m6tvnm3],
.buffer-input:hover[b-1g2m6tvnm3] {
    border-color: #999;
    background-color: white;
}

.buffer-select:focus[b-1g2m6tvnm3],
.buffer-input:focus[b-1g2m6tvnm3] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.form-hint[b-1g2m6tvnm3] {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    font-style: italic;
}

.buffer-modal-footer[b-1g2m6tvnm3] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.buffer-btn-footer[b-1g2m6tvnm3] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.85rem;
}

.buffer-spinner[b-1g2m6tvnm3] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-1g2m6tvnm3 0.6s linear infinite;
}

@keyframes spin-b-1g2m6tvnm3 {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .buffer-modal-dialog[b-1g2m6tvnm3] {
        width: calc(100% - 30px);
    }

    .buffer-modal-content[b-1g2m6tvnm3] {
        padding: 24px;
    }

    .buffer-modal-title[b-1g2m6tvnm3] {
        font-size: 1.1rem;
    }

    .buffer-modal-footer[b-1g2m6tvnm3] {
        flex-direction: column-reverse;
    }

    .buffer-btn[b-1g2m6tvnm3] {
        width: 100%;
        justify-content: center;
    }
}

.brand-buffers-list[b-1g2m6tvnm3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    

    max-height: 250px;
    overflow-y: auto;
}

.brand-buffer-item[b-1g2m6tvnm3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: white;
   

    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.brand-buffer-name[b-1g2m6tvnm3] {
    font-weight: 500;
    color: #333;
}

.brand-buffer-value[b-1g2m6tvnm3] {
    color: #666;
    font-weight: 400;
}
/* /Components/Modals/Public/Reviews/ReviewModal.razor.rz.scp.css */
/* ====================================
   Review Modal Component Styles
==================================== */


/* ---------- Overlay ---------- */
.review-modal-overlay[b-cjyqn19abg] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
}

    .review-modal-overlay.visible[b-cjyqn19abg] {
        background: rgba(0,0,0,0.2);
        backdrop-filter: blur(4px);
        opacity: 1;
        pointer-events: auto;
    }


/* ---------- Dialog ---------- */
.review-modal-dialog[b-cjyqn19abg] {
    width: min(500px, calc(100% - 40px));
    max-height: 90vh;
}


/* ---------- Content ---------- */
.review-modal-content[b-cjyqn19abg] {
    background: #fff;
    padding: 30px;
    border: 1px solid #eee;
}


/* ---------- Header ---------- */
.review-modal-header[b-cjyqn19abg] {
    margin-bottom: 20px;
}


/* ---------- Body ---------- */
.review-modal-body[b-cjyqn19abg] {
    margin-bottom: 20px;
}


/* ---------- Footer ---------- */
.review-modal-footer[b-cjyqn19abg] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}


/* ---------- Inputs ---------- */
.review-input[b-cjyqn19abg] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    background: #f8f8f8;
}

    /* Focus control (no orange) */
    .review-input:focus[b-cjyqn19abg] {
        outline: none;
        border-color: #333;
        background: #fff;
    }


/* ---------- Forms ---------- */
.form-group[b-cjyqn19abg] {
    margin-bottom: 20px;
}


/* ====================================
   Responsive
==================================== */

@media (max-width: 640px) {

    .review-modal-content[b-cjyqn19abg] {
        padding: 20px;
    }

    .review-modal-footer[b-cjyqn19abg] {
        flex-direction: column-reverse;
    }

        .review-modal-footer button[b-cjyqn19abg] {
            width: 100%;
        }
}
/* /Components/Pages/Admin/Applications/AdminApplications.razor.rz.scp.css */
@keyframes pulse-red-b-flyjv75jxr {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}

@keyframes refresh-rotate-b-flyjv75jxr {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.refresh-rotating[b-flyjv75jxr] {
    animation: refresh-rotate-b-flyjv75jxr 0.6s linear infinite;
}
/* /Components/Pages/Admin/Brands/Brands.razor.rz.scp.css */
.custom-brands[b-b9hzowmrd4]{
  /* outer outline */
  border: 1px solid #D9D9D9;
  border-radius: 6px;
  background-color: #ffffff; /* table fill */
  overflow: hidden;
}

.custom-brands thead th[b-b9hzowmrd4]{
  background-color: #F8F8F8; /* header fill */
  color: inherit;
  border-bottom: 1px solid #D9D9D9;
}

.custom-brands th[b-b9hzowmrd4],
.custom-brands td[b-b9hzowmrd4]{
  border-bottom: 1px solid #D9D9D9; /* row separators */
}

.custom-brands tbody tr:hover[b-b9hzowmrd4]{
  background-color: #F5F7FA; /* hover fill */
}

/* keep Bootstrap spacing while using our custom borders */
.custom-brands.table > :not(caption) > * > *[b-b9hzowmrd4] {
  padding: .75rem 1rem;
}

/* Products Navigation (Brands page) */
.products-nav[b-b9hzowmrd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 3;
}

.products-arrow[b-b9hzowmrd4] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    pointer-events: auto;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.products-arrow:hover:not(:disabled)[b-b9hzowmrd4] {
    transform: scale(1.08);
}

.products-arrow:active:not(:disabled)[b-b9hzowmrd4] {
    transform: scale(0.98);
}

.products-arrow:disabled[b-b9hzowmrd4] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Make ion-icon a bit larger inside the button */
.products-arrow ion-icon[b-b9hzowmrd4] {
    font-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
}
/* /Components/Pages/Admin/Landing/AdminIndex.razor.rz.scp.css */
/* ===================== Admin Statistics Grid ===================== */

.admin-stats-grid[b-bdz4pfdpf7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.admin-stat-card[b-bdz4pfdpf7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 24px;
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    border-left: 4px solid var(--color-gray, #4a4a4a);
    border-radius: 0;
}

.admin-stat-card--highlight[b-bdz4pfdpf7] {
    border-left-color: #9D2235; /* primary red - draws attention */
    background-color: #fdf5f6;
}

.admin-stat-value[b-bdz4pfdpf7] {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: #1a1a1a;
    font-family: 'Montserrat', sans-serif;
}

.admin-stat-label[b-bdz4pfdpf7] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7280;
}

.admin-stat-sublabel[b-bdz4pfdpf7] {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

/* ===================== Charts ===================== */

.admin-charts-grid[b-bdz4pfdpf7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.admin-chart-card[b-bdz4pfdpf7] {
    padding: 20px 22px;
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 0;
}

.admin-chart-title[b-bdz4pfdpf7] {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7280;
}

.admin-chart-empty[b-bdz4pfdpf7] {
    color: #9ca3af;
    font-size: 13px;
    margin: 24px 0;
}

/* Vertical bar chart */
.admin-bars[b-bdz4pfdpf7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    height: 190px;
    padding-top: 8px;
}

.admin-bar-col[b-bdz4pfdpf7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

.admin-bar[b-bdz4pfdpf7] {
    width: 70%;
    max-width: 40px;
    min-height: 2px;
    background-color: #326295; /* primary blue */
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}

.admin-bar-value[b-bdz4pfdpf7] {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.admin-bar-label[b-bdz4pfdpf7] {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Horizontal bar chart */
.admin-hbars[b-bdz4pfdpf7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-hbar-row[b-bdz4pfdpf7] {
    display: grid;
    grid-template-columns: 120px 1fr 40px;
    align-items: center;
    gap: 10px;
}

.admin-hbar-label[b-bdz4pfdpf7] {
    font-size: 12px;
    color: #4b5563;
}

.admin-hbar-track[b-bdz4pfdpf7] {
    height: 14px;
    background-color: #f0f0f0;
    border-radius: 0;
    overflow: hidden;
}

.admin-hbar-fill[b-bdz4pfdpf7] {
    height: 100%;
    min-width: 2px;
    transition: width 0.3s ease;
}

.admin-hbar-count[b-bdz4pfdpf7] {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-align: right;
}

/* Donut chart */
.admin-donut-wrap[b-bdz4pfdpf7] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.admin-donut[b-bdz4pfdpf7] {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.admin-donut-total[b-bdz4pfdpf7] {
    font-size: 30px;
    font-weight: 700;
    fill: #1a1a1a;
}

.admin-donut-caption[b-bdz4pfdpf7] {
    font-size: 10px;
    letter-spacing: 0.15em;
    fill: #9ca3af;
}

.admin-legend[b-bdz4pfdpf7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 140px;
}

.admin-legend-row[b-bdz4pfdpf7] {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #4b5563;
}

.admin-legend-swatch[b-bdz4pfdpf7] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.admin-legend-count[b-bdz4pfdpf7] {
    font-weight: 600;
    color: #374151;
}
/* /Components/Pages/Admin/Logistics/AdminOrders.razor.rz.scp.css */
/* Modal Overlay */
.admin-orders-modal-overlay[b-c4tt95xb25] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.admin-orders-modal-overlay.visible[b-c4tt95xb25],
.admin-orders-modal-overlay:has(.admin-orders-modal-dialog)[b-c4tt95xb25] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

/* Modal Dialog */
.admin-orders-modal-dialog[b-c4tt95xb25] {
    position: relative;
    width: min(900px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

/* Modal Content */
.admin-orders-modal-content[b-c4tt95xb25] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Modal Header */
.admin-orders-modal-header[b-c4tt95xb25] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.admin-orders-modal-title[b-c4tt95xb25] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.admin-orders-modal-close[b-c4tt95xb25] {
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.admin-orders-modal-close:hover[b-c4tt95xb25] {
    color: #000;
}

/* Modal Body */
.admin-orders-modal-body[b-c4tt95xb25] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 32px;
}

/* Section Container */
.admin-orders-section[b-c4tt95xb25] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0px;
}

.admin-orders-section:nth-child(odd)[b-c4tt95xb25] {
    background-color: rgba(0, 0, 0, 0.01);
}

.admin-orders-section-title[b-c4tt95xb25] {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
}

/* Info Grid */
.admin-orders-info-grid[b-c4tt95xb25] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.admin-orders-info-grid .admin-orders-info-row.full-width[b-c4tt95xb25] {
    grid-column: 1 / -1;
}

.admin-orders-info-row[b-c4tt95xb25] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.admin-orders-info-label[b-c4tt95xb25] {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #666;
    flex: 0 0 auto;
    min-width: 120px;
}

.admin-orders-info-value[b-c4tt95xb25] {
    font-size: 0.9rem;
    color: #1a1a1a;
    flex: 1;
    text-align: right;
}

.admin-orders-rebate-code[b-c4tt95xb25] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    background: rgba(255, 152, 0, 0.1);
    padding: 4px 8px;
    border-radius: 2px;
    color: #e65100;
}

/* Items List */
.admin-orders-items-list[b-c4tt95xb25] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-orders-item[b-c4tt95xb25] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 0px;
}

.admin-orders-item-header[b-c4tt95xb25] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.admin-orders-item-details[b-c4tt95xb25] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-orders-item-name[b-c4tt95xb25] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1a1a;
}

.admin-orders-item-brand[b-c4tt95xb25] {
    font-size: 0.85rem;
    color: #666;
}

.admin-orders-item-code[b-c4tt95xb25] {
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
    color: #999;
    margin-top: 2px;
    font-weight: 500;
}

.admin-orders-item-price[b-c4tt95xb25] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1a1a;
    white-space: nowrap;
}

.admin-orders-item-meta[b-c4tt95xb25] {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: #666;
    flex-wrap: wrap;
}

.admin-orders-item-meta span[b-c4tt95xb25] {
    display: flex;
    gap: 4px;
}

/* Pricing Grid */
.admin-orders-pricing-grid[b-c4tt95xb25] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-orders-pricing-row[b-c4tt95xb25] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.admin-orders-pricing-row:last-child[b-c4tt95xb25] {
    border-bottom: none;
    padding-top: 12px;
    padding-bottom: 0;
}

.admin-orders-pricing-row span:first-child[b-c4tt95xb25] {
    color: #666;
    font-weight: 500;
}

.admin-orders-pricing-row span:last-child[b-c4tt95xb25] {
    color: #1a1a1a;
    font-weight: 500;
}

.admin-orders-pricing-row.admin-orders-discount span:last-child[b-c4tt95xb25] {
    color: #1a1a1a;
    font-weight: 500;
}

.admin-orders-pricing-row.admin-orders-total[b-c4tt95xb25] {
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    border-bottom: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 0 0 0;
}

.admin-orders-pricing-row.admin-orders-total span:first-child[b-c4tt95xb25] {
    color: #1a1a1a;
}

.admin-orders-pricing-row.admin-orders-total span:last-child[b-c4tt95xb25] {
    color: #1a1a1a;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Modal Footer */
.admin-orders-modal-footer[b-c4tt95xb25] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .admin-orders-modal-dialog[b-c4tt95xb25] {
        width: calc(100% - 30px);
    }

    .admin-orders-modal-content[b-c4tt95xb25] {
        padding: 20px;
    }

    .admin-orders-info-grid[b-c4tt95xb25] {
        grid-template-columns: 1fr;
        gap: 12px 16px;
    }

    .admin-orders-info-row[b-c4tt95xb25] {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-orders-info-value[b-c4tt95xb25] {
        text-align: left;
    }

    .admin-orders-modal-header[b-c4tt95xb25] {
        margin-bottom: 16px;
    }

    .admin-orders-modal-body[b-c4tt95xb25] {
        gap: 16px;
        margin-bottom: 16px;
    }

    .admin-orders-section[b-c4tt95xb25] {
        padding: 16px;
    }
}

/* Scrollbar styling */
.admin-orders-modal-dialog[b-c4tt95xb25]::-webkit-scrollbar {
    width: 8px;
}

.admin-orders-modal-dialog[b-c4tt95xb25]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
}

.admin-orders-modal-dialog[b-c4tt95xb25]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.admin-orders-modal-dialog[b-c4tt95xb25]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}
/* /Components/Pages/Admin/Pages/AdminBrandPages.razor.rz.scp.css */
.custom-brands[b-5aty3byim2] {
    /* outer outline */
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    background-color: #ffffff; /* table fill */
    overflow: hidden;
}

/* Custom brand-specific colors */
.brand-badge .bg-op[b-5aty3byim2] { background: #9d2235 !important; color: #fff !important; }
.brand-badge .bg-delta-medical[b-5aty3byim2] { background: #000000 !important; color: #fff !important; }
.brand-badge .bg-black[b-5aty3byim2] { background: #000000 !important; color: #fff !important; }
.brand-badge .bg-delta[b-5aty3byim2] { background: #3D3D3D !important; color: #fff !important; }
.brand-badge .bg-melcura[b-5aty3byim2] { background: #002F5E !important; color: #fff !important; }
.brand-badge .bg-visi[b-5aty3byim2] { background: #326295 !important; color: #fff !important; }

    .custom-brands thead th[b-5aty3byim2] {
        background-color: #F8F8F8; /* header fill */
        color: inherit;
        border-bottom: 1px solid #D9D9D9;
    }

    .custom-brands th[b-5aty3byim2],
    .custom-brands td[b-5aty3byim2] {
        border-bottom: 1px solid #D9D9D9; /* row separators */
    }

    .custom-brands tbody tr:hover[b-5aty3byim2] {
        background-color: #F5F7FA; /* hover fill */
    }

    /* keep Bootstrap spacing while using our custom borders */
    .custom-brands.table > :not(caption) > * > *[b-5aty3byim2] {
        padding: .75rem 1rem;
    }

/* Products Navigation (Brands page) */
.products-nav[b-5aty3byim2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 3;
}

.products-arrow[b-5aty3byim2] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    pointer-events: auto;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

    .products-arrow:hover:not(:disabled)[b-5aty3byim2] {
        transform: scale(1.08);
    }

    .products-arrow:active:not(:disabled)[b-5aty3byim2] {
        transform: scale(0.98);
    }

    .products-arrow:disabled[b-5aty3byim2] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Make ion-icon a bit larger inside the button */
    .products-arrow ion-icon[b-5aty3byim2] {
        font-size: 1.1rem;
        width: 1.1rem;
        height: 1.1rem;
    }

/* Custom badge styles for BrandId column */
.brand-badge .badge[b-5aty3byim2],
.brand-badge .badge.bg-info[b-5aty3byim2],
.brand-badge .badge.bg-secondary[b-5aty3byim2],
.brand-badge .badge.bg-dark[b-5aty3byim2] {
    background: linear-gradient(180deg, #F8FBFF 0%, #E6F2FF 100%) !important;
    color: #002F5E !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.6rem !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 14px rgba(45, 60, 90, 0.06) !important;
    border: 1px solid rgba(0,47,94,0.08) !important;
}

/* Custom badge styles for Active column */
.active-badge .badge.bg-success[b-5aty3byim2],
.active-badge .badge.bg-danger[b-5aty3byim2],
.active-badge .badge[b-5aty3byim2] {
    background: linear-gradient(180deg, #E6FFF0 0%, #D0F9E0 100%) !important;
    color: #0B6E3E !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.6rem !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 14px rgba(6, 60, 30, 0.06) !important;
    border: 1px solid rgba(11,110,62,0.08) !important;
}

.active-badge .badge.bg-danger[b-5aty3byim2],
.active-badge .badge.bg-warning[b-5aty3byim2],
.active-badge .badge.bg-secondary[b-5aty3byim2] {
    background: linear-gradient(180deg, #FFF6F6 0%, #FFECEC 100%) !important;
    color: #8B1C1C !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.6rem !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 14px rgba(90, 20, 20, 0.06) !important;
    border: 1px solid rgba(139,28,28,0.08) !important;
}

/* Ensure our badge classes override bootstrap specificity */
.custom-brands td.brand-badge .badge[b-5aty3byim2],
.custom-brands td.active-badge .badge[b-5aty3byim2] {
    /* nothing - selector for clarity */
}
/* /Components/Pages/Admin/Products/Products.razor.rz.scp.css */
.table[b-498sgvm3vt] {
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.form-control.input-pill-gray[b-498sgvm3vt],
.form-control-plaintext.input-pill-gray[b-498sgvm3vt] {
    border: 1px solid var(--color-gray);
    border-radius: 100px;
    padding: 10px 15px;
    background-color: transparent;
    color: var(--color-gray);
}

.form-control.input-pill-gray:focus[b-498sgvm3vt],
textarea.form-control.input-pill-gray:focus[b-498sgvm3vt],
select.form-control.input-pill-gray:focus[b-498sgvm3vt] {
    background-color: transparent !important;
    border-color: var(--color-gray) !important;
    box-shadow: none !important;
    outline: 2px solid var(--color-gray);
    outline-offset: 4px;
    color: var(--color-gray);
    transition: outline-color var(--transition-base), outline-offset var(--transition-base);
}

.table thead[b-498sgvm3vt] {
    background: linear-gradient(90deg, #f8f9fa, #ececec);
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.table th[b-498sgvm3vt] {
    padding: 14px 16px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.table td[b-498sgvm3vt] {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.92rem;
    color: #444;
}

.table-hover tbody tr:hover[b-498sgvm3vt] {
    background: #ececec !important;
    transition: background 0.2s ease-in-out;
}

.table img[b-498sgvm3vt] {
    width: 120px;
    height: auto;
    object-fit: cover;
}

.btn-group .btn[b-498sgvm3vt] {
    border-radius: 6px;
    font-size: 0.85rem;
    padding: 6px 12px;
}

.pagination .page-link[b-498sgvm3vt] {
    border-radius: 6px;
    margin: 0 2px;
    color: #333;
    font-weight: 500;
}

.pagination .page-item.active .page-link[b-498sgvm3vt] {
    background: #333;
    border-color: #333;
    color: #fff;
}

/* Products Navigation */
.products-nav[b-498sgvm3vt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 3;
}

/* Navision unavailable indicator */
ion-icon.navision-unavailable[b-498sgvm3vt]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, transparent 48%, #999 48%, #999 52%, transparent 52%);
    border-radius: 50%;
    z-index: 1;
}

/* Pulse red animation for live indicator */
@keyframes pulse-red-b-498sgvm3vt {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Refresh rotate animation for header refresh button */
@keyframes refresh-rotate-b-498sgvm3vt {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Apply rotation to refresh icons during refresh */
ion-icon.refresh-rotating[b-498sgvm3vt] {
    animation: refresh-rotate-b-498sgvm3vt 0.6s linear infinite;
    transform-origin: center;
}

.products-arrow[b-498sgvm3vt] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    pointer-events: auto;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.products-arrow:hover:not(:disabled)[b-498sgvm3vt] {
    transform: scale(1.08);
}

.products-arrow:active:not(:disabled)[b-498sgvm3vt] {
    transform: scale(0.98);
}

.products-arrow:disabled[b-498sgvm3vt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.products-arrow ion-icon[b-498sgvm3vt] {
    font-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
}
/* /Components/Pages/Admin/Users/AdminReviewBusinessApplication.razor.rz.scp.css */
@keyframes pulse-red-b-uva3lvkjvr {
    0%, 100% {
        color: #ff0000;
        opacity: 1;
        transform: scale(1);
    }
    50% {
        color: #ff6666;
        opacity: 0.6;
        transform: scale(1.1);
    }
}

[b-uva3lvkjvr] ion-icon[name="radio-outline"] {
    animation: pulse-red-b-uva3lvkjvr 1.5s infinite !important;
}

/* Document list */
.app-doc-list[b-uva3lvkjvr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.app-doc-row[b-uva3lvkjvr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    background: #fff;
}

.app-doc-actions[b-uva3lvkjvr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ERP result panel */
.erp-result-panel[b-uva3lvkjvr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: #f8f9fa;
    border-left: 3px solid #28a745;
    margin-bottom: 20px;
}

.erp-result-title[b-uva3lvkjvr] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #28a745;
    margin-bottom: 4px;
}

.erp-result-row[b-uva3lvkjvr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: #495057;
}

.erp-status-row[b-uva3lvkjvr] {
    margin-top: 4px;
}

/* ERP discounts */
.erp-discounts[b-uva3lvkjvr] {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.erp-discounts-meta[b-uva3lvkjvr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f5f5f5;
    font-size: 0.875rem;
}

.erp-discounts-count[b-uva3lvkjvr] {
    font-size: 0.8rem;
    color: #6c757d;
}

.erp-discounts-table-wrap[b-uva3lvkjvr] {
    overflow-x: auto;
}

.erp-discounts-table[b-uva3lvkjvr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.erp-discounts-table th[b-uva3lvkjvr] {
    padding: 8px 14px;
    text-align: left;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    color: #495057;
}

.erp-discounts-table td[b-uva3lvkjvr] {
    padding: 8px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #212529;
}

/* ERP link button wrapper */
.erp-link-wrap[b-uva3lvkjvr] {
    display: flex;
    align-items: flex-end;
    padding-bottom: 6px;
}

/* Brand permission cards */
.brand-permission-card[b-uva3lvkjvr] {
    padding: 16px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    margin-bottom: 4px;
}

/* Search box styling - matches AdminDataTable */
.search-box-wrapper[b-uva3lvkjvr] {
    position: relative;
    width: 100%;
}

.search-icon[b-uva3lvkjvr] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.admin-search-input[b-uva3lvkjvr] {
    width: 100%;
    padding: 10px 40px 10px 38px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 100px !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    color: #000 !important;
    height: 40px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
   
}

.admin-search-input:focus[b-uva3lvkjvr] {
    outline: 1px solid #000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1) !important;
}

.admin-search-input[b-uva3lvkjvr]::placeholder {
    color: #9ca3af !important;
}

.search-clear-btn[b-uva3lvkjvr] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 18px;
    padding: 4px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-clear-btn:hover[b-uva3lvkjvr] {
    color: #6b7280;
}

/* Form select styling - pill style */
.admin-form-select[b-uva3lvkjvr] {
    width: 100%;
    padding: 10px 40px 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 100px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    appearance: none;
    color: #000;
    height: 40px;
}

.admin-form-select:focus[b-uva3lvkjvr] {
    outline: 1px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

.admin-form-select option[b-uva3lvkjvr] {
    color: #000;
    background: #fff;
}

/* Form textarea styling - standard rounded */
.admin-form-textarea[b-uva3lvkjvr] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.2s ease;
    background: transparent;
    color: #000;
    resize: none;
    min-height: 100px;
    overflow-y: auto;
}

.admin-form-textarea:focus[b-uva3lvkjvr] {
    outline: 1px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

.admin-form-textarea[b-uva3lvkjvr]::placeholder {
    color: #9ca3af;
}

/* Originator Section */
.originator-section[b-uva3lvkjvr] {
   
}

/* Originator card for default submitter */
.originator-card[b-uva3lvkjvr] {
  
 
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
/* Originator search results */
.originator-list .list-group-item small[b-uva3lvkjvr] {
    color: #495057 !important; /* darker gray for better readability */
    font-size: 0.9rem; /* slightly larger for clarity */
}

    /* Optional: emphasize email addresses */
    .originator-list .list-group-item small a[b-uva3lvkjvr] {
        color: #343a40 !important; /* even darker for links */
        text-decoration: none;
    }

        .originator-list .list-group-item small a:hover[b-uva3lvkjvr] {
            text-decoration: underline;
            color: #212529; /* darkest gray on hover */
        }

.originator-label[b-uva3lvkjvr] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.5rem;
}


/* Originator list items */
.originator-list[b-uva3lvkjvr] {
    width: 100%;
    border: 0.5px solid #d1d5db;

    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 0.5rem;
}

.originator-item[b-uva3lvkjvr] {
    background: #fff;
    padding: 0.75rem 1rem;
    border-bottom: 0.5px solid #e9ecef;
    transition: background 0.2s ease;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    border: 1px solid #d1d5db;
    margin-bottom: 0.5rem;
   
}

.originator-item:last-child[b-uva3lvkjvr] {
    border-bottom: 1px solid #d1d5db;
    margin-bottom: 0;
}

.originator-item:hover[b-uva3lvkjvr] {
    background: #f8f9fa;
    border-color: #b3b9bf;
}

.originator-item.disabled[b-uva3lvkjvr] {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f5f5f5;
    border-color: #d1d5db;
}

.originator-item.disabled:hover[b-uva3lvkjvr] {
    background: #f5f5f5;
    border-color: #d1d5db;
}

.originator-item button[b-uva3lvkjvr] {
    text-align: left;
}

.originator-item small[b-uva3lvkjvr] {
    color: #6b7280;
    display: block;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.originator-item strong[b-uva3lvkjvr] {
    display: block;
    color: #212529;
    margin-bottom: 0.25rem;
}

/* Remove icon */
.originator-remove-icon[b-uva3lvkjvr] {
    font-size: 1.3rem;
   
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

    .originator-remove-icon:hover[b-uva3lvkjvr] {
        transform: scale(1.1);
   
    }


/* Base card styling */
.card-modern[b-uva3lvkjvr] {
    border: none;

    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
    /* Modern card headers */
    .card-modern .card-header h5[b-uva3lvkjvr] {
        text-transform: uppercase; /* Capitalize all letters */
        font-size: 0.9rem; /* Smaller size than default h5 */
        font-weight: 600; /* Keep it bold for emphasis */
        letter-spacing: 0.5px; /* Slight spacing for readability */
    }

/* Document display styling */
.document-name[b-uva3lvkjvr] {
    font-weight: 500;
    color: #212529;
    word-break: break-word;
    flex: 1;
}

.document-view-icon[b-uva3lvkjvr],
.document-download-icon[b-uva3lvkjvr] {
    font-size: 1.3rem;
    cursor: pointer;
  
    transition: transform 0.2s ease, color 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

    .document-view-icon:hover[b-uva3lvkjvr],
    .document-download-icon:hover[b-uva3lvkjvr] {
        transform: scale(1.1);
    
    }

    .document-view-icon ion-icon[b-uva3lvkjvr],
    .document-download-icon ion-icon[b-uva3lvkjvr] {
        pointer-events: none;
    }        color: #343a40;[b-uva3lvkjvr] /* Neutral dark gray */
    }

    .card-modern:hover[b-uva3lvkjvr] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }

    /* Card header */
    .card-modern .card-header[b-uva3lvkjvr] {
        background: linear-gradient(90deg, #f8f9fa, #e9ecef);
        border-bottom: none;
       
        padding: 1rem 1.25rem;
    }

        .card-modern .card-header h5[b-uva3lvkjvr] {
            margin: 0;
            font-weight: 600;
            color: #343a40;
        }

    /* Card body */
    .card-modern .card-body[b-uva3lvkjvr] {
        padding: 1.25rem;
        font-size: 0.95rem;
        color: #495057;
    }

    /* Labels and values */
    .card-modern strong[b-uva3lvkjvr] {
        display: block;
        font-weight: 600;
        color: #212529;
        margin-bottom: 0.25rem;
    }

    .card-modern p[b-uva3lvkjvr] {
        margin-bottom: 1rem;
        color: #495057;
    }

    /* Download buttons inside cards */
    .card-modern .btn-outline-primary[b-uva3lvkjvr] {
   
        font-size: 0.85rem;
        padding: 0.35rem 0.75rem;
    }
/* Originator search input styling */
.originator-search .form-label[b-uva3lvkjvr] {
    color: #6c757d !important; /* medium gray label */
    opacity: 1 !important; /* always visible */
    font-weight: 500;
}

.originator-search .search-box-wrapper[b-uva3lvkjvr] {
    border: none;
}
        .originator-email[b-uva3lvkjvr] {
    color: #343a40;
    font-size: 0.9rem;
}
/* /Components/Pages/Auth/LoginCallback.razor.rz.scp.css */
.callback-container[b-nbj466c025] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.callback-status p[b-nbj466c025] {
    font-size: 1rem;
    color: var(--color-gray);
}
/* /Components/Pages/Public/Applications/BusinessApplications.razor.rz.scp.css */
/* Brand Cards Grid */
.brand-cards-grid[b-9g8xvcju16] {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 cards per row */
    gap: 1rem;
    margin: 2rem auto 3rem auto;
    max-width: 1400px;
}

/* Brand Card Base */
.brand-card[b-9g8xvcju16] {
    position: relative;
    aspect-ratio: 3 / 4; /* portrait-style, smaller footprint */

    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Background images for each brand */
.bg-delta[b-9g8xvcju16] {
    background-image: url('/Media/Images/Brand/Delta Skin/Delta_Brand_Page_Image 1.webp');
}

.bg-aesthetics[b-9g8xvcju16] {
    background-image: url('/Media/Images/Dashboards/Delta_Brand_Page_Image 1.webp'); 
}

.bg-optiphi[b-9g8xvcju16] {
    background-image: url('/Media/Images/Brand/Optiphi/optiphi_Brand_Page_Image 1.webp');
}

.bg-melcura[b-9g8xvcju16] {
    background-image: url('/Media/Images/Brand/Melcura/Melcura_Brand_Page_Image 1.webp');
}

.bg-visi[b-9g8xvcju16] {
    background-image: url('/Media/Images/Brand/Visi/Ophthalmica_Brand_Page_Image 1.webp');
}

/* Card Content */
.brand-card-content[b-9g8xvcju16] {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Logo */
.brand-card-logo[b-9g8xvcju16] {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .brand-card-logo img[b-9g8xvcju16] {
        width: 100px; /* compact logo size */
        height: auto;
        object-fit: contain;
    }

.brand-card:hover .brand-card-logo[b-9g8xvcju16] {
    transform: scale(1.05);
}

/* Overlay */
.brand-card-overlay[b-9g8xvcju16] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.25) 100%);
}

/* Text */
.brand-card-title[b-9g8xvcju16] {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
}

.brand-card-description[b-9g8xvcju16] {
    text-align: center;
    line-height: 1.4;
    margin: 0 0 1rem 0;
    color: #e8e8e8;
    font-size: 0.85rem;
}

/* Button */
.brand-card-button[b-9g8xvcju16] {
    padding: 0.6rem 1.25rem;
    border: 1px solid #ffffff;
    background-color: transparent;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .brand-card-button:hover[b-9g8xvcju16] {
        background-color: #ffffff;
        color: #3D3D3D;
    }

    .brand-card-button:active[b-9g8xvcju16] {
        transform: scale(0.96);
    }

/* Responsive Brand Cards */
@media (max-width: 1024px) {
    .brand-cards-grid[b-9g8xvcju16] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        max-width: 1000px;
    }

    .brand-card-logo img[b-9g8xvcju16] {
        width: 90px;
    }

    .brand-card-description[b-9g8xvcju16] {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .brand-cards-grid[b-9g8xvcju16] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        max-width: 100%;
    }

    .brand-card-logo img[b-9g8xvcju16] {
        width: 80px;
    }

    .brand-card-title[b-9g8xvcju16] {
        font-size: 1rem;
    }

    .brand-card-description[b-9g8xvcju16] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .brand-cards-grid[b-9g8xvcju16] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .brand-card-logo img[b-9g8xvcju16] {
        width: 70px;
    }

    .brand-card-title[b-9g8xvcju16] {
        font-size: 0.9rem;
    }

    .brand-card-description[b-9g8xvcju16] {
        font-size: 0.7rem;
    }

    .brand-card-button[b-9g8xvcju16] {
        padding: 0.5rem 1rem;
        font-size: 0.65rem;
    }
}
/* /Components/Pages/Public/Blog/BlogList.razor.rz.scp.css */
.bl-grid[b-pfxot4azvb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
}

.bl-loading[b-pfxot4azvb],
.bl-empty[b-pfxot4azvb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 0;
    color: #888;
    font-size: 1rem;
}

.bl-loading ion-icon[b-pfxot4azvb],
.bl-empty ion-icon[b-pfxot4azvb] {
    font-size: 2.5rem;
    color: #ccc;
}

@media (max-width: 900px) {
    .bl-grid[b-pfxot4azvb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .bl-grid[b-pfxot4azvb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Public/Blog/BlogPostPage.razor.rz.scp.css */
.bpp-meta[b-ackvrs0zmc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bpp-author[b-ackvrs0zmc],
.bpp-date[b-ackvrs0zmc] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bpp-dot[b-ackvrs0zmc] {
    color: #ccc;
}

.bpp-excerpt[b-ackvrs0zmc] {
    font-size: 1.1rem;
    color: #555;
    font-style: italic;
    line-height: 1.65;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e6e6e6;
}

.bpp-content[b-ackvrs0zmc] {
    font-size: 1rem;
    line-height: 1.75;
    color: #333;
    /* Fill the content container instead of clamping to a fixed reading width -
       the post body should follow the section width, only its own spacing. */
    max-width: 100%;
    width: 100%;
}

/* Inline images inserted into the post body scale to the container, never overflow. */
.bpp-content img[b-ackvrs0zmc] {
    max-width: 100%;
    height: auto;
}

.bpp-content h2[b-ackvrs0zmc] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: #1a1a1a;
}

.bpp-content h3[b-ackvrs0zmc] {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
    color: #1a1a1a;
}

.bpp-content p[b-ackvrs0zmc] {
    margin: 0 0 1rem;
}

.bpp-content ul[b-ackvrs0zmc],
.bpp-content ol[b-ackvrs0zmc] {
    padding-left: 1.5rem;
    margin: 0 0 1rem;
}

.bpp-content li[b-ackvrs0zmc] {
    margin-bottom: 0.35rem;
}

.bpp-content strong[b-ackvrs0zmc] {
    font-weight: 700;
    color: #1a1a1a;
}

.bpp-back[b-ackvrs0zmc] {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e6e6e6;
}

.bpp-loading[b-ackvrs0zmc],
.bpp-not-found[b-ackvrs0zmc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 0;
    color: #888;
    text-align: center;
}

.bpp-loading ion-icon[b-ackvrs0zmc],
.bpp-not-found ion-icon[b-ackvrs0zmc] {
    font-size: 2.5rem;
    color: #ccc;
}
/* /Components/Pages/Public/Brands/BrandContact.razor.rz.scp.css */
/* ===================== Contact Form ===================== */

.brand-contact-thankyou[b-w7lf4cpoo0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 1.25rem;
}

.thankyou-icon[b-w7lf4cpoo0] {
    font-size: 4rem;
    color: var(--color-white);
    opacity: 0.9;
    pointer-events: none;
}

.thankyou-heading[b-w7lf4cpoo0] {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
    letter-spacing: 0.5px;
}

.thankyou-sub[b-w7lf4cpoo0] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 420px;
    line-height: 1.6;
    text-align: center !important;
}

.thankyou-btn[b-w7lf4cpoo0] {
    margin-top: 0.5rem;
    padding: 0.75rem 2rem;
    border: 1px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-family-base);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.thankyou-btn:hover[b-w7lf4cpoo0] {
    background: var(--color-white);
    color: var(--color-gray);
}

.thankyou-btn:active[b-w7lf4cpoo0] {
    transform: scale(0.97);
}

.brand-contact-error[b-w7lf4cpoo0] {
    padding: 0.85rem 1rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #9d2235;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}
/* /Components/Pages/Public/Brands/BrandShop.razor.rz.scp.css */
.shop-explore-cta[b-24vm2leca8] {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 3rem;
}
/* /Components/Pages/Public/Brands/DeltaMedicalAesthetics/DeltaMedicalAestheticsHome.razor.rz.scp.css */
/* ===================== Contact Form ===================== */

.brand-contact-thankyou[b-dncj1a81th] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 1.25rem;
}

.thankyou-icon[b-dncj1a81th] {
    font-size: 4rem;
    color: var(--color-white);
    opacity: 0.9;
    pointer-events: none;
}

.thankyou-heading[b-dncj1a81th] {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
    letter-spacing: 0.5px;
}

.thankyou-sub[b-dncj1a81th] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 420px;
    line-height: 1.6;
    text-align: center !important;
}

.thankyou-btn[b-dncj1a81th] {
    margin-top: 0.5rem;
    padding: 0.75rem 2rem;
    border: 1px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-family-base);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.thankyou-btn:hover[b-dncj1a81th] {
    background: var(--color-white);
    color: var(--color-gray);
}

.thankyou-btn:active[b-dncj1a81th] {
    transform: scale(0.97);
}

.brand-contact-error[b-dncj1a81th] {
    padding: 0.85rem 1rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #9d2235;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}
/* /Components/Pages/Public/Brands/DeltaMedicalAesthetics/DeltaMedicalAestheticsProductDetail.razor.rz.scp.css */
/* Brand-specific product detail overrides go here */
/* /Components/Pages/Public/Brands/DeltaMedicalSkincare/DeltaMedicalSkincareHome.razor.rz.scp.css */
/* ===================== Contact Form ===================== */

.brand-contact-thankyou[b-r6cpf1opfk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 1.25rem;
}

.thankyou-icon[b-r6cpf1opfk] {
    font-size: 4rem;
    color: var(--color-white);
    opacity: 0.9;
    pointer-events: none;
}

.thankyou-heading[b-r6cpf1opfk] {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
    letter-spacing: 0.5px;
}

.thankyou-sub[b-r6cpf1opfk] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 420px;
    line-height: 1.6;
    text-align: center !important;
}

.thankyou-btn[b-r6cpf1opfk] {
    margin-top: 0.5rem;
    padding: 0.75rem 2rem;
    border: 1px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-family-base);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.thankyou-btn:hover[b-r6cpf1opfk] {
    background: var(--color-white);
    color: var(--color-gray);
}

.thankyou-btn:active[b-r6cpf1opfk] {
    transform: scale(0.97);
}

.brand-contact-error[b-r6cpf1opfk] {
    padding: 0.85rem 1rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #9d2235;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}
/* /Components/Pages/Public/Brands/DeltaMedicalSkincare/DeltaMedicalSkincareProductDetail.razor.rz.scp.css */
/* Brand-specific product detail overrides go here */
/* /Components/Pages/Public/Brands/Melcura/MelcuraHome.razor.rz.scp.css */
/* ===================== Contact Form ===================== */

.brand-contact-thankyou[b-a673lp5xgg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 1.25rem;
}

.thankyou-icon[b-a673lp5xgg] {
    font-size: 4rem;
    color: var(--color-white);
    opacity: 0.9;
    pointer-events: none;
}

.thankyou-heading[b-a673lp5xgg] {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
    letter-spacing: 0.5px;
}

.thankyou-sub[b-a673lp5xgg] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 420px;
    line-height: 1.6;
    text-align: center !important;
}

.thankyou-btn[b-a673lp5xgg] {
    margin-top: 0.5rem;
    padding: 0.75rem 2rem;
    border: 1px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-family-base);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.thankyou-btn:hover[b-a673lp5xgg] {
    background: var(--color-white);
    color: var(--color-gray);
}

.thankyou-btn:active[b-a673lp5xgg] {
    transform: scale(0.97);
}

.brand-contact-error[b-a673lp5xgg] {
    padding: 0.85rem 1rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #9d2235;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}
/* /Components/Pages/Public/Brands/Melcura/MelcuraProductDetail.razor.rz.scp.css */
/* ====================================================================================================
   File:       MelcuraProductDetail.razor.css
   Purpose:    Melcura brand-specific styles for the product detail page.
                Global product detail layout lives in ProductDetail.razor.css.
                This file contains Melcura-scoped overrides and category banner theming.
==================================================================================================== */
/* /Components/Pages/Public/Brands/Optiphi/OptiphiHome.razor.rz.scp.css */
/* MSC Code Section Styling */
.msc-code-section[b-oy9xzqm340] {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 2rem 0;
}

.msc-logo-container[b-oy9xzqm340] {
    flex-shrink: 0;
}

.msc-logo[b-oy9xzqm340] {
    max-width: 150px;
    height: auto;
    display: block;
}

.msc-text-container[b-oy9xzqm340] {
    flex: 1;
}

.msc-text-container p[b-oy9xzqm340] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}

/* Ranges Grid Styling */
.ranges-grid[b-oy9xzqm340] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.ranges-grid:has(.range-card:hover) .range-card:not(:hover) .range-image[b-oy9xzqm340] {
    filter: brightness(0.7);
}

.range-card[b-oy9xzqm340] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.range-card:hover[b-oy9xzqm340] {
    transform: translateY(-2px);
}

.range-image-container[b-oy9xzqm340] {
    width: 100%;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}



.range-image[b-oy9xzqm340] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.range-card:hover .range-image[b-oy9xzqm340] {
    transform: scale(1.02);
}

.range-title[b-oy9xzqm340] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
}
.skin-concerns-grid[b-oy9xzqm340] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.concern-card[b-oy9xzqm340] {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
   
}

.concern-card:hover[b-oy9xzqm340] {
    transform: translateY(-4px);
    box-shadow: 0 12px 12px rgba(61, 61, 61, 0.12);
}

.concern-title[b-oy9xzqm340] {
    background-color: var(--color-gray);
    color: #ffffff;
    padding: 1rem;
   
    letter-spacing: 0.5px;
    text-align: center;
}

.concern-description[b-oy9xzqm340] {
    background-color: transparent;
    border-bottom: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
    color: #3D3D3D;
    padding: 1rem;
   font-style:italic;
    line-height: 1.5;
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .ranges-grid[b-oy9xzqm340] {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 1024px) {
    .ranges-grid[b-oy9xzqm340] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .skin-concerns-grid[b-oy9xzqm340] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .msc-code-section[b-oy9xzqm340] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }

    .msc-logo[b-oy9xzqm340] {
        max-width: 120px;
    }

    .ranges-grid[b-oy9xzqm340] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .skin-concerns-grid[b-oy9xzqm340] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .concern-title[b-oy9xzqm340],
    .concern-description[b-oy9xzqm340] {
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    .range-title[b-oy9xzqm340] {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .ranges-grid[b-oy9xzqm340] {
        grid-template-columns: 1fr;
    }

    .skin-concerns-grid[b-oy9xzqm340] {
        grid-template-columns: 1fr;
    }
}

/* Testimonial Section Styling */
.testimonial-section[b-oy9xzqm340] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 60%;
    margin: 0 auto;
    margin-bottom: 8rem;
    margin-top: 8rem;
    overflow: visible;
    position: relative;
}

/* Testimonial Image Wrapper */
.testimonial-image-wrapper[b-oy9xzqm340] {
    position: absolute;
    width: 250%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 2;
    left: -550px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

    .testimonial-image-wrapper img[b-oy9xzqm340] {
        width: 250%;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 2px 2px rgba(61, 61, 61, 0.2));
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }



/* Testimonial Review Content */
.testimonial-review[b-oy9xzqm340] {
    width: 100%;
    padding:2rem 7rem 2rem 10rem;
    color: #ffffff;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #3D3D3D 0%, #2a2a2a 100%);
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-review.transitioning[b-oy9xzqm340] {
    opacity: 0;
}

.testimonial-review .stars[b-oy9xzqm340],
.testimonial-review .testimonial-title[b-oy9xzqm340],
.testimonial-review .testimonial-text[b-oy9xzqm340],
.testimonial-review .testimonial-author[b-oy9xzqm340] {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-review[b-oy9xzqm340]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%);
    pointer-events: none;
    border-radius: 8px;
}

.testimonial-review .btn-primary-inverted[b-oy9xzqm340] {
    cursor: pointer;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* Testimonial Navigation */
.testimonial-nav[b-oy9xzqm340] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 3;
}

.testimonial-arrow[b-oy9xzqm340] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    pointer-events: auto;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.testimonial-arrow:hover[b-oy9xzqm340] {
    transform: scale(1.08);
}

.testimonial-arrow:active[b-oy9xzqm340] {
    transform: scale(0.98);
}

.testimonial-indicators[b-oy9xzqm340] {
    display: none;
}

.indicator[b-oy9xzqm340] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(61, 61, 61, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active[b-oy9xzqm340] {
    background-color: #3D3D3D;
    transform: scale(1.3);
}

.stars[b-oy9xzqm340] {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
    letter-spacing: 4px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-title[b-oy9xzqm340] {
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
    letter-spacing: 1.5px;
    line-height: 1.3;
    color: #ffffff;
}

.testimonial-text[b-oy9xzqm340] {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    text-align: justify;
    color: #e8e8e8;
}

.testimonial-text:last-of-type[b-oy9xzqm340] {
    margin-bottom: 1.5rem;
}

.testimonial-author[b-oy9xzqm340] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



@media (max-width: 768px) {
    .testimonial-section[b-oy9xzqm340] {
        align-items: center;
    }

    .testimonial-image-wrapper[b-oy9xzqm340] {
        position: relative;
        width: 150px;
        left: auto;
        top: auto;
        transform: none;
        margin-bottom: -30px;
    }

    .testimonial-review[b-oy9xzqm340] {
        width: 100%;
        padding: 3.5rem 2rem 2rem 2rem;
        text-align: center;
    }

    .testimonial-title[b-oy9xzqm340] {
        font-size: 1.35rem;
    }

    .testimonial-text[b-oy9xzqm340] {
        text-align: center;
        font-size: 0.85rem;
    }

    .testimonial-nav[b-oy9xzqm340] {
        gap: 2.5rem;
        margin-top: 2.5rem;
    }

    .testimonial-arrow[b-oy9xzqm340] {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .testimonial-section[b-oy9xzqm340] {
        align-items: center;
    }

    .testimonial-image-wrapper[b-oy9xzqm340] {
        position: relative;
        width: 120px;
        left: auto;
        top: auto;
        transform: none;
        margin-bottom: -25px;
    }

    .testimonial-review[b-oy9xzqm340] {
        width: 100%;
        padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    }

    .testimonial-title[b-oy9xzqm340] {
        font-size: 1.15rem;
    }

    .testimonial-text[b-oy9xzqm340] {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .stars[b-oy9xzqm340] {
        font-size: 1.2rem;
    }

    .testimonial-nav[b-oy9xzqm340] {
        gap: 1.75rem;
        margin-top: 2rem;
    }

    .testimonial-arrow[b-oy9xzqm340] {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
    }
}

/* Brand Cards Grid */
.brand-cards-grid[b-oy9xzqm340] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}

.brand-card[b-oy9xzqm340] {
    position: relative;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 2px;
}



.brand-card-overlay[b-oy9xzqm340] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.brand-card:hover .brand-card-overlay[b-oy9xzqm340] {
}

.brand-card-content[b-oy9xzqm340] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    padding:4rem;
    color: #ffffff;
}

.brand-card-logo[b-oy9xzqm340] {
    width: 80%;
    height: auto;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-card:hover .brand-card-logo[b-oy9xzqm340] {
    transform: scale(1.02);
}

.brand-card-logo img[b-oy9xzqm340] {
    width: 250%;
    height: auto;
    object-fit: contain;
}

.brand-card-title[b-oy9xzqm340] {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.brand-card-description[b-oy9xzqm340] {
    text-align: center !important;
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
    color: #e8e8e8;
}

.brand-card-button[b-oy9xzqm340] {
    padding: 0.75rem 1.75rem;
    border: 1px solid #ffffff;
    background-color: transparent;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-card-button:hover[b-oy9xzqm340] {
    background-color: #ffffff;
    color: #3D3D3D;
}

.brand-card-button:active[b-oy9xzqm340] {
    transform: scale(0.98);
}

/* Responsive Brand Cards */
@media (max-width: 1024px) {
    .brand-cards-grid[b-oy9xzqm340] {
        gap: 2rem;
        max-width: 1000px;
    }

    .brand-card-content[b-oy9xzqm340] {
        padding: 2.5rem;
    }

    .brand-card-logo[b-oy9xzqm340] {
        width: 120px;
        margin-bottom: 1.25rem;
    }

    .brand-card-title[b-oy9xzqm340] {
        font-size: 1.5rem;
    }

    .brand-card-description[b-oy9xzqm340] {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .brand-cards-grid[b-oy9xzqm340] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 100%;
    }

    .brand-card-content[b-oy9xzqm340] {
        padding: 2rem;
    }

    .brand-card-logo[b-oy9xzqm340] {
        width: 100px;
    }

    .brand-card-title[b-oy9xzqm340] {
        font-size: 1.25rem;
        letter-spacing: 1.5px;
    }

    .brand-card-description[b-oy9xzqm340] {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .brand-cards-grid[b-oy9xzqm340] {
        gap: 1rem;
    }

    .brand-card-content[b-oy9xzqm340] {
        padding: 1.5rem;
    }

    .brand-card-logo[b-oy9xzqm340] {
        width: 80px;
        margin-bottom: 0.75rem;
    }

    .brand-card-title[b-oy9xzqm340] {
        font-size: 1.1rem;
    }

    .brand-card-description[b-oy9xzqm340] {
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }

    .brand-card-button[b-oy9xzqm340] {
        padding: 0.6rem 1.25rem;
        font-size: 0.7rem;
    }
}


/* ====================================
   Contact Form
======================================= */

.optiphi-contact-intro[b-oy9xzqm340] {
    max-width: 560px;
    font-size: 0.95rem;
    color: var(--color-gray, #555);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.optiphi-contact-form[b-oy9xzqm340] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 680px;
    width: 100%;
}

.optiphi-contact-row[b-oy9xzqm340] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.optiphi-contact-field[b-oy9xzqm340] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.optiphi-contact-textarea[b-oy9xzqm340] {
    resize: vertical;
    min-height: 110px;
}

/* Full-page thank-you state */
.optiphi-contact-thankyou[b-oy9xzqm340] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 1.25rem;
}

.thankyou-icon[b-oy9xzqm340] {
    font-size: 4rem;
    color: var(--color-white);
    opacity: 0.9;
    pointer-events: none;
}

.thankyou-heading[b-oy9xzqm340] {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
    letter-spacing: 0.5px;
}

.thankyou-sub[b-oy9xzqm340] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 420px;
    line-height: 1.6;
    text-align: center !important;
}

.thankyou-btn[b-oy9xzqm340] {
    margin-top: 0.5rem;
    padding: 0.75rem 2rem;
    border: 1px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-family-base);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.thankyou-btn:hover[b-oy9xzqm340] {
    background: var(--color-white);
    color: var(--color-gray);
}

.thankyou-btn:active[b-oy9xzqm340] {
    transform: scale(0.97);
}

.optiphi-contact-error[b-oy9xzqm340] {
    padding: 0.85rem 1rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #9d2235;
    font-size: 0.88rem;
}

@media (max-width: 600px) {
    .optiphi-contact-row[b-oy9xzqm340] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Public/Brands/Optiphi/OptiphiProductDetail.razor.rz.scp.css */
/* ====================================================================================================
   File:       OptiphiProductDetail.razor.css
   Purpose:    Optiphi brand-specific styles for the product detail page.
                Global product detail layout lives in ProductDetail.razor.css.
                This file contains Optiphi-scoped overrides and category banner theming.
==================================================================================================== */
/* /Components/Pages/Public/Brands/ProductDetail.razor.rz.scp.css */
/* ====================================================================================================
   File:       ProductDetail.razor.css
   Purpose:    Page-level styles for the ProductDetail page.
                Covers product image, carousel, details, price, controls, tabs, reviews, and responsive.
==================================================================================================== */

/* ---------- Product Image ---------- */
.product-image-wrapper[b-79r6ulor9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed square box for consistent layout */
    width: 520px;
    height: 520px;
    max-width: 100%; /* shrink on very small screens */
    border: 1px solid #ccc;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
}

/* Products Navigation */
.products-nav[b-79r6ulor9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 3;
}

.products-arrow[b-79r6ulor9j] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    pointer-events: auto;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.products-arrow:hover:not(:disabled)[b-79r6ulor9j] {
    transform: scale(1.08);
}

.products-arrow:active:not(:disabled)[b-79r6ulor9j] {
    transform: scale(0.98);
}

.products-arrow:disabled[b-79r6ulor9j] {
    opacity: 0.4;
    cursor: not-allowed;
}

.product-image[b-79r6ulor9j] {
    /* Keep the image contained within the fixed box and centered */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: auto;
}

/* Fade animations for image transitions */
.product-image[b-79r6ulor9j] {
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    opacity: 1;
}

.product-image.fade-out[b-79r6ulor9j] {
    opacity: 0;
    transform: scale(0.995);
}

/* ---------- Carousel / Navigation ---------- */
.product-image-carousel[b-79r6ulor9j] {
    position: relative;
    width: 100%;
    max-width: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-nav[b-79r6ulor9j] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.08s ease;
    z-index: 5;
}

.carousel-nav:hover[b-79r6ulor9j] {
    background-color: rgba(0,0,0,0.8);
    transform: translateY(-50%) scale(1.05);
}

.carousel-prev[b-79r6ulor9j] { left: 8px; }
.carousel-next[b-79r6ulor9j] { right: 8px; }

/* Thumbnails */
.product-thumbnails[b-79r6ulor9j] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
}

.thumb-btn[b-79r6ulor9j] {
    border: 1px solid transparent;
    background: transparent;
    padding: 2px;
    cursor: pointer;
    display: inline-block;
}

.thumb-btn.active[b-79r6ulor9j] {
    border-color: var(--color-accent, #333);
}

.thumb-image[b-79r6ulor9j] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .product-image-wrapper[b-79r6ulor9j] { width: 100%; }
    .product-image-carousel[b-79r6ulor9j] { max-width: 360px; }
    .thumb-image[b-79r6ulor9j] { width: 52px; height: 52px; }
    .carousel-nav[b-79r6ulor9j] { width: 36px; height: 36px; font-size: 18px; }
}

/* ---------- Product Details ---------- */
.product-details[b-79r6ulor9j] {
    display: flex;
    flex-direction: column;
    
}

.product-price[b-79r6ulor9j] {
    border-bottom: 2px solid var(--border-light, #e0e0e0);
    padding-bottom: 1.5rem;
}

.product-price h2[b-79r6ulor9j] {
    margin: 0;
    font-size: 2rem;
    color: var(--color-gray, #333);
    font-weight: 600;
}

/* ---------- Product Description ---------- */
.product-description[b-79r6ulor9j] {
    line-height: 1.8;
}

.product-description p[b-79r6ulor9j] {
    margin: 0;
    color: var(--text-primary, #333);
    font-size: 1rem;
}

/* ---------- Product Benefits ---------- */
.product-benefits[b-79r6ulor9j] {
    background-color: var(--bg-light, #f9f9f9);
    padding: 1.5rem;
    border-radius: 4px;
    border-left: 4px solid var(--color-gray, #999);
}

.product-benefits h3[b-79r6ulor9j] {
    margin: 0 0 1rem 0;
    color: var(--color-gray, #333);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-benefits p[b-79r6ulor9j] {
    margin: 0;
    color: var(--text-secondary, #666);
    line-height: 1.6;
}

/* ---------- Out of Stock Message ---------- */
.out-of-stock-message[b-79r6ulor9j] {
    display: inline-block !important;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 20px;
}

/* ---------- Product Controls ---------- */
.product-controls[b-79r6ulor9j] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.action-buttons[b-79r6ulor9j] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 2rem;
}

.add-to-cart-btn[b-79r6ulor9j] {
    white-space: nowrap;
}

.action-btn[b-79r6ulor9j] {
    width: 40px;
    height: 40px;
    border: 1px solid #333;
    background-color: #333;
    color: white;
    cursor: pointer;
    border-radius: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.action-btn.wishlist-btn[b-79r6ulor9j] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #333;
    padding: 0;
    transition: all 0.2s;
    font-size: 40px;
}

.action-btn.wishlist-btn:hover[b-79r6ulor9j] {
    transform: scale(1.1);
}

.action-btn.share-btn[b-79r6ulor9j] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #333;
    padding: 0;
    transition: all 0.2s;
    font-size: 28px;
}

.action-btn.share-btn:hover[b-79r6ulor9j] {
    transform: scale(1.1);
}

.action-btn:hover:not(.wishlist-btn):not(.share-btn)[b-79r6ulor9j] {
    border-color: #333;
    background-color: #f9f9f9;
    color: #333;
}

/* ---------- Quantity Control ---------- */
.quantity-control[b-79r6ulor9j] {
    display: flex;
    align-items: center;
    border: 1px solid #333;
    border-radius: 0;
    height: 60px;
    padding: 0;
    width: auto;
}

.qty-btn[b-79r6ulor9j] {
    background-color: transparent;
    border: none;
    width: 60px;
    height: 100%;
    cursor: pointer;
    font-size: 18px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-weight: 300;
    flex-shrink: 0;
    padding: 0;
}

.qty-btn:hover[b-79r6ulor9j] {
    background-color: #f0f0f0;
}

.qty-btn:disabled[b-79r6ulor9j] {
    cursor: not-allowed;
    opacity: 0.5;
}

.qty-btn:disabled:hover[b-79r6ulor9j] {
    background-color: transparent;
}

.qty-input[b-79r6ulor9j] {
    width: 50px;
    border: none;
    text-align: center;
    font-size: 16px;
    padding: 0;
    background-color: transparent;
    height: 100%;
}

.qty-input:disabled[b-79r6ulor9j] {
    cursor: not-allowed;
    opacity: 0.5;
}

.qty-input[b-79r6ulor9j]::-webkit-outer-spin-button,
.qty-input[b-79r6ulor9j]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-input[type=number][b-79r6ulor9j] {
    -moz-appearance: textfield;
}

/* ---------- Product Price Section ---------- */
.product-price-section[b-79r6ulor9j] {
   
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price-label[b-79r6ulor9j] {
    display: inline;

    letter-spacing: 0.5px;
    color: #333;
    margin-bottom: 0;
}

.price-amount[b-79r6ulor9j] {
    font-size: 24px;
    font-weight: 600;
    color: #333;
   
    display: inline;
}

/* ---------- Shipping Info ---------- */
.shipping-info[b-79r6ulor9j] {
    color: #666;
    margin-bottom: 25px;
    font-style: italic;
}

/* ---------- Product Option ---------- */
.product-option[b-79r6ulor9j] {
    margin-bottom: 20px;
}

.size-selector-wrapper[b-79r6ulor9j] {
    position: relative;
    width: 100%;
}

.size-selector[b-79r6ulor9j] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    background-color: white;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    height: 44px;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
}

.size-selector-icon[b-79r6ulor9j] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #333;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.size-selector-icon.open[b-79r6ulor9j] {
    transform: translateY(-50%) rotate(180deg);
}

.size-selector:hover[b-79r6ulor9j] {
    border-color: #999;
}

.size-selector:focus[b-79r6ulor9j] {
    outline: none;
    border-color: #333;
}

/* Attempt to reduce default blue selection on some browsers and provide a neutral hover */
.size-selector[b-79r6ulor9j] {
    -webkit-tap-highlight-color: transparent;
}

.size-selector option[b-79r6ulor9j] {
    background-color: #fff;
    color: #333;
}

/* Some browsers honor :hover/:active on options; use a light neutral instead of blue */
.size-selector option:hover[b-79r6ulor9j],
.size-selector option:active[b-79r6ulor9j] {
    background-color: #f5f5f5;
    color: #333;
}

/* On Windows Chrome the native highlight may still show; using focus-visible on select to provide consistent visual */
.size-selector:focus-visible[b-79r6ulor9j] {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}

/* ---------- Product Tabs ---------- */
.product-tabs-container[b-79r6ulor9j] {
    margin-top: 2rem;
  
    margin-left: auto;
    margin-right: auto;

}

.tabs-header[b-79r6ulor9j] {
    display: flex;
    gap: 0;
 
   
}

.tab-btn[b-79r6ulor9j] {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-bottom: none;
    background-color: white;
    color: #333;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s;
    margin-right: -1px;
}

.tab-btn:hover[b-79r6ulor9j] {
    background-color: #f9f9f9;
}

.tab-btn.active[b-79r6ulor9j] {
    background-color: #333;
    color: white;
    border-color: #333;
}

.tabs-content[b-79r6ulor9j] {
    padding: 2rem 2rem;
    border: 1px solid #ddd;
}

.tab-pane[b-79r6ulor9j] {
    display: none;
}

.tab-pane.active[b-79r6ulor9j] {
    display: block;
}

.benefits-list[b-79r6ulor9j] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li[b-79r6ulor9j] {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #555;
  
}

.benefits-list strong[b-79r6ulor9j] {
    color: #333;
    display: block;
    margin-bottom: 5px;
}

.directions-list[b-79r6ulor9j] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.directions-list li[b-79r6ulor9j] {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #555;
 
}

.directions-list strong[b-79r6ulor9j] {
    color: #333;
}

/* ---------- Customer Reviews Section ---------- */
.reviews-summary[b-79r6ulor9j] {
    padding: 30px;
    background-color: #333;
    color: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    grid-template-rows: auto auto;

}

.rating-section[b-79r6ulor9j] {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.rating-display[b-79r6ulor9j] {
    flex-shrink: 0;
}

.rating-display-center[b-79r6ulor9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.rating-number[b-79r6ulor9j] {
    font-size: 70px;
    font-weight: 600;
    color: white;
    line-height: 1;
    margin-bottom: 5px;
}

.rating-stars[b-79r6ulor9j] {
    font-size: 30px;
    color: white;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.review-count[b-79r6ulor9j] {
    font-size: 13px;
    color: white;
}

.rating-breakdown[b-79r6ulor9j] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.rating-bar[b-79r6ulor9j] {
    display: flex;
    align-items: center;
    gap: 12px;
  
}

.bar-label[b-79r6ulor9j] {
    color: #ccc;
    min-width: 30px;
    text-align: right;
}

.bar-container[b-79r6ulor9j] {
    flex: 1;
    height: 8px;
    background-color: #555;
    border-radius: 2px;
    overflow: hidden;
    min-width: 150px;
    border-radius: 100px;
}

.bar-fill[b-79r6ulor9j] {
    height: 100%;
    background-color: white;
    border-radius: 100px;
}

.bar-percent[b-79r6ulor9j] {
    color: #ccc;
    min-width: 35px;
    text-align: right;
}

.review-cta[b-79r6ulor9j] {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 20px;
    border-top: 1px solid #555;
}

.review-cta-center[b-79r6ulor9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.review-cta-title[b-79r6ulor9j] {
  
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
    margin: 0 0 8px 0;
}

.review-cta-subtitle[b-79r6ulor9j] {
   
    color: #ccc;
    margin: 0 0 15px 0;
}

.write-review-btn[b-79r6ulor9j] {
    padding: 10px 20px;
    border: 1px solid white;
    background-color: transparent;
    color: white;
    cursor: pointer;
   
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s;
}

.write-review-btn:hover[b-79r6ulor9j] {
    background-color: white;
    color: #333;
}

.reviews-list[b-79r6ulor9j] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.review-item[b-79r6ulor9j] {
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.review-item:last-child[b-79r6ulor9j] {
    border-bottom: none;
}

.review-header[b-79r6ulor9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.reviewer-name[b-79r6ulor9j] {
    margin: 0;
    
    font-weight: 600;
    color: #333;
}

.review-rating[b-79r6ulor9j] {
    color: #333;
    letter-spacing: 1px;
}

.review-title[b-79r6ulor9j] {

    font-weight: 600;
    color: #333;
    margin: 8px 0 12px 0;
}

.review-text[b-79r6ulor9j] {
 
    color: #555;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.review-text:last-child[b-79r6ulor9j] {
    margin-bottom: 0;
}

/* ---------- Notify Me Section (Out of Stock) ---------- */
.action-btn.notify-btn[b-79r6ulor9j] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    padding: 0;
    transition: all 0.2s;
    font-size: 40px;
}

.action-btn.notify-btn:hover[b-79r6ulor9j] {
    transform: scale(1.1);
}

.action-btn.notify-btn:active[b-79r6ulor9j] {
    transform: scale(0.98);
}

.product-info-section h3[b-79r6ulor9j] {
    color: var(--color-gray, #333);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-info-section p[b-79r6ulor9j] {
    color: var(--text-secondary, #666);
    line-height: 1.6;
    margin: 0;
}

/* ---------- Responsive Design ---------- */
@media (max-width: 768px) {
    .product-image-wrapper[b-79r6ulor9j] {
        min-height: 300px;
    }

    .product-image[b-79r6ulor9j] {
        padding: 1rem;
    }

    .product-details[b-79r6ulor9j] {
        gap: 1.5rem;
    }

    .product-price h2[b-79r6ulor9j] {
        font-size: 1.75rem;
    }

    .product-description p[b-79r6ulor9j] {
        font-size: 0.95rem;
    }

    .product-benefits[b-79r6ulor9j] {
        padding: 1rem;
    }

    .product-benefits h3[b-79r6ulor9j] {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .product-actions[b-79r6ulor9j] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .product-image-wrapper[b-79r6ulor9j] {
        min-height: 250px;
    }

    .product-price h2[b-79r6ulor9j] {
        font-size: 1.5rem;
    }

    .product-details[b-79r6ulor9j] {
        gap: 1rem;
    }

    .product-description p[b-79r6ulor9j] {
        font-size: 0.9rem;
    }

    .product-benefits[b-79r6ulor9j] {
        padding: 0.75rem;
        border-left-width: 3px;
    }

    .product-benefits h3[b-79r6ulor9j] {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
}
/* /Components/Pages/Public/Brands/Visi/VisiHome.razor.rz.scp.css */
/* ===================== Contact Form ===================== */

.brand-contact-thankyou[b-w64tca8g1v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 1.25rem;
}

.thankyou-icon[b-w64tca8g1v] {
    font-size: 4rem;
    color: var(--color-white);
    opacity: 0.9;
    pointer-events: none;
}

.thankyou-heading[b-w64tca8g1v] {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
    letter-spacing: 0.5px;
}

.thankyou-sub[b-w64tca8g1v] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 420px;
    line-height: 1.6;
    text-align: center !important;
}

.thankyou-btn[b-w64tca8g1v] {
    margin-top: 0.5rem;
    padding: 0.75rem 2rem;
    border: 1px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-family-base);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.thankyou-btn:hover[b-w64tca8g1v] {
    background: var(--color-white);
    color: var(--color-gray);
}

.thankyou-btn:active[b-w64tca8g1v] {
    transform: scale(0.97);
}

.brand-contact-error[b-w64tca8g1v] {
    padding: 0.85rem 1rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #9d2235;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}
/* /Components/Pages/Public/Brands/Visi/VisiProductDetail.razor.rz.scp.css */
/* Brand-specific product detail overrides go here */
/* /Components/Pages/Public/Cart/AccountCart.razor.rz.scp.css */
/* ============================== Brand Selector ============================== */

/* Mobile dropdown (hidden on tablet+) */
.brand-selector-dropdown[b-ot6f9voj1h] {
    display: none;
    padding: 1.25rem 0.75rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-dropdown select[b-ot6f9voj1h] {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background-color: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

/* Button tabs (tablet+) */
.brand-selector[b-ot6f9voj1h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 2rem 1.25rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-btn[b-ot6f9voj1h] {
    padding: 0.6rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.brand-selector-btn:hover[b-ot6f9voj1h],
.brand-selector-btn.active[b-ot6f9voj1h] {
    background: var(--color-gray, #333);
    border-color: var(--color-gray, #333);
    color: white;
}

@media (max-width: 768px) {
    .brand-selector[b-ot6f9voj1h] { display: none; }
    .brand-selector-dropdown[b-ot6f9voj1h] { display: block; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .brand-selector[b-ot6f9voj1h] {
        gap: 0.6rem;
        padding: 1.75rem 1.25rem 0;
    }

    .brand-selector-btn[b-ot6f9voj1h] {
        padding: 0.55rem 1.5rem;
        font-size: 0.82rem;
    }
}

/* ============================== Cart ============================== */

.cart-container[b-ot6f9voj1h] {
  display: block;
  /* fixed height for the left column list so the summary (column2) remains visible */
  max-height: 520px;
  overflow-y: auto;
  padding-right: 8px; /* space for scrollbar */
}

.promo-items-container[b-ot6f9voj1h] {
  display: block;
  /* no fixed height for promo items - let them flow naturally */
  padding-right: 8px;
  margin-top: 20px;
  margin-bottom: 40px;
}

.promo-items-list[b-ot6f9voj1h] {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
}

.cart-list[b-ot6f9voj1h] {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  /* ensure the list stretches to available height so inner scrolling works */
  box-sizing: border-box;
}

.cart-item[b-ot6f9voj1h] {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 18px;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}

.cart-item.out-of-stock[b-ot6f9voj1h] {
  filter: brightness(0.6);
}

.cart-item.out-of-stock .notify-me-btn[b-ot6f9voj1h],
.cart-item.out-of-stock .notify-me-btn ion-icon[b-ot6f9voj1h] {
  filter: brightness(0.7);
  pointer-events: auto;
}

.cart-item-left[b-ot6f9voj1h] {
  /* increase container to accommodate larger thumbnail */
  width: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 18px;
}

.cart-thumb[b-ot6f9voj1h] {
  /* thumbnail applied directly on the img element */
  width: 200px;
  height: 200px;
  max-width: 100%; /* keep responsive on small screens */
  object-fit: contain;
  display: block;
}

.cart-item-center[b-ot6f9voj1h] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.cart-item-name[b-ot6f9voj1h] {
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.cart-item-brand[b-ot6f9voj1h] {
  font-size: 0.9rem;
  color: #9b9b9b;
  margin-bottom: 6px;
}

.cart-item-size[b-ot6f9voj1h] {
  color: #777;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.cart-item-unit-price[b-ot6f9voj1h] {
  color: #444;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

/* Make free-item quantity display look like the unit-price styling (e.g. "R 500,00 each") */
.quantity-display[b-ot6f9voj1h] {
  color: #444;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.cart-item-meta[b-ot6f9voj1h] {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.notify-me-btn[b-ot6f9voj1h] {
  width: auto;
  height: auto;
  border: none;
  background-color: transparent;
  color: #3D3D3D;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  z-index: 10;
  font-size: 40px;
}

.notify-me-btn ion-icon[b-ot6f9voj1h] {
  font-size: 40px;
  color: #3D3D3D;
  display: block;
  margin: 0;
}

.notify-me-btn:hover[b-ot6f9voj1h] {
  transform: scale(1.1);
}

.notify-me-btn:active[b-ot6f9voj1h] {
  transform: scale(0.98);
}

/* Use the same quantity control styling as the product detail page for visual consistency */
.quantity-control[b-ot6f9voj1h] {
  display: flex;
  align-items: center;
  border: 1px solid #333;
  border-radius: 0;
  height: 60px;
  padding: 0;
  width: auto;
}

.qty-btn[b-ot6f9voj1h] {
  background-color: transparent;
  border: none;
  width: 60px;
  height: 100%;
  cursor: pointer;
  font-size: 18px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: 300;
  flex-shrink: 0;
  padding: 0;
}

.qty-btn:hover:not([disabled])[b-ot6f9voj1h] {
  background-color: #f0f0f0;
}

.qty-btn[disabled][b-ot6f9voj1h] {
  opacity: 0.6;
  cursor: not-allowed;
}

.qty-input[b-ot6f9voj1h] {
  width: 50px;
  border: none;
  text-align: center;
  font-size: 16px;
  padding: 0;
  background-color: transparent;
  height: 100%;
}

.qty-input[b-ot6f9voj1h]::-webkit-outer-spin-button,
.qty-input[b-ot6f9voj1h]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input[type=number][b-ot6f9voj1h] {
  -moz-appearance: textfield;
}

.remove-btn[b-ot6f9voj1h] {
  border: 1px solid #ccc;
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  height: 36px;
  align-self: center;
}

.cart-item-right[b-ot6f9voj1h] {
  width: 140px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cart-item-price[b-ot6f9voj1h] {
  font-weight: 600;
  color: #222;
}

.cart-item-spinner[b-ot6f9voj1h] {
  font-size: 0.9rem;
  color: #666;
}

/* Summary and totals styling to better match the provided screenshot */
.cart-summary[b-ot6f9voj1h] {
  border: none; /* remove outer border for summary column */
  padding: 18px 8px; /* keep spacing but reduce visual weight */
  background: transparent;
  outline: none;
  box-shadow: none;
}

.cart-totals[b-ot6f9voj1h] {
  max-width: 900px;
  margin: 20px auto;
  border-top: 1px solid #e6e6e6;
  padding-top: 18px;
}

.totals-row[b-ot6f9voj1h] {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
}

.totals-row span:first-child[b-ot6f9voj1h] {
  font-weight: 600; /* make labels bold */
  color: #333;
}

.totals-row span:last-child[b-ot6f9voj1h] {
  font-weight: 700; /* make values more prominent */
  color: #111;
}

.checkout-btn[b-ot6f9voj1h] {
  border: 1px solid #222;
  background: transparent;
  padding: 10px 18px;
  cursor: pointer;
}

@media (max-width: 700px) {
  .cart-item[b-ot6f9voj1h] {
    flex-direction: column;
    align-items: stretch;
  }

  .cart-item-left[b-ot6f9voj1h] {
    width: 100%;
    padding-right: 0;
    margin-bottom: 10px;
  }

  .cart-item-right[b-ot6f9voj1h] {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }
}

/* When layout uses ContentColumns/Column1 and Column2, limit Column1 height and enable scroll */
.content-columns .column1[b-ot6f9voj1h] {
  max-height: 520px;
  overflow-y: auto;
}

/* Styles from CheckoutAddress to render abandoned order boxes */
:root[b-ot6f9voj1h]{--color-gray:#666}

.order-box[b-ot6f9voj1h]{border:1px solid #e6e6e6;padding:0;margin:0;max-width:1600px;margin-left:auto;margin-right:auto}
.order-header[b-ot6f9voj1h] {
    background: #e6e6e6;
    padding: 10px 0;
    text-align: center;
    font-weight: 600
}
.order-body[b-ot6f9voj1h]{display:flex;flex-direction:column;gap:12px;padding:10px 20px;align-items:center}
.order-row[b-ot6f9voj1h]{display:flex;gap:24px;align-items:center;width:100%}
.order-info[b-ot6f9voj1h]{width:300px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
.order-meta[b-ot6f9voj1h]{margin-bottom:8px;text-align:left}
.order-meta div[b-ot6f9voj1h]{margin-bottom:6px;color:#333}
.order-info .checkout-actions[b-ot6f9voj1h]{
  display: flex;
  gap: 12px; /* increased spacing between Restore and Discard buttons */
  margin-top: 8px;
}
.track-btn[b-ot6f9voj1h]{border:1px solid #333;background:#fff;padding:10px 14px;cursor:pointer}
.order-products[b-ot6f9voj1h]{flex:1}
.order-item-title[b-ot6f9voj1h]{margin:0}
.order-items-row[b-ot6f9voj1h]{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start;justify-items:center}
.order-items-row.paged[b-ot6f9voj1h]{overflow:visible}

.order-item[b-ot6f9voj1h]{display:flex;flex-direction:row;align-items:center;gap:0px;min-width:220px;max-width:420px;padding:18px;border:none;border-radius:6px;background:transparent}
.order-item-img-wrap[b-ot6f9voj1h]{width:140px;height:140px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.order-item-img-wrap img[b-ot6f9voj1h]{max-width:100%;max-height:100%;object-fit:contain}
.order-item-info[b-ot6f9voj1h]{display:flex;flex-direction:column;align-items:flex-start}
.order-item-info-right[b-ot6f9voj1h]{align-items:flex-start}
.order-item-title[b-ot6f9voj1h] {
    font-size: 13px;
    color: #666;
    margin-top: 6px
}
.order-item-size[b-ot6f9voj1h]{font-size:13px;color:#666;margin-top:6px}
.order-item-qty[b-ot6f9voj1h]{font-size:13px;color:#666;margin-top:6px}

/* Navigation similar to testimonial nav used on home */
.products-nav[b-ot6f9voj1h]{display:flex;align-items:center;justify-content:center;gap:3rem;margin-top:1rem}
.products-arrow[b-ot6f9voj1h]{width:auto;height:auto;border:none;background-color:transparent;color:#3D3D3D;font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);padding:0.5rem 1rem;font-weight:500;letter-spacing:0.5px;text-transform:uppercase}
.products-arrow:hover:not(:disabled)[b-ot6f9voj1h]{transform:scale(1.08)}
.products-arrow:active:not(:disabled)[b-ot6f9voj1h]{transform:scale(0.98)}
.products-arrow:disabled[b-ot6f9voj1h]{opacity:0.4;cursor:not-allowed}
.testimonial-indicators[b-ot6f9voj1h]{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:8px}
.testimonial-indicators .indicator[b-ot6f9voj1h]{width:10px;height:10px;border-radius:50%;background:#e0e0e0}
.testimonial-indicators .indicator.active[b-ot6f9voj1h]{background:#333}
.products-grid.transitioning[b-ot6f9voj1h] {
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.order-items-row.transitioning[b-ot6f9voj1h] {
    opacity: 0.6;
    transition: opacity 0.12s ease-in-out;
}

/* Promotion badge for free items in the gallery/grid */
.order-item-badge[b-ot6f9voj1h]{

    color:#fff;
    background:#333;
    padding:3px 6px;

    margin-top:6px;
    display:inline-block;
}

/* Badge used in promo items section */
.promo-badge[b-ot6f9voj1h] {
  color: #fff;
  padding: 4px 10px;
  font-size: 0.95rem;
  display: inline-block;
  margin-top: 0;
  white-space: nowrap;
  width: fit-content;
}

/* Add to cart button for promo items */
.add-promo-btn[b-ot6f9voj1h] {
  border: 1px solid #333;
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  height: 36px;
  align-self: center;
  font-weight: 600;
  font-size: 12px;
}

/* Small highlight used in price breakdown to show promotion name (kept subtle)
   The gallery uses .order-item-badge while the cart breakdown keeps a clearer label. */
.promo-highlight[b-ot6f9voj1h] {
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 4px 8px;

  font-weight: 600;
  font-size: 11px;
  margin-top: 6px;
}

/* Enhanced styling for the promotions applied section banner */
.promotions-applied-section[b-ot6f9voj1h] {
  margin-bottom: 30px;
  padding: 0;
  border-radius: 0;
  border-left: none;
  box-shadow: none;
}

.promotions-applied-section h3[b-ot6f9voj1h] {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
  text-transform: none;
  letter-spacing: normal;
}

/* Promo items now use the same card styling as cart items */

/* Item breakdown button and styling */
.btn-item-breakdown[b-ot6f9voj1h] {
  border: 1px solid #333;
  background: transparent;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  text-align: left;
  transition: all 0.3s ease;
}

.btn-item-breakdown:hover[b-ot6f9voj1h] {
  background-color: #f5f5f5;
}

.items-toggle-icon[b-ot6f9voj1h] {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 18px;
}

.items-toggle-icon.rotated[b-ot6f9voj1h] {
  transform: rotate(180deg);
}

.items-list[b-ot6f9voj1h] {
  border: 1px solid #e6e6e6;
  padding: 16px;
  background-color: #fafafa;
}

.brand-group[b-ot6f9voj1h] {
  margin-bottom: 20px;
}

.brand-group ul[b-ot6f9voj1h] {
  list-style: none;
  padding: 0;
  margin: 0;
}

.brand-group li[b-ot6f9voj1h] {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.brand-group li:last-child[b-ot6f9voj1h] {
  border-bottom: none;
}

/* Line styling for totals */
.line[b-ot6f9voj1h] {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 12px;
}

.line.mt-4[b-ot6f9voj1h] {
  margin-top: 16px;
}

.line.total[b-ot6f9voj1h] {
  border-top: 1px solid #333;
  border-bottom: none;
  padding-top: 12px;
  font-weight: 700;
  font-size: 16px;
}

.mb-4[b-ot6f9voj1h] {
  margin-bottom: 16px;
}

.ms-1[b-ot6f9voj1h] {
  margin-left: 8px;
}

.d-flex[b-ot6f9voj1h] {
  display: flex;
}

.justify-content-between[b-ot6f9voj1h] {
  justify-content: space-between;
}

.align-items-center[b-ot6f9voj1h] {
  align-items: center;
}

.w-100[b-ot6f9voj1h] {
  width: 100%;
}

.small[b-ot6f9voj1h] {
  font-size: 0.875rem;
}

.text-muted[b-ot6f9voj1h] {
  color: #666;
}

.mt-1[b-ot6f9voj1h] {
  margin-top: 4px;
}

.list-unstyled[b-ot6f9voj1h] {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ms-3[b-ot6f9voj1h] {
  margin-left: 12px;
}

.mb-2[b-ot6f9voj1h] {
  margin-bottom: 8px;
}

/* Abandoned Cart Restore Modal Styles */
.modal-overlay[b-ot6f9voj1h] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn-b-ot6f9voj1h 0.3s ease-in-out;
}

@keyframes fadeIn-b-ot6f9voj1h {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content[b-ot6f9voj1h] {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp-b-ot6f9voj1h 0.3s ease-in-out;
}

@keyframes slideUp-b-ot6f9voj1h {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-content.profile-modal[b-ot6f9voj1h] {
  max-width: 500px;
}

.modal-header[b-ot6f9voj1h] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h2[b-ot6f9voj1h] {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.modal-close[b-ot6f9voj1h] {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: #999;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.modal-close:hover[b-ot6f9voj1h] {
  color: #333;
}

.modal-body[b-ot6f9voj1h] {
  padding: 24px;
}

.repurchase-options[b-ot6f9voj1h] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Order Summary Section */
.order-summary-section[b-ot6f9voj1h] {
  background-color: #f9f9f9;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-summary-item[b-ot6f9voj1h] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.summary-label[b-ot6f9voj1h] {
  color: #666;
  font-weight: 500;
}

.summary-value[b-ot6f9voj1h] {
  color: #333;
  font-weight: 600;
}
/* /Components/Pages/Public/Checkout/CheckoutAddress.razor.rz.scp.css */
:root[b-6eriob6xo8]{--color-gray:#666}

.checkout-timer[b-6eriob6xo8] {
    border: 1px solid #e6e6e6;
    padding: 10px 10px;
    font-weight: 600;
    margin: 12px auto; /* center horizontally and add vertical spacing */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 90%;
    color: var(--color-black);
}

    .checkout-timer ion-icon[b-6eriob6xo8] {
        font-size: 18px;
        color: var(--color-black);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .checkout-timer strong[b-6eriob6xo8] {
        font-weight: 700; /* ensure unit 's' matches number weight */
        font-size: inherit;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }

.order-box[b-6eriob6xo8]{border:1px solid #e6e6e6;padding:0;margin:0;max-width:1600px;margin-left:auto;margin-right:auto}
.order-header[b-6eriob6xo8] {
    background: #e6e6e6;
    padding: 10px 0;
    text-align: center;
    font-weight: 600
}
.order-body[b-6eriob6xo8]{display:flex;flex-direction:column;gap:12px;padding:10px 20px;align-items:center}
.order-row[b-6eriob6xo8]{display:flex;gap:24px;align-items:center;width:100%}
.order-info[b-6eriob6xo8]{width:260px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
.order-meta[b-6eriob6xo8]{margin-bottom:8px;text-align:left}
.order-meta div[b-6eriob6xo8]{margin-bottom:6px;color:#333}
.track-btn[b-6eriob6xo8]{border:1px solid #333;background:#fff;padding:10px 14px;cursor:pointer}
.order-products[b-6eriob6xo8]{flex:1}
.order-item-title[b-6eriob6xo8]{margin:0}
.order-items-row[b-6eriob6xo8]{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start;justify-items:center}
.order-items-row.paged[b-6eriob6xo8]{overflow:visible}

.order-item[b-6eriob6xo8]{display:flex;flex-direction:row;align-items:center;gap:0px;min-width:220px;max-width:420px;padding:18px;border:none;border-radius:6px;background:transparent}
.order-item-img-wrap[b-6eriob6xo8]{width:140px;height:140px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.order-item-img-wrap img[b-6eriob6xo8]{max-width:100%;max-height:100%;object-fit:contain}
.order-item-info[b-6eriob6xo8]{display:flex;flex-direction:column;align-items:flex-start}
.order-item-info-right[b-6eriob6xo8]{align-items:flex-start}
.order-item-title[b-6eriob6xo8] {
    font-size: 13px;
    color: #666;
    margin-top: 6px
}
.order-item-size[b-6eriob6xo8]{font-size:13px;color:#666;margin-top:6px}
.order-item-qty[b-6eriob6xo8]{font-size:13px;color:#666;margin-top:6px}

/* Navigation similar to testimonial nav used on home */
.products-nav[b-6eriob6xo8]{display:flex;align-items:center;justify-content:center;gap:3rem;margin-top:1rem}
.products-arrow[b-6eriob6xo8]{width:auto;height:auto;border:none;background-color:transparent;color:#3D3D3D;font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);padding:0.5rem 1rem;font-weight:500;letter-spacing:0.5px;text-transform:uppercase}
.products-arrow:hover:not(:disabled)[b-6eriob6xo8]{transform:scale(1.08)}
.products-arrow:active:not(:disabled)[b-6eriob6xo8]{transform:scale(0.98)}
.products-arrow:disabled[b-6eriob6xo8]{opacity:0.4;cursor:not-allowed}
.testimonial-indicators[b-6eriob6xo8]{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:8px}
.testimonial-indicators .indicator[b-6eriob6xo8]{width:10px;height:10px;border-radius:50%;background:#e0e0e0}
.testimonial-indicators .indicator.active[b-6eriob6xo8]{background:#333}
.products-grid.transitioning[b-6eriob6xo8] {
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.order-items-row.transitioning[b-6eriob6xo8] {
    opacity: 0.6;
    transition: opacity 0.12s ease-in-out;
}

.address-selector-wrapper[b-6eriob6xo8] {
    position: relative;
    width: 100%;
}

.address-selector[b-6eriob6xo8] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    background-color: white;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    height: 44px;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
}

.address-selector-icon[b-6eriob6xo8] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #333;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.address-selector-icon.open[b-6eriob6xo8] {
    transform: translateY(-50%) rotate(180deg);
}

.address-selector:hover[b-6eriob6xo8] {
    border-color: #999;
}

.address-selector:focus[b-6eriob6xo8] {
    outline: none;
    border-color: #333;
}

/* Attempt to reduce default blue selection on some browsers and provide a neutral hover */
.address-selector[b-6eriob6xo8] {
    -webkit-tap-highlight-color: transparent;
}

.address-selector option[b-6eriob6xo8] {
    background-color: #fff;
    color: #333;
}

.address-selector option:hover[b-6eriob6xo8],
.address-selector option:active[b-6eriob6xo8] {
    background-color: #f5f5f5;
    color: #333;
}

.address-selector:focus-visible[b-6eriob6xo8] {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}

/* Saved-address alias to ensure identical visuals */
.saved-address-select .address-selector-wrapper[b-6eriob6xo8] { position: relative; width: 100%; }
.saved-address-select .address-selector[b-6eriob6xo8] { box-sizing: border-box; display: block; }
.saved-address-select .address-selector-icon[b-6eriob6xo8] { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #333; font-size: 18px; transition: transform 0.3s ease; }

/* Provide small spacing/label look similar to product form */
.product-option .option-label[b-6eriob6xo8],
.saved-address-select .option-label[b-6eriob6xo8] {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
/* /Components/Pages/Public/Checkout/CheckoutContact.razor.rz.scp.css */
/* CheckoutContact page styles: keep layout and order box visuals only.
   Form/input/label/pill/validation styles are centralized in wwwroot/app.css
   and should not be duplicated here. */
:root[b-sduddkfzsg] {
    --color-gray: #666
}

.checkout-timer[b-sduddkfzsg] {
    border: 1px solid #e6e6e6;
    padding: 10px 10px;
    font-weight: 600;
    margin: 12px auto; /* center horizontally and add vertical spacing */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 90%;
    
    color: var(--color-black);
}

    .checkout-timer ion-icon[b-sduddkfzsg] {
        font-size: 18px;
        color: var(--color-black);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .checkout-timer strong[b-sduddkfzsg] {
        font-weight: 700; /* ensure unit 's' matches number weight */
        font-size: inherit;
        line-height: 1;
        display: inline-block;
        vertical-align: baseline;
    }
.order-box[b-sduddkfzsg] {
    border: 1px solid #e6e6e6;
    padding: 0;
    margin: 0;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto
}

.order-header[b-sduddkfzsg] {
    background: #e6e6e6;
    padding: 10px 0;
    text-align: center;
    font-weight: 600
}

.order-body[b-sduddkfzsg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 20px;
    align-items: center
}

.order-row[b-sduddkfzsg] {
    display: flex;
    gap: 24px;
    align-items: center;
    width: 100%
}

.order-info[b-sduddkfzsg] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.order-meta[b-sduddkfzsg] {
    margin-bottom: 8px;
    text-align: left
}

    .order-meta div[b-sduddkfzsg] {
        margin-bottom: 6px;
        color: #333
    }

.track-btn[b-sduddkfzsg] {
    border: 1px solid #333;
    background: #fff;
    padding: 10px 14px;
    cursor: pointer
}

.order-products[b-sduddkfzsg] {
    flex: 1
}

.order-item-title[b-sduddkfzsg] {
    margin: 0
}

.order-items-row[b-sduddkfzsg] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    align-items: start;
    justify-items: center
}

    .order-items-row.paged[b-sduddkfzsg] {
        overflow: visible
    }

.order-item[b-sduddkfzsg] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    min-width: 220px;
    max-width: 420px;
    padding: 18px;
    border: none;
    border-radius: 6px;
    background: transparent
}

.order-item-img-wrap[b-sduddkfzsg] {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

    .order-item-img-wrap img[b-sduddkfzsg] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain
    }

.order-item-info[b-sduddkfzsg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.order-item-info-right[b-sduddkfzsg] {
    align-items: flex-start
}

.order-item-title[b-sduddkfzsg] {
    font-size: 13px;
    color: #666;
    margin-top: 6px
}

.order-item-size[b-sduddkfzsg] {
    font-size: 13px;
    color: #666;
    margin-top: 6px
}

.order-item-qty[b-sduddkfzsg] {
    font-size: 13px;
    color: #666;
    margin-top: 6px
}

/* Navigation similar to testimonial nav used on home */
.products-nav[b-sduddkfzsg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 1rem
}

.products-arrow[b-sduddkfzsg] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    padding: 0.5rem 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase
}

    .products-arrow:hover:not(:disabled)[b-sduddkfzsg] {
        transform: scale(1.08)
    }

    .products-arrow:active:not(:disabled)[b-sduddkfzsg] {
        transform: scale(0.98)
    }

    .products-arrow:disabled[b-sduddkfzsg] {
        opacity: 0.4;
        cursor: not-allowed
    }

.testimonial-indicators[b-sduddkfzsg] {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-top: 8px
}

    .testimonial-indicators .indicator[b-sduddkfzsg] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #e0e0e0
    }

        .testimonial-indicators .indicator.active[b-sduddkfzsg] {
            background: #333
        }

.products-grid.transitioning[b-sduddkfzsg] {
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.order-items-row.transitioning[b-sduddkfzsg] {
    opacity: 0.6;
    transition: opacity 0.12s ease-in-out;
}

.address-selector-wrapper[b-sduddkfzsg] {
    position: relative;
    width: 100%;
}

.address-selector[b-sduddkfzsg] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    background-color: white;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    height: 44px;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
}

.address-selector-icon[b-sduddkfzsg] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #333;
    font-size: 18px;
    transition: transform 0.3s ease;
}

    .address-selector-icon.open[b-sduddkfzsg] {
        transform: translateY(-50%) rotate(180deg);
    }

.address-selector:hover[b-sduddkfzsg] {
    border-color: #999;
}

.address-selector:focus[b-sduddkfzsg] {
    outline: none;
    border-color: #333;
}

/* Attempt to reduce default blue selection on some browsers and provide a neutral hover */
.address-selector[b-sduddkfzsg] {
    -webkit-tap-highlight-color: transparent;
}

    .address-selector option[b-sduddkfzsg] {
        background-color: #fff;
        color: #333;
    }

        .address-selector option:hover[b-sduddkfzsg],
        .address-selector option:active[b-sduddkfzsg] {
            background-color: #f5f5f5;
            color: #333;
        }

    .address-selector:focus-visible[b-sduddkfzsg] {
        box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
    }

/* Saved-address alias to ensure identical visuals */
.saved-address-select .address-selector-wrapper[b-sduddkfzsg] {
    position: relative;
    width: 100%;
}

.saved-address-select .address-selector[b-sduddkfzsg] {
    box-sizing: border-box;
    display: block;
}

.saved-address-select .address-selector-icon[b-sduddkfzsg] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #333;
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* Provide small spacing/label look similar to product form */
.product-option .option-label[b-sduddkfzsg],
.saved-address-select .option-label[b-sduddkfzsg] {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
/* /Components/Pages/Public/Checkout/CheckoutPayment.razor.rz.scp.css */
:root[b-yyurw29trc]{--color-gray:#666}

.cp-total[b-yyurw29trc] {
    margin-top: 16px;
    font-size: 1.05rem;
    color: #333;
}

.cp-cancel[b-yyurw29trc] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e6e6e6;
}

/* Reuse the checkout timer styling so time-left shows like the address page */
.checkout-timer[b-yyurw29trc] {
    border: 1px solid #e6e6e6;
    padding: 10px 10px;
    font-weight: 600;
    margin: 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 90%;
    color: var(--color-black);
}
.checkout-timer ion-icon[b-yyurw29trc] { font-size: 18px; color: var(--color-black); display: inline-flex; align-items: center; justify-content: center; }
.checkout-timer strong[b-yyurw29trc] { font-weight: 700; font-size: inherit; line-height: 1; display: inline-block; vertical-align: baseline; }

/* Order box (matches the look used on the shipping/checkout address page) */
.order-box[b-yyurw29trc]{
    border:1px solid #e6e6e6;
    padding:0;
    margin:0 auto 1rem;
    max-width:1200px;
    background:#fff;
}
.order-header[b-yyurw29trc]{
    background:#e6e6e6;
    padding:10px 0;
    text-align:center;
    font-weight:600;
}
.order-body[b-yyurw29trc]{display:flex;flex-direction:column;gap:12px;padding:12px 20px;align-items:center}
.order-row[b-yyurw29trc]{display:flex;gap:24px;align-items:center;width:100%}
.order-info[b-yyurw29trc]{width:260px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
.order-meta[b-yyurw29trc]{margin-bottom:8px;text-align:left}
.order-meta div[b-yyurw29trc]{margin-bottom:6px;color:#333}
.checkout-actions[b-yyurw29trc]{margin-top:8px;display:flex;gap:12px}
.checkout-actions .btn[b-yyurw29trc]{min-width:120px}
.order-products[b-yyurw29trc]{flex:1}
.order-item[b-yyurw29trc]{display:flex;flex-direction:row;align-items:center;gap:0px;min-width:220px;max-width:420px;padding:18px;border:none;border-radius:6px;background:transparent}
.order-item-img-wrap[b-yyurw29trc]{width:140px;height:140px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.order-item-img-wrap img[b-yyurw29trc]{max-width:100%;max-height:100%;object-fit:contain}
.order-item-info[b-yyurw29trc]{display:flex;flex-direction:column;align-items:flex-start}
.order-item-title[b-yyurw29trc]{font-size:13px;color:#666;margin:0}
.order-item-size[b-yyurw29trc]{font-size:13px;color:#666;margin:2px 0 0 0}
.order-item-qty[b-yyurw29trc]{font-size:13px;color:#666;margin:6px 0 0 0}

/* Layout for payment page: left (order card) and right (price breakdown) */
.checkout-payment-grid[b-yyurw29trc]{display:flex;gap:24px;max-width:1200px;margin:0 auto;padding:8px}
.checkout-payment-grid .left[b-yyurw29trc]{flex:1}
.checkout-payment-grid .right[b-yyurw29trc]{width:340px;flex-shrink:0}

/* Price breakdown card */
.price-breakdown[b-yyurw29trc]{border:1px solid #e6e6e6;padding:16px;background:#fff}
.price-breakdown h4[b-yyurw29trc]{margin:0 0 12px 0;font-size:15px;font-weight:600}

/* Toggle icon rotation for show/hide items */
.items-toggle-icon[b-yyurw29trc]{transition:transform 200ms ease-in-out;display:inline-flex;vertical-align:middle}
.items-toggle-icon.rotated[b-yyurw29trc]{transform:rotate(180deg)}
.price-breakdown .line[b-yyurw29trc]{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.03);}
.price-breakdown .line:last-child[b-yyurw29trc]{border-bottom:none}
.price-breakdown .line.total[b-yyurw29trc]{}
.price-breakdown .line strong[b-yyurw29trc]{font-weight:600}

/* Ensure subtotal and VAT labels/amounts have stronger emphasis where used */
.price-breakdown .line .strong-em[b-yyurw29trc] { font-weight:700; }
.price-breakdown .line.discount[b-yyurw29trc]{color:#b40000}

/* Collapsible items-list when collapsed hide with max-height and overflow */
.items-list.collapsed[b-yyurw29trc]{max-height:0;overflow:hidden;padding:0;margin:0;transition:max-height 200ms ease-in-out}
.items-list[b-yyurw29trc]{transition:max-height 200ms ease-in-out}

/* Responsive adjustments */
@media (max-width: 900px){
    .order-row[b-yyurw29trc]{flex-direction:column;align-items:flex-start}
    .order-info[b-yyurw29trc]{width:100%;display:block}
    .order-items-row[b-yyurw29trc]{grid-template-columns:repeat(2,1fr)}
    .checkout-payment-grid[b-yyurw29trc]{flex-direction:column;padding:0 12px}
    .checkout-payment-grid .right[b-yyurw29trc]{width:100%}
}

@media (max-width: 480px){
    .order-item-img-wrap[b-yyurw29trc]{width:80px;height:80px}
    .price-breakdown[b-yyurw29trc]{padding:12px}
}

/* Navigation similar to testimonial nav used on home - copy from CheckoutAddress styles */
.products-nav[b-yyurw29trc]{display:flex;align-items:center;justify-content:center;gap:3rem;margin-top:1rem}
.products-arrow[b-yyurw29trc]{width:auto;height:auto;border:none;background-color:transparent;color:#3D3D3D;font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);padding:0.5rem 1rem;font-weight:500;letter-spacing:0.5px;text-transform:uppercase}
.products-arrow:hover:not(:disabled)[b-yyurw29trc]{transform:scale(1.08)}
.products-arrow:active:not(:disabled)[b-yyurw29trc]{transform:scale(0.98)}
.products-arrow:disabled[b-yyurw29trc]{opacity:0.4;cursor:not-allowed}

.products-grid.transitioning[b-yyurw29trc] {
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.order-items-row.transitioning[b-yyurw29trc] {
    opacity: 0.6;
    transition: opacity 0.12s ease-in-out;
}



/* New class specifically for the Item breakdown toggle button - mirrors GhostDark */
.btn-item-breakdown[b-yyurw29trc] {
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border: 1px solid var(--color-black);
    background: transparent;
    color: var(--color-black);
    cursor: pointer;
    border-radius: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
}

.btn-item-breakdown:hover[b-yyurw29trc] {
    opacity: 0.8;
    transform: scale(0.98);
    border-color: var(--color-black) !important;
}

.btn-item-breakdown:active[b-yyurw29trc] {
    transform: scale(0.96);
}

.btn-item-breakdown:focus[b-yyurw29trc],
.btn-item-breakdown:focus-visible[b-yyurw29trc] {
    outline: 2px solid var(--color-black) !important;
    outline-offset: var(--focus-offset) !important;
}

.btn-item-breakdown.btn-sm[b-yyurw29trc] {
    padding: calc(var(--btn-padding-y) - 4px) calc(var(--btn-padding-x) - 8px);
    font-size: calc(var(--font-size-base) - 1px);
}

.btn-item-breakdown[disabled][b-yyurw29trc], .btn-item-breakdown[aria-disabled="true"][b-yyurw29trc] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
/* /Components/Pages/Public/Dashboards/AccountBusinessDashboard.razor.rz.scp.css */
/* ============================== Brand Selector ============================== */

/* Mobile dropdown (hidden on tablet+) */
.brand-selector-dropdown[b-1b9gykvx2n] {
    display: none;
    padding: 1.25rem 0.75rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-dropdown select[b-1b9gykvx2n] {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background-color: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

/* Button tabs (tablet+) */
.brand-selector[b-1b9gykvx2n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 2rem 1.25rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-btn[b-1b9gykvx2n] {
    padding: 0.6rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.brand-selector-btn:hover[b-1b9gykvx2n],
.brand-selector-btn.active[b-1b9gykvx2n] {
    background: var(--color-gray, #333);
    border-color: var(--color-gray, #333);
    color: white;
}

/* ============================== Responsive ============================== */

@media (max-width: 768px) {
    .brand-selector[b-1b9gykvx2n] { display: none; }
    .brand-selector-dropdown[b-1b9gykvx2n] { display: block; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .brand-selector[b-1b9gykvx2n] {
        gap: 0.6rem;
        padding: 1.75rem 1.25rem 0;
    }

    .brand-selector-btn[b-1b9gykvx2n] {
        padding: 0.55rem 1.5rem;
        font-size: 0.82rem;
    }
}
/* /Components/Pages/Public/Dashboards/AccountDashboard.razor.rz.scp.css */
/* ============================== Brand Selector ============================== */

/* Mobile dropdown (hidden on tablet+) */
.brand-selector-dropdown[b-gysmaezuv1] {
    display: none;
    padding: 1.25rem 0.75rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-dropdown select[b-gysmaezuv1] {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background-color: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

/* Button tabs (tablet+) */
.brand-selector[b-gysmaezuv1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 2rem 1.25rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-btn[b-gysmaezuv1] {
    padding: 0.6rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.brand-selector-btn:hover[b-gysmaezuv1],
.brand-selector-btn.active[b-gysmaezuv1] {
    background: var(--color-gray, #333);
    border-color: var(--color-gray, #333);
    color: white;
}

/* ============================== Responsive ============================== */

@media (max-width: 768px) {
    .brand-selector[b-gysmaezuv1] { display: none; }
    .brand-selector-dropdown[b-gysmaezuv1] { display: block; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .brand-selector[b-gysmaezuv1] {
        gap: 0.6rem;
        padding: 1.75rem 1.25rem 0;
    }

    .brand-selector-btn[b-gysmaezuv1] {
        padding: 0.55rem 1.5rem;
        font-size: 0.82rem;
    }
}
/* /Components/Pages/Public/Dashboards/BusinessRebateCustomers.razor.rz.scp.css */
/* ====================================
   Rebate Code Block
====================================== */

.rebate-code-block[b-605tl70edh] {
    padding: 1rem 0 1.5rem;
}

.rebate-code-row[b-605tl70edh] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.rebate-code-value[b-605tl70edh] {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--color-white);
    font-family: monospace, "Courier New";
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0.6rem 1.25rem;
    display: inline-block;
    user-select: text !important;
}

.rebate-copy-btn[b-605tl70edh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: 1px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.rebate-copy-btn:hover[b-605tl70edh] {
    background: var(--color-white);
    color: var(--color-gray);
}

.rebate-copy-btn:active[b-605tl70edh] {
    transform: scale(0.97);
}

.rebate-copy-btn ion-icon[b-605tl70edh] {
    font-size: 1rem;
    pointer-events: none;
}

/* ====================================
   Rebate Meta Row
====================================== */

.rebate-meta-row[b-605tl70edh] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1.25rem;
}

.rebate-meta-item[b-605tl70edh] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.rebate-meta-label[b-605tl70edh] {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.55);
}

.rebate-meta-value[b-605tl70edh] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-white);
}

.rebate-status.status-active[b-605tl70edh] {
    color: #6fcf97;
}

.rebate-status.status-expired[b-605tl70edh] {
    color: #f2994a;
}

.rebate-count[b-605tl70edh] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
}

.rebate-share-hint[b-605tl70edh] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}

/* ====================================
   Back Button
====================================== */

.rebate-back-link[b-605tl70edh] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.rebate-back-btn[b-605tl70edh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-family-base);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

.rebate-back-btn:hover[b-605tl70edh] {
    color: var(--color-white);
}

.rebate-back-btn ion-icon[b-605tl70edh] {
    font-size: 1rem;
}

/* ====================================
   Customers Section
====================================== */

.customers-intro[b-605tl70edh] {
    margin-bottom: 1.5rem;
    color: var(--color-gray);
    font-size: 0.9rem;
    line-height: 1.6;
}

.customers-intro strong[b-605tl70edh] {
    color: var(--color-gray);
    font-weight: 600;
}

/* ====================================
   Mobile
====================================== */

@media (max-width: 768px) {
    .rebate-code-row[b-605tl70edh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .rebate-code-value[b-605tl70edh] {
        font-size: 1.5rem;
        letter-spacing: 3px;
    }

    .rebate-meta-row[b-605tl70edh] {
        gap: 1.25rem;
    }
}
/* /Components/Pages/Public/Education/AccountEducation.razor.rz.scp.css */
/* ============================== Brand Selector ============================== */

/* Mobile dropdown (hidden on tablet+) */
.brand-selector-dropdown[b-qdf1d7z48s] {
    display: none;
    padding: 1.25rem 0.75rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-dropdown select[b-qdf1d7z48s] {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background-color: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

/* Button tabs (tablet+) */
.brand-selector[b-qdf1d7z48s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 2rem 1.25rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-btn[b-qdf1d7z48s] {
    padding: 0.6rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.brand-selector-btn:hover[b-qdf1d7z48s],
.brand-selector-btn.active[b-qdf1d7z48s] {
    background: var(--color-gray, #333);
    border-color: var(--color-gray, #333);
    color: white;
}

/* ============================== Responsive ============================== */

@media (max-width: 768px) {
    .brand-selector[b-qdf1d7z48s] { display: none; }
    .brand-selector-dropdown[b-qdf1d7z48s] { display: block; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .brand-selector[b-qdf1d7z48s] {
        gap: 0.6rem;
        padding: 1.75rem 1.25rem 0;
    }

    .brand-selector-btn[b-qdf1d7z48s] {
        padding: 0.55rem 1.5rem;
        font-size: 0.82rem;
    }
}
/* /Components/Pages/Public/Landing/LandingHome.razor.rz.scp.css */
/*
    File:       LandingHome.razor.css

    Purpose:    Page-level layout and structural styling for the landing page.
                Defines design tokens and full-bleed container utilities shared
                across gallery and content sections.
*/

:root[b-uyob7k9ed3] {
    /* Design tokens for landing page (lh) */
    --lh-space-xs: 8px;
    --lh-space-sm: 12px;
    --lh-space-md: 16px;
    --lh-space-lg: 30px;

    --lh-color-bg: #ffffff;
    --lh-color-card: #0b1b3c;
    --lh-color-white: #ffffff;
    --lh-color-overlay: rgba(0,0,0,0.25);

    --lh-radius-sm: 6px;
    --lh-transition-fast: 0.35s ease;
    --lh-transition-medium: 0.8s cubic-bezier(.16,1,.3,1);
}

/* ====================================
   Full-Bleed Layout Utility
======================================= */

.lh__full-bleed[b-uyob7k9ed3] {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
}

@supports (width: 100dvw) {
    .lh__full-bleed[b-uyob7k9ed3] {
        width: 100dvw;
        max-width: 100dvw;
    }
}

/* ====================================
   Utilities: Logo Container
======================================= */

.lh__logo-container[b-uyob7k9ed3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--lh-space-lg);
    flex-wrap: wrap;
    margin: var(--lh-space-md) 0;
}

.lh__logo-container a img[b-uyob7k9ed3] {
    max-height: 100px;
    width: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.lh__logo-container a img:hover[b-uyob7k9ed3] {
    transform: scale(1.05);
}

/* ====================================
   Responsive - Small Screens
======================================= */

@media (max-width: 600px) {
    .lh__logo-container[b-uyob7k9ed3] {
        flex-direction: column;
        gap: 15px;
    }

    .lh__logo-container a img[b-uyob7k9ed3] {
        max-width: 80%;
        height: auto;
    }
}
/* /Components/Pages/Public/Policies/PolicyDisplay.razor.rz.scp.css */
.policy-content[b-enyqad62zs] {
    line-height: 1.6;
    color: #333;
    margin-bottom: 24px;
}

.policy-content p[b-enyqad62zs] {
    margin: 1em 0;
}

.policy-content ul[b-enyqad62zs],
.policy-content ol[b-enyqad62zs] {
    margin: 1em 0 1em 2em;
}

.policy-content li[b-enyqad62zs] {
    margin: 0.5em 0;
}

.policy-content strong[b-enyqad62zs] {
    font-weight: 600;
}

.policy-content em[b-enyqad62zs] {
    font-style: italic;
}

.policy-content u[b-enyqad62zs] {
    text-decoration: underline;
}

.policy-content a[b-enyqad62zs] {
    color: #0066ff;
    text-decoration: none;
}

.policy-content a:hover[b-enyqad62zs] {
    text-decoration: underline;
}

.policy-section[b-enyqad62zs] {
    margin-bottom: 20px;
    padding: 0;
}

.policy-section-heading[b-enyqad62zs] {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1rem;
}

.policy-section-content[b-enyqad62zs] {
    margin-left: 16px;
    line-height: 1.6;
    color: #333;
}

.policy-section-content p[b-enyqad62zs] {
    margin: 0.75em 0;
}

.policy-section-content ul[b-enyqad62zs],
.policy-section-content ol[b-enyqad62zs] {
    margin: 0.75em 0 0.75em 2em;
}

.policy-section-content li[b-enyqad62zs] {
    margin: 0.5em 0;
}

.policy-last-updated[b-enyqad62zs] {
    font-style: italic;
    color: #666;
    margin-bottom: 16px;
    font-size: 0.95rem;
}
/* /Components/Pages/Public/Products/MyProducts.razor.rz.scp.css */
/* ============================== Brand Selector ============================== */

/* Mobile dropdown (hidden on tablet+) */
.brand-selector-dropdown[b-beycd5iq3e] {
    display: none;
    padding: 1.25rem 0.75rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-dropdown select[b-beycd5iq3e] {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background-color: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

/* Button tabs (tablet+) */
.brand-selector[b-beycd5iq3e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 2rem 1.25rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-btn[b-beycd5iq3e] {
    padding: 0.6rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.brand-selector-btn:hover[b-beycd5iq3e],
.brand-selector-btn.active[b-beycd5iq3e] {
    background: var(--color-gray, #333);
    border-color: var(--color-gray, #333);
    color: white;
}

/* ============================== Responsive ============================== */

@media (max-width: 768px) {
    .brand-selector[b-beycd5iq3e] { display: none; }
    .brand-selector-dropdown[b-beycd5iq3e] { display: block; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .brand-selector[b-beycd5iq3e] {
        gap: 0.6rem;
        padding: 1.75rem 1.25rem 0;
    }

    .brand-selector-btn[b-beycd5iq3e] {
        padding: 0.55rem 1.5rem;
        font-size: 0.82rem;
    }
}
/* /Components/Pages/Public/Products/Orders.razor.rz.scp.css */
/* Styles from CheckoutAddress to render abandoned order boxes */
:root[b-qdz3zk8li3] {
    --color-gray: #666
}

.order-box[b-qdz3zk8li3] {
    border: 1px solid #e6e6e6;
    padding: 0;
    margin: 0;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto
}

.order-header[b-qdz3zk8li3] {
    background: #e6e6e6;
    padding: 10px 0;
    text-align: center;
    font-weight: 600
}

.order-body[b-qdz3zk8li3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 20px;
    align-items: center
}

.order-row[b-qdz3zk8li3] {
    display: flex;
    gap: 24px;
    align-items: center;
    width: 100%
}

.order-info[b-qdz3zk8li3] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.order-meta[b-qdz3zk8li3] {
    margin-bottom: 8px;
    text-align: left
}

    .order-meta div[b-qdz3zk8li3] {
        margin-bottom: 6px;
        color: #333
    }

.track-btn[b-qdz3zk8li3] {
    border: 1px solid #333;
    background: #fff;
    padding: 10px 14px;
    cursor: pointer
}

.order-products[b-qdz3zk8li3] {
    flex: 1
}

.order-item-title[b-qdz3zk8li3] {
    margin: 0
}

.order-items-row[b-qdz3zk8li3] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    align-items: start;
    justify-items: center
}

    .order-items-row.paged[b-qdz3zk8li3] {
        overflow: visible
    }

.order-item[b-qdz3zk8li3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    min-width: 220px;
    max-width: 420px;
    padding: 18px;
    border: none;
    border-radius: 6px;
    background: transparent
}

.order-item-img-wrap[b-qdz3zk8li3] {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

    .order-item-img-wrap img[b-qdz3zk8li3] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain
    }

.order-item-info[b-qdz3zk8li3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.order-item-info-right[b-qdz3zk8li3] {
    align-items: flex-start
}

.order-item-title[b-qdz3zk8li3] {
    font-size: 13px;
    color: #666;
    margin-top: 6px
}

.order-item-size[b-qdz3zk8li3] {
    font-size: 13px;
    color: #666;
    margin-top: 6px
}

.order-item-qty[b-qdz3zk8li3] {
    font-size: 13px;
    color: #666;
    margin-top: 6px
}

/* Navigation similar to testimonial nav used on home */
.products-nav[b-qdz3zk8li3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 1rem
}

.products-arrow[b-qdz3zk8li3] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    padding: 0.5rem 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase
}

    .products-arrow:hover:not(:disabled)[b-qdz3zk8li3] {
        transform: scale(1.08)
    }

    .products-arrow:active:not(:disabled)[b-qdz3zk8li3] {
        transform: scale(0.98)
    }

    .products-arrow:disabled[b-qdz3zk8li3] {
        opacity: 0.4;
        cursor: not-allowed
    }

.testimonial-indicators[b-qdz3zk8li3] {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-top: 8px
}

    .testimonial-indicators .indicator[b-qdz3zk8li3] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #e0e0e0
    }

        .testimonial-indicators .indicator.active[b-qdz3zk8li3] {
            background: #333
        }

.products-grid.transitioning[b-qdz3zk8li3] {
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.order-items-row.transitioning[b-qdz3zk8li3] {
    opacity: 0.6;
    transition: opacity 0.12s ease-in-out;
}

/* Remove gap introduced by utility margin classes so orders stack without space (match abandoned checkouts) */
.order-box.mb-3[b-qdz3zk8li3] { margin-bottom: 0 !important; }
.order-box + .order-box[b-qdz3zk8li3] { margin-top: 0 !important; }

/* Modal Styles */
.modal-overlay[b-qdz3zk8li3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-qdz3zk8li3 0.3s ease-in-out;
}

@keyframes fadeIn-b-qdz3zk8li3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-qdz3zk8li3] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-qdz3zk8li3 0.3s ease-in-out;
}

@keyframes slideUp-b-qdz3zk8li3 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content.profile-modal[b-qdz3zk8li3] {
    max-width: 500px;
}

.modal-header[b-qdz3zk8li3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #f0f0f0;
}

.modal-header h2[b-qdz3zk8li3] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.modal-close[b-qdz3zk8li3] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #999;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.modal-close:hover[b-qdz3zk8li3] {
    color: #333;
}

.modal-body[b-qdz3zk8li3] {
    padding: 24px;
}

.repurchase-options[b-qdz3zk8li3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Business Info Section */
.business-info-section[b-qdz3zk8li3] {
    background-color: #f9f9f9;
    border-left: 4px solid #2196f3;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
}

.business-info-header[b-qdz3zk8li3] {
    margin-bottom: 8px;
    font-size: 13px;
    color: #666;
}

.business-info-content p[b-qdz3zk8li3] {
    margin: 4px 0;
}

    .business-info-content p:first-child[b-qdz3zk8li3] {
        color: #2196f3;
        font-weight: 500;
        font-size: 14px;
    }

    .business-info-content p:last-child[b-qdz3zk8li3] {
        color: #999;
        font-size: 12px;
    }

/* Order Summary Section */
.order-summary-section[b-qdz3zk8li3] {
    background-color: #f9f9f9;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-summary-item[b-qdz3zk8li3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.summary-label[b-qdz3zk8li3] {
    color: #666;
    font-weight: 500;
}

.summary-value[b-qdz3zk8li3] {
    color: #333;
    font-weight: 600;
}

/* ============================== Brand Selector ============================== */

/* Mobile dropdown (hidden on tablet+) */
.brand-selector-dropdown[b-qdz3zk8li3] {
    display: none;
    padding: 1.25rem 0.75rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-dropdown select[b-qdz3zk8li3] {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background-color: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

/* Button tabs (tablet+) */
.brand-selector[b-qdz3zk8li3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 2rem 1.25rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-btn[b-qdz3zk8li3] {
    padding: 0.6rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.brand-selector-btn:hover[b-qdz3zk8li3],
.brand-selector-btn.active[b-qdz3zk8li3] {
    background: var(--color-gray, #333);
    border-color: var(--color-gray, #333);
    color: white;
}

@media (max-width: 768px) {
    .brand-selector[b-qdz3zk8li3] { display: none; }
    .brand-selector-dropdown[b-qdz3zk8li3] { display: block; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .brand-selector[b-qdz3zk8li3] {
        gap: 0.6rem;
        padding: 1.75rem 1.25rem 0;
    }

    .brand-selector-btn[b-qdz3zk8li3] {
        padding: 0.55rem 1.5rem;
        font-size: 0.82rem;
    }
}

/* /Components/Pages/Public/Rewards/AccountRewards.razor.rz.scp.css */
/* Rewards and Offers styling */
.rewards-section[b-lqk5uswfbo] {
 
    color: var(--color-gray, #3d3d3d);
}

/* Shared reward card settings - change values here to affect all cards */
.reward-card[b-lqk5uswfbo] {
    /* sizing */
    --rc-icon-size: 2.5rem; /* uniform icon size for all cards */
    --rc-icon-lift: -80px; /* move icons up so they sit on the card border */
    --rc-icon-gap: 0.5rem; /* space below lifted icon */
    --rc-heading-min-height: 36px;
    --rc-paragraph-min-height: 56px;
    --rc-card-min-height: 220px;

    --rc-cta-bottom: -25px !important;
}



/* HOW IT WORKS (dark top section) - larger icons and stronger lift */
.how-it-works .reward-card[b-lqk5uswfbo] {
    --rc-icon-size: 2.2rem;
    --rc-icon-lift: -80px;
    --rc-icon-gap: 0.6rem;
    --rc-heading-min-height: 40px;
    --rc-paragraph-min-height: 64px;
    /* push how-it-works CTAs lower to align with section layout */
    --rc-cta-bottom: -40px;
}

/* WAYS TO EARN (white earn cards) - slightly smaller icons and moderate lift */
.earn-section .reward-card[b-lqk5uswfbo] {
    --rc-icon-size: 2.2rem;
    --rc-icon-lift: -80px;
    --rc-icon-gap: 0.5rem;
    --rc-heading-min-height: 36px;
    --rc-paragraph-min-height: 56px;
    /* move earn-section CTAs further down so they clear the card border */
    --rc-cta-bottom: -36px;
}


/* Removed special-case styling for the "review" card so all earn icons share the same rules. */

.card-icon[b-lqk5uswfbo] {
    width: var(--rc-icon-size);
    height: var(--rc-icon-size);
    object-fit: contain;
    display: block;
}

.rewards-section .container[b-lqk5uswfbo] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.earn-card .card-icon[b-lqk5uswfbo] {
    width: var(--rc-icon-size);
    height: var(--rc-icon-size);
    object-fit: contain;
    display: block;
}

.section-title[b-lqk5uswfbo] {
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
    color: var(--color-gray);
}

.section-title.dark[b-lqk5uswfbo] {
    color: var(--color-gray-dark, #222);
}

.how-it-works[b-lqk5uswfbo] {
    background: #3d3d3d;
    color: #fff;
    padding: 2.5rem 0;
  
    
}

    .how-it-works .section-title[b-lqk5uswfbo] {
        color: #fff;
        margin-bottom: 3rem;
        font-size: 1.5rem;
    }
.how-it-works p[b-lqk5uswfbo] {
    color: rgba(255,255,255,0.9);
}

.how-cards[b-lqk5uswfbo] {
    display: grid;
    /* Constrain each card column to a narrower fixed maximum so cards don't stretch too wide */
    grid-template-columns: repeat(3, minmax(0, 200px));
    gap: 5rem;
    align-items: start;
    justify-content: center; /* center the grid when viewport is wider */
}

.how-card[b-lqk5uswfbo] {
    background: transparent;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    text-align: center;
    /* Add thin white rounded border to stand out on the dark background */
    border: 1px solid white;
    /* Keep all cards the same minimum height so layout is consistent */
    min-height: var(--rc-card-min-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Default vertical alignment (can be overridden per section) */
    justify-content: center;
    overflow: visible; /* allow icon to overlap outside the card */
}


.how-card.reward-card[b-lqk5uswfbo] {
    justify-content: flex-start;
    padding-top: calc(var(--rc-icon-size) / 2 + 40px);
}

/* Also align earn-section (reward) cards the same way so their content
   starts under the lifted icon and aligns with the how-card layout. */
.earn-card.reward-card[b-lqk5uswfbo] {
    justify-content: flex-start;
    padding-top: calc(var(--rc-icon-size) / 2 + 40px);
}

.how-card .icon-wrap[b-lqk5uswfbo] {
    /* remove background and outline so icon image sits cleanly */
    width: auto;
    height: auto;
    /* move the icon up so it is centered over the card border (consistent lift across cards) */
    margin: var(--rc-icon-lift) auto var(--rc-icon-gap) auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: none;
    font-size: 34px;
    position: relative;
    z-index: 3;
}

.how-card h4[b-lqk5uswfbo] {
    margin: 0.25rem 0 0.5rem 0;
    color: white;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-align: center;
    /* fix height so headings align on the same baseline */
    min-height: var(--rc-heading-min-height);
}
/* Ensure paragraph text inside rewards cards is centered (override any global justify) */
.rewards-section p[b-lqk5uswfbo],
.rewards-section .how-card p[b-lqk5uswfbo],
.rewards-section .earn-card p[b-lqk5uswfbo] {
    text-align: center !important;
    text-align-last: center !important;
}
.how-card p[b-lqk5uswfbo] {
    margin: 0;
    opacity: 0.9;
    text-align: center;
    /* give paragraphs a fixed area so text blocks line up across cards */
    min-height: var(--rc-paragraph-min-height);
}



.earn-section[b-lqk5uswfbo] {
    background: #fff;
    padding: 2.5rem 0;
    /* Use same colour as the dark HOW IT WORKS area for the border */
    border: 1px solid #3d3d3d;
    /* allow CTAs to overlap outside the section/card bounds */
    overflow: visible;
 
}

.earn-cards[b-lqk5uswfbo] {
    display: grid;
    /* Match the narrow column sizing for consistency */
    grid-template-columns: repeat(3, minmax(0, 200px));
    gap: 5rem;
    margin-top: 1.5rem;
    justify-content: center;
    /* ensure overflowing CTAs are visible outside the grid cells */
    overflow: visible;
}

.earn-card[b-lqk5uswfbo] {
    border: 1px solid #3d3d3d;
    border-radius: 12px;
    /* keep top/side padding, reserve space at bottom for absolute-positioned CTA */
    padding: 1.5rem 1.5rem 56px 1.5rem;
    text-align: center;
    width: 100%;
    max-width: 320px;
    /* center all child elements vertically and horizontally */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Match the how-card height so all cards appear equal */
    min-height: var(--rc-card-min-height);
    position: relative; /* needed for absolutely positioned CTA wrapper */
    overflow: visible; /* allow CTA to overlap outside the card border */
}

    .earn-card .icon-wrap.dark[b-lqk5uswfbo] {
        width: auto;
        height: auto;
        /* use same lift as how-card so icons are on the same horizontal line */
        margin: var(--rc-icon-lift) auto var(--rc-icon-gap) auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: transparent;
        border: none;
        font-size: 30px;
        color: #333;
        position: relative;
        z-index: 3;
    }

.earn-card h4[b-lqk5uswfbo] {
    /* ensure earn-card headings share same min-height as how-card */
    min-height: var(--rc-heading-min-height);
}

/* Ensure the HOW IT WORKS title and description are white on the dark background */
.earn-section .section-title[b-lqk5uswfbo] {
   
    margin-bottom: 3rem;
    font-size: 1.5rem;
}

.earn-card p[b-lqk5uswfbo] {
    /* ensure paragraph blocks line up */
    min-height: var(--rc-paragraph-min-height);
}

.cta-wrap[b-lqk5uswfbo] {
    position: absolute;
    bottom: var(--rc-cta-bottom);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    /* lift above card and nearby elements so it isn't visually constrained */
    z-index: 999;
    width: max-content;
    /* make the overlapping button area appear on a white background */
    background: #fff;
   
}

.earn-card h4[b-lqk5uswfbo] {
    margin: 0.5rem 0 0.5rem 0;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-align: center;
}

.earn-card p[b-lqk5uswfbo] {
   
    opacity: 0.9;
    margin-bottom: 1rem;
    text-align: center;
}

.reward-cta[b-lqk5uswfbo] {
    border: 1px solid #ddd;
    background: #fff;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
}

@media (max-width: 900px) {
    .how-cards[b-lqk5uswfbo], .earn-cards[b-lqk5uswfbo] {
        grid-template-columns: 1fr;
    }
    .how-card .icon-wrap[b-lqk5uswfbo], .earn-card .icon-wrap.dark[b-lqk5uswfbo] { width: 56px; height: 56px; }
}

/* Tier banner (current tier level) */
.tier-section[b-lqk5uswfbo] {
    margin-top: 3rem;
}
.tier-bg[b-lqk5uswfbo] {
    background: url('/Media/Images/Brand/Optiphi/tier-bg.webp') center/cover no-repeat;
    position: relative;
}
.tier-bg[b-lqk5uswfbo]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}
.tier-inner[b-lqk5uswfbo] {
    position: relative;
    z-index: 2;
    max-width: 50%;
    margin: 0 auto;
    padding: 2.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.tier-bar[b-lqk5uswfbo] {
    display: flex;
    align-items: center;
    gap: 1rem; /* gap between pairs */
    width: 100%;
    justify-content: flex-start; /* place pairs starting at left */
}

/* Pair wrapper: label + pill flush together */
.tier-pair[b-lqk5uswfbo] {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 0; /* no radius as requested */
}

/* Left align first pair, right align second pair */
.tier-pair:first-child[b-lqk5uswfbo] { margin-right: auto; }
.tier-pair .tier-label[b-lqk5uswfbo] {
    background: rgba(255,255,255,0.03);
    color: #fff;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-align: center;
    flex: 1 1 auto;
    border: none; /* outer border is on the pair */
    border-radius: 0;
}
.tier-pair .tier-pill[b-lqk5uswfbo] {
    background: #fff;
    color: #222;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    min-width: 140px;
    text-align: center;
    border: none; /* outer border is on the pair */
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 700px) {
    .tier-inner[b-lqk5uswfbo] { padding: 1.5rem 1rem; }
    .tier-bar[b-lqk5uswfbo] { flex-direction: column; gap: 1rem; align-items: stretch; }

    /* Stack label above pill: label full-width on top, pill centered below */
    .tier-pair[b-lqk5uswfbo] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        border: 1px solid rgba(255,255,255,0.6); /* keep outer border */
        border-radius: 0;
        overflow: hidden;
    }
    .tier-pair .tier-label[b-lqk5uswfbo] {
        width: 100%;
        box-sizing: border-box;
        text-align: center; /* label centered and full width */
        padding: 0.6rem 0.75rem;
        background: rgba(255,255,255,0.03);
        border: none;
    }
    .tier-pair .tier-pill[b-lqk5uswfbo] {
        position: relative;
        width: 100%;
        min-width: 0;
        align-self: stretch; /* pill fills the full width under the label */
        padding: 0.6rem 0.75rem;
        box-sizing: border-box;
        text-align: center;
    }

    /* reset spacing when stacked */
    .tier-pair:first-child[b-lqk5uswfbo] { margin-right: 0; }
}

/* ============================== Brand Selector ============================== */

/* Mobile dropdown (hidden on tablet+) */
.brand-selector-dropdown[b-lqk5uswfbo] {
    display: none;
    padding: 1.25rem 0.75rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-dropdown select[b-lqk5uswfbo] {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background-color: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

/* Button tabs (tablet+) */
.brand-selector[b-lqk5uswfbo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 2rem 1.25rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-selector-btn[b-lqk5uswfbo] {
    padding: 0.6rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.brand-selector-btn:hover[b-lqk5uswfbo],
.brand-selector-btn.active[b-lqk5uswfbo] {
    background: var(--color-gray, #333);
    border-color: var(--color-gray, #333);
    color: white;
}

@media (max-width: 768px) {
    .brand-selector[b-lqk5uswfbo] { display: none; }
    .brand-selector-dropdown[b-lqk5uswfbo] { display: block; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .brand-selector[b-lqk5uswfbo] {
        gap: 0.6rem;
        padding: 1.75rem 1.25rem 0;
    }

    .brand-selector-btn[b-lqk5uswfbo] {
        padding: 0.55rem 1.5rem;
        font-size: 0.82rem;
    }
}
/* /Components/Pages/Public/Wishlist/AccountWishlist.razor.rz.scp.css */
/* ============================== Brand Selector ============================== */

/* Mobile dropdown (hidden on tablet+) */
.brand-selector-dropdown[b-bnebbd0qos] {
    display: none;
    padding: 1.25rem 0.75rem 0;
    max-width: 1400px;
    margin: 0 auto 2.5rem;
}

.brand-selector-dropdown select[b-bnebbd0qos] {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background-color: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

/* Button tabs (tablet+) */
.brand-selector[b-bnebbd0qos] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 2rem 1.25rem 0;
    max-width: 1400px;
    margin: 0 auto 3.5rem;
}

.brand-selector-btn[b-bnebbd0qos] {
    padding: 0.6rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.brand-selector-btn:hover[b-bnebbd0qos],
.brand-selector-btn.active[b-bnebbd0qos] {
    background: var(--color-gray, #333);
    border-color: var(--color-gray, #333);
    color: white;
}

/* ============================== Responsive ============================== */

@media (max-width: 768px) {
    .brand-selector[b-bnebbd0qos] { display: none; }
    .brand-selector-dropdown[b-bnebbd0qos] { display: block; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .brand-selector[b-bnebbd0qos] {
        gap: 0.6rem;
        padding: 1.75rem 1.25rem 0;
    }

    .brand-selector-btn[b-bnebbd0qos] {
        padding: 0.55rem 1.5rem;
        font-size: 0.82rem;
    }
}
/* /Components/Shared/AdminLayout/AdminContentHeader.razor.rz.scp.css */
/* ===== AdminContentHeader.razor.css =====
   Admin-specific content header that fits within the admin layout (no full-bleed)
*/

.admin-content-header-wrap[b-j9xj85shgc] {
    position: relative;
    z-index: 0;
    width: 100%;
}

/* Full-width row that extends past padding */
.admin-content-header-row[b-j9xj85shgc] {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* The inner header (title only) */
.admin-content-header[b-j9xj85shgc] {
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: 0;
    position: relative;
    z-index: 0;
    flex-shrink: 0;
}

/* Titles */
.admin-content-header > span[b-j9xj85shgc] {
    font-size: var(--font-size-lg);
    white-space: nowrap;
    letter-spacing: var(--letter-spacing-wide);
    margin-top: var(--space-3xl);
}

/* Horizontal rule (extends full width) */
.admin-content-header-row > hr[b-j9xj85shgc] {
    flex: 1;
    border: none;
    border-top: 1.75px solid var(--border-light);
    margin: 0;
    margin-left: 2rem;
    margin-right: -3rem;
    position: relative;
    opacity: 0.85;
    margin-top: var(--space-3xl);
    min-width: 200px;
}


/* /Components/Shared/AdminLayout/AdminContentSection.razor.rz.scp.css */
/* ===== AdminContentSection.razor.css =====
   Admin-specific content section that fits within the admin layout (no full-bleed)
*/

.admin-content-section[b-bvscqmd71a] {
    width: 100%;
    margin: 0;
}

/* Admin content section body (no full-bleed, fits within layout) */
.admin-content-section-body[b-bvscqmd71a] {
    width: 100%;
    color: inherit;
    box-sizing: border-box;
    /* Prevent overflow of long words / strings */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- Mobile-first responsive padding --- */

/* Extra Small Devices (< 480px) */
@media (max-width: 479px) {
    .admin-content-section-body[b-bvscqmd71a] {
        padding: clamp(0.75rem, 3vw, 1rem) clamp(0.75rem, 4vw, 1rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* Small Devices / Tablets (480px - 768px) */
@media (min-width: 480px) and (max-width: 768px) {
    .admin-content-section-body[b-bvscqmd71a] {
        padding: var(--space-md, 1rem) clamp(1rem, 3vw, 1.25rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* Medium Devices / Tablets (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .admin-content-section-body[b-bvscqmd71a] {
        padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 4vw, 1.5rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* Large Devices / Desktop (1025px - 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .admin-content-section-body[b-bvscqmd71a] {
        padding: var(--space-lg, 1.25rem) var(--space-xl, 1.5rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* Extra Large Devices / Desktop (> 1440px) */
@media (min-width: 1441px) {
    .admin-content-section-body[b-bvscqmd71a] {
        padding: var(--space-xl, 1.5rem) 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}
/* /Components/Shared/AdminLayout/AdminDataTable.razor.rz.scp.css */
.admin-datatable-container[b-vzlq451qwn] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Header Section */
.admin-datatable-header[b-vzlq451qwn] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}

/* Search Box */
.search-box-wrapper[b-vzlq451qwn] {
    position: relative;
    flex: 1;
    min-width: 280px;
    max-width: 350px;
}

.search-icon[b-vzlq451qwn] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.admin-search-input[b-vzlq451qwn] {
    width: 100%;
    padding: 10px 40px 10px 38px;
    border: 1px solid #d1d5db;
    border-radius: 100px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: transparent;
    color: #000;
    height: var(--input-height, 40px);
}

.admin-search-input:focus[b-vzlq451qwn] {
    outline: 1px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

.admin-search-input[b-vzlq451qwn]::placeholder {
    color: #9ca3af;
}

.search-clear-btn[b-vzlq451qwn] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 18px;
    padding: 4px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-clear-btn:hover[b-vzlq451qwn] {
    color: #6b7280;
}

/* Toolbar */
.admin-datatable-toolbar[b-vzlq451qwn] {
    margin-left: auto;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Filters Section */
.admin-datatable-filters[b-vzlq451qwn] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.admin-datatable-filters > *[b-vzlq451qwn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-group[b-vzlq451qwn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label[b-vzlq451qwn] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
    white-space: nowrap;
}

.filter-group select[b-vzlq451qwn] {
    padding: 10px 15px;
    border: 1px solid #d1d5db;
    border-radius: 100px;
    font-size: 0.9rem;
    background: transparent;
    color: #000;
    cursor: pointer;
    transition: all 0.2s ease;
    height: var(--input-height, 40px);
}

.filter-pill-select[b-vzlq451qwn] {
    padding: 10px 15px;
    border: 1px solid #d1d5db;
    border-radius: 100px;
    font-size: 0.9rem;
    background: transparent;
    color: #000;
    cursor: pointer;
    transition: all 0.2s ease;
    height: var(--input-height, 40px);
}

.filter-pill-select:focus[b-vzlq451qwn] {
    outline: 1px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

.filter-pill-select option[b-vzlq451qwn] {
    background: #fff;
    color: #000;
}

@keyframes slideIn-b-vzlq451qwn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Table Wrapper */
.admin-datatable-wrapper[b-vzlq451qwn] {
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;
}

/* Table Styles */
.admin-datatable[b-vzlq451qwn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.admin-datatable thead[b-vzlq451qwn] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    position: sticky;
    top: 0;
    z-index: 10;
}

.admin-datatable th[b-vzlq451qwn] {
    padding: 12px 16px;
    font-weight: 600;
    text-align: left;
    color: #374151;
    border-bottom: 2px solid #d1d5db;
    white-space: nowrap;
    user-select: none;
}

.admin-datatable th.sortable-header[b-vzlq451qwn] {
    cursor: pointer;
}

.admin-datatable th.sortable-header:hover[b-vzlq451qwn] {
    background-color: #f9fafb;
}

/* Header Content */
.th-content[b-vzlq451qwn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.th-title[b-vzlq451qwn] {
    font-weight: 600;
    color: #374151;
}

.sort-btn[b-vzlq451qwn] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: bold;
    opacity: 0;
}

.sortable-header.can-sort:hover .sort-btn[b-vzlq451qwn] {
    opacity: 1;
    color: #6b7280;
}

.sortable-header.active-sort .sort-btn[b-vzlq451qwn] {
    opacity: 1;
    color: #000000;
}

.sort-icon[b-vzlq451qwn] {
    display: inline-block;
    transition: transform 0.2s ease;
}

.active-sort[b-vzlq451qwn] {
    color: #000000;
    font-weight: bold;
}

.inactive-sort[b-vzlq451qwn] {
    color: #d1d5db;
}

.header-template[b-vzlq451qwn] {
    margin-left: auto;
}

/* Table Rows and Cells */
.admin-datatable tbody tr[b-vzlq451qwn] {
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s ease;
}

.admin-datatable tbody tr:hover[b-vzlq451qwn] {
    background-color: #f9fafb;
}

    .admin-datatable tbody tr:last-child[b-vzlq451qwn] {
        border-bottom: 1px solid #f3f4f6;
    }

.admin-datatable td[b-vzlq451qwn] {
    padding: 12px 16px;
    color: #4b5563;
    vertical-align: middle;
    text-align: left;
}

.admin-datatable td code[b-vzlq451qwn] {
    background: #f3f4f6;
    padding: 2px 6px;

    font-size: 0.85rem;
    color: #1f2937;
}

.admin-datatable .badge[b-vzlq451qwn] {
    display: inline-block;
    padding: 4px 10px;

    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-datatable .badge.bg-success[b-vzlq451qwn] {
    background-color: #ecfdf5;
    color: #065f46;
}

.admin-datatable .badge.bg-secondary[b-vzlq451qwn] {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* Empty State */
.empty-state[b-vzlq451qwn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    color: #9ca3af;
}

.empty-state ion-icon[b-vzlq451qwn] {
    font-size: 3rem;
    opacity: 0.5;
}

.empty-state p[b-vzlq451qwn] {
    font-size: 0.95rem;
    margin: 0;
}

/* Footer - Pagination */
.admin-datatable-footer[b-vzlq451qwn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
    gap: 2rem;
}

.pagination-info[b-vzlq451qwn] {
    color: #6b7280;
    font-size: 0.9rem;
}

.pagination-info strong[b-vzlq451qwn] {
    color: #374151;
    font-weight: 600;
}

.pagination-controls[b-vzlq451qwn] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pagination-btn[b-vzlq451qwn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #374151;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pagination-btn:hover:not(:disabled)[b-vzlq451qwn] {
    background: #f3f4f6;
    border-color: #3b82f6;
    color: #3b82f6;
}

.pagination-btn:active:not(:disabled)[b-vzlq451qwn] {
    transform: scale(0.98);
}

.pagination-btn:disabled[b-vzlq451qwn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn ion-icon[b-vzlq451qwn] {
    font-size: 16px;
}

.page-display[b-vzlq451qwn] {
    color: #6b7280;
    font-size: 0.9rem;
    padding: 0 1rem;
    white-space: nowrap;
}

.page-display strong[b-vzlq451qwn] {
    color: #374151;
    font-weight: 600;
}

/* Products Navigation Style (matching Brands page) */
.products-nav[b-vzlq451qwn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 3;
    padding: 1.5rem;
}

.products-arrow[b-vzlq451qwn] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    pointer-events: auto;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.products-arrow:hover:not(:disabled)[b-vzlq451qwn] {
    transform: scale(1.08);
}

.products-arrow:active:not(:disabled)[b-vzlq451qwn] {
    transform: scale(0.98);
}

.products-arrow:disabled[b-vzlq451qwn] {
    opacity: 0.4;
    cursor: not-allowed;
}

.products-arrow ion-icon[b-vzlq451qwn] {
    font-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
}

.mx-3[b-vzlq451qwn] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/* ===================== Responsive - card flip at 768px ===================== */

@media (max-width: 768px) {

    /* Header */
    .admin-datatable-header[b-vzlq451qwn] {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 0.75rem;
    }

    .search-box-wrapper[b-vzlq451qwn] {
        max-width: 100%;
    }

    .admin-datatable-toolbar[b-vzlq451qwn] {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .admin-datatable-filters[b-vzlq451qwn] {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }

    /* Hide table column headers */
    .admin-datatable thead[b-vzlq451qwn] {
        display: none;
    }

    /* Make table, tbody block so rows stack */
    .admin-datatable[b-vzlq451qwn],
    .admin-datatable tbody[b-vzlq451qwn] {
        display: block;
        width: 100%;
    }

    /* Each row = a card */
    .admin-datatable tbody tr[b-vzlq451qwn] {
        display: block;
        border: 1px solid #e5e7eb;
        margin-bottom: 12px;
        background: #fff;
    }

    .admin-datatable tbody tr:hover[b-vzlq451qwn] {
        background: #f9fafb;
    }

    /* Each cell = labelled row inside the card */
    .admin-datatable td[b-vzlq451qwn] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px;
        border-bottom: 1px solid #f3f4f6;
        font-size: 0.875rem;
        width: 100%;
        box-sizing: border-box;
        text-align: right;
    }

    .admin-datatable td:last-child[b-vzlq451qwn] {
        border-bottom: none;
    }

    /* Column name injected before the value */
    .admin-datatable td[b-vzlq451qwn]::before {
        content: attr(data-label);
        font-size: 0.72rem;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        min-width: 100px;
        flex-shrink: 0;
        text-align: left;
        padding-top: 2px;
    }

    /* Cells with no label (action columns) - push content right, no label space */
    .admin-datatable td[data-label=""][b-vzlq451qwn]::before {
        display: none;
    }

    .admin-datatable td[data-label=""][b-vzlq451qwn] {
        justify-content: flex-end;
    }

    /* Unlock height so all cards show */
    .admin-datatable-wrapper[b-vzlq451qwn] {
        max-height: none;
        overflow-y: visible;
        overflow-x: visible;
    }

    /* Pagination */
    .admin-datatable-footer[b-vzlq451qwn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .pagination-controls[b-vzlq451qwn] {
        width: 100%;
        justify-content: space-between;
    }

    .products-nav[b-vzlq451qwn] {
        gap: 1.5rem;
        padding: 1rem;
        margin-top: 1.5rem;
    }
}

@media (max-width: 480px) {
    .admin-datatable-header[b-vzlq451qwn] {
        padding: 0.875rem;
    }

    .admin-search-input[b-vzlq451qwn] {
        font-size: 0.85rem;
    }

    .admin-datatable td[b-vzlq451qwn] {
        padding: 9px 12px;
        font-size: 0.83rem;
    }

    .admin-datatable td[b-vzlq451qwn]::before {
        min-width: 80px;
    }

    .products-nav[b-vzlq451qwn] {
        gap: 1rem;
    }
}
/* /Components/Shared/BlogPosts/BlogPostCard.razor.rz.scp.css */
.bpc-card[b-1683dg7qbk] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e6e6e6;

    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    background: #fff;
}

.bpc-card:hover[b-1683dg7qbk] {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.bpc-img-wrap[b-1683dg7qbk] {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bpc-img[b-1683dg7qbk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bpc-img-placeholder[b-1683dg7qbk] {
    color: #bbb;
    font-size: 2.5rem;
}

.bpc-body[b-1683dg7qbk] {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.bpc-meta[b-1683dg7qbk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bpc-dot[b-1683dg7qbk] {
    color: #ccc;
}

.bpc-title[b-1683dg7qbk] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    text-transform: uppercase;
}

.bpc-excerpt[b-1683dg7qbk] {
    margin: 0;
    font-size: 0.88rem;
    color: #555;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bpc-read[b-1683dg7qbk] {
    margin-top: auto;
    font-size: 0.82rem;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-style: italic;
    text-decoration: none;
    text-underline-offset: 3px;
}

.bpc-card:hover .bpc-read[b-1683dg7qbk] {
    text-decoration: underline;
}
/* /Components/Shared/Buttons/Button.razor.rz.scp.css */
/* ====================================
Buttons - Fully Responsive
======================================= */

/* Base Button Padding - Responsive */
:root[b-3pc7oenuf5] {
    --btn-padding-y: clamp(0.5rem, 1.5vw, 0.75rem);
    --btn-padding-x: clamp(1rem, 2.5vw, 1.5rem);
    --btn-font-size: clamp(0.75rem, 1.5vw, 1rem);
    --btn-gap: clamp(0.5rem, 1vw, 0.75rem);
}

/* ---------- Primary Gray Button ----------*/

.btn-primary-gray[b-3pc7oenuf5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    position: relative;
    text-transform: uppercase;
    border: 1px solid var(--color-gray);
    background-color: transparent;
    color: var(--color-gray);
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
    font-size: var(--btn-font-size);
    font-family: var(--font-family-base);
    transition: transform var(--transition-fast), color var(--transition-base), background-color var(--transition-base);
    user-select: none;
}

.btn-primary-gray:hover[b-3pc7oenuf5] {
    background-color: var(--color-gray);
    color: var(--color-white);
    transform: scale(0.98);
    border-color: var(--color-gray);
}

.btn-primary-gray:active[b-3pc7oenuf5] {
    transform: scale(0.96);
    background-color: var(--color-gray);
    color: var(--color-white);
}

.btn-primary-gray:focus[b-3pc7oenuf5],
.btn-primary-gray:focus-visible[b-3pc7oenuf5] {
    outline: var(--color-gray);
    outline-offset: var(--focus-offset);
    box-shadow: none;
}

/* ---------- Primary Button ----------*/

.btn-primary[b-3pc7oenuf5] {
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    position: relative;
    border: 1px solid var(--border-dark);
    background-color: transparent;
    color: var(--color-black);
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
    font-size: var(--btn-font-size);
    font-family: var(--font-family-base);
    transition: transform var(--transition-fast), color var(--transition-base), background-color var(--transition-base);
    user-select: none;
}

.btn-primary:hover[b-3pc7oenuf5] {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
    transform: scale(0.98) !important;
    border-color: var(--border-dark) !important;
}

.btn-primary:active[b-3pc7oenuf5] {
    transform: scale(0.96) !important;
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

.btn-primary:focus[b-3pc7oenuf5],
.btn-primary:focus-visible[b-3pc7oenuf5] {
    outline: var(--focus-outline-dark) !important;
    outline-offset: var(--focus-offset) !important;
    box-shadow: none !important;
}

/* ---------- Inverted Button ----------*/

.btn-primary-inverted[b-3pc7oenuf5] {
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    position: relative;
    background-color: var(--color-white);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    cursor: pointer;
    border-radius: 0;
    font-size: var(--btn-font-size);
    font-family: var(--font-family-base);
    transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}

.btn-primary-inverted:hover[b-3pc7oenuf5] {
    background-color: transparent;
    color: var(--color-white);
    transform: scale(0.98);
    border-color: var(--border-light);
}

.btn-primary-inverted:active[b-3pc7oenuf5] {
    transform: scale(0.96);
    background-color: transparent;
    color: var(--color-white);
}

.btn-primary-inverted:focus[b-3pc7oenuf5],
.btn-primary-inverted:focus-visible[b-3pc7oenuf5] {
    outline: var(--focus-outline-light) !important;
    outline-offset: var(--focus-offset) !important;
    color: var(--color-white) !important;
    background-color: transparent !important;
}

/* ---------- Ghost Button ----------*/

.btn-ghost[b-3pc7oenuf5] {
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-inverse);
    cursor: pointer;
    border-radius: 0;
    font-family: var(--font-family-base);
    font-size: var(--btn-font-size);
}

.btn-ghost:hover[b-3pc7oenuf5] {
    opacity: 0.8;
    transform: scale(0.98);
    border-color: var(--border-light) !important;
}

.btn-ghost:active[b-3pc7oenuf5] {
    transform: scale(0.96);
    color: var(--color-white);
}

.btn-ghost:focus[b-3pc7oenuf5],
.btn-ghost:focus-visible[b-3pc7oenuf5] {
    outline: 2px solid var(--border-light) !important;
    outline-offset: var(--focus-offset) !important;
}

/* ---------- Ghost Button Dark ----------*/

.btn-ghost-dark[b-3pc7oenuf5] {
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border: 1px solid var(--color-black);
    background: transparent;
    color: var(--color-black);
    cursor: pointer;
    border-radius: 0;
    font-family: var(--font-family-base);
    font-size: var(--btn-font-size);
}

.btn-ghost-dark:hover[b-3pc7oenuf5] {
    opacity: 0.8;
    transform: scale(0.98);
    border-color: var(--color-black) !important;
}

.btn-ghost-dark:active[b-3pc7oenuf5] {
    transform: scale(0.96);
    color: var(--color-black);
}

.btn-ghost-dark:focus[b-3pc7oenuf5],
.btn-ghost-dark:focus-visible[b-3pc7oenuf5] {
    outline: 2px solid var(--color-black) !important;
    outline-offset: var(--focus-offset) !important;
}

/* ---------- Button Width Control ----------*/
.content-column .btn[b-3pc7oenuf5],
.content-column button[b-3pc7oenuf5] {
    width: auto !important;
}

/* --- Mobile-first responsive adjustments --- */

/* Extra Small Devices (< 480px) */
@media (max-width: 479px) {
    :root[b-3pc7oenuf5] {
        --btn-padding-y: clamp(0.4rem, 1.5vw, 0.5rem);
        --btn-padding-x: clamp(0.75rem, 2vw, 1rem);
        --btn-font-size: clamp(0.65rem, 1.5vw, 0.8rem);
        --btn-gap: clamp(0.4rem, 1vw, 0.5rem);
    }
}

/* Small Devices / Tablets (480px - 768px) */
@media (min-width: 480px) and (max-width: 768px) {
    :root[b-3pc7oenuf5] {
        --btn-padding-y: clamp(0.45rem, 1.5vw, 0.6rem);
        --btn-padding-x: clamp(0.85rem, 2.2vw, 1.15rem);
        --btn-font-size: clamp(0.7rem, 1.5vw, 0.85rem);
        --btn-gap: clamp(0.45rem, 1vw, 0.6rem);
    }
}

/* Medium Devices / Tablets (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    :root[b-3pc7oenuf5] {
        --btn-padding-y: clamp(0.5rem, 1.5vw, 0.65rem);
        --btn-padding-x: clamp(1rem, 2.3vw, 1.25rem);
        --btn-font-size: clamp(0.75rem, 1.5vw, 0.9rem);
        --btn-gap: clamp(0.5rem, 1vw, 0.65rem);
    }
}

/* Large Devices / Desktop (1025px - 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    :root[b-3pc7oenuf5] {
        --btn-padding-y: 0.65rem;
        --btn-padding-x: 1.35rem;
        --btn-font-size: 0.9rem;
        --btn-gap: 0.65rem;
    }
}

/* Extra Large Devices / Desktop (> 1440px) */
@media (min-width: 1441px) {
    :root[b-3pc7oenuf5] {
        --btn-padding-y: 0.75rem;
        --btn-padding-x: 1.5rem;
        --btn-font-size: 1rem;
        --btn-gap: 0.75rem;
    }
}
}
/* /Components/Shared/Buttons/ButtonGroup.razor.rz.scp.css */
.button-group[b-ppledugk5z] {
    display: flex;
    gap: 0.5rem;
    width: fit-content;
}
/* /Components/Shared/CheckoutOrderBox.razor.rz.scp.css */
:root[b-exl7sy75dq]{--color-gray:#666}

/* Reuse the same visual language as the checkout pages */
.checkout-timer[b-exl7sy75dq] {
    border: 1px solid #e6e6e6;
    padding: 10px 10px;
    font-weight: 600;
    margin: 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 90%;
    color: var(--color-black);
}
.checkout-timer ion-icon[b-exl7sy75dq] { font-size: 18px; color: var(--color-black); display: inline-flex; align-items: center; justify-content: center; }
.checkout-timer strong[b-exl7sy75dq] { font-weight: 700; font-size: inherit; line-height: 1; display: inline-block; vertical-align: baseline; }

.order-box[b-exl7sy75dq]{
    border:1px solid #e6e6e6;
    padding:0;
    margin:0 auto 1rem;
    max-width:1200px;
    background:#fff;
}
.order-header[b-exl7sy75dq]{
    background:#e6e6e6;
    padding:10px 0;
    text-align:center;
    font-weight:600;
}
.order-body[b-exl7sy75dq]{display:flex;flex-direction:column;gap:12px;padding:12px 20px;align-items:center}
.order-row[b-exl7sy75dq]{display:flex;gap:24px;align-items:center;width:100%}
.order-info[b-exl7sy75dq]{width:260px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
.order-meta[b-exl7sy75dq]{margin-bottom:8px;text-align:left}
.order-meta div[b-exl7sy75dq]{margin-bottom:6px;color:#333}
.checkout-actions[b-exl7sy75dq]{margin-top:8px;display:flex;gap:12px}
.checkout-actions .btn[b-exl7sy75dq]{min-width:120px}
.order-products[b-exl7sy75dq]{flex:1}
.order-items-row[b-exl7sy75dq]{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start;justify-items:center}
.order-item[b-exl7sy75dq]{display:flex;flex-direction:row;align-items:center;gap:12px;padding:10px;border:none;border-radius:6px;background:transparent}
.order-item-img-wrap[b-exl7sy75dq]{width:100px;height:100px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.order-item-img-wrap img[b-exl7sy75dq]{max-width:100%;max-height:100%;object-fit:contain}
.order-item-info[b-exl7sy75dq]{display:flex;flex-direction:column;align-items:flex-start}
.order-item-info-right[b-exl7sy75dq]{align-items:flex-start}
.order-item-title[b-exl7sy75dq]{font-size:13px;color:#666;margin:0}
.order-item-size[b-exl7sy75dq]{font-size:13px;color:#666;margin:2px 0 0 0}
.order-item-qty[b-exl7sy75dq]{font-size:13px;color:#666;margin:6px 0 0 0}

/* Promotion badge for free items in the gallery/grid */
.order-item-badge[b-exl7sy75dq] {
    font-size: 10px;
    color: #fff;
    background: #333;
    padding: 3px 6px;
    margin-top: 6px;
    display: inline-block;
}
    /* Responsive adjustments */
    @media (max-width: 900px) {
        .order-row[b-exl7sy75dq] {
            flex-direction: column;
            align-items: flex-start
        }

        .order-info[b-exl7sy75dq] {
            width: 100%;
            display: block
        }

        .order-items-row[b-exl7sy75dq] {
            grid-template-columns: repeat(2,1fr)
        }
    }

    @media (max-width: 480px) {
        .order-item-img-wrap[b-exl7sy75dq] {
            width: 80px;
            height: 80px
        }
    }
/* /Components/Shared/Checkout/PaymentMethodSelector.razor.rz.scp.css */
/* ===================== Wrapper ===================== */

.pm-selector[b-jpo3bnunhp] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}


/* ===================== Table ===================== */

.pm-table[b-jpo3bnunhp] {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
}

.pm-row[b-jpo3bnunhp] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.12s;
    outline: none;
    user-select: none;
    position: relative;
}

.pm-row:last-child[b-jpo3bnunhp] {
    border-bottom: none;
}

.pm-row:hover:not(.pm-row--selected)[b-jpo3bnunhp] {
    background: #f7f7f7;
}

.pm-row:focus-visible[b-jpo3bnunhp] {
    outline: 2px solid #1a1a1a;
    outline-offset: -2px;
    z-index: 1;
}

.pm-row--selected[b-jpo3bnunhp] {
    background: #f2f2f2;
    border-left: 3px solid #1a1a1a;
}


/* ===================== Radio Dot ===================== */

.pm-radio[b-jpo3bnunhp] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.12s;
}

.pm-row--selected .pm-radio[b-jpo3bnunhp] {
    border-color: #1a1a1a;
}

.pm-radio-dot[b-jpo3bnunhp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.12s;
}

.pm-radio-dot--on[b-jpo3bnunhp] {
    background: #1a1a1a;
}


/* ===================== Icon ===================== */

.pm-icon[b-jpo3bnunhp] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    color: #333;
}


/* ===================== Label ===================== */

.pm-info[b-jpo3bnunhp] {
    flex: 1;
    min-width: 0;
}

.pm-name[b-jpo3bnunhp] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a1a;
}

.pm-desc[b-jpo3bnunhp] {
    font-size: 0.82rem;
    color: #999;
    margin-top: 2px;
}


/* ===================== Badge ===================== */

.pm-badge[b-jpo3bnunhp] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #92400e;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 2px;
    flex-shrink: 0;
}


/* ===================== Message ===================== */

.pm-message[b-jpo3bnunhp] {
    font-size: 0.88rem;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

.pm-message--ok[b-jpo3bnunhp]  { color: #16a34a; }
.pm-message--err[b-jpo3bnunhp] { color: #dc2626; }


/* ===================== Pay Button ===================== */

.pm-pay-wrap[b-jpo3bnunhp] {
    display: flex;
}

[b-jpo3bnunhp](.pm-pay-btn) {
    width: 100%;
    justify-content: center;
}
/* /Components/Shared/Dashboards/DashboardGrid.razor.rz.scp.css */
/* ============================== Theme Overrides ============================== */

/* All brand themes share the same charcoal tint */
[class*="theme-"] .dashboard-card .card-overlay[b-xzgv9bk0c1] {
    background: rgba(74, 74, 74, 0.45);
    filter: none;
}

/* ============================== Dashboard Container ============================== */

.dashboard-container[b-xzgv9bk0c1] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
    width: 100%;
}

/* ============================== Dashboard Grid ============================== */

.dashboard-grid[b-xzgv9bk0c1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

/* ============================== Dashboard Card ============================== */

.dashboard-card[b-xzgv9bk0c1] {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-height: 200px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .dashboard-card:hover[b-xzgv9bk0c1] {
        transform: translateY(-2px);
    }

/* ============================== Overlay ============================== */

.card-overlay[b-xzgv9bk0c1] {
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5);
    z-index: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-card:hover .card-overlay[b-xzgv9bk0c1] {
    transform: scale(1.02);
    filter: brightness(0.5);
}

/* Dim non-hovered cards when one is hovered */
.dashboard-grid:has(.dashboard-card:hover) .dashboard-card:not(:hover) .card-overlay[b-xzgv9bk0c1] {
    filter: brightness(0.3);
}

/* ============================== Card Content ============================== */

.card-content[b-xzgv9bk0c1] {
    position: relative;
    z-index: 1;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem;
    height: 100%;
    gap: 1rem;
    cursor: pointer;
}

    .card-content h2[b-xzgv9bk0c1] {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0 0 16px 0;
        letter-spacing: 0.5px;
    }

    .card-content p[b-xzgv9bk0c1] {
        font-size: 0.95rem;
        margin: 0 0 16px 0;
        line-height: 1.5;
        opacity: 0.9;
    }

.card-logo[b-xzgv9bk0c1] {
    height: 60px;
    width: auto;
    margin: 0 0 16px 0;
}

/* ============================== Button ============================== */

.view-btn[b-xzgv9bk0c1] {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* ============================== Misc ============================== */

.wishlist-icon[b-xzgv9bk0c1] {
    margin: 0 0 16px 0;
    display: flex;
    justify-content: center;
}

    .wishlist-icon svg[b-xzgv9bk0c1] {
        color: white;
    }

/* ============================== Responsive - Tablet (769px – 1024px) ============================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .dashboard-container[b-xzgv9bk0c1] {
        padding: 3rem clamp(1.5rem, 5vw, 2rem);
    }

    .dashboard-grid[b-xzgv9bk0c1] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* ============================== Responsive - Mobile 2-col (481px – 768px) ============================== */

@media (min-width: 481px) and (max-width: 768px) {
    .dashboard-container[b-xzgv9bk0c1] {
        padding: clamp(1rem, 4vw, 1.5rem) clamp(0.75rem, 4vw, 1.25rem);
    }

    .dashboard-grid[b-xzgv9bk0c1] {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.5rem, 2.5vw, 0.75rem);
        margin-bottom: 1.5rem;
    }

    /* Portrait card: height driven by aspect-ratio, image fills the rectangle */
    .dashboard-card[b-xzgv9bk0c1] {
        aspect-ratio: 3 / 4;
        min-height: unset;
    }

    .card-content[b-xzgv9bk0c1] {
        height: 100%;
        padding: clamp(0.75rem, 2.5vw, 1.25rem) clamp(0.5rem, 2vw, 0.875rem);
        gap: 0.2rem;
    }

    .card-content h2[b-xzgv9bk0c1] {
        font-size: clamp(0.6rem, 1.8vw, 0.75rem);
        margin: 0;
    }

    .card-content p[b-xzgv9bk0c1] {
        font-size: clamp(0.55rem, 1.5vw, 0.65rem);
        margin: 0;
        line-height: 1.3;
    }

    .card-logo[b-xzgv9bk0c1] {
        height: clamp(22px, 5vw, 30px);
        margin: 0;
    }

    .view-btn[b-xzgv9bk0c1] {
        padding: clamp(0.25rem, 1vw, 0.35rem) clamp(0.5rem, 1.5vw, 0.75rem);
        font-size: clamp(0.55rem, 1.5vw, 0.65rem);
        min-height: unset;
        margin-top: 0.25rem;
    }
}

/* ============================== Responsive - Mobile 1-col (≤ 480px) ============================== */

@media (max-width: 480px) {
    .dashboard-container[b-xzgv9bk0c1] {
        padding: 1rem 0.75rem;
    }

    .dashboard-grid[b-xzgv9bk0c1] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    /* Portrait card: height driven by aspect-ratio, image fills the rectangle */
    .dashboard-card[b-xzgv9bk0c1] {
        aspect-ratio: 3 / 4;
        min-height: unset;
        cursor: pointer;
    }

    .card-content[b-xzgv9bk0c1] {
        height: 100%;
        padding: 1.25rem 1rem;
        gap: 0.2rem;
    }

    .card-content h2[b-xzgv9bk0c1] {
        font-size: 1.35rem;
        font-weight: 600;
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: center;
        overflow-wrap: break-word;
    }

    .card-content p[b-xzgv9bk0c1] {
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.4;
        padding: 0 1.5rem;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        overflow-wrap: break-word;
    }

    .card-logo[b-xzgv9bk0c1] {
        height: 30px;
        margin: 0;
    }

    /* Button hidden on smallest screens - card itself is clickable */
    .view-btn[b-xzgv9bk0c1] {
        display: none;
    }
}
/* /Components/Shared/DeleteConfirmationModal.razor.rz.scp.css */
.delete-modal-overlay[b-hx3gillv0a] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.delete-modal-overlay.visible[b-hx3gillv0a] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.delete-modal-dialog[b-hx3gillv0a] {
    position: relative;
    width: min(500px, calc(100% - 40px));
    max-height: 85vh;
    overflow-y: auto;
}

.delete-modal-content[b-hx3gillv0a] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.delete-modal-header[b-hx3gillv0a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}

.delete-modal-title[b-hx3gillv0a] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.delete-modal-body[b-hx3gillv0a] {
    margin-bottom: 24px;
}

.delete-modal-body p[b-hx3gillv0a] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
}

.delete-modal-body strong[b-hx3gillv0a] {
    color: #1a1a1a;
    font-weight: 600;
}

.delete-modal-footer[b-hx3gillv0a] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.delete-spinner[b-hx3gillv0a] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-hx3gillv0a 0.6s linear infinite;
}

@keyframes spin-b-hx3gillv0a {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Shared/Dialogues/Dialog.razor.rz.scp.css */
/* ===================== Overlay ===================== */

.dialog-overlay[b-ezup4itddf] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    padding: 16px;
    box-sizing: border-box;
}

/* ===================== Dialog box ===================== */

.dialog-box[b-ezup4itddf] {
    background: #ffffff;
    width: min(520px, 100%);
    box-sizing: border-box;
    padding: 32px 28px 28px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    text-align: left;
}

/* ===================== Title ===================== */

.dialog-box h4[b-ezup4itddf] {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #111;
}

/* ===================== Message ===================== */

.dialog-box p[b-ezup4itddf] {
    margin: 0 0 24px;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* ===================== Actions ===================== */

.dialog-actions[b-ezup4itddf] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* ===================== Mobile ===================== */

@media (max-width: 480px) {
    .dialog-box[b-ezup4itddf] {
        padding: 24px 20px 20px;
    }

    .dialog-actions[b-ezup4itddf] {
        flex-direction: column;
    }

    .dialog-actions .btn[b-ezup4itddf] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Shared/Education/EducationHub.razor.rz.scp.css */
/* ============================== Brand Selector ============================== */

.edu-brand-selector[b-sifu6fdk1n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 2rem 1.25rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.edu-brand-btn[b-sifu6fdk1n] {
    padding: 0.6rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--color-gray, #333);
    background: transparent;
    color: var(--color-gray, #333);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.edu-brand-btn:hover[b-sifu6fdk1n],
.edu-brand-btn.active[b-sifu6fdk1n] {
    background: var(--color-gray, #333);
    color: white;
}

@media (max-width: 479px) {
    .edu-brand-selector[b-sifu6fdk1n] {
        padding: 1.25rem 1rem 0;
        gap: 0.5rem;
    }

    .edu-brand-btn[b-sifu6fdk1n] {
        padding: 0.5rem 1.25rem;
        font-size: 0.8rem;
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ============================== Items Grid ============================== */

.edu-items-grid[b-sifu6fdk1n] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.edu-item-btn-wrap[b-sifu6fdk1n] {
    display: flex;
    justify-content: flex-start;
}

.edu-item-btn[b-sifu6fdk1n] {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
}

.edu-empty[b-sifu6fdk1n] {
    color: var(--color-gray, #555);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .edu-items-grid[b-sifu6fdk1n] {
        grid-template-columns: 1fr;
    }
}

/* ============================== Item Detail Panel ============================== */

.edu-item-detail[b-sifu6fdk1n] {
    position: relative;
    background-color: #3a3a3a;
    padding: 60px 40px 40px;
    margin-top: -20px;
}

.edu-item-detail-header[b-sifu6fdk1n] {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 12px 32px;
    border: 1px solid #333;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.edu-item-content[b-sifu6fdk1n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    color: #fff;
    line-height: 1.8;
    font-size: 14px;
}

.edu-item-content p[b-sifu6fdk1n] {
    margin: 0;
    text-align: justify;
}

.edu-item-content strong[b-sifu6fdk1n] {
    display: block;
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: 600;
}

.edu-item-content h3[b-sifu6fdk1n],
.edu-item-content h4[b-sifu6fdk1n] {
    margin: 16px 0 8px;
    font-weight: 600;
}

.edu-item-close[b-sifu6fdk1n] {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .edu-item-detail[b-sifu6fdk1n] {
        padding: 48px 20px 28px;
    }

    .edu-item-detail-header[b-sifu6fdk1n] {
        font-size: 0.8rem;
        padding: 10px 20px;
        white-space: normal;
        text-align: center;
        width: calc(100% - 40px);
    }

    .edu-item-content[b-sifu6fdk1n] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 479px) {
    .edu-item-detail[b-sifu6fdk1n] {
        padding: 40px 16px 24px;
    }

    .edu-item-content[b-sifu6fdk1n] {
        font-size: 13px;
        gap: 16px;
    }
}

/* Optiphi brand theme - item detail accent */
.edu-item-detail.theme-optiphi[b-sifu6fdk1n] {
    background-color: #4a4a4a;
}

/* Melcura brand theme - item detail accent */
.edu-item-detail.theme-melcura[b-sifu6fdk1n] {
    background-color: #1D5186;
}

/* ============================== FAQ Accordion ============================== */

.edu-faq-section[b-sifu6fdk1n] {
    margin: 40px 0;
    padding: 0 20px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.edu-faq-container[b-sifu6fdk1n] {
    position: relative;
    border: 1px solid #333;
    padding: 20px 0 32px;
}

.edu-faq-header[b-sifu6fdk1n] {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 12px 32px;
    border: 2px solid #333;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.edu-faq-item[b-sifu6fdk1n] {
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 32px;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    transition: background-color 0.2s;
    color: var(--color-gray, #333);
    font-weight: 500;
}

.edu-faq-item:hover[b-sifu6fdk1n] {
    background-color: #f9f9f9;
}

.edu-faq-question[b-sifu6fdk1n] {
    flex: 1;
}

.edu-faq-icon[b-sifu6fdk1n] {
    flex-shrink: 0;
    transition: transform 0.25s;
    display: flex;
    align-items: center;
}

.edu-faq-icon.expanded[b-sifu6fdk1n] {
    transform: rotate(180deg);
}

.edu-faq-answer[b-sifu6fdk1n] {
    padding: 16px 32px;
    color: #666;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .edu-faq-section[b-sifu6fdk1n] {
        padding: 0 12px;
        margin: 28px auto;
    }

    .edu-faq-item[b-sifu6fdk1n] {
        padding: 14px 20px;
    }

    .edu-faq-answer[b-sifu6fdk1n] {
        padding: 12px 20px;
    }
}

@media (max-width: 479px) {
    .edu-faq-header[b-sifu6fdk1n] {
        font-size: 12px;
        padding: 10px 20px;
    }

    .edu-faq-item[b-sifu6fdk1n] {
        padding: 12px 16px;
        font-size: 0.875rem;
    }

    .edu-faq-answer[b-sifu6fdk1n] {
        padding: 10px 16px;
        font-size: 0.875rem;
    }
}
/* /Components/Shared/Footers/PageFooter.razor.rz.scp.css */
/*
    File:       PageFooter.razor.css

    Purpose:    Styling for the fixed page footer and its navigation links.
*/

:root[b-4m9ldoooas] {
    --footer-h: 7rem;
}

/* ====================================
   Footer Container
======================================= */

.simple-footer[b-4m9ldoooas] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

.page[b-4m9ldoooas] {
    padding-bottom: var(--footer-h);
}

/* ====================================
   Footer Links
======================================= */

.simple-footer-links[b-4m9ldoooas] {
    display: flex;
    gap: 3rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.simple-footer-link[b-4m9ldoooas] {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.simple-footer-link:hover[b-4m9ldoooas] {
    opacity: 0.7;
}

/* ====================================
   Responsive - Large Tablets (992px)
======================================= */

@media (max-width: 992px) {
    :root[b-4m9ldoooas] {
        --footer-h: 6rem;
    }

    .simple-footer-links[b-4m9ldoooas] {
        gap: 2rem;
    }
}

/* ====================================
   Responsive - Tablets (768px)
======================================= */

@media (max-width: 768px) {
    :root[b-4m9ldoooas] {
        --footer-h: auto;
    }

    .simple-footer[b-4m9ldoooas] {
        height: auto;
        padding: 1rem 0;
    }

    .simple-footer-links[b-4m9ldoooas] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
        width: 100%;
    }

    .simple-footer-link[b-4m9ldoooas] {
        white-space: normal;
        text-align: center;
        display: block;
    }
}

/* ====================================
   Responsive - Small Phones (480px)
======================================= */

@media (max-width: 480px) {
    .simple-footer-links[b-4m9ldoooas] {
        gap: 0.5rem;
        padding: 0 1.25rem;
    }
}
/* /Components/Shared/Forms/ColorPickerInput.razor.rz.scp.css */
/* ===================== Color Picker Input ===================== */

.cp-row[b-qvudz2esi7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

/* Swatch wrapper keeps the native input hidden but clickable */
.cp-swatch-wrap[b-qvudz2esi7] {
    position: relative;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.cp-swatch[b-qvudz2esi7] {
    position: absolute;
    inset: -0.5rem;
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
    border: none;
    padding: 0;
    cursor: pointer;
    background: none;
}

/* Text input fills remaining space */
.cp-text[b-qvudz2esi7] {
    flex: 1;
    min-width: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* Format toggle + live preview row */
.cp-meta[b-qvudz2esi7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.cp-fmt-group[b-qvudz2esi7] {
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    overflow: hidden;
}

.cp-fmt-btn[b-qvudz2esi7] {
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    background: transparent;
    color: #888;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.cp-fmt-btn + .cp-fmt-btn[b-qvudz2esi7] {
    border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.cp-fmt-btn--active[b-qvudz2esi7] {
    background: #333;
    color: #fff;
}

.cp-fmt-btn:disabled[b-qvudz2esi7] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Live preview dot */
.cp-live-preview[b-qvudz2esi7] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}
/* /Components/Shared/Forms/EntityForm.razor.rz.scp.css */
/* ===== EntityForm.razor.css ===== */

/* ===================== Form Root ===================== */
form.form-white.full-bleed[b-9mde99xjnn] {
    width: 100%;
}

    /* ===================== Content Constraint Layer ===================== */
    /* This is the FIX */
    form.form-white.full-bleed > *:not(.bh-form-header)[b-9mde99xjnn] {
        width: 100%;
        max-width: var(--content-max-width, 1100px);
        margin-left: auto;
        margin-right: auto;
    }

    /* ===================== Header (Full-Bleed Allowed) ===================== */
    form.form-white.full-bleed .bh-form-header[b-9mde99xjnn] {
        width: 100%;
        max-width: none; /* critical */
    }

    /* ===================== Description ===================== */
    form.form-white.full-bleed .bh-form-content[b-9mde99xjnn] {
        margin-top: var(--space-sm);
        margin-bottom: var(--space-lg);
    }

        /* remove browser spacing drift */
        form.form-white.full-bleed .bh-form-content p[b-9mde99xjnn] {
            margin: 0;
            color: var(--bh-form-content-color);
        }

    /* ===================== Fields ===================== */
    form.form-white.full-bleed .content-columns[b-9mde99xjnn] {
        margin-bottom: var(--space-xl);
    }

    /* ===================== Error Alert ===================== */
    form.form-white.full-bleed .form-error-alert[b-9mde99xjnn] {
        margin-bottom: var(--space-lg);
    }

    /* ===================== Actions ===================== */
    form.form-white.full-bleed .form-actions[b-9mde99xjnn] {
        display: flex;
        gap: var(--space-md);
        flex-wrap: wrap;
        align-items: center;
        margin-top: var(--space-lg);
        margin-bottom: var(--space-xl);
    }

        /* ===================== Buttons ===================== */
        form.form-white.full-bleed .form-actions .btn[b-9mde99xjnn] {
            white-space: nowrap;
        }

/* ===================== Responsive ===================== */
@media (max-width: 768px) {
    form.form-white.full-bleed .form-actions[b-9mde99xjnn] {
        flex-direction: column;
        align-items: stretch;
    }

        form.form-white.full-bleed .form-actions .btn[b-9mde99xjnn] {
            width: 100%;
        }
}
/* /Components/Shared/Forms/FormActions.razor.rz.scp.css */
/* Make the component be a grid item that starts a new row */
:host[b-2ga4gqy6sk] {
    display: block;
    grid-column: 1 / -1; /* span all columns -> next available row */
}

/* Left align the actions within that row */
.form-actions[b-2ga4gqy6sk] {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    justify-content: flex-start; /* LEFT */
    margin-top: var(--space-lg);
}
/* /Components/Shared/Forms/FormContent.razor.rz.scp.css */
.bh-form-content[b-guipcji60f] {
    grid-column: 1 / -1; /* full width like FormHeader */
    margin: 0.5rem 0 1.5rem;
    line-height: 1.5;
    font-size: 0.95rem;
    color: var(--bh-form-content-color, white);
}
/* /Components/Shared/Forms/FormErrorAlert.razor.rz.scp.css */
/* Error alert title */
.form-error-alert-title[b-k8qk2pouuf] {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    display: block;
    color: #9d2235; /* inherit theme color */
}

/* Error alert message */
.form-error-alert-message[b-k8qk2pouuf] {
    font-weight: 400;
    font-size: 0.95rem;
    margin: 0;
    display: block;
    color: #9d2235; /* inherit theme color */
}

/* Theme-specific overrides (match validation-message colors) */
.form-gray .form-error-alert-title[b-k8qk2pouuf],
.form-gray .form-error-alert-message[b-k8qk2pouuf] {
    color: var(--color-gray);
}

.form-dark .form-error-alert-title[b-k8qk2pouuf],
.form-dark .form-error-alert-message[b-k8qk2pouuf] {
    color: var(--color-white);
}

.form-blue .form-error-alert-title[b-k8qk2pouuf],
.form-blue .form-error-alert-message[b-k8qk2pouuf] {
    color: var(--color-white);
}

.form-white .form-error-alert-title[b-k8qk2pouuf],
.form-white .form-error-alert-message[b-k8qk2pouuf] {
    color: var(--color-gray);
}
/* /Components/Shared/Forms/FormHeader.razor.rz.scp.css */
/* ===== FormHeader.razor.css ===== */

/* ===================== Header Container ===================== */
.bh-form-header[b-6lnha2ygq2] {
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    position: relative; /* required for rule overflow */
}

/* ===================== Layout Span ===================== */
.is-full[b-6lnha2ygq2] {
    grid-column: 1 / -1;
}

/* ===================== Theme Variants ===================== */
.is-light[b-6lnha2ygq2] {
    color: var(--text-inverse);
}

.is-dark[b-6lnha2ygq2] {
    color: var(--text-primary);
}

/* ===================== Title ===================== */
.bh-form-title-light[b-6lnha2ygq2],
.bh-form-title-dark[b-6lnha2ygq2] {
    font-size: var(--font-size-lg);
    white-space: nowrap;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--bh-form-header-text);
}

/* ===================== Extended Rule (RIGHT BLEED FIX) ===================== */
.bh-form-header > hr[b-6lnha2ygq2] {
    flex: 1;
    border-radius: var(--input-radius-pill);
    border-top: 1.75px solid var(--bh-form-header-rule);
    margin: 0;
    /* ✅ Key fix: anchor + extend right */
    position: relative;
    /* Extend past container without shifting left */
    width: calc(100% + 50vw);
    margin-right: -50vw;
    /* Prevent clipping */
    max-width: none;
    opacity: 0.85;
}
/* /Components/Shared/Forms/FormInfoAlert.razor.rz.scp.css */
/* ====================================
Form Info Alert Component Styling
Minimal, Luxury, Subtle Design
======================================= */

/* Main info alert container */
.form-info-alert[b-aju5pwirq4] {
    margin-top: 2rem;
    padding: 1rem 1rem;
    background: #D1ECF1;
    border-left: 4px solid #17a2b8;
    border-radius: 0;
    box-shadow: none;
    animation: slideInUp-b-aju5pwirq4 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

/* Subtle animation: Slide in from bottom */
@keyframes slideInUp-b-aju5pwirq4 {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in class for initial appearance */
.fade-in[b-aju5pwirq4] {
    animation: fadeIn-b-aju5pwirq4 0.3s ease-in-out;
}

@keyframes fadeIn-b-aju5pwirq4 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Alert content wrapper */
.info-alert-content[b-aju5pwirq4] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Info icon styling */
.info-icon[b-aju5pwirq4] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #17a2b8;
}

/* Info text wrapper */
.info-text[b-aju5pwirq4] {
    flex: 1;
    min-width: 0;
}

    /* Info title/heading */
    .info-text strong[b-aju5pwirq4] {
        display: block;
        color: #17a2b8;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.2px;
        margin-bottom: 0.35rem;
    }

    /* Info message text */
    .info-text p[b-aju5pwirq4] {
        color: #17a2b8;
        font-size: 0.9rem;
        line-height: 1.5;
        margin: 0;
        font-weight: 400;
    }

/* Close button styling */
.info-close-btn[b-aju5pwirq4] {
    flex-shrink: 0;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: #17a2b8;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    font-weight: 300;
}

.info-close-btn:hover[b-aju5pwirq4] {
    opacity: 0.7;
}

.info-close-btn:focus[b-aju5pwirq4] {
    outline: 2px solid #17a2b8;
    outline-offset: 2px;
}
/* /Components/Shared/Forms/FormInput.razor.rz.scp.css */
.document-item[b-tr1zy47utl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #dee2e6;

    padding: 0.5rem 1rem;
}

.document-name[b-tr1zy47utl] {
    font-size: 0.95rem;
    color: #343a40;
}

.document-actions ion-icon[b-tr1zy47utl] {
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}



    .document-view-icon:hover[b-tr1zy47utl] {
        transform: scale(1.05);

    }



    .document-remove-icon:hover[b-tr1zy47utl] {
        transform: scale(1.05);
 
    }
/* /Components/Shared/Forms/Forms.razor.rz.scp.css */
/* Form styles have been centralized into the global stylesheet: wwwroot/app.css
   This component-scoped file is intentionally left minimal to avoid duplicate
   or conflicting rules. Please make edits to form / input / validation styles
   in `wwwroot/app.css` which is the single source of truth for form styling.
*/

/* NOTE: Layout-specific per-form classes (grid placement) are handled in
   the global stylesheet to keep visual rules consistent across themes. */
/* /Components/Shared/Forms/LoginForm.razor.rz.scp.css */
/* =========================================================
   LoginForm.razor.css

   Purpose:
   Styles for Login form layout, inputs, password toggle, 
   and supporting elements. Ensures consistency with input 
   design system and responsive layout behavior.

   ========================================================= */

/* =========================================================
   Form Labels & Layout
   ========================================================= */

.login-form__label[b-dzn7obt2ai] {
    display: block;
    margin-bottom: 0.5rem;
}

.login-form__grid[b-dzn7obt2ai] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.login-form__field[b-dzn7obt2ai] {
    width: 80%;
}

/* =========================================================
   Password Input Container (Custom Input Wrapper)
   ========================================================= */

.password-container[b-dzn7obt2ai] {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--input-height);
    padding: 0 0.75rem 0 1rem;
    border-radius: var(--input-radius-pill);
    border: 1px solid var(--color-gray);
    background: transparent;
}

    /* Focus state aligned with design system */
    .password-container:focus-within[b-dzn7obt2ai] {
        outline: 2px solid var(--color-success);
        outline-offset: var(--focus-offset);
    }

/* =========================================================
   Password Input (Normalized - CRITICAL FIX)
   ========================================================= */

.password-input[b-dzn7obt2ai] {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    appearance: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: normal;
    padding-left: 0.25rem;
}
    .password-input:focus[b-dzn7obt2ai],
    .password-input:focus-visible[b-dzn7obt2ai],
    .password-input:active[b-dzn7obt2ai] {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }


/* =========================================================
   Password Toggle (Eye Button)
   ========================================================= */
.password-toggle-btn[b-dzn7obt2ai] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
}

    .password-toggle-btn ion-icon[b-dzn7obt2ai] {
        font-size: 18px;
    }

    .password-toggle-btn:hover[b-dzn7obt2ai] {
        background: rgba(0, 0, 0, 0.05);
    }

/* =========================================================
   Additional Form Elements
   ========================================================= */

.login-form__remember[b-dzn7obt2ai] {
    margin-bottom: 1.5rem;
}

.login-form__remember-label[b-dzn7obt2ai] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.login-form__submit[b-dzn7obt2ai] {
    margin-top: 1.5rem;
}

.login-form__links[b-dzn7obt2ai] {
    margin-top: 1rem;
}

.login-form__link-text[b-dzn7obt2ai] {
    font-style: italic;
}

/* =========================================================
   Links
   ========================================================= */

.login-link[b-dzn7obt2ai] {
    color: var(--color-black);
    text-decoration: none;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

    .login-link:hover[b-dzn7obt2ai] {
        text-decoration: underline;
    }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 768px) {
    .login-form__grid[b-dzn7obt2ai] {
        grid-template-columns: 1fr;
    }
}
.content-columns[b-dzn7obt2ai] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.content-column[b-dzn7obt2ai] {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 768px) {
    .content-columns[b-dzn7obt2ai] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/Forms/RegisterForm.razor.rz.scp.css */
/* =========================================================
   RegisterForm.razor.css

   Purpose:
   Scoped styling for Register form.
   Password fields are rendered exactly like LoginForm,
   with the eye icon inside the pill wrapper.

   ========================================================= */

/* =========================================================
   Description
   ========================================================= */

.register-form__description[b-3jemwlmz0g] {
    color: var(--color-black);
    margin-bottom: 1.5rem;
    width:80%;
}

/* =========================================================
   Labels & Layout
   ========================================================= */

.register-form__label[b-3jemwlmz0g] {
    display: block;
    margin-bottom: 0.5rem;
}

.register-form__grid[b-3jemwlmz0g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.register-form__field[b-3jemwlmz0g] {
    width: 80%;
}

/* =========================================================
   Password Input Container (Matches LoginForm)
   ========================================================= */

.password-container[b-3jemwlmz0g] {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--input-height);
    padding: 0 0.75rem 0 1rem;
    border-radius: var(--input-radius-pill);
    border: 1px solid var(--color-black);
    background: transparent;
}

    /* Focus state aligned with design system */
    .password-container:focus-within[b-3jemwlmz0g] {
        outline: 2px solid var(--color-success);
        outline-offset: var(--focus-offset);
    }

/* =========================================================
   Password Input (Matches LoginForm)
   ========================================================= */

.password-input[b-3jemwlmz0g] {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    appearance: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: normal;
    padding-left: 0.25rem;
}

    .password-input:focus[b-3jemwlmz0g],
    .password-input:focus-visible[b-3jemwlmz0g],
    .password-input:active[b-3jemwlmz0g] {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }

/* =========================================================
   Password Toggle (Eye Button)
   ========================================================= */

.password-toggle-btn[b-3jemwlmz0g] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
}

    .password-toggle-btn ion-icon[b-3jemwlmz0g] {
        font-size: 18px;
    }

    .password-toggle-btn:hover[b-3jemwlmz0g] {
        background: rgba(0, 0, 0, 0.05);
    }

/* =========================================================
   Consent Section
   ========================================================= */

.register-form__consent[b-3jemwlmz0g] {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    width: 80%;
}

.register-form__consent-label[b-3jemwlmz0g] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-black);
}

    .register-form__consent-label input[b-3jemwlmz0g] {
        margin-top: 0.25rem;
        flex-shrink: 0;
    }

/* =========================================================
   Submit
   ========================================================= */

.register-form__submit[b-3jemwlmz0g] {
    margin-top: 1.5rem;
}

/* =========================================================
   Links
   ========================================================= */

.consent-link[b-3jemwlmz0g],
.register-link[b-3jemwlmz0g] {
    pointer-events: auto;
    cursor: pointer;
    color: var(--color-black);
    text-decoration: none;
    font-size: 0.9rem;
    font-style: italic;
    transition: opacity 0.2s ease;
}

    .register-link:hover[b-3jemwlmz0g],
    .consent-link:hover[b-3jemwlmz0g] {
        text-decoration: underline;
        
    }

    .register-link:focus[b-3jemwlmz0g],
    .consent-link:focus[b-3jemwlmz0g] {
        outline: 2px solid var(--color-focus);
        outline-offset: 2px;
    }

/* =========================================================
   Register Login Link Section (Matches LoginForm)
   ========================================================= */

.register-form__links[b-3jemwlmz0g] {
    margin-top: 1rem;
}

.register-form__link-text[b-3jemwlmz0g] {
    font-style: italic;
}


.login-link[b-3jemwlmz0g] {
    color: var(--color-black);
    text-decoration: none;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

    .login-link:hover[b-3jemwlmz0g] {
        text-decoration: underline;
    }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 768px) {
    .register-form__grid[b-3jemwlmz0g] {
        grid-template-columns: 1fr;
    }
}

.content-columns[b-3jemwlmz0g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.content-column[b-3jemwlmz0g] {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 768px) {
    .content-columns[b-3jemwlmz0g] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/Forms/RichTextEditor.razor.rz.scp.css */
.rte-toolbar[b-hpvyjls398] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
    margin-top: 4px;
}

.rte-toolbar-divider[b-hpvyjls398] {
    border-left: 1px solid #ddd;
    margin: 0 4px;
}

.rte-editor[b-hpvyjls398] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    min-height: 120px;
    max-height: 320px;
    width: 100%;
    background-color: #fff;
    font-family: inherit;
    font-size: inherit;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    line-height: 1.5;
}

.rte-editor:focus[b-hpvyjls398] {
    outline: none;
    border-color: #333;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* Inline images embedded in the editor scale to the field, never overflow it. */
.rte-editor[b-hpvyjls398]  img {
    max-width: 100%;
    height: auto;
}

.rte-image-btn[b-hpvyjls398] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
}

.rte-image-btn.disabled[b-hpvyjls398] {
    opacity: 0.6;
    pointer-events: none;
}

.rte-image-btn ion-icon[b-hpvyjls398] {
    font-size: 1rem;
}

.rte-image-error[b-hpvyjls398] {
    color: var(--color-error, #dc3545);
    font-size: 0.85rem;
    margin: 4px 0 0;
}
/* /Components/Shared/Galleries/BrandGalleryCard.razor.rz.scp.css */
/* =========================================
   File: LandingHome.razor.css
   Description: Landing page styling
   Author: Marinette Funk
   Created: 2026-03-24
========================================= */

/* NOTE: Scoped to LandingHome.razor via CSS isolation. These selectors will be isolated by Blazor. */

:root[b-hvtoe6g6b1] {
    /* Design tokens for LandingHome (lh) */
    --lh-space-xs: 8px;
    --lh-space-sm: 12px;
    --lh-space-md: 16px;
    --lh-space-lg: 30px;
    --lh-color-bg: #ffffff;
    --lh-color-card: #0b1b3c;
    --lh-color-white: #ffffff;
    --lh-color-overlay: rgba(0,0,0,0.25);
    --lh-radius-sm: 6px;
    --lh-transition-fast: 0.35s ease;
    --lh-transition-medium: 0.8s cubic-bezier(.16,1,.3,1);
}

/* Increase gallery text padding on narrower desktops to improve readability */
@media (max-width: 1200px) {
    .lh__text[b-hvtoe6g6b1],
    .gallery-text[b-hvtoe6g6b1] {
        padding: 2rem 2rem !important;
    }
}


/* ===============================
   Block: lh (Landing Home)
================================= */

/* Full bleed container utility for LandingHome */
.lh__full-bleed[b-hvtoe6g6b1] {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box;
    padding: 0;
}

@supports (width: 100dvw) {
    .lh__full-bleed[b-hvtoe6g6b1] {
        width: 100dvw;
        max-width: 100dvw;
    }
}


/* ===============================
   Element: lh__gallery
   Role: Main brand gallery grid
================================= */
.lh__gallery[b-hvtoe6g6b1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    position: relative;
    perspective: 1400px;
    gap: var(--lh-space-md);
}

/* Remove gap when galleries are stacked */
.lh__gallery[b-hvtoe6g6b1] {
    margin: 0;
}

    .lh__gallery + .lh__gallery[b-hvtoe6g6b1] {
        margin-top: 0;
    }

/* Prevent scrollbars when cards animate (clip overflow) */
.lh__gallery[b-hvtoe6g6b1],
.lh__full-bleed[b-hvtoe6g6b1] {
    overflow: hidden;
}


/* Modifier: supporting brands uses fewer columns */
.lh__gallery--supporting[b-hvtoe6g6b1] {
    grid-template-columns: repeat(2, 1fr);
}

    .lh__gallery--supporting .lh__image[b-hvtoe6g6b1] {
        /* set per-element image height token so CTAs can compute distance from bottom */
        --lh-image-height: 400px !important;
        height: var(--lh-image-height) !important;
    }


/* ===============================
   Element: lh__gallery-item
================================= */
.lh__gallery-item[b-hvtoe6g6b1] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    background: var(--lh-color-bg);
    position: relative;
    transform-style: preserve-3d;
    will-change: transform, filter, opacity;
    transition: transform 0.6s cubic-bezier(.16,1,.3,1), filter 0.5s ease, opacity 0.5s ease, box-shadow 0.6s cubic-bezier(.16,1,.3,1);
}

/* Modifier examples: brand-specific modifier classes applied in markup */
.lh__gallery-item--optiphi[b-hvtoe6g6b1] {
}

.lh__gallery-item--delta[b-hvtoe6g6b1] {
}

.lh__gallery-item--melcura[b-hvtoe6g6b1] {
}

.lh__gallery-item--visi[b-hvtoe6g6b1] {
}

.lh__gallery-item--supporting-smed[b-hvtoe6g6b1] {
}

.lh__gallery-item--supporting-ent[b-hvtoe6g6b1] {
}


/* ===============================
   Element: lh__image
   Role: Brand image background
================================= */
.lh__image[b-hvtoe6g6b1] {
    position: relative;
    height: 800px !important;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

    .lh__image[b-hvtoe6g6b1]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit;
        background-size: cover;
        background-position: center;
        transform: scale(1);
        transition: transform var(--lh-transition-medium);
        z-index: -1;
    }


/* ===============================
   Element: lh__overlay
   Role: Content overlay with logo and CTA
================================= */
.lh__overlay[b-hvtoe6g6b1] {
    position: absolute;
    inset: 0;
    background: var(--lh-color-overlay);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem;
    transition: background 1.2s ease, backdrop-filter 1.2s ease;
}


/* ===============================
   Element: lh__logo
================================= */
.lh__logo[b-hvtoe6g6b1] {
    max-width: 250px;
    filter: brightness(0) invert(1);
    transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease;
}

.lh__gallery--supporting .lh__logo[b-hvtoe6g6b1] {
    max-width: 600px;
}

/* Place supporting brand CTAs below the logo (inside the overlay flow) so buttons appear under logos */
.lh__gallery--supporting .lh__cta[b-hvtoe6g6b1] {
    /* Let the overlay center content and keep CTA in flow so it is centered inside the image */
    position: static; /* ensure CTA is laid out by the overlay flexbox */
    display: block;
    width: max-content;
    margin: 0.75rem 0 0; /* small gap between logo and CTA; horizontal centering handled by flexbox */
    bottom: auto;
    left: auto; /* reset inherited left */
    transform: none; /* reset inherited translateX from base .lh__cta */
    align-self: center; /* ensure centering within overlay flex container */
}

    .lh__gallery--supporting .lh__cta a[b-hvtoe6g6b1],
    .lh__gallery--supporting .lh__cta button[b-hvtoe6g6b1] {
        min-height: 36px;
        padding: 0.5rem 1rem;
    }


/* ===============================
   Element: lh__btn
   Role: CTA buttons (applied to Button component via class)
================================= */
.lh__btn[b-hvtoe6g6b1] {
    /* Do NOT override Button component theme/variant colors or borders here.
       This class only provides spacing and motion helpers so component variants
       (e.g. Ghost) remain authoritative. */
    padding: 0.55rem 1.25rem;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease;
}

/* Modifier placeholder left intentionally empty so it doesn't conflict with the Button component's variant scoping. */
.lh__btn--ghost[b-hvtoe6g6b1] {
}

/* Wrapper for gallery CTAs. Keeps spacing and prevents text-decoration on anchor-based Buttons. */
.lh__cta[b-hvtoe6g6b1] {
    /* Position the CTA consistently from the bottom of the image so all buttons
       appear at the same vertical distance across cards. Keep styling limited
       to layout and sizing so component variant colors/borders are not overridden. */
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15rem; /* consistent distance from bottom of card */
}

    .lh__cta a[b-hvtoe6g6b1],
    .lh__cta button[b-hvtoe6g6b1] {
        text-decoration: none; /* ensure no underline on link-based Buttons */
        /* Ensure consistent vertical sizing and centered contents without changing theme colors */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
    }

/* Button handling for medium screens */
@media (max-width: 1200px) {
    /* slightly raise CTAs on narrower desktops so they align visually */
    .lh__cta[b-hvtoe6g6b1] {
        bottom: 15rem;
    }

        .lh__cta a[b-hvtoe6g6b1],
        .lh__cta button[b-hvtoe6g6b1] {
            min-height: 42px;
            padding: 0.5rem 1.125rem;
        }
}

/* Slightly reduce bottom spacing on smaller screens */
@media (max-width: 640px) {
    .lh__cta[b-hvtoe6g6b1] {
        bottom: 15rem;
    }

        .lh__cta a[b-hvtoe6g6b1],
        .lh__cta button[b-hvtoe6g6b1] {
            min-height: 36px;
        }
}


/* ===============================
   Element: lh__text
   Role: Description text below image
================================= */
.lh__text[b-hvtoe6g6b1] {
    /* Read background color from a card-level CSS variable if provided
       (markup may set --card-bg inline on the gallery item). Fall back to token. */
    background: var(--card-bg, var(--lh-color-card));
    color: var(--color-white) !important;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}

/* Legacy class compatibility: support original markup that uses `.gallery-text` and
   inline `--card-bg` on `.gallery-item`. This preserves original behavior for temp files
   or other parts of the app that haven't been migrated to BEM. */
.gallery-text[b-hvtoe6g6b1] {
    background: var(--card-bg, var(--lh-color-card));
    color: var(--lh-color-white) !important; /* E!IMPORTANT: legacy compatibility - enforce white text */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}


/* ===============================
   Hover interactions (main gallery)
================================= */

/* Soften other cards on hover */
.lh__gallery:hover .lh__gallery-item[b-hvtoe6g6b1] {
    filter: blur(0.4px) brightness(.95) saturate(.98);
    opacity: .92;
    transform: scale(1);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Highlight active card */
.lh__gallery .lh__gallery-item:hover[b-hvtoe6g6b1] {
    filter: none;
    opacity: 1;
    transform: scale(1.003);
    z-index: 10;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .25), 0 8px 20px rgba(0, 0, 0, .18);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Frosted overlay for non-hovered cards */
.lh__gallery:hover .lh__gallery-item:not(:hover)[b-hvtoe6g6b1]::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

/* Image zoom effect */
.lh__gallery .lh__gallery-item:hover .lh__image[b-hvtoe6g6b1]::after {
    transform: scale(0.95);
    transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Overlay deepens */
.lh__gallery .lh__gallery-item:hover .lh__overlay[b-hvtoe6g6b1] {
    background: rgba(0, 0, 0, .32);
    transition: background 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Logo animation */
.lh__gallery .lh__gallery-item:hover .lh__logo[b-hvtoe6g6b1] {
    transform: scale(1.01);
    transition: transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Button animation */
.lh__gallery .lh__gallery-item:hover .lh__btn[b-hvtoe6g6b1] {
    transform: scale(1.02);
    box-shadow: 0 10px 24px rgba(255, 255, 255, .15);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Text animation */
.lh__gallery .lh__gallery-item:hover .lh__text[b-hvtoe6g6b1] {
    transform: scale(1.001);
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reset when not hovering */
.lh__gallery:not(:hover) .lh__gallery-item[b-hvtoe6g6b1] {
    filter: none;
    opacity: 1;
    transform: none;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ===============================
   Hover interactions - supporting brands (subtle)
================================= */
.lh__gallery--supporting:hover .lh__gallery-item[b-hvtoe6g6b1] {
    filter: brightness(.97);
    opacity: .96;
    transform: scale(1);
}

.lh__gallery--supporting .lh__gallery-item:hover[b-hvtoe6g6b1] {
    filter: none;
    opacity: 1;
    transform: scale(1.008);
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

    .lh__gallery--supporting .lh__gallery-item:hover .lh__logo[b-hvtoe6g6b1] {
        transform: scale(1.01);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__btn[b-hvtoe6g6b1] {
        transform: scale(1.005);
        box-shadow: 0 5px 15px rgba(255, 255, 255, .1);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__text[b-hvtoe6g6b1] {
        transform: scale(1);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__overlay[b-hvtoe6g6b1] {
        background: rgba(0, 0, 0, .28);
    }


/* ===============================
   Responsive (match original landing behavior)
================================= */
/*
   Responsive breakpoints (overview):
   - (max-width: 1200px): Narrow desktop / small laptop
   - (max-width: 768px):  Tablet
   - (max-width: 640px):  Large phone / small tablet
   - (max-width: 600px):  Small phone / extra-small
   Keep rules concise and only override sizing/positioning needed per breakpoint.
*/
@media (max-width: 1200px) {
    /* Narrow desktop / small laptop -> Two columns */
    .lh__gallery[b-hvtoe6g6b1] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Supporting gallery becomes a single column earlier */
    .lh__gallery--supporting[b-hvtoe6g6b1] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Tablet and below (<= 768px): single column gallery */
    .lh__gallery[b-hvtoe6g6b1] {
        grid-template-columns: 1fr;
    }

    .lh__gallery--supporting[b-hvtoe6g6b1] {
        grid-template-columns: 1fr;
    }

    /* Reduce gallery image height for medium screens to improve perceived performance */
    .lh__image[b-hvtoe6g6b1] {
        --lh-image-height: 600px !important; /* matches original */
        height: var(--lh-image-height) !important;
    }

    .lh__gallery--supporting .lh__image[b-hvtoe6g6b1] {
        --lh-image-height: 300px !important; /* supporting brands smaller */
        height: var(--lh-image-height) !important;
    }

    .lh__text[b-hvtoe6g6b1] {
        padding: 1.5rem;
    }

    /* Tablet: ensure CTAs remain visible and consistent */
    .lh__cta[b-hvtoe6g6b1] {
        bottom: 5rem;
    }

        .lh__cta a[b-hvtoe6g6b1],
        .lh__cta button[b-hvtoe6g6b1] {
            min-height: 40px;
            padding: 0.45rem 1rem;
        }
}

@media (max-width: 640px) {
    /* Large phones / small tablets (<= 640px): adjust image sizing and CTA spacing */
    /* Respect the image height token so small screens use the same desktop sizing when requested */
    .lh__image[b-hvtoe6g6b1] {
        height: var(--lh-image-height) !important;
    }

    /* Small phones: reduce CTA size and spacing to fit */
    @media (max-width: 640px) {
        .lh__cta[b-hvtoe6g6b1] {
            bottom: 5rem;
        }

            .lh__cta a[b-hvtoe6g6b1],
            .lh__cta button[b-hvtoe6g6b1] {
                min-height: 36px;
                padding: 0.4rem 0.9rem;
                font-size: 0.82rem;
            }

        /* Increase gallery text padding for small phones */
        .lh__text[b-hvtoe6g6b1],
        .gallery-text[b-hvtoe6g6b1] {
            padding: 1.25rem;
        }
    }

    .lh__gallery--supporting .lh__image[b-hvtoe6g6b1] {
        height: var(--lh-image-height) !important;
    }

    /* Extra-small devices: keep CTAs compact and close to bottom */
    @media (max-width: 600px) {
        .lh__cta[b-hvtoe6g6b1] {
            bottom: 20rem;
        }

            .lh__cta a[b-hvtoe6g6b1],
            .lh__cta button[b-hvtoe6g6b1] {
                min-height: 34px;
                padding: 0.35rem 0.8rem;
                font-size: 0.8rem;
            }
    }

    .lh__text[b-hvtoe6g6b1] {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .lh__overlay[b-hvtoe6g6b1] {
        gap: 0.75rem;
    }

    .lh__logo[b-hvtoe6g6b1] {
        max-width: 150px;
    }

    .lh__gallery--supporting .lh__logo[b-hvtoe6g6b1] {
        max-width: 300px;
    }
}

@media (max-width: 600px) {
    /* Keep parity with original mobile adjustments for logos and layout */
    /* keep desktop sizing on very small devices when requested */
    .lh__image[b-hvtoe6g6b1] {
        --lh-image-height: 900px !important;
        height: var(--lh-image-height) !important;
    }

    .lh__gallery--supporting .lh__image[b-hvtoe6g6b1] {
        --lh-image-height: 250px !important;
        height: var(--lh-image-height) !important;
    }

    .lh__logo[b-hvtoe6g6b1] {
        max-width: 200px;
    }

    /* If the gallery is full-bleed on mobile, ensure no horizontal overflow */
    .lh__full-bleed[b-hvtoe6g6b1] {
        overflow-x: hidden;
    }
}

/* Final fallback for very small devices (original appended rule) */
.lh__image[b-hvtoe6g6b1] {
    /* Final fallback - preserve desktop sizing */
    --lh-image-height: 900px;
    height: var(--lh-image-height);
}


/* ===============================
   Brand background tokens / TODO
================================= */
/* TODO: Replace hardcoded image paths with theme tokens or an image helper for optimized delivery. */
.lh__gallery-item--optiphi .lh__image[b-hvtoe6g6b1] {
    background-image: url('/Media/Images/Brand/Optiphi/optiphi_Brand_Page_Image 1.webp');
}

.lh__gallery-item--delta .lh__image[b-hvtoe6g6b1] {
    background-image: url('/Media/Images/Brand/Delta Skin/Delta_Brand_Page_Image 1.webp');
}

.lh__gallery-item--melcura .lh__image[b-hvtoe6g6b1] {
    background-image: url('/Media/Images/Brand/Melcura/Melcura_Brand_Page_Image 1.webp');
}

.lh__gallery-item--visi .lh__image[b-hvtoe6g6b1] {
    background-image: url('/Media/Images/Brand/Visi/Ophthalmica_Brand_Page_Image 1.webp');
}

.lh__gallery-item--supporting-smed .lh__image[b-hvtoe6g6b1] {
    background-image: url('/Media/Images/Brand/SMedLanding.webp');
}

.lh__gallery-item--supporting-ent .lh__image[b-hvtoe6g6b1] {
    background-image: url('/Media/Images/Brand/ENTLanding.webp');
}

/* E!IMPORTANT: Explicit background colours for main brand cards (preserve visual identity).
   These apply to the BEM `.lh__text` and legacy `.gallery-text` for compatibility. */
.lh__gallery-item--optiphi .lh__text[b-hvtoe6g6b1],
.lh__gallery-item--optiphi .gallery-text[b-hvtoe6g6b1] {
    background: #3d3d3d; /* optiphi */
}

.lh__gallery-item--delta .lh__text[b-hvtoe6g6b1],
.lh__gallery-item--delta .gallery-text[b-hvtoe6g6b1] {
    background: #000000; /* delta */
}

.lh__gallery-item--melcura .lh__text[b-hvtoe6g6b1],
.lh__gallery-item--melcura .gallery-text[b-hvtoe6g6b1] {
    background: #002f5e; /* melcura */
}

.lh__gallery-item--visi .lh__text[b-hvtoe6g6b1],
.lh__gallery-item--visi .gallery-text[b-hvtoe6g6b1] {
    background: #476fb6; /* visi */
}


/* ===============================
   Utilities: Logo container
================================= */
.lh__logo-container[b-hvtoe6g6b1] {
    display: flex;
    justify-content: center; /* centers horizontally */
    align-items: center;
    gap: var(--lh-space-lg); /* spacing between logos */
    flex-wrap: wrap; /* allows wrapping on smaller screens */
    margin: var(--lh-space-md) 0;
}

    .lh__logo-container a img[b-hvtoe6g6b1] {
        max-height: 100px;
        width: auto;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

        /* Hover effect: slight zoom for brand logos */
        .lh__logo-container a img:hover[b-hvtoe6g6b1] {
            transform: scale(1.05);
        }

/* FIXME: Temporary fix for Safari flexbox issue that caused overflowing logos on iOS. Revisit when support matrix changes. */
@media (max-width: 600px) {
    .lh__logo-container[b-hvtoe6g6b1] {
        flex-direction: column; /* stack vertically on small screens */
        gap: 15px;
    }

        .lh__logo-container a img[b-hvtoe6g6b1] {
            max-width: 80%; /* scale down for mobile */
            height: auto;
        }
}
/* /Components/Shared/Galleries/BrandRangesGallery.razor.rz.scp.css */
/* MSC Code Section Styling */
.msc-code-section[b-3iahi5q06j] {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 2rem 0;
}

.msc-logo-container[b-3iahi5q06j] {
    flex-shrink: 0;
}

.msc-logo[b-3iahi5q06j] {
    max-width: 150px;
    height: auto;
    display: block;
}

.msc-text-container[b-3iahi5q06j] {
    flex: 1;
}

    .msc-text-container p[b-3iahi5q06j] {
        margin: 0;
        font-size: 1rem;
        line-height: 1.6;
    }

/* Ranges Grid Styling */
.ranges-grid[b-3iahi5q06j] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

    .ranges-grid:has(.range-card:hover) .range-card:not(:hover) .range-image[b-3iahi5q06j] {
        filter: brightness(0.7);
    }

.range-card[b-3iahi5q06j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .range-card:hover[b-3iahi5q06j] {
        transform: translateY(-2px);
    }

.range-image-container[b-3iahi5q06j] {
    width: 100%;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}



.range-image[b-3iahi5q06j] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.range-card:hover .range-image[b-3iahi5q06j] {
    transform: scale(1.02);
}

.range-title[b-3iahi5q06j] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
}

.skin-concerns-grid[b-3iahi5q06j] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.concern-card[b-3iahi5q06j] {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

    .concern-card:hover[b-3iahi5q06j] {
        transform: translateY(-4px);
        box-shadow: 0 12px 12px rgba(61, 61, 61, 0.12);
    }

.concern-title[b-3iahi5q06j] {
    background-color: var(--color-gray);
    color: #ffffff;
    padding: 1rem;
    letter-spacing: 0.5px;
    text-align: center;
}

.concern-description[b-3iahi5q06j] {
    background-color: transparent;
    border-bottom: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
    color: #3D3D3D;
    padding: 1rem;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .ranges-grid[b-3iahi5q06j] {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 1024px) {
    .ranges-grid[b-3iahi5q06j] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .skin-concerns-grid[b-3iahi5q06j] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .msc-code-section[b-3iahi5q06j] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }

    .msc-logo[b-3iahi5q06j] {
        max-width: 120px;
    }

    .ranges-grid[b-3iahi5q06j] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .skin-concerns-grid[b-3iahi5q06j] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .concern-title[b-3iahi5q06j],
    .concern-description[b-3iahi5q06j] {
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    .range-title[b-3iahi5q06j] {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .ranges-grid[b-3iahi5q06j] {
        grid-template-columns: 1fr;
    }

    .skin-concerns-grid[b-3iahi5q06j] {
        grid-template-columns: 1fr;
    }
}

/* Testimonial Section Styling */
.testimonial-section[b-3iahi5q06j] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 60%;
    margin: 0 auto;
    margin-bottom: 8rem;
    margin-top: 8rem;
    overflow: visible;
    position: relative;
}

/* Testimonial Image Wrapper */
.testimonial-image-wrapper[b-3iahi5q06j] {
    position: absolute;
    width: 250%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 2;
    left: -550px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

    .testimonial-image-wrapper img[b-3iahi5q06j] {
        width: 250%;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 2px 2px rgba(61, 61, 61, 0.2));
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }



/* Testimonial Review Content */
.testimonial-review[b-3iahi5q06j] {
    width: 100%;
    padding: 2rem 7rem 2rem 10rem;
    color: #ffffff;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #3D3D3D 0%, #2a2a2a 100%);
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .testimonial-review.transitioning[b-3iahi5q06j] {
        opacity: 0;
    }

    .testimonial-review .stars[b-3iahi5q06j],
    .testimonial-review .testimonial-title[b-3iahi5q06j],
    .testimonial-review .testimonial-text[b-3iahi5q06j],
    .testimonial-review .testimonial-author[b-3iahi5q06j] {
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .testimonial-review[b-3iahi5q06j]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%);
        pointer-events: none;
        border-radius: 8px;
    }

    .testimonial-review .btn-primary-inverted[b-3iahi5q06j] {
        cursor: pointer;
        position: relative;
        z-index: 10;
        pointer-events: auto;
    }

/* Testimonial Navigation */
.testimonial-nav[b-3iahi5q06j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 3;
}

.testimonial-arrow[b-3iahi5q06j] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    pointer-events: auto;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

    .testimonial-arrow:hover[b-3iahi5q06j] {
        transform: scale(1.08);
    }

    .testimonial-arrow:active[b-3iahi5q06j] {
        transform: scale(0.98);
    }

.testimonial-indicators[b-3iahi5q06j] {
    display: none;
}

.indicator[b-3iahi5q06j] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(61, 61, 61, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .indicator.active[b-3iahi5q06j] {
        background-color: #3D3D3D;
        transform: scale(1.3);
    }

.stars[b-3iahi5q06j] {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
    letter-spacing: 4px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-title[b-3iahi5q06j] {
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
    letter-spacing: 1.5px;
    line-height: 1.3;
    color: #ffffff;
}

.testimonial-text[b-3iahi5q06j] {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    text-align: justify;
    color: #e8e8e8;
}

    .testimonial-text:last-of-type[b-3iahi5q06j] {
        margin-bottom: 1.5rem;
    }

.testimonial-author[b-3iahi5q06j] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



@media (max-width: 768px) {
    .testimonial-section[b-3iahi5q06j] {
        align-items: center;
    }

    .testimonial-image-wrapper[b-3iahi5q06j] {
        position: relative;
        width: 150px;
        left: auto;
        top: auto;
        transform: none;
        margin-bottom: -30px;
    }

    .testimonial-review[b-3iahi5q06j] {
        width: 100%;
        padding: 3.5rem 2rem 2rem 2rem;
        text-align: center;
    }

    .testimonial-title[b-3iahi5q06j] {
        font-size: 1.35rem;
    }

    .testimonial-text[b-3iahi5q06j] {
        text-align: center;
        font-size: 0.85rem;
    }

    .testimonial-nav[b-3iahi5q06j] {
        gap: 2.5rem;
        margin-top: 2.5rem;
    }

    .testimonial-arrow[b-3iahi5q06j] {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .testimonial-section[b-3iahi5q06j] {
        align-items: center;
    }

    .testimonial-image-wrapper[b-3iahi5q06j] {
        position: relative;
        width: 120px;
        left: auto;
        top: auto;
        transform: none;
        margin-bottom: -25px;
    }

    .testimonial-review[b-3iahi5q06j] {
        width: 100%;
        padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    }

    .testimonial-title[b-3iahi5q06j] {
        font-size: 1.15rem;
    }

    .testimonial-text[b-3iahi5q06j] {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .stars[b-3iahi5q06j] {
        font-size: 1.2rem;
    }

    .testimonial-nav[b-3iahi5q06j] {
        gap: 1.75rem;
        margin-top: 2rem;
    }

    .testimonial-arrow[b-3iahi5q06j] {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
    }
}

/* Brand Cards Grid */
.brand-cards-grid[b-3iahi5q06j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}

.brand-card[b-3iahi5q06j] {
    position: relative;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 2px;
}



.brand-card-overlay[b-3iahi5q06j] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.brand-card:hover .brand-card-overlay[b-3iahi5q06j] {
}

.brand-card-content[b-3iahi5q06j] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 4rem;
    color: #ffffff;
}

.brand-card-logo[b-3iahi5q06j] {
    width: 80%;
    height: auto;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-card:hover .brand-card-logo[b-3iahi5q06j] {
    transform: scale(1.02);
}

.brand-card-logo img[b-3iahi5q06j] {
    width: 250%;
    height: auto;
    object-fit: contain;
}

.brand-card-title[b-3iahi5q06j] {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.brand-card-description[b-3iahi5q06j] {
    text-align: center !important;
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
    color: #e8e8e8;
}

.brand-card-button[b-3iahi5q06j] {
    padding: 0.75rem 1.75rem;
    border: 1px solid #ffffff;
    background-color: transparent;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .brand-card-button:hover[b-3iahi5q06j] {
        background-color: #ffffff;
        color: #3D3D3D;
    }

    .brand-card-button:active[b-3iahi5q06j] {
        transform: scale(0.98);
    }

/* Responsive Brand Cards */
@media (max-width: 1024px) {
    .brand-cards-grid[b-3iahi5q06j] {
        gap: 2rem;
        max-width: 1000px;
    }

    .brand-card-content[b-3iahi5q06j] {
        padding: 2.5rem;
    }

    .brand-card-logo[b-3iahi5q06j] {
        width: 120px;
        margin-bottom: 1.25rem;
    }

    .brand-card-title[b-3iahi5q06j] {
        font-size: 1.5rem;
    }

    .brand-card-description[b-3iahi5q06j] {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .brand-cards-grid[b-3iahi5q06j] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 100%;
    }

    .brand-card-content[b-3iahi5q06j] {
        padding: 2rem;
    }

    .brand-card-logo[b-3iahi5q06j] {
        width: 100px;
    }

    .brand-card-title[b-3iahi5q06j] {
        font-size: 1.25rem;
        letter-spacing: 1.5px;
    }

    .brand-card-description[b-3iahi5q06j] {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .brand-cards-grid[b-3iahi5q06j] {
        gap: 1rem;
    }

    .brand-card-content[b-3iahi5q06j] {
        padding: 1.5rem;
    }

    .brand-card-logo[b-3iahi5q06j] {
        width: 80px;
        margin-bottom: 0.75rem;
    }

    .brand-card-title[b-3iahi5q06j] {
        font-size: 1.1rem;
    }

    .brand-card-description[b-3iahi5q06j] {
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }

    .brand-card-button[b-3iahi5q06j] {
        padding: 0.6rem 1.25rem;
        font-size: 0.7rem;
    }
}
/* /Components/Shared/Galleries/BrandRelatedGallery.razor.rz.scp.css */
/* MSC Code Section Styling */
.msc-code-section[b-ysyyh9hxcr] {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 2rem 0;
}

.msc-logo-container[b-ysyyh9hxcr] {
    flex-shrink: 0;
}

.msc-logo[b-ysyyh9hxcr] {
    max-width: 150px;
    height: auto;
    display: block;
}

.msc-text-container[b-ysyyh9hxcr] {
    flex: 1;
}

    .msc-text-container p[b-ysyyh9hxcr] {
        margin: 0;
        font-size: 1rem;
        line-height: 1.6;
    }

/* Ranges Grid Styling */
.ranges-grid[b-ysyyh9hxcr] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

    .ranges-grid:has(.range-card:hover) .range-card:not(:hover) .range-image[b-ysyyh9hxcr] {
        filter: brightness(0.7);
    }

.range-card[b-ysyyh9hxcr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .range-card:hover[b-ysyyh9hxcr] {
        transform: translateY(-2px);
    }

.range-image-container[b-ysyyh9hxcr] {
    width: 100%;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}



.range-image[b-ysyyh9hxcr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.range-card:hover .range-image[b-ysyyh9hxcr] {
    transform: scale(1.02);
}

.range-title[b-ysyyh9hxcr] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
}

.skin-concerns-grid[b-ysyyh9hxcr] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.concern-card[b-ysyyh9hxcr] {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

    .concern-card:hover[b-ysyyh9hxcr] {
        transform: translateY(-4px);
        box-shadow: 0 12px 12px rgba(61, 61, 61, 0.12);
    }

.concern-title[b-ysyyh9hxcr] {
    background-color: var(--color-gray);
    color: #ffffff;
    padding: 1rem;
    letter-spacing: 0.5px;
    text-align: center;
}

.concern-description[b-ysyyh9hxcr] {
    background-color: transparent;
    border-bottom: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
    color: #3D3D3D;
    padding: 1rem;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .ranges-grid[b-ysyyh9hxcr] {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 1024px) {
    .ranges-grid[b-ysyyh9hxcr] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .skin-concerns-grid[b-ysyyh9hxcr] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .msc-code-section[b-ysyyh9hxcr] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }

    .msc-logo[b-ysyyh9hxcr] {
        max-width: 120px;
    }

    .ranges-grid[b-ysyyh9hxcr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .skin-concerns-grid[b-ysyyh9hxcr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .concern-title[b-ysyyh9hxcr],
    .concern-description[b-ysyyh9hxcr] {
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    .range-title[b-ysyyh9hxcr] {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .ranges-grid[b-ysyyh9hxcr] {
        grid-template-columns: 1fr;
    }

    .skin-concerns-grid[b-ysyyh9hxcr] {
        grid-template-columns: 1fr;
    }
}

/* Testimonial Section Styling */
.testimonial-section[b-ysyyh9hxcr] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 60%;
    margin: 0 auto;
    margin-bottom: 8rem;
    margin-top: 8rem;
    overflow: visible;
    position: relative;
}

/* Testimonial Image Wrapper */
.testimonial-image-wrapper[b-ysyyh9hxcr] {
    position: absolute;
    width: 250%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 2;
    left: -550px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

    .testimonial-image-wrapper img[b-ysyyh9hxcr] {
        width: 250%;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 2px 2px rgba(61, 61, 61, 0.2));
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }



/* Testimonial Review Content */
.testimonial-review[b-ysyyh9hxcr] {
    width: 100%;
    padding: 2rem 7rem 2rem 10rem;
    color: #ffffff;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #3D3D3D 0%, #2a2a2a 100%);
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .testimonial-review.transitioning[b-ysyyh9hxcr] {
        opacity: 0;
    }

    .testimonial-review .stars[b-ysyyh9hxcr],
    .testimonial-review .testimonial-title[b-ysyyh9hxcr],
    .testimonial-review .testimonial-text[b-ysyyh9hxcr],
    .testimonial-review .testimonial-author[b-ysyyh9hxcr] {
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .testimonial-review[b-ysyyh9hxcr]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%);
        pointer-events: none;
        border-radius: 8px;
    }

    .testimonial-review .btn-primary-inverted[b-ysyyh9hxcr] {
        cursor: pointer;
        position: relative;
        z-index: 10;
        pointer-events: auto;
    }

/* Testimonial Navigation */
.testimonial-nav[b-ysyyh9hxcr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 3;
}

.testimonial-arrow[b-ysyyh9hxcr] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    pointer-events: auto;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

    .testimonial-arrow:hover[b-ysyyh9hxcr] {
        transform: scale(1.08);
    }

    .testimonial-arrow:active[b-ysyyh9hxcr] {
        transform: scale(0.98);
    }

.testimonial-indicators[b-ysyyh9hxcr] {
    display: none;
}

.indicator[b-ysyyh9hxcr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(61, 61, 61, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .indicator.active[b-ysyyh9hxcr] {
        background-color: #3D3D3D;
        transform: scale(1.3);
    }

.stars[b-ysyyh9hxcr] {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
    letter-spacing: 4px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-title[b-ysyyh9hxcr] {
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
    letter-spacing: 1.5px;
    line-height: 1.3;
    color: #ffffff;
}

.testimonial-text[b-ysyyh9hxcr] {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    text-align: justify;
    color: #e8e8e8;
}

    .testimonial-text:last-of-type[b-ysyyh9hxcr] {
        margin-bottom: 1.5rem;
    }

.testimonial-author[b-ysyyh9hxcr] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



@media (max-width: 768px) {
    .testimonial-section[b-ysyyh9hxcr] {
        align-items: center;
    }

    .testimonial-image-wrapper[b-ysyyh9hxcr] {
        position: relative;
        width: 150px;
        left: auto;
        top: auto;
        transform: none;
        margin-bottom: -30px;
    }

    .testimonial-review[b-ysyyh9hxcr] {
        width: 100%;
        padding: 3.5rem 2rem 2rem 2rem;
        text-align: center;
    }

    .testimonial-title[b-ysyyh9hxcr] {
        font-size: 1.35rem;
    }

    .testimonial-text[b-ysyyh9hxcr] {
        text-align: center;
        font-size: 0.85rem;
    }

    .testimonial-nav[b-ysyyh9hxcr] {
        gap: 2.5rem;
        margin-top: 2.5rem;
    }

    .testimonial-arrow[b-ysyyh9hxcr] {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .testimonial-section[b-ysyyh9hxcr] {
        align-items: center;
    }

    .testimonial-image-wrapper[b-ysyyh9hxcr] {
        position: relative;
        width: 120px;
        left: auto;
        top: auto;
        transform: none;
        margin-bottom: -25px;
    }

    .testimonial-review[b-ysyyh9hxcr] {
        width: 100%;
        padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    }

    .testimonial-title[b-ysyyh9hxcr] {
        font-size: 1.15rem;
    }

    .testimonial-text[b-ysyyh9hxcr] {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .stars[b-ysyyh9hxcr] {
        font-size: 1.2rem;
    }

    .testimonial-nav[b-ysyyh9hxcr] {
        gap: 1.75rem;
        margin-top: 2rem;
    }

    .testimonial-arrow[b-ysyyh9hxcr] {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
    }
}

/* Brand Cards Grid */
.brand-cards-grid[b-ysyyh9hxcr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}

.brand-card[b-ysyyh9hxcr] {
    position: relative;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 2px;
}



.brand-card-overlay[b-ysyyh9hxcr] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.brand-card:hover .brand-card-overlay[b-ysyyh9hxcr] {
}

.brand-card-content[b-ysyyh9hxcr] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 4rem;
    color: #ffffff;
}

.brand-card-logo[b-ysyyh9hxcr] {
    width: 80%;
    height: auto;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-card:hover .brand-card-logo[b-ysyyh9hxcr] {
    transform: scale(1.02);
}

.brand-card-logo img[b-ysyyh9hxcr] {
    width: 250%;
    height: auto;
    object-fit: contain;
}

.brand-card-title[b-ysyyh9hxcr] {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.brand-card-description[b-ysyyh9hxcr] {
    text-align: center !important;
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
    color: #e8e8e8;
}

.brand-card-button[b-ysyyh9hxcr] {
    padding: 0.75rem 1.75rem;
    border: 1px solid #ffffff;
    background-color: transparent;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .brand-card-button:hover[b-ysyyh9hxcr] {
        background-color: #ffffff;
        color: #3D3D3D;
    }

    .brand-card-button:active[b-ysyyh9hxcr] {
        transform: scale(0.98);
    }

/* Responsive Brand Cards */
@media (max-width: 1024px) {
    .brand-cards-grid[b-ysyyh9hxcr] {
        gap: 2rem;
        max-width: 1000px;
    }

    .brand-card-content[b-ysyyh9hxcr] {
        padding: 2.5rem;
    }

    .brand-card-logo[b-ysyyh9hxcr] {
        width: 120px;
        margin-bottom: 1.25rem;
    }

    .brand-card-title[b-ysyyh9hxcr] {
        font-size: 1.5rem;
    }

    .brand-card-description[b-ysyyh9hxcr] {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .brand-cards-grid[b-ysyyh9hxcr] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 100%;
    }

    .brand-card-content[b-ysyyh9hxcr] {
        padding: 2rem;
    }

    .brand-card-logo[b-ysyyh9hxcr] {
        width: 100px;
    }

    .brand-card-title[b-ysyyh9hxcr] {
        font-size: 1.25rem;
        letter-spacing: 1.5px;
    }

    .brand-card-description[b-ysyyh9hxcr] {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .brand-cards-grid[b-ysyyh9hxcr] {
        gap: 1rem;
    }

    .brand-card-content[b-ysyyh9hxcr] {
        padding: 1.5rem;
    }

    .brand-card-logo[b-ysyyh9hxcr] {
        width: 80px;
        margin-bottom: 0.75rem;
    }

    .brand-card-title[b-ysyyh9hxcr] {
        font-size: 1.1rem;
    }

    .brand-card-description[b-ysyyh9hxcr] {
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }

    .brand-card-button[b-ysyyh9hxcr] {
        padding: 0.6rem 1.25rem;
        font-size: 0.7rem;
    }
}
/* /Components/Shared/Galleries/MainBrandGallery.razor.rz.scp.css */
/* =========================================
   File: LandingHome.razor.css
   Description: Landing page styling
   Author: Marinette Funk
   Created: 2026-03-24
========================================= */

/* NOTE: Scoped to LandingHome.razor via CSS isolation. These selectors will be isolated by Blazor. */

:root[b-e874x6g2bp] {
    /* Design tokens for LandingHome (lh) */
    --lh-space-xs: 8px;
    --lh-space-sm: 12px;
    --lh-space-md: 16px;
    --lh-space-lg: 30px;
    --lh-color-bg: #ffffff;
    --lh-color-card: #0b1b3c;
    --lh-color-white: #ffffff;
    --lh-color-overlay: rgba(0,0,0,0.25);
    --lh-radius-sm: 6px;
    --lh-transition-fast: 0.35s ease;
    --lh-transition-medium: 0.8s cubic-bezier(.16,1,.3,1);
}

/* Increase gallery text padding on narrower desktops to improve readability */
@media (max-width: 1200px) {
    .lh__text[b-e874x6g2bp],
    .gallery-text[b-e874x6g2bp] {
        padding: 2rem 2rem !important;
    }
}


/* ===============================
   Block: lh (Landing Home)
================================= */

/* Full bleed container utility for LandingHome */
.lh__full-bleed[b-e874x6g2bp] {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box;
    padding: 0;
}

@supports (width: 100dvw) {
    .lh__full-bleed[b-e874x6g2bp] {
        width: 100dvw;
        max-width: 100dvw;
    }
}


/* ===============================
   Element: lh__gallery
   Role: Main brand gallery grid
================================= */
.lh__gallery[b-e874x6g2bp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    position: relative;
    perspective: 1400px;
    gap: var(--lh-space-md);
}

/* Remove gap when galleries are stacked */
.lh__gallery[b-e874x6g2bp] {
    margin: 0;
}

    .lh__gallery + .lh__gallery[b-e874x6g2bp] {
        margin-top: 0;
    }

/* Prevent scrollbars when cards animate (clip overflow) */
.lh__gallery[b-e874x6g2bp],
.lh__full-bleed[b-e874x6g2bp] {
    overflow: hidden;
}


/* Modifier: supporting brands uses fewer columns */
.lh__gallery--supporting[b-e874x6g2bp] {
    grid-template-columns: repeat(2, 1fr);
}

    .lh__gallery--supporting .lh__image[b-e874x6g2bp] {
        /* set per-element image height token so CTAs can compute distance from bottom */
        --lh-image-height: 400px !important;
        height: var(--lh-image-height) !important;
    }


/* ===============================
   Element: lh__gallery-item
================================= */
.lh__gallery-item[b-e874x6g2bp] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    background: var(--lh-color-bg);
    position: relative;
    transform-style: preserve-3d;
    will-change: transform, filter, opacity;
    transition: transform 0.6s cubic-bezier(.16,1,.3,1), filter 0.5s ease, opacity 0.5s ease, box-shadow 0.6s cubic-bezier(.16,1,.3,1);
}

/* Modifier examples: brand-specific modifier classes applied in markup */
.lh__gallery-item--optiphi[b-e874x6g2bp] {
}

.lh__gallery-item--delta[b-e874x6g2bp] {
}

.lh__gallery-item--melcura[b-e874x6g2bp] {
}

.lh__gallery-item--visi[b-e874x6g2bp] {
}

.lh__gallery-item--supporting-smed[b-e874x6g2bp] {
}

.lh__gallery-item--supporting-ent[b-e874x6g2bp] {
}


/* ===============================
   Element: lh__image
   Role: Brand image background
================================= */
.lh__image[b-e874x6g2bp] {
    position: relative;
    height: 800px !important;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

    .lh__image[b-e874x6g2bp]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit;
        background-size: cover;
        background-position: center;
        transform: scale(1);
        transition: transform var(--lh-transition-medium);
        z-index: -1;
    }


/* ===============================
   Element: lh__overlay
   Role: Content overlay with logo and CTA
================================= */
.lh__overlay[b-e874x6g2bp] {
    position: absolute;
    inset: 0;
    background: var(--lh-color-overlay);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem;
    transition: background 1.2s ease, backdrop-filter 1.2s ease;
}


/* ===============================
   Element: lh__logo
================================= */
.lh__logo[b-e874x6g2bp] {
    max-width: 250px;
    filter: brightness(0) invert(1);
    transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease;
}

.lh__gallery--supporting .lh__logo[b-e874x6g2bp] {
    max-width: 600px;
}

/* Place supporting brand CTAs below the logo (inside the overlay flow) so buttons appear under logos */
.lh__gallery--supporting .lh__cta[b-e874x6g2bp] {
    /* Let the overlay center content and keep CTA in flow so it is centered inside the image */
    position: static; /* ensure CTA is laid out by the overlay flexbox */
    display: block;
    width: max-content;
    margin: 0.75rem 0 0; /* small gap between logo and CTA; horizontal centering handled by flexbox */
    bottom: auto;
    left: auto; /* reset inherited left */
    transform: none; /* reset inherited translateX from base .lh__cta */
    align-self: center; /* ensure centering within overlay flex container */
}

    .lh__gallery--supporting .lh__cta a[b-e874x6g2bp],
    .lh__gallery--supporting .lh__cta button[b-e874x6g2bp] {
        min-height: 36px;
        padding: 0.5rem 1rem;
    }


/* ===============================
   Element: lh__btn
   Role: CTA buttons (applied to Button component via class)
================================= */
.lh__btn[b-e874x6g2bp] {
    /* Do NOT override Button component theme/variant colors or borders here.
       This class only provides spacing and motion helpers so component variants
       (e.g. Ghost) remain authoritative. */
    padding: 0.55rem 1.25rem;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease;
}

/* Modifier placeholder left intentionally empty so it doesn't conflict with the Button component's variant scoping. */
.lh__btn--ghost[b-e874x6g2bp] {
}

/* Wrapper for gallery CTAs. Keeps spacing and prevents text-decoration on anchor-based Buttons. */
.lh__cta[b-e874x6g2bp] {
    /* Position the CTA consistently from the bottom of the image so all buttons
       appear at the same vertical distance across cards. Keep styling limited
       to layout and sizing so component variant colors/borders are not overridden. */
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15rem; /* consistent distance from bottom of card */
}

    .lh__cta a[b-e874x6g2bp],
    .lh__cta button[b-e874x6g2bp] {
        text-decoration: none; /* ensure no underline on link-based Buttons */
        /* Ensure consistent vertical sizing and centered contents without changing theme colors */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
    }

/* Button handling for medium screens */
@media (max-width: 1200px) {
    /* slightly raise CTAs on narrower desktops so they align visually */
    .lh__cta[b-e874x6g2bp] {
        bottom: 15rem;
    }

        .lh__cta a[b-e874x6g2bp],
        .lh__cta button[b-e874x6g2bp] {
            min-height: 42px;
            padding: 0.5rem 1.125rem;
        }
}

/* Slightly reduce bottom spacing on smaller screens */
@media (max-width: 640px) {
    .lh__cta[b-e874x6g2bp] {
        bottom: 15rem;
    }

        .lh__cta a[b-e874x6g2bp],
        .lh__cta button[b-e874x6g2bp] {
            min-height: 36px;
        }
}


/* ===============================
   Element: lh__text
   Role: Description text below image
================================= */
.lh__text[b-e874x6g2bp] {
    /* Read background color from a card-level CSS variable if provided
       (markup may set --card-bg inline on the gallery item). Fall back to token. */
    background: var(--card-bg, var(--lh-color-card));
    color: var(--color-white) !important;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}

/* Legacy class compatibility: support original markup that uses `.gallery-text` and
   inline `--card-bg` on `.gallery-item`. This preserves original behavior for temp files
   or other parts of the app that haven't been migrated to BEM. */
.gallery-text[b-e874x6g2bp] {
    background: var(--card-bg, var(--lh-color-card));
    color: var(--lh-color-white) !important; /* E!IMPORTANT: legacy compatibility - enforce white text */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}


/* ===============================
   Hover interactions (main gallery)
================================= */

/* Soften other cards on hover */
.lh__gallery:hover .lh__gallery-item[b-e874x6g2bp] {
    filter: blur(0.4px) brightness(.95) saturate(.98);
    opacity: .92;
    transform: scale(1);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Highlight active card */
.lh__gallery .lh__gallery-item:hover[b-e874x6g2bp] {
    filter: none;
    opacity: 1;
    transform: scale(1.003);
    z-index: 10;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .25), 0 8px 20px rgba(0, 0, 0, .18);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Frosted overlay for non-hovered cards */
.lh__gallery:hover .lh__gallery-item:not(:hover)[b-e874x6g2bp]::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

/* Image zoom effect */
.lh__gallery .lh__gallery-item:hover .lh__image[b-e874x6g2bp]::after {
    transform: scale(0.95);
    transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Overlay deepens */
.lh__gallery .lh__gallery-item:hover .lh__overlay[b-e874x6g2bp] {
    background: rgba(0, 0, 0, .32);
    transition: background 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Logo animation */
.lh__gallery .lh__gallery-item:hover .lh__logo[b-e874x6g2bp] {
    transform: scale(1.01);
    transition: transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Button animation */
.lh__gallery .lh__gallery-item:hover .lh__btn[b-e874x6g2bp] {
    transform: scale(1.02);
    box-shadow: 0 10px 24px rgba(255, 255, 255, .15);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Text animation */
.lh__gallery .lh__gallery-item:hover .lh__text[b-e874x6g2bp] {
    transform: scale(1.001);
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reset when not hovering */
.lh__gallery:not(:hover) .lh__gallery-item[b-e874x6g2bp] {
    filter: none;
    opacity: 1;
    transform: none;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ===============================
   Hover interactions - supporting brands (subtle)
================================= */
.lh__gallery--supporting:hover .lh__gallery-item[b-e874x6g2bp] {
    filter: brightness(.97);
    opacity: .96;
    transform: scale(1);
}

.lh__gallery--supporting .lh__gallery-item:hover[b-e874x6g2bp] {
    filter: none;
    opacity: 1;
    transform: scale(1.008);
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

    .lh__gallery--supporting .lh__gallery-item:hover .lh__logo[b-e874x6g2bp] {
        transform: scale(1.01);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__btn[b-e874x6g2bp] {
        transform: scale(1.005);
        box-shadow: 0 5px 15px rgba(255, 255, 255, .1);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__text[b-e874x6g2bp] {
        transform: scale(1);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__overlay[b-e874x6g2bp] {
        background: rgba(0, 0, 0, .28);
    }


/* ===============================
   Responsive (match original landing behavior)
================================= */
/*
   Responsive breakpoints (overview):
   - (max-width: 1200px): Narrow desktop / small laptop
   - (max-width: 768px):  Tablet
   - (max-width: 640px):  Large phone / small tablet
   - (max-width: 600px):  Small phone / extra-small
   Keep rules concise and only override sizing/positioning needed per breakpoint.
*/
@media (max-width: 1200px) {
    /* Narrow desktop / small laptop -> Two columns */
    .lh__gallery[b-e874x6g2bp] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Supporting gallery becomes a single column earlier */
    .lh__gallery--supporting[b-e874x6g2bp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Tablet and below (<= 768px): single column gallery */
    .lh__gallery[b-e874x6g2bp] {
        grid-template-columns: 1fr;
    }

    .lh__gallery--supporting[b-e874x6g2bp] {
        grid-template-columns: 1fr;
    }

    /* Reduce gallery image height for medium screens to improve perceived performance */
    .lh__image[b-e874x6g2bp] {
        --lh-image-height: 600px !important; /* matches original */
        height: var(--lh-image-height) !important;
    }

    .lh__gallery--supporting .lh__image[b-e874x6g2bp] {
        --lh-image-height: 300px !important; /* supporting brands smaller */
        height: var(--lh-image-height) !important;
    }

    .lh__text[b-e874x6g2bp] {
        padding: 1.5rem;
    }

    /* Tablet: ensure CTAs remain visible and consistent */
    .lh__cta[b-e874x6g2bp] {
        bottom: 5rem;
    }

        .lh__cta a[b-e874x6g2bp],
        .lh__cta button[b-e874x6g2bp] {
            min-height: 40px;
            padding: 0.45rem 1rem;
        }
}

@media (max-width: 640px) {
    /* Large phones / small tablets (<= 640px): adjust image sizing and CTA spacing */
    /* Respect the image height token so small screens use the same desktop sizing when requested */
    .lh__image[b-e874x6g2bp] {
        height: var(--lh-image-height) !important;
    }

    /* Small phones: reduce CTA size and spacing to fit */
    @media (max-width: 640px) {
        .lh__cta[b-e874x6g2bp] {
            bottom: 5rem;
        }

            .lh__cta a[b-e874x6g2bp],
            .lh__cta button[b-e874x6g2bp] {
                min-height: 36px;
                padding: 0.4rem 0.9rem;
                font-size: 0.82rem;
            }

        /* Increase gallery text padding for small phones */
        .lh__text[b-e874x6g2bp],
        .gallery-text[b-e874x6g2bp] {
            padding: 1.25rem;
        }
    }

    .lh__gallery--supporting .lh__image[b-e874x6g2bp] {
        height: var(--lh-image-height) !important;
    }

    /* Extra-small devices: keep CTAs compact and close to bottom */
    @media (max-width: 600px) {
        .lh__cta[b-e874x6g2bp] {
            bottom: 20rem;
        }

            .lh__cta a[b-e874x6g2bp],
            .lh__cta button[b-e874x6g2bp] {
                min-height: 34px;
                padding: 0.35rem 0.8rem;
                font-size: 0.8rem;
            }
    }

    .lh__text[b-e874x6g2bp] {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .lh__overlay[b-e874x6g2bp] {
        gap: 0.75rem;
    }

    .lh__logo[b-e874x6g2bp] {
        max-width: 150px;
    }

    .lh__gallery--supporting .lh__logo[b-e874x6g2bp] {
        max-width: 300px;
    }
}

@media (max-width: 600px) {
    /* Keep parity with original mobile adjustments for logos and layout */
    /* keep desktop sizing on very small devices when requested */
    .lh__image[b-e874x6g2bp] {
        --lh-image-height: 900px !important;
        height: var(--lh-image-height) !important;
    }

    .lh__gallery--supporting .lh__image[b-e874x6g2bp] {
        --lh-image-height: 250px !important;
        height: var(--lh-image-height) !important;
    }

    .lh__logo[b-e874x6g2bp] {
        max-width: 200px;
    }

    /* If the gallery is full-bleed on mobile, ensure no horizontal overflow */
    .lh__full-bleed[b-e874x6g2bp] {
        overflow-x: hidden;
    }
}

/* Final fallback for very small devices (original appended rule) */
.lh__image[b-e874x6g2bp] {
    /* Final fallback - preserve desktop sizing */
    --lh-image-height: 900px;
    height: var(--lh-image-height);
}


/* ===============================
   Brand background tokens / TODO
================================= */
/* TODO: Replace hardcoded image paths with theme tokens or an image helper for optimized delivery. */
.lh__gallery-item--optiphi .lh__image[b-e874x6g2bp] {
    background-image: url('/Media/Images/Brand/Optiphi/optiphi_Brand_Page_Image 1.webp');
}

.lh__gallery-item--delta .lh__image[b-e874x6g2bp] {
    background-image: url('/Media/Images/Brand/Delta Skin/Delta_Brand_Page_Image 1.webp');
}

.lh__gallery-item--melcura .lh__image[b-e874x6g2bp] {
    background-image: url('/Media/Images/Brand/Melcura/Melcura_Brand_Page_Image 1.webp');
}

.lh__gallery-item--visi .lh__image[b-e874x6g2bp] {
    background-image: url('/Media/Images/Brand/Visi/Ophthalmica_Brand_Page_Image 1.webp');
}

.lh__gallery-item--supporting-smed .lh__image[b-e874x6g2bp] {
    background-image: url('/Media/Images/Brand/SMedLanding.webp');
}

.lh__gallery-item--supporting-ent .lh__image[b-e874x6g2bp] {
    background-image: url('/Media/Images/Brand/ENTLanding.webp');
}

/* E!IMPORTANT: Explicit background colours for main brand cards (preserve visual identity).
   These apply to the BEM `.lh__text` and legacy `.gallery-text` for compatibility. */
.lh__gallery-item--optiphi .lh__text[b-e874x6g2bp],
.lh__gallery-item--optiphi .gallery-text[b-e874x6g2bp] {
    background: #3d3d3d; /* optiphi */
}

.lh__gallery-item--delta .lh__text[b-e874x6g2bp],
.lh__gallery-item--delta .gallery-text[b-e874x6g2bp] {
    background: #000000; /* delta */
}

.lh__gallery-item--melcura .lh__text[b-e874x6g2bp],
.lh__gallery-item--melcura .gallery-text[b-e874x6g2bp] {
    background: #002f5e; /* melcura */
}

.lh__gallery-item--visi .lh__text[b-e874x6g2bp],
.lh__gallery-item--visi .gallery-text[b-e874x6g2bp] {
    background: #476fb6; /* visi */
}


/* ===============================
   Utilities: Logo container
================================= */
.lh__logo-container[b-e874x6g2bp] {
    display: flex;
    justify-content: center; /* centers horizontally */
    align-items: center;
    gap: var(--lh-space-lg); /* spacing between logos */
    flex-wrap: wrap; /* allows wrapping on smaller screens */
    margin: var(--lh-space-md) 0;
}

    .lh__logo-container a img[b-e874x6g2bp] {
        max-height: 100px;
        width: auto;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

        /* Hover effect: slight zoom for brand logos */
        .lh__logo-container a img:hover[b-e874x6g2bp] {
            transform: scale(1.05);
        }

/* FIXME: Temporary fix for Safari flexbox issue that caused overflowing logos on iOS. Revisit when support matrix changes. */
@media (max-width: 600px) {
    .lh__logo-container[b-e874x6g2bp] {
        flex-direction: column; /* stack vertically on small screens */
        gap: 15px;
    }

        .lh__logo-container a img[b-e874x6g2bp] {
            max-width: 80%; /* scale down for mobile */
            height: auto;
        }
}
/* /Components/Shared/Galleries/RelatedBrandCard.razor.rz.scp.css */
/* =========================================
   File: RelatedBrandCard.razor.css
========================================= */


/* =========================================================
   Block: brand-cards-grid
========================================================= */
.brand-cards-grid[b-7fhz2vcaow] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 2rem auto 3rem auto;
    max-width: 1100px;
}


/* =========================================================
   Block: brand-card (container)
========================================================= */
.brand-card[b-7fhz2vcaow] {
    position: relative;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}


/* =========================================================
   Overlay
========================================================= */
.brand-card-overlay[b-7fhz2vcaow] {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.15) 100% );
    transition: opacity 0.4s ease;
}

.brand-card:hover .brand-card-overlay[b-7fhz2vcaow] {
    opacity: 0.85;
}


/* =========================================================
   Background hover effect
========================================================= */
.brand-card[b-7fhz2vcaow]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 0;
}

.brand-card:hover[b-7fhz2vcaow]::after {
    transform: scale(1.03);
}


/* =========================================================
   Content (centered overlay)
========================================================= */
.brand-card-content[b-7fhz2vcaow] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center !important;
    height: 100%;
    padding: 2.5rem;
    color: #ffffff;
}


/* =========================================================
   Logo
========================================================= */
.brand-card-logo[b-7fhz2vcaow] {
    max-width: 180px;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: center;
}

    .brand-card-logo img[b-7fhz2vcaow] {
        width: 100%;
        height: auto;
        object-fit: contain;
    }


/* =========================================================
   Description
========================================================= */
.brand-card-description[b-7fhz2vcaow] {
    max-width: 320px;
    font-size: 0.9rem;
    text-align: center !important;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    color: #f1f1f1;
}


/* =========================================================
   Button
========================================================= */
.brand-card-button[b-7fhz2vcaow] {
    padding: 0.65rem 1.5rem;
    border: 1px solid #ffffff;
    background-color: transparent;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .brand-card-button:hover[b-7fhz2vcaow] {
        background-color: #ffffff;
        color: #3D3D3D;
    }


/* =========================================================
   Responsive: Large Tablets (≤1200px)
========================================================= */
@media (max-width: 1200px) {
    .brand-cards-grid[b-7fhz2vcaow] {
        max-width: 900px;
        gap: 1.75rem;
    }

    .brand-card-content[b-7fhz2vcaow] {
        padding: 2rem;
    }

    .brand-card-logo[b-7fhz2vcaow] {
        max-width: 160px;
    }

    .brand-card-description[b-7fhz2vcaow] {
        max-width: 300px;
        font-size: 0.85rem;
    }
}


/* =========================================================
   Responsive: Tablet (≤1024px)
   Cards stack
========================================================= */
@media (max-width: 1024px) {
    .brand-cards-grid[b-7fhz2vcaow] {
        grid-template-columns: 1fr;
        max-width: 700px;
        gap: 1.5rem;
    }

    .brand-card[b-7fhz2vcaow] {
        aspect-ratio: 16 / 9;
    }

    .brand-card-content[b-7fhz2vcaow] {
        padding: 2rem 1.75rem;
    }

    .brand-card-logo[b-7fhz2vcaow] {
        max-width: 140px;
    }

    .brand-card-description[b-7fhz2vcaow] {
        max-width: 280px;
        font-size: 0.85rem;
    }
}


/* =========================================================
   Responsive: Mobile (≤768px)
   Hard stack enforcement
========================================================= */
@media (max-width: 768px) {
    .brand-cards-grid[b-7fhz2vcaow] {
        grid-template-columns: 1fr !important;
        max-width: 100%;
        gap: 1.25rem;
        padding: 0 1rem;
    }

    .brand-card[b-7fhz2vcaow] {
        aspect-ratio: 16 / 11;
    }

    .brand-card-content[b-7fhz2vcaow] {
        padding: 1.75rem 1.5rem;
    }

    .brand-card-logo[b-7fhz2vcaow] {
        max-width: 120px;
        margin-bottom: 1rem;
    }

    .brand-card-description[b-7fhz2vcaow] {
        max-width: 260px;
        font-size: 0.8rem;
        line-height: 1.5;
        margin-bottom: 1.25rem;
    }

    .brand-card-button[b-7fhz2vcaow] {
        font-size: 0.7rem;
        padding: 0.55rem 1.2rem;
    }
}


/* =========================================================
   Responsive: Small Mobile (≤480px)
========================================================= */
@media (max-width: 480px) {
    .brand-card[b-7fhz2vcaow] {
        aspect-ratio: auto;
        min-height: 260px;
    }

    .brand-card-content[b-7fhz2vcaow] {
        padding: 1.5rem 1.25rem;
    }

    .brand-card-logo[b-7fhz2vcaow] {
        max-width: 100px;
    }

    .brand-card-description[b-7fhz2vcaow] {
        max-width: 220px;
        font-size: 0.75rem;
    }

    .brand-card-button[b-7fhz2vcaow] {
        font-size: 0.65rem;
        padding: 0.5rem 1rem;
    }
}
/* /Components/Shared/Galleries/SupportingBrandCard.razor.rz.scp.css */
/* =========================================
   File: LandingHome.razor.css
   Description: Landing page styling
   Author: Marinette Funk
   Created: 2026-03-24
========================================= */

/* NOTE: Scoped to LandingHome.razor via CSS isolation. These selectors will be isolated by Blazor. */

:root[b-pyf3d3fcr4] {
    /* Design tokens for LandingHome (lh) */
    --lh-space-xs: 8px;
    --lh-space-sm: 12px;
    --lh-space-md: 16px;
    --lh-space-lg: 30px;
    --lh-color-bg: #ffffff;
    --lh-color-card: #0b1b3c;
    --lh-color-white: #ffffff;
    --lh-color-overlay: rgba(0,0,0,0.25);
    --lh-radius-sm: 6px;
    --lh-transition-fast: 0.35s ease;
    --lh-transition-medium: 0.8s cubic-bezier(.16,1,.3,1);
}

/* Increase gallery text padding on narrower desktops to improve readability */
@media (max-width: 1200px) {
    .lh__text[b-pyf3d3fcr4],
    .gallery-text[b-pyf3d3fcr4] {
        padding: 2rem 2rem !important;
    }
}


/* ===============================
   Block: lh (Landing Home)
================================= */

/* Full bleed container utility for LandingHome */
.lh__full-bleed[b-pyf3d3fcr4] {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box;
    padding: 0;
}

@supports (width: 100dvw) {
    .lh__full-bleed[b-pyf3d3fcr4] {
        width: 100dvw;
        max-width: 100dvw;
    }
}


/* ===============================
   Element: lh__gallery
   Role: Main brand gallery grid
================================= */
.lh__gallery[b-pyf3d3fcr4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    position: relative;
    perspective: 1400px;
    gap: var(--lh-space-md);
}

/* Remove gap when galleries are stacked */
.lh__gallery[b-pyf3d3fcr4] {
    margin: 0;
}

    .lh__gallery + .lh__gallery[b-pyf3d3fcr4] {
        margin-top: 0;
    }

/* Prevent scrollbars when cards animate (clip overflow) */
.lh__gallery[b-pyf3d3fcr4],
.lh__full-bleed[b-pyf3d3fcr4] {
    overflow: hidden;
}


/* Modifier: supporting brands uses fewer columns */
.lh__gallery--supporting[b-pyf3d3fcr4] {
    grid-template-columns: repeat(2, 1fr);
}

    .lh__gallery--supporting .lh__image[b-pyf3d3fcr4] {
        /* set per-element image height token so CTAs can compute distance from bottom */
        --lh-image-height: 400px !important;
        height: var(--lh-image-height) !important;
    }


/* ===============================
   Element: lh__gallery-item
================================= */
.lh__gallery-item[b-pyf3d3fcr4] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    background: var(--lh-color-bg);
    position: relative;
    transform-style: preserve-3d;
    will-change: transform, filter, opacity;
    transition: transform 0.6s cubic-bezier(.16,1,.3,1), filter 0.5s ease, opacity 0.5s ease, box-shadow 0.6s cubic-bezier(.16,1,.3,1);
}

/* Modifier examples: brand-specific modifier classes applied in markup */
.lh__gallery-item--optiphi[b-pyf3d3fcr4] {
}

.lh__gallery-item--delta[b-pyf3d3fcr4] {
}

.lh__gallery-item--melcura[b-pyf3d3fcr4] {
}

.lh__gallery-item--visi[b-pyf3d3fcr4] {
}

.lh__gallery-item--supporting-smed[b-pyf3d3fcr4] {
}

.lh__gallery-item--supporting-ent[b-pyf3d3fcr4] {
}


/* ===============================
   Element: lh__image
   Role: Brand image background
================================= */
.lh__image[b-pyf3d3fcr4] {
    position: relative;
    height: 800px !important;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

    .lh__image[b-pyf3d3fcr4]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit;
        background-size: cover;
        background-position: center;
        transform: scale(1);
        transition: transform var(--lh-transition-medium);
        z-index: -1;
    }


/* ===============================
   Element: lh__overlay
   Role: Content overlay with logo and CTA
================================= */
.lh__overlay[b-pyf3d3fcr4] {
    position: absolute;
    inset: 0;
    background: var(--lh-color-overlay);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem;
    transition: background 1.2s ease, backdrop-filter 1.2s ease;
}


/* ===============================
   Element: lh__logo
================================= */
.lh__logo[b-pyf3d3fcr4] {
    max-width: 250px;
    filter: brightness(0) invert(1);
    transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease;
}

.lh__gallery--supporting .lh__logo[b-pyf3d3fcr4] {
    max-width: 600px;
}

/* Place supporting brand CTAs below the logo (inside the overlay flow) so buttons appear under logos */
.lh__gallery--supporting .lh__cta[b-pyf3d3fcr4] {
    /* Let the overlay center content and keep CTA in flow so it is centered inside the image */
    position: static; /* ensure CTA is laid out by the overlay flexbox */
    display: block;
    width: max-content;
    margin: 0.75rem 0 0; /* small gap between logo and CTA; horizontal centering handled by flexbox */
    bottom: auto;
    left: auto; /* reset inherited left */
    transform: none; /* reset inherited translateX from base .lh__cta */
    align-self: center; /* ensure centering within overlay flex container */
}

    .lh__gallery--supporting .lh__cta a[b-pyf3d3fcr4],
    .lh__gallery--supporting .lh__cta button[b-pyf3d3fcr4] {
        min-height: 36px;
        padding: 0.5rem 1rem;
    }


/* ===============================
   Element: lh__btn
   Role: CTA buttons (applied to Button component via class)
================================= */
.lh__btn[b-pyf3d3fcr4] {
    /* Do NOT override Button component theme/variant colors or borders here.
       This class only provides spacing and motion helpers so component variants
       (e.g. Ghost) remain authoritative. */
    padding: 0.55rem 1.25rem;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease;
}

/* Modifier placeholder left intentionally empty so it doesn't conflict with the Button component's variant scoping. */
.lh__btn--ghost[b-pyf3d3fcr4] {
}

/* Wrapper for gallery CTAs. Keeps spacing and prevents text-decoration on anchor-based Buttons. */
.lh__cta[b-pyf3d3fcr4] {
    /* Position the CTA consistently from the bottom of the image so all buttons
       appear at the same vertical distance across cards. Keep styling limited
       to layout and sizing so component variant colors/borders are not overridden. */
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15rem; /* consistent distance from bottom of card */
}

    .lh__cta a[b-pyf3d3fcr4],
    .lh__cta button[b-pyf3d3fcr4] {
        text-decoration: none; /* ensure no underline on link-based Buttons */
        /* Ensure consistent vertical sizing and centered contents without changing theme colors */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
    }

/* Button handling for medium screens */
@media (max-width: 1200px) {
    /* slightly raise CTAs on narrower desktops so they align visually */
    .lh__cta[b-pyf3d3fcr4] {
        bottom: 15rem;
    }

        .lh__cta a[b-pyf3d3fcr4],
        .lh__cta button[b-pyf3d3fcr4] {
            min-height: 42px;
            padding: 0.5rem 1.125rem;
        }
}

/* Slightly reduce bottom spacing on smaller screens */
@media (max-width: 640px) {
    .lh__cta[b-pyf3d3fcr4] {
        bottom: 15rem;
    }

        .lh__cta a[b-pyf3d3fcr4],
        .lh__cta button[b-pyf3d3fcr4] {
            min-height: 36px;
        }
}


/* ===============================
   Element: lh__text
   Role: Description text below image
================================= */
.lh__text[b-pyf3d3fcr4] {
    /* Read background color from a card-level CSS variable if provided
       (markup may set --card-bg inline on the gallery item). Fall back to token. */
    background: var(--card-bg, var(--lh-color-card));
    color: var(--color-white) !important;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}

/* Legacy class compatibility: support original markup that uses `.gallery-text` and
   inline `--card-bg` on `.gallery-item`. This preserves original behavior for temp files
   or other parts of the app that haven't been migrated to BEM. */
.gallery-text[b-pyf3d3fcr4] {
    background: var(--card-bg, var(--lh-color-card));
    color: var(--lh-color-white) !important; /* E!IMPORTANT: legacy compatibility - enforce white text */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}


/* ===============================
   Hover interactions (main gallery)
================================= */

/* Soften other cards on hover */
.lh__gallery:hover .lh__gallery-item[b-pyf3d3fcr4] {
    filter: blur(0.4px) brightness(.95) saturate(.98);
    opacity: .92;
    transform: scale(1);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Highlight active card */
.lh__gallery .lh__gallery-item:hover[b-pyf3d3fcr4] {
    filter: none;
    opacity: 1;
    transform: scale(1.003);
    z-index: 10;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .25), 0 8px 20px rgba(0, 0, 0, .18);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Frosted overlay for non-hovered cards */
.lh__gallery:hover .lh__gallery-item:not(:hover)[b-pyf3d3fcr4]::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

/* Image zoom effect */
.lh__gallery .lh__gallery-item:hover .lh__image[b-pyf3d3fcr4]::after {
    transform: scale(0.95);
    transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Overlay deepens */
.lh__gallery .lh__gallery-item:hover .lh__overlay[b-pyf3d3fcr4] {
    background: rgba(0, 0, 0, .32);
    transition: background 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Logo animation */
.lh__gallery .lh__gallery-item:hover .lh__logo[b-pyf3d3fcr4] {
    transform: scale(1.01);
    transition: transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Button animation */
.lh__gallery .lh__gallery-item:hover .lh__btn[b-pyf3d3fcr4] {
    transform: scale(1.02);
    box-shadow: 0 10px 24px rgba(255, 255, 255, .15);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Text animation */
.lh__gallery .lh__gallery-item:hover .lh__text[b-pyf3d3fcr4] {
    transform: scale(1.001);
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reset when not hovering */
.lh__gallery:not(:hover) .lh__gallery-item[b-pyf3d3fcr4] {
    filter: none;
    opacity: 1;
    transform: none;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ===============================
   Hover interactions - supporting brands (subtle)
================================= */
.lh__gallery--supporting:hover .lh__gallery-item[b-pyf3d3fcr4] {
    filter: brightness(.97);
    opacity: .96;
    transform: scale(1);
}

.lh__gallery--supporting .lh__gallery-item:hover[b-pyf3d3fcr4] {
    filter: none;
    opacity: 1;
    transform: scale(1.008);
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

    .lh__gallery--supporting .lh__gallery-item:hover .lh__logo[b-pyf3d3fcr4] {
        transform: scale(1.01);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__btn[b-pyf3d3fcr4] {
        transform: scale(1.005);
        box-shadow: 0 5px 15px rgba(255, 255, 255, .1);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__text[b-pyf3d3fcr4] {
        transform: scale(1);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__overlay[b-pyf3d3fcr4] {
        background: rgba(0, 0, 0, .28);
    }


/* ===============================
   Responsive (match original landing behavior)
================================= */
/*
   Responsive breakpoints (overview):
   - (max-width: 1200px): Narrow desktop / small laptop
   - (max-width: 768px):  Tablet
   - (max-width: 640px):  Large phone / small tablet
   - (max-width: 600px):  Small phone / extra-small
   Keep rules concise and only override sizing/positioning needed per breakpoint.
*/
@media (max-width: 1200px) {
    /* Narrow desktop / small laptop -> Two columns */
    .lh__gallery[b-pyf3d3fcr4] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Supporting gallery becomes a single column earlier */
    .lh__gallery--supporting[b-pyf3d3fcr4] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Tablet and below (<= 768px): single column gallery */
    .lh__gallery[b-pyf3d3fcr4] {
        grid-template-columns: 1fr;
    }

    .lh__gallery--supporting[b-pyf3d3fcr4] {
        grid-template-columns: 1fr;
    }

    /* Reduce gallery image height for medium screens to improve perceived performance */
    .lh__image[b-pyf3d3fcr4] {
        --lh-image-height: 600px !important; /* matches original */
        height: var(--lh-image-height) !important;
    }

    .lh__gallery--supporting .lh__image[b-pyf3d3fcr4] {
        --lh-image-height: 300px !important; /* supporting brands smaller */
        height: var(--lh-image-height) !important;
    }

    .lh__text[b-pyf3d3fcr4] {
        padding: 1.5rem;
    }

    /* Tablet: ensure CTAs remain visible and consistent */
    .lh__cta[b-pyf3d3fcr4] {
        bottom: 5rem;
    }

        .lh__cta a[b-pyf3d3fcr4],
        .lh__cta button[b-pyf3d3fcr4] {
            min-height: 40px;
            padding: 0.45rem 1rem;
        }
}

@media (max-width: 640px) {
    /* Large phones / small tablets (<= 640px): adjust image sizing and CTA spacing */
    /* Respect the image height token so small screens use the same desktop sizing when requested */
    .lh__image[b-pyf3d3fcr4] {
        height: var(--lh-image-height) !important;
    }

    /* Small phones: reduce CTA size and spacing to fit */
    @media (max-width: 640px) {
        .lh__cta[b-pyf3d3fcr4] {
            bottom: 5rem;
        }

            .lh__cta a[b-pyf3d3fcr4],
            .lh__cta button[b-pyf3d3fcr4] {
                min-height: 36px;
                padding: 0.4rem 0.9rem;
                font-size: 0.82rem;
            }

        /* Increase gallery text padding for small phones */
        .lh__text[b-pyf3d3fcr4],
        .gallery-text[b-pyf3d3fcr4] {
            padding: 1.25rem;
        }
    }

    .lh__gallery--supporting .lh__image[b-pyf3d3fcr4] {
        height: var(--lh-image-height) !important;
    }

    /* Extra-small devices: keep CTAs compact and close to bottom */
    @media (max-width: 600px) {
        .lh__cta[b-pyf3d3fcr4] {
            bottom: 20rem;
        }

            .lh__cta a[b-pyf3d3fcr4],
            .lh__cta button[b-pyf3d3fcr4] {
                min-height: 34px;
                padding: 0.35rem 0.8rem;
                font-size: 0.8rem;
            }
    }

    .lh__text[b-pyf3d3fcr4] {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .lh__overlay[b-pyf3d3fcr4] {
        gap: 0.75rem;
    }

    .lh__logo[b-pyf3d3fcr4] {
        max-width: 150px;
    }

    .lh__gallery--supporting .lh__logo[b-pyf3d3fcr4] {
        max-width: 300px;
    }
}

@media (max-width: 600px) {
    /* Keep parity with original mobile adjustments for logos and layout */
    /* keep desktop sizing on very small devices when requested */
    .lh__image[b-pyf3d3fcr4] {
        --lh-image-height: 900px !important;
        height: var(--lh-image-height) !important;
    }

    .lh__gallery--supporting .lh__image[b-pyf3d3fcr4] {
        --lh-image-height: 250px !important;
        height: var(--lh-image-height) !important;
    }

    .lh__logo[b-pyf3d3fcr4] {
        max-width: 200px;
    }

    /* If the gallery is full-bleed on mobile, ensure no horizontal overflow */
    .lh__full-bleed[b-pyf3d3fcr4] {
        overflow-x: hidden;
    }
}

/* Final fallback for very small devices (original appended rule) */
.lh__image[b-pyf3d3fcr4] {
    /* Final fallback - preserve desktop sizing */
    --lh-image-height: 900px;
    height: var(--lh-image-height);
}


/* ===============================
   Brand background tokens / TODO
================================= */
/* TODO: Replace hardcoded image paths with theme tokens or an image helper for optimized delivery. */
.lh__gallery-item--optiphi .lh__image[b-pyf3d3fcr4] {
    background-image: url('/Media/Images/Brand/Optiphi/optiphi_Brand_Page_Image 1.webp');
}

.lh__gallery-item--delta .lh__image[b-pyf3d3fcr4] {
    background-image: url('/Media/Images/Brand/Delta Skin/Delta_Brand_Page_Image 1.webp');
}

.lh__gallery-item--melcura .lh__image[b-pyf3d3fcr4] {
    background-image: url('/Media/Images/Brand/Melcura/Melcura_Brand_Page_Image 1.webp');
}

.lh__gallery-item--visi .lh__image[b-pyf3d3fcr4] {
    background-image: url('/Media/Images/Brand/Visi/Ophthalmica_Brand_Page_Image 1.webp');
}

.lh__gallery-item--supporting-smed .lh__image[b-pyf3d3fcr4] {
    background-image: url('/Media/Images/Brand/SMedLanding.webp');
}

.lh__gallery-item--supporting-ent .lh__image[b-pyf3d3fcr4] {
    background-image: url('/Media/Images/Brand/ENTLanding.webp');
}

/* E!IMPORTANT: Explicit background colours for main brand cards (preserve visual identity).
   These apply to the BEM `.lh__text` and legacy `.gallery-text` for compatibility. */
.lh__gallery-item--optiphi .lh__text[b-pyf3d3fcr4],
.lh__gallery-item--optiphi .gallery-text[b-pyf3d3fcr4] {
    background: #3d3d3d; /* optiphi */
}

.lh__gallery-item--delta .lh__text[b-pyf3d3fcr4],
.lh__gallery-item--delta .gallery-text[b-pyf3d3fcr4] {
    background: #000000; /* delta */
}

.lh__gallery-item--melcura .lh__text[b-pyf3d3fcr4],
.lh__gallery-item--melcura .gallery-text[b-pyf3d3fcr4] {
    background: #002f5e; /* melcura */
}

.lh__gallery-item--visi .lh__text[b-pyf3d3fcr4],
.lh__gallery-item--visi .gallery-text[b-pyf3d3fcr4] {
    background: #476fb6; /* visi */
}


/* ===============================
   Utilities: Logo container
================================= */
.lh__logo-container[b-pyf3d3fcr4] {
    display: flex;
    justify-content: center; /* centers horizontally */
    align-items: center;
    gap: var(--lh-space-lg); /* spacing between logos */
    flex-wrap: wrap; /* allows wrapping on smaller screens */
    margin: var(--lh-space-md) 0;
}

    .lh__logo-container a img[b-pyf3d3fcr4] {
        max-height: 100px;
        width: auto;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

        /* Hover effect: slight zoom for brand logos */
        .lh__logo-container a img:hover[b-pyf3d3fcr4] {
            transform: scale(1.05);
        }

/* FIXME: Temporary fix for Safari flexbox issue that caused overflowing logos on iOS. Revisit when support matrix changes. */
@media (max-width: 600px) {
    .lh__logo-container[b-pyf3d3fcr4] {
        flex-direction: column; /* stack vertically on small screens */
        gap: 15px;
    }

        .lh__logo-container a img[b-pyf3d3fcr4] {
            max-width: 80%; /* scale down for mobile */
            height: auto;
        }
}
/* /Components/Shared/Galleries/SupportingBrandGallery.razor.rz.scp.css */
/* =========================================
   File: LandingHome.razor.css
   Description: Landing page styling
   Author: Marinette Funk
   Created: 2026-03-24
========================================= */

/* NOTE: Scoped to LandingHome.razor via CSS isolation. These selectors will be isolated by Blazor. */

:root[b-a4mzha52je] {
    /* Design tokens for LandingHome (lh) */
    --lh-space-xs: 8px;
    --lh-space-sm: 12px;
    --lh-space-md: 16px;
    --lh-space-lg: 30px;
    --lh-color-bg: #ffffff;
    --lh-color-card: #0b1b3c;
    --lh-color-white: #ffffff;
    --lh-color-overlay: rgba(0,0,0,0.25);
    --lh-radius-sm: 6px;
    --lh-transition-fast: 0.35s ease;
    --lh-transition-medium: 0.8s cubic-bezier(.16,1,.3,1);
}

/* Increase gallery text padding on narrower desktops to improve readability */
@media (max-width: 1200px) {
    .lh__text[b-a4mzha52je],
    .gallery-text[b-a4mzha52je] {
        padding: 2rem 2rem !important;
    }
}


/* ===============================
   Block: lh (Landing Home)
================================= */

/* Full bleed container utility for LandingHome */
.lh__full-bleed[b-a4mzha52je] {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box;
    padding: 0;
}

@supports (width: 100dvw) {
    .lh__full-bleed[b-a4mzha52je] {
        width: 100dvw;
        max-width: 100dvw;
    }
}


/* ===============================
   Element: lh__gallery
   Role: Main brand gallery grid
================================= */
.lh__gallery[b-a4mzha52je] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    position: relative;
    perspective: 1400px;
    gap: var(--lh-space-md);
}

/* Remove gap when galleries are stacked */
.lh__gallery[b-a4mzha52je] {
    margin: 0;
}

    .lh__gallery + .lh__gallery[b-a4mzha52je] {
        margin-top: 0;
    }

/* Prevent scrollbars when cards animate (clip overflow) */
.lh__gallery[b-a4mzha52je],
.lh__full-bleed[b-a4mzha52je] {
    overflow: hidden;
}


/* Modifier: supporting brands uses fewer columns */
.lh__gallery--supporting[b-a4mzha52je] {
    grid-template-columns: repeat(2, 1fr);
}

    .lh__gallery--supporting .lh__image[b-a4mzha52je] {
        /* set per-element image height token so CTAs can compute distance from bottom */
        --lh-image-height: 400px !important;
        height: var(--lh-image-height) !important;
    }


/* ===============================
   Element: lh__gallery-item
================================= */
.lh__gallery-item[b-a4mzha52je] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    background: var(--lh-color-bg);
    position: relative;
    transform-style: preserve-3d;
    will-change: transform, filter, opacity;
    transition: transform 0.6s cubic-bezier(.16,1,.3,1), filter 0.5s ease, opacity 0.5s ease, box-shadow 0.6s cubic-bezier(.16,1,.3,1);
}

/* Modifier examples: brand-specific modifier classes applied in markup */
.lh__gallery-item--optiphi[b-a4mzha52je] {
}

.lh__gallery-item--delta[b-a4mzha52je] {
}

.lh__gallery-item--melcura[b-a4mzha52je] {
}

.lh__gallery-item--visi[b-a4mzha52je] {
}

.lh__gallery-item--supporting-smed[b-a4mzha52je] {
}

.lh__gallery-item--supporting-ent[b-a4mzha52je] {
}


/* ===============================
   Element: lh__image
   Role: Brand image background
================================= */
.lh__image[b-a4mzha52je] {
    position: relative;
    height: 800px !important;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

    .lh__image[b-a4mzha52je]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit;
        background-size: cover;
        background-position: center;
        transform: scale(1);
        transition: transform var(--lh-transition-medium);
        z-index: -1;
    }


/* ===============================
   Element: lh__overlay
   Role: Content overlay with logo and CTA
================================= */
.lh__overlay[b-a4mzha52je] {
    position: absolute;
    inset: 0;
    background: var(--lh-color-overlay);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem;
    transition: background 1.2s ease, backdrop-filter 1.2s ease;
}


/* ===============================
   Element: lh__logo
================================= */
.lh__logo[b-a4mzha52je] {
    max-width: 250px;
    filter: brightness(0) invert(1);
    transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease;
}

.lh__gallery--supporting .lh__logo[b-a4mzha52je] {
    max-width: 600px;
}

/* Place supporting brand CTAs below the logo (inside the overlay flow) so buttons appear under logos */
.lh__gallery--supporting .lh__cta[b-a4mzha52je] {
    /* Let the overlay center content and keep CTA in flow so it is centered inside the image */
    position: static; /* ensure CTA is laid out by the overlay flexbox */
    display: block;
    width: max-content;
    margin: 0.75rem 0 0; /* small gap between logo and CTA; horizontal centering handled by flexbox */
    bottom: auto;
    left: auto; /* reset inherited left */
    transform: none; /* reset inherited translateX from base .lh__cta */
    align-self: center; /* ensure centering within overlay flex container */
}

    .lh__gallery--supporting .lh__cta a[b-a4mzha52je],
    .lh__gallery--supporting .lh__cta button[b-a4mzha52je] {
        min-height: 36px;
        padding: 0.5rem 1rem;
    }


/* ===============================
   Element: lh__btn
   Role: CTA buttons (applied to Button component via class)
================================= */
.lh__btn[b-a4mzha52je] {
    /* Do NOT override Button component theme/variant colors or borders here.
       This class only provides spacing and motion helpers so component variants
       (e.g. Ghost) remain authoritative. */
    padding: 0.55rem 1.25rem;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease;
}

/* Modifier placeholder left intentionally empty so it doesn't conflict with the Button component's variant scoping. */
.lh__btn--ghost[b-a4mzha52je] {
}

/* Wrapper for gallery CTAs. Keeps spacing and prevents text-decoration on anchor-based Buttons. */
.lh__cta[b-a4mzha52je] {
    /* Position the CTA consistently from the bottom of the image so all buttons
       appear at the same vertical distance across cards. Keep styling limited
       to layout and sizing so component variant colors/borders are not overridden. */
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15rem; /* consistent distance from bottom of card */
}

    .lh__cta a[b-a4mzha52je],
    .lh__cta button[b-a4mzha52je] {
        text-decoration: none; /* ensure no underline on link-based Buttons */
        /* Ensure consistent vertical sizing and centered contents without changing theme colors */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
    }

/* Button handling for medium screens */
@media (max-width: 1200px) {
    /* slightly raise CTAs on narrower desktops so they align visually */
    .lh__cta[b-a4mzha52je] {
        bottom: 15rem;
    }

        .lh__cta a[b-a4mzha52je],
        .lh__cta button[b-a4mzha52je] {
            min-height: 42px;
            padding: 0.5rem 1.125rem;
        }
}

/* Slightly reduce bottom spacing on smaller screens */
@media (max-width: 640px) {
    .lh__cta[b-a4mzha52je] {
        bottom: 15rem;
    }

        .lh__cta a[b-a4mzha52je],
        .lh__cta button[b-a4mzha52je] {
            min-height: 36px;
        }
}


/* ===============================
   Element: lh__text
   Role: Description text below image
================================= */
.lh__text[b-a4mzha52je] {
    /* Read background color from a card-level CSS variable if provided
       (markup may set --card-bg inline on the gallery item). Fall back to token. */
    background: var(--card-bg, var(--lh-color-card));
    color: var(--color-white) !important;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}

/* Legacy class compatibility: support original markup that uses `.gallery-text` and
   inline `--card-bg` on `.gallery-item`. This preserves original behavior for temp files
   or other parts of the app that haven't been migrated to BEM. */
.gallery-text[b-a4mzha52je] {
    background: var(--card-bg, var(--lh-color-card));
    color: var(--lh-color-white) !important; /* E!IMPORTANT: legacy compatibility - enforce white text */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}


/* ===============================
   Hover interactions (main gallery)
================================= */

/* Soften other cards on hover */
.lh__gallery:hover .lh__gallery-item[b-a4mzha52je] {
    filter: blur(0.4px) brightness(.95) saturate(.98);
    opacity: .92;
    transform: scale(1);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Highlight active card */
.lh__gallery .lh__gallery-item:hover[b-a4mzha52je] {
    filter: none;
    opacity: 1;
    transform: scale(1.003);
    z-index: 10;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .25), 0 8px 20px rgba(0, 0, 0, .18);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Frosted overlay for non-hovered cards */
.lh__gallery:hover .lh__gallery-item:not(:hover)[b-a4mzha52je]::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

/* Image zoom effect */
.lh__gallery .lh__gallery-item:hover .lh__image[b-a4mzha52je]::after {
    transform: scale(0.95);
    transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Overlay deepens */
.lh__gallery .lh__gallery-item:hover .lh__overlay[b-a4mzha52je] {
    background: rgba(0, 0, 0, .32);
    transition: background 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Logo animation */
.lh__gallery .lh__gallery-item:hover .lh__logo[b-a4mzha52je] {
    transform: scale(1.01);
    transition: transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Button animation */
.lh__gallery .lh__gallery-item:hover .lh__btn[b-a4mzha52je] {
    transform: scale(1.02);
    box-shadow: 0 10px 24px rgba(255, 255, 255, .15);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Text animation */
.lh__gallery .lh__gallery-item:hover .lh__text[b-a4mzha52je] {
    transform: scale(1.001);
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reset when not hovering */
.lh__gallery:not(:hover) .lh__gallery-item[b-a4mzha52je] {
    filter: none;
    opacity: 1;
    transform: none;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ===============================
   Hover interactions - supporting brands (subtle)
================================= */
.lh__gallery--supporting:hover .lh__gallery-item[b-a4mzha52je] {
    filter: brightness(.97);
    opacity: .96;
    transform: scale(1);
}

.lh__gallery--supporting .lh__gallery-item:hover[b-a4mzha52je] {
    filter: none;
    opacity: 1;
    transform: scale(1.008);
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

    .lh__gallery--supporting .lh__gallery-item:hover .lh__logo[b-a4mzha52je] {
        transform: scale(1.01);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__btn[b-a4mzha52je] {
        transform: scale(1.005);
        box-shadow: 0 5px 15px rgba(255, 255, 255, .1);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__text[b-a4mzha52je] {
        transform: scale(1);
    }

    .lh__gallery--supporting .lh__gallery-item:hover .lh__overlay[b-a4mzha52je] {
        background: rgba(0, 0, 0, .28);
    }


/* ===============================
   Responsive (match original landing behavior)
================================= */
/*
   Responsive breakpoints (overview):
   - (max-width: 1200px): Narrow desktop / small laptop
   - (max-width: 768px):  Tablet
   - (max-width: 640px):  Large phone / small tablet
   - (max-width: 600px):  Small phone / extra-small
   Keep rules concise and only override sizing/positioning needed per breakpoint.
*/
@media (max-width: 1200px) {
    /* Narrow desktop / small laptop -> Two columns */
    .lh__gallery[b-a4mzha52je] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Supporting gallery becomes a single column earlier */
    .lh__gallery--supporting[b-a4mzha52je] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Tablet and below (<= 768px): single column gallery */
    .lh__gallery[b-a4mzha52je] {
        grid-template-columns: 1fr;
    }

    .lh__gallery--supporting[b-a4mzha52je] {
        grid-template-columns: 1fr;
    }

    /* Reduce gallery image height for medium screens to improve perceived performance */
    .lh__image[b-a4mzha52je] {
        --lh-image-height: 600px !important; /* matches original */
        height: var(--lh-image-height) !important;
    }

    .lh__gallery--supporting .lh__image[b-a4mzha52je] {
        --lh-image-height: 300px !important; /* supporting brands smaller */
        height: var(--lh-image-height) !important;
    }

    .lh__text[b-a4mzha52je] {
        padding: 1.5rem;
    }

    /* Tablet: ensure CTAs remain visible and consistent */
    .lh__cta[b-a4mzha52je] {
        bottom: 5rem;
    }

        .lh__cta a[b-a4mzha52je],
        .lh__cta button[b-a4mzha52je] {
            min-height: 40px;
            padding: 0.45rem 1rem;
        }
}

@media (max-width: 640px) {
    /* Large phones / small tablets (<= 640px): adjust image sizing and CTA spacing */
    /* Respect the image height token so small screens use the same desktop sizing when requested */
    .lh__image[b-a4mzha52je] {
        height: var(--lh-image-height) !important;
    }

    /* Small phones: reduce CTA size and spacing to fit */
    @media (max-width: 640px) {
        .lh__cta[b-a4mzha52je] {
            bottom: 5rem;
        }

            .lh__cta a[b-a4mzha52je],
            .lh__cta button[b-a4mzha52je] {
                min-height: 36px;
                padding: 0.4rem 0.9rem;
                font-size: 0.82rem;
            }

        /* Increase gallery text padding for small phones */
        .lh__text[b-a4mzha52je],
        .gallery-text[b-a4mzha52je] {
            padding: 1.25rem;
        }
    }

    .lh__gallery--supporting .lh__image[b-a4mzha52je] {
        height: var(--lh-image-height) !important;
    }

    /* Extra-small devices: keep CTAs compact and close to bottom */
    @media (max-width: 600px) {
        .lh__cta[b-a4mzha52je] {
            bottom: 20rem;
        }

            .lh__cta a[b-a4mzha52je],
            .lh__cta button[b-a4mzha52je] {
                min-height: 34px;
                padding: 0.35rem 0.8rem;
                font-size: 0.8rem;
            }
    }

    .lh__text[b-a4mzha52je] {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .lh__overlay[b-a4mzha52je] {
        gap: 0.75rem;
    }

    .lh__logo[b-a4mzha52je] {
        max-width: 150px;
    }

    .lh__gallery--supporting .lh__logo[b-a4mzha52je] {
        max-width: 300px;
    }
}

@media (max-width: 600px) {
    /* Keep parity with original mobile adjustments for logos and layout */
    /* keep desktop sizing on very small devices when requested */
    .lh__image[b-a4mzha52je] {
        --lh-image-height: 900px !important;
        height: var(--lh-image-height) !important;
    }

    .lh__gallery--supporting .lh__image[b-a4mzha52je] {
        --lh-image-height: 250px !important;
        height: var(--lh-image-height) !important;
    }

    .lh__logo[b-a4mzha52je] {
        max-width: 200px;
    }

    /* If the gallery is full-bleed on mobile, ensure no horizontal overflow */
    .lh__full-bleed[b-a4mzha52je] {
        overflow-x: hidden;
    }
}

/* Final fallback for very small devices (original appended rule) */
.lh__image[b-a4mzha52je] {
    /* Final fallback - preserve desktop sizing */
    --lh-image-height: 900px;
    height: var(--lh-image-height);
}


/* ===============================
   Brand background tokens / TODO
================================= */
/* TODO: Replace hardcoded image paths with theme tokens or an image helper for optimized delivery. */
.lh__gallery-item--optiphi .lh__image[b-a4mzha52je] {
    background-image: url('/Media/Images/Brand/Optiphi/optiphi_Brand_Page_Image 1.webp');
}

.lh__gallery-item--delta .lh__image[b-a4mzha52je] {
    background-image: url('/Media/Images/Brand/Delta Skin/Delta_Brand_Page_Image 1.webp');
}

.lh__gallery-item--melcura .lh__image[b-a4mzha52je] {
    background-image: url('/Media/Images/Brand/Melcura/Melcura_Brand_Page_Image 1.webp');
}

.lh__gallery-item--visi .lh__image[b-a4mzha52je] {
    background-image: url('/Media/Images/Brand/Visi/Ophthalmica_Brand_Page_Image 1.webp');
}

.lh__gallery-item--supporting-smed .lh__image[b-a4mzha52je] {
    background-image: url('/Media/Images/Brand/SMedLanding.webp');
}

.lh__gallery-item--supporting-ent .lh__image[b-a4mzha52je] {
    background-image: url('/Media/Images/Brand/ENTLanding.webp');
}

/* E!IMPORTANT: Explicit background colours for main brand cards (preserve visual identity).
   These apply to the BEM `.lh__text` and legacy `.gallery-text` for compatibility. */
.lh__gallery-item--optiphi .lh__text[b-a4mzha52je],
.lh__gallery-item--optiphi .gallery-text[b-a4mzha52je] {
    background: #3d3d3d; /* optiphi */
}

.lh__gallery-item--delta .lh__text[b-a4mzha52je],
.lh__gallery-item--delta .gallery-text[b-a4mzha52je] {
    background: #000000; /* delta */
}

.lh__gallery-item--melcura .lh__text[b-a4mzha52je],
.lh__gallery-item--melcura .gallery-text[b-a4mzha52je] {
    background: #002f5e; /* melcura */
}

.lh__gallery-item--visi .lh__text[b-a4mzha52je],
.lh__gallery-item--visi .gallery-text[b-a4mzha52je] {
    background: #476fb6; /* visi */
}


/* ===============================
   Utilities: Logo container
================================= */
.lh__logo-container[b-a4mzha52je] {
    display: flex;
    justify-content: center; /* centers horizontally */
    align-items: center;
    gap: var(--lh-space-lg); /* spacing between logos */
    flex-wrap: wrap; /* allows wrapping on smaller screens */
    margin: var(--lh-space-md) 0;
}

    .lh__logo-container a img[b-a4mzha52je] {
        max-height: 100px;
        width: auto;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

        /* Hover effect: slight zoom for brand logos */
        .lh__logo-container a img:hover[b-a4mzha52je] {
            transform: scale(1.05);
        }

/* FIXME: Temporary fix for Safari flexbox issue that caused overflowing logos on iOS. Revisit when support matrix changes. */
@media (max-width: 600px) {
    .lh__logo-container[b-a4mzha52je] {
        flex-direction: column; /* stack vertically on small screens */
        gap: 15px;
    }

        .lh__logo-container a img[b-a4mzha52je] {
            max-width: 80%; /* scale down for mobile */
            height: auto;
        }
}
/* /Components/Shared/Headers/FullNav.razor.rz.scp.css */
/*
    File:       FullNav.razor.css

    Purpose:    Applies only to the FullNav component via CSS isolation
*/


/* ====================================
   Nav Root - Layout Context
======================================= */
.nav-root[b-v0udj06o2i] {
    position: relative;
    top: 0 !important;
}


/* ====================================
   Top Navigation Band
======================================= */
.nav-top-band[b-v0udj06o2i] {
    width: 100%;
    height: var(--topband-h);
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 100;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: var(--color-primary);
    background-color: white;
}


    /* Ensure navbar sticks below band */
    .nav-top-band + .top-row[b-v0udj06o2i] {
        top: var(--topband-h);
    }


/* ====================================
   Top Row Layout
======================================= */
.top-row[b-v0udj06o2i] {
    width: 100%;
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 100;
    background: #09122A;
}

    .top-row.navbar[b-v0udj06o2i] {
        position: sticky;
        top: 0;
    }


/* ====================================
   Brand Area
======================================= */
.navbar-brand[b-v0udj06o2i] {
    font-size: 1.1rem;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}


/* ====================================
   Center Navigation Area
======================================= */
.nav-center-wrapper[b-v0udj06o2i] {
    flex: 1 1 auto;
    min-width: 0;
    display: none;
    justify-content: center;
    overflow: hidden;
}

.nav-desktop[b-v0udj06o2i] {
    display: none;
    gap: 1.5rem;
    white-space: nowrap;
}


/* ====================================
   Right Action Slot
======================================= */
.nav-right-slot[b-v0udj06o2i] {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: flex-end;
    /* no fixed width - grows to fit business name button + icons */
    margin-right: 1.5rem;
    color: white;
}

/* Icons and their wrappers must never shrink */
.nav-right-slot .cart-link[b-v0udj06o2i],
.nav-right-slot .nav-link[b-v0udj06o2i],
.nav-right-slot .nav-icon-button[b-v0udj06o2i],
.nav-right-slot .logout-form[b-v0udj06o2i] {
    flex-shrink: 0;
}


/* ====================================
   Navigation Items & Links
======================================= */
.nav-item[b-v0udj06o2i] {
    font-size: 0.95rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .nav-item a[b-v0udj06o2i],
    .nav-item button[b-v0udj06o2i] {
        display: block;
        padding: 12px 1.25rem;
        font-family: var(--font-family-base);
        font-size: 16px;
        color: white;
        text-decoration: none;
        background: transparent;
        border: none;
        border-radius: 0;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

/* ====================================
   Nav Item Hover (no background fill)
======================================= */
        .nav-item a:hover[b-v0udj06o2i],
        .nav-item button:hover[b-v0udj06o2i] {
            background-color: transparent;
        }

        .nav-item a:active[b-v0udj06o2i],
        .nav-item button:active[b-v0udj06o2i] {
            background-color: transparent;
        }


    /* ====================================
   NavLink Styling (Blazor)
======================================= */
    .nav-item[b-v0udj06o2i]  .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        height: 3rem;
        padding: 0 1.25rem;
        font-family: var(--font-family-base);
        font-size: 16px;
        font-weight: 400;
        color: white;
        text-decoration: none;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 1;
        transition: opacity 160ms ease, transform 120ms ease;
        will-change: opacity, transform;
    }

        .nav-item[b-v0udj06o2i]  .nav-link::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 8px;
            width: 100%;
            height: 2px;
            background-color: white;
            border-radius: 2px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 240ms ease;
        }

        .nav-item[b-v0udj06o2i]  .nav-link:hover {
            opacity: 0.85;
        }

            .nav-item[b-v0udj06o2i]  .nav-link:hover::after {
                transform: scaleX(1);
            }

        .nav-item[b-v0udj06o2i]  .nav-link:active {
            opacity: 0.65;
            transform: translateY(0.5px) scale(0.99);
        }

    .nav-item[b-v0udj06o2i]  a.active::after {
        transform: scaleX(1);
    }

    .nav-item[b-v0udj06o2i]  .nav-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
        border-radius: 6px;
    }


/* ====================================
   Navigation Icons
======================================= */
.nav-icon[b-v0udj06o2i] {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease-out, filter 0.3s ease;
}

    .nav-icon:hover[b-v0udj06o2i] {
        transform: scale(1.08);
        filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
    }

.nav-icon-button[b-v0udj06o2i] {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}


/* ====================================
   Cart UI
======================================= */
.cart-link[b-v0udj06o2i] {
    display: flex;
    align-items: flex-end;
    text-decoration: none;
}

.cart-icon-area[b-v0udj06o2i] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.cart-badge[b-v0udj06o2i] {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.65rem;
    line-height: 1;
    background: #ffffff;
    color: #09122A;
}


/* ====================================
   Business Context Button
======================================= */
.nav-business-name-btn[b-v0udj06o2i] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    /* fixed height matches the icon row so nothing shrinks */
    height: 24px;
    padding: 0 0.75rem;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-family: var(--font-family-base);
    font-size: 0.875rem;
    white-space: nowrap;
    /* shrinks before icons do, but has no hard cap so full name is visible */
    flex-shrink: 1;
    min-width: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

    .nav-business-name-btn:hover[b-v0udj06o2i] {
        opacity: 0.7;
    }

    .nav-business-name-btn:active[b-v0udj06o2i] {
        opacity: 0.5;
    }

.nav-business-name-text[b-v0udj06o2i] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.nav-business-chevron[b-v0udj06o2i] {
    font-size: 12px;
    flex-shrink: 0;
}


/* ====================================
   Hamburger Menu Button
======================================= */
.nav-hamburger-btn[b-v0udj06o2i] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    margin-right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 200;
}

    .nav-hamburger-btn ion-icon[b-v0udj06o2i] {
        font-size: 32px;
        color: white;
        transition: color 0.2s ease;
    }

    .nav-hamburger-btn:hover ion-icon[b-v0udj06o2i] {
        color: #f5f5f5;
    }


/* ====================================
   Responsive Behavior
======================================= */

/* ===== Small ===== */
@media (min-width: 576px) {
    .navbar-expand-sm .nav-hamburger-btn[b-v0udj06o2i] {
        display: none;
    }

    .navbar-expand-sm .nav-center-wrapper[b-v0udj06o2i] {
        display: flex;
    }

    .navbar-expand-sm .nav-desktop[b-v0udj06o2i] {
        display: flex;
    }

    .navbar-expand-sm .nav-right-slot[b-v0udj06o2i] {
        display: inline-flex;
    }

    .navbar-expand-sm .nav-mobile[b-v0udj06o2i] {
        display: none !important;
    }
}


/* ===== Medium ===== */
@media (min-width: 768px) {
    .navbar-expand-md .nav-hamburger-btn[b-v0udj06o2i] {
        display: none;
    }

    .navbar-expand-md .nav-center-wrapper[b-v0udj06o2i] {
        display: flex;
    }

    .navbar-expand-md .nav-desktop[b-v0udj06o2i] {
        display: flex;
    }

    .navbar-expand-md .nav-right-slot[b-v0udj06o2i] {
        display: inline-flex;
    }

    .navbar-expand-md .nav-mobile[b-v0udj06o2i] {
        display: none !important;
    }
}


/* ===== Large ===== */
@media (min-width: 992px) {
    .navbar-expand-lg .nav-hamburger-btn[b-v0udj06o2i] {
        display: none;
    }

    .navbar-expand-lg .nav-center-wrapper[b-v0udj06o2i] {
        display: flex;
    }

    .navbar-expand-lg .nav-desktop[b-v0udj06o2i] {
        display: flex;
    }

    .navbar-expand-lg .nav-right-slot[b-v0udj06o2i] {
        display: inline-flex;
    }

    .navbar-expand-lg .nav-mobile[b-v0udj06o2i] {
        display: none !important;
    }
}


/* ===== Extra Large ===== */
@media (min-width: 1200px) {
    .navbar-expand-xl .nav-hamburger-btn[b-v0udj06o2i] {
        display: none;
    }

    .navbar-expand-xl .nav-center-wrapper[b-v0udj06o2i] {
        display: flex;
    }

    .navbar-expand-xl .nav-desktop[b-v0udj06o2i] {
        display: flex;
    }

    .navbar-expand-xl .nav-right-slot[b-v0udj06o2i] {
        display: inline-flex;
    }

    .navbar-expand-xl .nav-mobile[b-v0udj06o2i] {
        display: none !important;
    }
}


/* ===== XXL ===== */
@media (min-width: 1400px) {
    .navbar-expand-xxl .nav-hamburger-btn[b-v0udj06o2i] {
        display: none;
    }

    .navbar-expand-xxl .nav-center-wrapper[b-v0udj06o2i] {
        display: flex;
    }

    .navbar-expand-xxl .nav-desktop[b-v0udj06o2i] {
        display: flex;
    }

    .navbar-expand-xxl .nav-right-slot[b-v0udj06o2i] {
        display: inline-flex;
    }

    .navbar-expand-xxl .nav-mobile[b-v0udj06o2i] {
        display: none !important;
    }
}
/* /Components/Shared/Headers/HomeNav.razor.rz.scp.css */
/*
    File:       HomeNav.razor.css

    Purpose:    Styling for the home navigation header and sticky top banner.
*/

/* ====================================
   Navigation Root
======================================= */

#nav-root[b-oc0g830xhw] {
    display: flex;
    flex-direction: column;
}

#nav-root.has-topband[b-oc0g830xhw] {
    padding-top: var(--topband-h);
}

/* ====================================
   Top Navigation Band
======================================= */

.nav-top-band[b-oc0g830xhw] {
    width: 100%;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    font-family: var(--font-family-base);
    font-size: 0.95rem;
    text-align: center;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ====================================
   Responsive - Tablet (768px)
======================================= */

@media (max-width: 768px) {
    .nav-top-band[b-oc0g830xhw] {
        height: auto;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        font-size: 0.85rem;
        line-height: 1.35;
    }
}

/* ====================================
   Responsive - Small Phone (480px)
======================================= */

@media (max-width: 480px) {
    .nav-top-band[b-oc0g830xhw] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        font-size: 0.8rem;
        line-height: 1.4;
    }
}
/* /Components/Shared/Headers/MobileNavMenu.razor.rz.scp.css */
/*
    File:       MobileNavMenu.razor.css

    Purpose:    Styles the mobile navigation overlay and panel
*/


/* ====================================
   Overlay (full-screen dim backdrop)
======================================= */
.mobile-nav-overlay[b-lgc8dclvf1] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9998;
}


/* ====================================
   Panel (full viewport height)
======================================= */
.mobile-nav-panel[b-lgc8dclvf1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9999;
    animation: mobileNavSlideUp-b-lgc8dclvf1 0.25s ease;
}


/* ====================================
   Close Button
======================================= */
.mobile-nav-close-btn[b-lgc8dclvf1] {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
}

    .mobile-nav-close-btn ion-icon[b-lgc8dclvf1] {
        font-size: 28px;
        color: #1a1a1a;
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .mobile-nav-close-btn:hover ion-icon[b-lgc8dclvf1] {
        color: #444;
        transform: scale(1.1);
    }


/* ====================================
   Navigation Links (centered column)
======================================= */
.mobile-nav-links[b-lgc8dclvf1] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile-nav-link[b-lgc8dclvf1] {
    position: relative;
    display: block;
    width: 100%;
    padding: 1rem 1.5rem;
    font-family: var(--font-family-base);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1a1a1a;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: opacity 160ms ease;
}

/* Underline slide-in from center on hover - mirrors FullNav desktop behaviour */
.mobile-nav-link[b-lgc8dclvf1]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.5rem;
    width: 100%;
    height: 1px;
    background-color: #1a1a1a;
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 240ms ease;
}

    .mobile-nav-link:hover[b-lgc8dclvf1] {
        opacity: 0.85;
    }

    .mobile-nav-link:hover[b-lgc8dclvf1]::after {
        transform: scaleX(0.4);
    }

    .mobile-nav-link:active[b-lgc8dclvf1] {
        opacity: 0.5;
    }


/* ====================================
   Icon Row (cart · profile · logout)
======================================= */
.mobile-nav-icons-row[b-lgc8dclvf1] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    padding: 1.75rem 1.5rem;
    margin-top: 1rem;
}

.mobile-nav-icon-btn[b-lgc8dclvf1] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    text-decoration: none;
}

.mobile-nav-icon-img[b-lgc8dclvf1] {
    height: 24px;
    width: auto;
    filter: brightness(0);
    display: block;
    transition: transform 0.3s ease-out;
}

    .mobile-nav-icon-btn:hover .mobile-nav-icon-img[b-lgc8dclvf1] {
        transform: scale(1.08);
    
    }

    .mobile-nav-icon-btn:active .mobile-nav-icon-img[b-lgc8dclvf1] {
        transform: scale(0.97);
    }


/* ====================================
   Cart badge
======================================= */
.mobile-nav-icon-wrap[b-lgc8dclvf1] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mobile-nav-badge[b-lgc8dclvf1] {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.65rem;
    line-height: 1;
    background: #1a1a1a;
    color: #ffffff;
}


/* ====================================
   Business Account Row
======================================= */
.mobile-nav-business-btn[b-lgc8dclvf1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: none;
    border: none;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.15s ease;
}

    .mobile-nav-business-btn:hover[b-lgc8dclvf1] {
        background-color: #fafafa;
    }

    .mobile-nav-business-btn:active[b-lgc8dclvf1] {
        background-color: #f4f4f4;
    }

.mobile-nav-business-label[b-lgc8dclvf1] {
    font-family: var(--font-family-base);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999;
}

.mobile-nav-business-name[b-lgc8dclvf1] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-family: var(--font-family-base);
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
}


/* ====================================
   Animation
======================================= */
@keyframes mobileNavSlideUp-b-lgc8dclvf1 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
/* /Components/Shared/Layout/ContentCardGrid.razor.rz.scp.css */
/* ====================================
Content Card Grid - Reusable Component
==================================== */

.content-card-grid[b-do1wl8ifub] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    width: 100%;
}

.content-card[b-do1wl8ifub] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--card-bg-color, #fff);
    border: 1px solid var(--border-light, #e0e0e0);
    transition: all 0.3s ease;
}

    .content-card:hover[b-do1wl8ifub] {
      
        transform: translateY(-1px);
    }

/* Card Header - Title Section */
.content-card-header[b-do1wl8ifub] {
    background-color: #333;
    padding: 1rem 1.5rem;
}

.content-card-title[b-do1wl8ifub] {
    font-size: 1.1rem;
   
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    text-align: center;
}

/* Card Body - Description Section */
.content-card-body[b-do1wl8ifub] {
    padding: 1.5rem;
    flex: 1;
    border-left: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
}

.content-card-description[b-do1wl8ifub] {
   
    color: var(--text-secondary, #666);
    
    line-height: 1.6;
    margin: 0;
    font-style: italic;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .content-card-grid[b-do1wl8ifub] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }

    .content-card-header[b-do1wl8ifub] {
        padding: 0.875rem 1.25rem;
    }

    .content-card-body[b-do1wl8ifub] {
        padding: 1.25rem;
    }

    .content-card-title[b-do1wl8ifub] {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .content-card-grid[b-do1wl8ifub] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .content-card-header[b-do1wl8ifub] {
        padding: 0.75rem 1rem;
    }

    .content-card-body[b-do1wl8ifub] {
        padding: 1rem;
    }

    .content-card-title[b-do1wl8ifub] {
        font-size: 0.8rem;
    }

    .content-card-description[b-do1wl8ifub] {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .content-card-grid[b-do1wl8ifub] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .content-card-header[b-do1wl8ifub] {
        padding: 0.65rem 0.75rem;
    }

    .content-card-body[b-do1wl8ifub] {
        padding: 0.75rem;
    }

    .content-card-title[b-do1wl8ifub] {
        font-size: 0.75rem;
    }

    .content-card-description[b-do1wl8ifub] {
        font-size: 0.8rem;
    }
}
/* /Components/Shared/Layout/ContentColumns.razor.rz.scp.css */
/* =========================================
   File: ContentColumns.razor.css
========================================= */


/* =========================================================
   Block: content-columns
========================================================= */
.content-columns[b-f7fudjsfvy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 4vw, 2rem);
    align-items: start;
    width: 100%;
}


/* =========================================================
   Element: content-column
========================================================= */
.content-column[b-f7fudjsfvy] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    width: 100%;
}


/* =========================================================
   Modifier: paired
   Purpose: Sequential paired layout for forms and field groups
========================================================= */
.content-columns--paired[b-f7fudjsfvy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
    width: 100%;
}


    /* =========================================================
   Paired Layout: Common FormInput Support
========================================================= */
    .content-columns--paired :deep(.mb-3)[b-f7fudjsfvy],
    .content-columns--paired :deep(.float-label)[b-f7fudjsfvy],
    .content-columns--paired :deep(.form-control)[b-f7fudjsfvy],
    .content-columns--paired :deep(.input-pill)[b-f7fudjsfvy] {
        width: 100%;
    }


    /* =========================================================
   Typography
========================================================= */
    .content-column p[b-f7fudjsfvy],
    .content-columns--paired :deep(p)[b-f7fudjsfvy] {
        margin: 0;
        line-height: 1.6;
        font-size: clamp(0.875rem, 2.5vw, 1rem);
    }

    .content-column strong[b-f7fudjsfvy],
    .content-columns--paired :deep(strong)[b-f7fudjsfvy] {
        font-weight: 600;
    }


    /* =========================================================
   Buttons
========================================================= */
    .content-column :deep(button)[b-f7fudjsfvy],
    .content-columns--paired :deep(button)[b-f7fudjsfvy] {
        width: auto;
    }


/* =========================================================
   Responsive: Extra Small
========================================================= */
@media (max-width: 479px) {

    .content-columns[b-f7fudjsfvy],
    .content-columns--paired[b-f7fudjsfvy] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .content-column[b-f7fudjsfvy] {
        gap: 0.5rem;
    }

        .content-column p[b-f7fudjsfvy],
        .content-columns--paired :deep(p)[b-f7fudjsfvy] {
            font-size: 0.875rem;
            line-height: 1.5;
        }

        .content-column :deep(button)[b-f7fudjsfvy],
        .content-columns--paired :deep(button)[b-f7fudjsfvy] {
            width: 100%;
            margin-top: 0.5rem;
        }
}


/* =========================================================
   Responsive: Small
========================================================= */
@media (min-width: 480px) and (max-width: 768px) {

    .content-columns[b-f7fudjsfvy],
    .content-columns--paired[b-f7fudjsfvy] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .content-column[b-f7fudjsfvy] {
        gap: 0.75rem;
    }

        .content-column p[b-f7fudjsfvy],
        .content-columns--paired :deep(p)[b-f7fudjsfvy] {
            font-size: 0.9rem;
            line-height: 1.55;
        }
}
/* /Components/Shared/Layout/ContentHeader.razor.rz.scp.css */
/* =========================================
   File: ContentSectionHeader.razor.css
========================================= */

/* =========================================================
   Wrapper
========================================================= */
.bh-content-header-wrap[b-h4amko5sei] {
    position: relative;
    z-index: 0;
}

/* =========================================================
   Row layout
========================================================= */
.bh-content-header-row[b-h4amko5sei] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: clamp(1rem, 3vw, 1.75rem);
    padding-bottom: clamp(1rem, 3vw, 1.75rem);
    padding-left: var(--content-padding-x);
    padding-right: var(--content-padding-x);
}

/* =========================================================
   Title container
========================================================= */
.bh-content-header[b-h4amko5sei] {
    flex-shrink: 0;
    text-transform: uppercase;
}

    .bh-content-header > span[b-h4amko5sei] {
        font-size: var(--font-size-lg);
        letter-spacing: var(--letter-spacing-wide);
        white-space: nowrap;
        margin: 0;
    }


/* =========================================================
   Divider
========================================================= */
.bh-content-header-row > hr[b-h4amko5sei] {
    flex: 1;
    border: none;
    border-top: 1.75px solid var(--border-light);
    border-radius: var(--input-radius-pill);
    margin: 0;
    opacity: 0.85;
    margin-right: calc(-1 * min(var(--content-padding-x), 10rem));
}

/* =========================================================
   Responsive behavior (ONLY what is needed)
========================================================= */
@media (max-width: 479px) {

    .bh-content-header > span[b-h4amko5sei] {
        white-space: normal;
    }
}
/* /Components/Shared/Layout/ContentImage.razor.rz.scp.css */
/* =========================================
   File: ContentImage.razor.css
========================================= */


/* =========================================================
   Block: content-section
========================================================= */
.content-section[b-yfzny4ov3c] {
    position: relative;
    overflow: hidden;
    z-index: 0;
    /*  SINGLE responsive height system */
    --content-image-height: clamp(320px, 55vw, 700px);
}


/* =========================================================
   Background image
========================================================= */
.background-image[b-yfzny4ov3c] {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}


/* =========================================================
   Overlay content (controls layout height)
========================================================= */
.overlay-content[b-yfzny4ov3c] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*  THIS defines the visual "image size" */
    min-height: var(--content-image-height);
    text-align: center;
    color: black;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    padding: clamp(1rem, 4vw, 2rem);
}


/* =========================================================
   Logo
========================================================= */
.logo-image[b-yfzny4ov3c] {
    width: clamp(150px, 60vw, 500px);
    margin-bottom: clamp(0.5rem, 2vw, 1rem);
    transition: transform 0.3s ease, filter 0.3s ease;
}

    .logo-image:hover[b-yfzny4ov3c] {
        transform: scale(0.99);
        filter: brightness(1.2);
    }


/* =========================================================
   Caption
========================================================= */
.caption[b-yfzny4ov3c] {
    max-width: 90%;
    font-size: clamp(1rem, 5vw, 3rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    text-align: center;
    margin-top: clamp(2rem, 12vw, 12rem);
    margin-bottom: clamp(0.5rem, 4vw, 4rem);
    margin-left: clamp(1rem, 5vw, 4rem);
    margin-right: clamp(1rem, 5vw, 4rem);
}


/* =========================================================
   Caption adjustment (no logo)
========================================================= */
.overlay-content:not(:has(.logo-image)) .caption[b-yfzny4ov3c] {
    margin-top: 35%;
    margin-bottom: clamp(0.5rem, 3vw, 2rem);
    font-size: clamp(1.2rem, 3vw, 5rem);
    max-width: 75%;
    text-align: center !important;
}



/* =========================================================
   Buttons (responsive)
========================================================= */
.overlay-content :deep(.btn)[b-yfzny4ov3c] {
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    padding: clamp(0.5rem, 1vw, 0.75rem) clamp(0.9rem, 2vw, 1.2rem);
}
/* /Components/Shared/Layout/ContentSection.razor.rz.scp.css */
/* =========================================
   File: ContentSection.razor.css
========================================= */

/* =========================================================
   Utility: full-bleed
========================================================= */
.full-bleed[b-lj0jcncs6m] {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

@supports (width: 100dvw) {
    .full-bleed[b-lj0jcncs6m] {
        width: 100dvw;
        max-width: 100dvw;
    }
}


/* =========================================================
   Element: content-section-body
========================================================= */
.content-section-body.full-bleed[b-lj0jcncs6m] {
    box-sizing: border-box;
    color: inherit;

    padding-top: clamp(1rem, 3vw, 1.75rem);
    padding-bottom: clamp(1rem, 3vw, 1.75rem);

    padding-left: var(--content-padding-x);
    padding-right: var(--content-padding-x);

    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* /Components/Shared/Loading/Loader.razor.rz.scp.css */
/* ===================== Loader ===================== */
/* Modern, minimal loading indicator: a single thin ring spinner + caption. */

.loader[b-xvlsm02vp4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Full-viewport overlay with a soft translucent backdrop. */
.loader--overlay[b-xvlsm02vp4] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* Contained variant that flows within the page. */
.loader--inline[b-xvlsm02vp4] {
    width: 100%;
    padding: 3rem 1rem;
}

/* ===================== Spinner ===================== */

.loader-spinner[b-xvlsm02vp4] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.10);
    border-top-color: #111827;
    animation: loader-spin-b-xvlsm02vp4 0.7s linear infinite;
}

@keyframes loader-spin-b-xvlsm02vp4 {
    to {
        transform: rotate(360deg);
    }
}

/* ===================== Caption ===================== */

.loader-message[b-xvlsm02vp4] {
    margin: 0;
    color: #6b7280;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .loader-spinner[b-xvlsm02vp4] {
        animation-duration: 1.8s;
    }
}
/* /Components/Shared/MessageAlert.razor.rz.scp.css */
.message-alert.full-bleed[b-k6xf6tlyst] {
    position: fixed;
    left: 0;
    right: 0;
    top: 120px;
    display: flex;
    justify-content: center;
    pointer-events: auto;
    z-index: 10000 !important;
    padding: 0 20px;
}

.message-alert .message-inner[b-k6xf6tlyst] {
    max-width: var(--content-max-width, 1200px);
    margin: 0 auto;
    text-align: center;
    width: 60%;
    box-sizing: border-box;
    padding: 20px 28px;
    pointer-events: auto;
   
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid #D9D9D9;
    border-radius: 0;
    
  
}

.message-alert .message-title[b-k6xf6tlyst] {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 6px;
    color: #111;
}

.message-alert .message-description[b-k6xf6tlyst] {
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}

/* Variants with subtle accent borders */
.message-alert.alert-info .message-inner[b-k6xf6tlyst] {
    border: 1px solid #D9D9D9;
}

.message-alert.alert-success .message-inner[b-k6xf6tlyst] {
    border: 1px solid #D9D9D9;
}

.message-alert.alert-error .message-inner[b-k6xf6tlyst] {
    border: 1px solid #D9D9D9;
}
/* /Components/Shared/ModernAlert.razor.rz.scp.css */
/* Modern Alert Styling with Glass Morphism Effect */
.alert-modern[b-1j32cucvu4] {
    padding: 1rem;
    margin-bottom: 1rem;
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  
    animation: slideInDown-b-1j32cucvu4 0.3s ease-out;
}

@keyframes slideInDown-b-1j32cucvu4 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-inner[b-1j32cucvu4] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.alert-icon[b-1j32cucvu4] {
    flex-shrink: 0;
    font-size: 1.5rem;
    margin-top: 0.125rem;
}

.alert-content[b-1j32cucvu4] {
    flex: 1;
}

.alert-content strong[b-1j32cucvu4] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.alert-content p[b-1j32cucvu4] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Alert Variants with Pantone Colors */

/* Info - Pantone 653 (#326295) */

.alert-info .alert-icon[b-1j32cucvu4] {
    color: #326295;
}

.alert-info strong[b-1j32cucvu4] {
    color: #326295;
}

.alert-info p[b-1j32cucvu4] {
    color: #326295;
}



.alert-success .alert-icon[b-1j32cucvu4] {
    color: #45693c;
}

.alert-success strong[b-1j32cucvu4] {
    color: #45693c;
}

.alert-success p[b-1j32cucvu4] {
    color: #45693c;
}



.alert-error .alert-icon[b-1j32cucvu4] {
    color: #9d2235;
}

.alert-error strong[b-1j32cucvu4] {
    color: #9d2235;
}

.alert-error p[b-1j32cucvu4] {
    color: #9d2235;
}
/* /Components/Shared/Orders/CartContainer.razor.rz.scp.css */
/* =========================================================
   File:        CartContainer.razor.css
   Purpose:     Component-scoped styles for CartContainer
   ========================================================= */

/* ===================== Container ===================== */

.cart-container[b-jf5rned2wc] {
    display: block;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 8px;
}

.cart-list[b-jf5rned2wc] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}

/* ===================== Cart Item ===================== */

.cart-item[b-jf5rned2wc] {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e6e6e6;
    padding: 18px;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

    .cart-item.out-of-stock[b-jf5rned2wc] {
        filter: brightness(0.6);
    }

        .cart-item.out-of-stock .notify-me-btn[b-jf5rned2wc],
        .cart-item.out-of-stock .notify-me-btn ion-icon[b-jf5rned2wc] {
            filter: brightness(0.7);
            pointer-events: auto;
        }

/* ===================== Left (Image) ===================== */

.cart-item-left[b-jf5rned2wc] {
    width: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 18px;
}

.cart-thumb[b-jf5rned2wc] {
    width: 200px;
    height: 200px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* ===================== Center ===================== */

.cart-item-center[b-jf5rned2wc] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.cart-item-name[b-jf5rned2wc] {
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

.cart-item-brand[b-jf5rned2wc] {
    font-size: 0.9rem;
    color: #9b9b9b;
    margin-bottom: 6px;
}

.cart-item-size[b-jf5rned2wc] {
    color: #777;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.cart-item-unit-price[b-jf5rned2wc] {
    color: #444;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.cart-item-product-code[b-jf5rned2wc] {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 4px;
    font-weight: 500;
}

/* ===================== Meta (Actions) ===================== */

.cart-item-meta[b-jf5rned2wc] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ===================== Quantity Control ===================== */

.quantity-control[b-jf5rned2wc] {
    display: flex;
    align-items: center;
    border: 1px solid #333;
    height: 60px;
}

.qty-btn[b-jf5rned2wc] {
    background-color: transparent;
    border: none;
    width: 60px;
    height: 100%;
    cursor: pointer;
    font-size: 18px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
}

    .qty-btn:hover:not([disabled])[b-jf5rned2wc] {
        background-color: #f0f0f0;
    }

    .qty-btn[disabled][b-jf5rned2wc] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.qty-input[b-jf5rned2wc] {
    width: 50px;
    border: none;
    text-align: center;
    font-size: 16px;
    background-color: transparent;
    height: 100%;
}

    .qty-input[b-jf5rned2wc]::-webkit-outer-spin-button,
    .qty-input[b-jf5rned2wc]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .qty-input[type=number][b-jf5rned2wc] {
        -moz-appearance: textfield;
    }

/* ===================== Notification Button ===================== */

.notify-me-btn[b-jf5rned2wc] {
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

    .notify-me-btn ion-icon[b-jf5rned2wc] {
        font-size: 40px;
        color: #3D3D3D;
    }

    .notify-me-btn:hover[b-jf5rned2wc] {
        transform: scale(1.1);
    }

/* ===================== Remove Button ===================== */

[b-jf5rned2wc] .remove-btn {
    border: 1px solid #ccc;
    background: transparent;
    padding: 6px 10px;
    height: 36px;
}

/* ===================== Right (Price) ===================== */

.cart-item-right[b-jf5rned2wc] {
    width: 140px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.cart-item-price[b-jf5rned2wc] {
    font-weight: 600;
    color: #222;
}

.cart-item-price-stack[b-jf5rned2wc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.cart-item-price-old[b-jf5rned2wc] {
    text-decoration: line-through;
    color: #666;
}

.cart-item-price-current[b-jf5rned2wc] {
    font-weight: 600;
}

.cart-item-spinner[b-jf5rned2wc] {
    font-size: 0.9rem;
    color: #666;
}

/* ===================== Promo Badge ===================== */

.promo-badge[b-jf5rned2wc] {
    color: #fff;
    padding: 4px 10px;
    font-size: 0.95rem;
    display: inline-block;
    white-space: nowrap;
    width: fit-content;
}

/* ===================== Responsive ===================== */

/*  ONLY SMALL SCREENS CENTERED */
@media (max-width: 768px) {

    .cart-item[b-jf5rned2wc] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cart-item-left[b-jf5rned2wc] {
        width: 100%;
        padding-right: 0;
        margin-bottom: 10px;
        justify-content: center;
    }

    .cart-thumb[b-jf5rned2wc] {
        width: 140px;
        height: auto;
    }

    .cart-item-center[b-jf5rned2wc] {
        align-items: center;
    }

    .cart-item-meta[b-jf5rned2wc] {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .quantity-control[b-jf5rned2wc] {
        justify-content: center;
    }

    .cart-item-right[b-jf5rned2wc] {
        width: 100%;
        align-items: center;
        text-align: center;
        padding-top: 14px;
    }

    .cart-item-price-stack[b-jf5rned2wc] {
        align-items: center;
    }

    [b-jf5rned2wc] .remove-btn {
        align-self: center;
    }
}

@media (min-width: 769px) {

    .cart-item[b-jf5rned2wc] {
        flex-direction: row;
        text-align: left;
    }

    .cart-item-center[b-jf5rned2wc] {
        align-items: flex-start;
    }

    .cart-item-meta[b-jf5rned2wc] {
        justify-content: flex-start;
    }

    .cart-item-right[b-jf5rned2wc] {
        align-items: flex-end;
        text-align: right;
    }

    .cart-item-price-stack[b-jf5rned2wc] {
        align-items: flex-end;
    }
}
/* /Components/Shared/Orders/CheckoutTimer.razor.rz.scp.css */
/* ====================================
Checkout Timer (Improved Layout)
==================================== */
.checkout-timer[b-ks4pmfog1m] {
    border: 1px solid #e6e6e6;
    padding: 12px 16px;
    font-weight: 600;
    /* ✅ center inside parent */
    margin: 1.5rem auto;
    /* ✅ layout */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* ✅ sizing */
    width: fit-content;
    max-width: 100%;
    min-width: clamp(260px, 50%, 420px);
    /* ✅ text */
    text-align: center;
    white-space: normal;
    color: var(--color-black);
}



    /* ====================================
Icon
==================================== */
    .checkout-timer ion-icon[b-ks4pmfog1m] {
        font-size: 18px;
        color: var(--color-black);
        flex-shrink: 0;
    }



    /* ====================================
Text
==================================== */
    .checkout-timer span[b-ks4pmfog1m] {
        display: inline-block;
        line-height: 1.4;
    }

    .checkout-timer strong[b-ks4pmfog1m] {
        font-weight: 700;
        font-size: inherit;
    }



/* ====================================
Mobile Improvements
==================================== */
@media (max-width: 768px) {

    .checkout-timer[b-ks4pmfog1m] {
        /* ✅ full-width feel but still centered */
        width: 100%;
        min-width: unset;
        max-width: 100%;
        padding: 12px;
        /* ✅ allow wrapping */
        flex-wrap: wrap;
        text-align: center;
        gap: 6px;
    }

        .checkout-timer span[b-ks4pmfog1m] {
            width: 100%;
        }
}



/* ====================================
Extra Small Devices
==================================== */
@media (max-width: 480px) {

    .checkout-timer[b-ks4pmfog1m] {
        font-size: 0.9rem;
        padding: 10px;
    }

        .checkout-timer ion-icon[b-ks4pmfog1m] {
            font-size: 16px;
        }
}
/* /Components/Shared/Orders/IncompleteOrdersList.razor.rz.scp.css */
/* =========================================
   File: IncompleteOrdersList.razor.css
========================================= */


/* ===================== Empty State ===================== */

.incomplete-empty[b-9nggg7c8in] {
    color: #777;
    font-size: 0.95rem;
}


/* ===================== Order Box ===================== */

.incomplete-order-box[b-9nggg7c8in] {
    border: 1px solid #e6e6e6;
    max-width: 1600px;
    margin: 0 auto 20px;
    width: 100%;
    box-sizing: border-box;
}


/* ===================== Header ===================== */

.incomplete-order-header[b-9nggg7c8in] {
    background: #e6e6e6;
    padding: 10px 0;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}


/* ===================== Body ===================== */

.incomplete-order-body[b-9nggg7c8in] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 20px;
    align-items: center;
}

.incomplete-order-row[b-9nggg7c8in] {
    display: flex;
    gap: 24px;
    align-items: center;
    width: 100%;
}


/* ===================== Left Column ===================== */

.incomplete-order-info[b-9nggg7c8in] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.incomplete-order-meta[b-9nggg7c8in] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    color: #333;
    text-align: left;
}

.incomplete-order-meta div[b-9nggg7c8in] {
    margin-bottom: 4px;
}

.incomplete-order-actions[b-9nggg7c8in] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-9nggg7c8in](.incomplete-order-actions button),
[b-9nggg7c8in](.incomplete-order-actions a) {
    width: 100%;
    justify-content: center;
}


/* ===================== Right Column ===================== */

.incomplete-order-products[b-9nggg7c8in] {
    flex: 1;
    min-width: 0;
}


/* ===================== Items Row ===================== */

.incomplete-items-row[b-9nggg7c8in] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
    justify-items: center;
    transition: opacity 0.12s ease-in-out;
}

.incomplete-items-row.transitioning[b-9nggg7c8in] {
    opacity: 0.6;
}


/* ===================== Item Card ===================== */

.incomplete-item[b-9nggg7c8in] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-width: 0;
    width: 100%;
    padding: 10px 0;
}

.incomplete-item-img-wrap[b-9nggg7c8in] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.incomplete-item-img-wrap img[b-9nggg7c8in] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.incomplete-item-info[b-9nggg7c8in] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 10px;
    min-width: 0;
}

.incomplete-item-title[b-9nggg7c8in] {
    font-size: 13px;
    color: #666;
    margin: 0 0 6px;
    word-break: break-word;
}

.incomplete-item-size[b-9nggg7c8in] {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

.incomplete-item-qty[b-9nggg7c8in] {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}


/* ===================== Item Nav ===================== */

.incomplete-nav[b-9nggg7c8in] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 12px;
}


/* ===================== Orders Nav ===================== */

.incomplete-orders-nav[b-9nggg7c8in] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 8px;
    padding: 12px 0;
}

.incomplete-orders-page[b-9nggg7c8in] {
    font-size: 0.85rem;
    color: #555;
    font-weight: 500;
    min-width: 48px;
    text-align: center;
}


/* ===================== Arrow Button ===================== */

.incomplete-arrow[b-9nggg7c8in] {
    border: none;
    background: transparent;
    color: #3d3d3d;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    transition: transform 0.2s ease;
}

.incomplete-arrow:hover:not(:disabled)[b-9nggg7c8in] {
    transform: scale(1.05);
}

.incomplete-arrow:disabled[b-9nggg7c8in] {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ===================== Responsive ===================== */

@media (max-width: 1100px) {
    .incomplete-items-row[b-9nggg7c8in] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .incomplete-order-body[b-9nggg7c8in] {
        padding: 12px 16px;
    }

    .incomplete-order-row[b-9nggg7c8in] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .incomplete-order-info[b-9nggg7c8in] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .incomplete-order-actions[b-9nggg7c8in] {
        flex-direction: row;
        gap: 8px;
    }

    [b-9nggg7c8in](.incomplete-order-actions button),
    [b-9nggg7c8in](.incomplete-order-actions a) {
        flex: 1;
    }

    .incomplete-items-row[b-9nggg7c8in] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .incomplete-item-img-wrap[b-9nggg7c8in] {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .incomplete-order-header[b-9nggg7c8in] {
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    .incomplete-items-row[b-9nggg7c8in] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .incomplete-item-img-wrap[b-9nggg7c8in] {
        width: 70px;
        height: 70px;
    }

    .incomplete-nav[b-9nggg7c8in],
    .incomplete-orders-nav[b-9nggg7c8in] {
        gap: 1.5rem;
    }
}
/* /Components/Shared/Orders/OrdersList.razor.rz.scp.css */
/* =========================================
   File: OrdersList.razor.css
========================================= */


/* ===================== Empty State ===================== */

.ol-empty[b-8gv4nakual] {
    color: #777;
    font-size: 0.95rem;
    padding: 20px 0;
}


/* ===================== Order Box ===================== */

.ol-box[b-8gv4nakual] {
    border: 1px solid #e6e6e6;
    max-width: 1600px;
    margin: 0 auto 20px;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}


/* ===================== Header ===================== */

.ol-header[b-8gv4nakual] {
    background: #e6e6e6;
    padding: 10px 0;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    position: relative;
    overflow: visible;
}


/* ===================== Timer Badge ===================== */

.ol-timer[b-8gv4nakual] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ol-timer ion-icon[b-8gv4nakual] {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.ol-timer-help-wrap[b-8gv4nakual] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    outline: none;
    margin-left: 2px;
}

.ol-timer-help-icon[b-8gv4nakual] {
    display: block;
    font-size: 16px;
    color: #888;
    transition: color 0.2s ease;
}

.ol-timer-help-wrap:hover .ol-timer-help-icon[b-8gv4nakual],
.ol-timer-help-wrap:focus .ol-timer-help-icon[b-8gv4nakual] {
    color: #333;
}

.ol-timer-tooltip[b-8gv4nakual] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 260px;
    box-sizing: border-box;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 6px;
    z-index: 200;
    pointer-events: none;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.ol-timer-tooltip[b-8gv4nakual]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 16px;
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
}

.ol-timer--normal[b-8gv4nakual]   { color: #555; }
.ol-timer--urgent[b-8gv4nakual]   { color: #d97706; }
.ol-timer--critical[b-8gv4nakual] { color: #dc2626; animation: ol-pulse-b-8gv4nakual 1.5s ease-in-out infinite; }

@keyframes ol-pulse-b-8gv4nakual {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}


/* ===================== Body ===================== */

.ol-body[b-8gv4nakual] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 20px;
    align-items: center;
}

.ol-row[b-8gv4nakual] {
    display: flex;
    gap: 24px;
    align-items: center;
    width: 100%;
}


/* ===================== Left Column ===================== */

.ol-info[b-8gv4nakual] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.ol-meta[b-8gv4nakual] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    color: #333;
    text-align: left;
}

.ol-meta div[b-8gv4nakual] {
    margin-bottom: 4px;
    color: #333;
}

.ol-actions[b-8gv4nakual] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-8gv4nakual](.ol-actions button),
[b-8gv4nakual](.ol-actions a) {
    width: 100%;
    justify-content: center;
}


/* ===================== Right Column ===================== */

.ol-products[b-8gv4nakual] {
    flex: 1;
    min-width: 0;
}


/* ===================== Items Row ===================== */

.ol-items-row[b-8gv4nakual] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
    justify-items: center;
    transition: opacity 0.12s ease-in-out;
}

.ol-items-row.transitioning[b-8gv4nakual] {
    opacity: 0.6;
}


/* ===================== Item Card ===================== */

.ol-item[b-8gv4nakual] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 10px 0;
}

.ol-item-img[b-8gv4nakual] {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ol-item-img img[b-8gv4nakual] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ol-item-info[b-8gv4nakual] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 10px;
    min-width: 0;
}

.ol-item-title[b-8gv4nakual] {
    font-size: 13px;
    color: #666;
    margin: 0 0 6px;
    word-break: break-word;
}

.ol-item-size[b-8gv4nakual] {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

.ol-item-qty[b-8gv4nakual] {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}


/* ===================== Item Nav ===================== */

.ol-nav[b-8gv4nakual] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 12px;
}


/* ===================== Orders Nav ===================== */

.ol-orders-nav[b-8gv4nakual] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 16px 0 4px;
}

.ol-page-indicator[b-8gv4nakual] {
    font-size: 0.85rem;
    color: #555;
    font-weight: 500;
    min-width: 48px;
    text-align: center;
}


/* ===================== Arrow Button ===================== */

.ol-arrow[b-8gv4nakual] {
    border: none;
    background: transparent;
    color: #3d3d3d;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    transition: transform 0.2s ease;
}

.ol-arrow:hover:not(:disabled)[b-8gv4nakual] {
    transform: scale(1.05);
}

.ol-arrow:disabled[b-8gv4nakual] {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ===================== Responsive ===================== */

@media (max-width: 1100px) {
    .ol-items-row[b-8gv4nakual] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .ol-body[b-8gv4nakual] {
        padding: 12px 16px;
    }

    .ol-row[b-8gv4nakual] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .ol-info[b-8gv4nakual] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .ol-actions[b-8gv4nakual] {
        flex-direction: row;
        gap: 8px;
    }

    [b-8gv4nakual](.ol-actions button),
    [b-8gv4nakual](.ol-actions a) {
        flex: 1;
    }

    .ol-items-row[b-8gv4nakual] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .ol-item-img[b-8gv4nakual] {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .ol-header[b-8gv4nakual] {
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    .ol-items-row[b-8gv4nakual] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ol-item-img[b-8gv4nakual] {
        width: 70px;
        height: 70px;
    }

    .ol-nav[b-8gv4nakual],
    .ol-orders-nav[b-8gv4nakual] {
        gap: 1.5rem;
    }

    .ol-actions[b-8gv4nakual] {
        flex-direction: column;
    }

    [b-8gv4nakual](.ol-actions button),
    [b-8gv4nakual](.ol-actions a) {
        width: 100%;
        flex: unset;
    }
}
/* /Components/Shared/Orders/PriceBreakdown.razor.rz.scp.css */
:root[b-zba9w1lb7h] {
    --color-gray: #666;
}

/* ===================== Price Breakdown ===================== */

.price-breakdown[b-zba9w1lb7h] {
    border: 1px solid #e6e6e6;
    padding: 16px;
    background: #fff;
}

    /*  FIX: use grid instead of flex for ALL rows */
    .price-breakdown .line[b-zba9w1lb7h] {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px; /*  key spacing between label + price */
        align-items: start;
        padding: 8px 0;
    }

        /*  label column */
        .price-breakdown .line > span:first-child[b-zba9w1lb7h] {
            padding-right: 10px;
            line-height: 1.4;
        }

        /*  price column ALWAYS right aligned + no wrapping */
        .price-breakdown .line > span:last-child[b-zba9w1lb7h] {
            text-align: right;
            white-space: nowrap; /*  NEVER break R 39,04 */
            font-weight: 400;
        }

        /*  TOTAL emphasis */
        .price-breakdown .line.total[b-zba9w1lb7h] {
            font-size: 16px;
            font-weight: 400;
        }

/* ===================== Item Breakdown Toggle ===================== */

.items-toggle-icon[b-zba9w1lb7h] {
    display: inline-flex;
    vertical-align: middle;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.items-toggle-icon.rotated[b-zba9w1lb7h] {
    transform: rotate(180deg);
}

/* ===================== Item Breakdown ===================== */

.items-list li[b-zba9w1lb7h] {
    padding-bottom: 8px;
    border-bottom: 1px solid #f2f2f2;
}

    .items-list li:last-child[b-zba9w1lb7h] {
        border-bottom: none;
    }

    /*  Stable layout */
    .items-list li .d-flex[b-zba9w1lb7h] {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: start;
    }

        /*  name block spacing */
        .items-list li .d-flex > div:first-child[b-zba9w1lb7h] {
            padding-right: 6px;
        }

        /*  price column */
        .items-list li .d-flex > div:last-child[b-zba9w1lb7h] {
            text-align: right;
            white-space: nowrap;
            font-weight: 400;
        }

            /*  stack strike/new */
            .items-list li .d-flex > div:last-child span[b-zba9w1lb7h] {
                display: block;
            }

/* ===================== MOBILE FIX ===================== */

@media (max-width: 768px) {

    .price-breakdown[b-zba9w1lb7h] {
        padding: 14px; /*  more breathing room */
    }

        /*  EVEN MORE spacing for mobile */
        .price-breakdown .line[b-zba9w1lb7h] {
            grid-template-columns: 1fr auto;
            gap: 20px; /*  critical fix for VAT issue */
            padding: 7px 0;
            font-size: 13px;
        }

            /*  label column gets more space */
            .price-breakdown .line > span:first-child[b-zba9w1lb7h] {
                padding-right: 12px;
                word-break: break-word;
            }

            /*  price column always safe */
            .price-breakdown .line > span:last-child[b-zba9w1lb7h] {
                font-size: 13px;
                font-weight: 600;
            }

    /* ===================== Items ===================== */

    .items-list[b-zba9w1lb7h] {
        padding: 12px;
    }

        .items-list li[b-zba9w1lb7h] {
            font-size: 12.5px;
        }

            .items-list li .d-flex[b-zba9w1lb7h] {
                grid-template-columns: 1fr auto;
                gap: 14px;
            }

                .items-list li .d-flex > div:last-child[b-zba9w1lb7h] {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    gap: 3px;
                }

                /*  strike always ABOVE */
                .items-list li .d-flex span[style*="line-through"][b-zba9w1lb7h] {
                    font-size: 11.5px;
                    opacity: 0.7;
                }

                /*  new price BELOW */
                .items-list li .d-flex span:not([style*="line-through"])[b-zba9w1lb7h] {
                    font-size: 13px;
                }

        /*  meta text smaller */
        .items-list .small[b-zba9w1lb7h],
        .text-muted[b-zba9w1lb7h] {
            font-size: 11px;
        }

    /*  brand header spacing */
    .brand-group > div[b-zba9w1lb7h] {
        font-size: 13px;
        padding: 8px 8px;
    }

    /*  TOTAL emphasis */
    .price-breakdown .line.total[b-zba9w1lb7h] {
        font-size: 14px;
        padding-top: 10px;
    }
}

/* ===================== Responsive Layout ===================== */

@media (max-width: 900px) {
    .order-row[b-zba9w1lb7h] {
        flex-direction: column;
        align-items: flex-start;
    }

    .checkout-payment-grid[b-zba9w1lb7h] {
        flex-direction: column;
    }

        .checkout-payment-grid .right[b-zba9w1lb7h] {
            width: 100%;
        }
}
/* /Components/Shared/Orders/RebateCodeInput.razor.rz.scp.css */
/* ====================================
   Section Wrapper
======================================= */
.rebate-section[b-npxh5rfw7d] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    /* ✅ IMPORTANT: allow tooltip to escape */
    position: relative;
    overflow: visible;
}


/* ====================================
   Label Row
======================================= */
.rebate-label-row[b-npxh5rfw7d] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.rebate-label[b-npxh5rfw7d] {
    font-weight: 600;
    font-size: 0.95rem;
}


/* ====================================
   Help Icon + Tooltip
======================================= */
.rebate-help-wrap[b-npxh5rfw7d] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    outline: none;
}

.rebate-help-icon[b-npxh5rfw7d] {
    display: block;
    font-size: 16px;
    color: #888;
    transition: color 0.2s ease;
}

.rebate-help-wrap:hover .rebate-help-icon[b-npxh5rfw7d],
.rebate-help-wrap:focus .rebate-help-icon[b-npxh5rfw7d] {
    color: #333;
}

.rebate-tooltip[b-npxh5rfw7d] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 260px;
    box-sizing: border-box;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 6px;
    z-index: 100;
    pointer-events: none;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.rebate-tooltip[b-npxh5rfw7d]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 16px;
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
}

/* ====================================
   Input Row
======================================= */
.rebate-input-row[b-npxh5rfw7d] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

    .rebate-input-row input[b-npxh5rfw7d] {
        flex: 1;
        min-width: 0;
        color: #212529 !important;
        background-color: #fff !important;
        opacity: 1 !important;
    }

    .rebate-input-row input[b-npxh5rfw7d]::placeholder {
        color: #6c757d !important;
        opacity: 1 !important;
    }


/* ====================================
   Feedback Message
======================================= */
.rebate-message[b-npxh5rfw7d] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 0.875rem;
}

.rebate-message-icon[b-npxh5rfw7d] {
    flex-shrink: 0;
    font-size: 16px;
}

.rebate-message--success[b-npxh5rfw7d] {
    background-color: #f0f0f0;
    color: #333;
}

.rebate-message--error[b-npxh5rfw7d] {
    background-color: #e8e8e8;
    color: #444;
}


/* ====================================
   Applied Code Card
======================================= */
.rebate-applied-card[b-npxh5rfw7d] {
    margin-top: 8px;
    padding: 10px 12px;
    background-color: #e6e6e6;
    border-radius: 2px;
}

.rebate-applied-top[b-npxh5rfw7d] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.rebate-applied-label[b-npxh5rfw7d],
.rebate-applied-status[b-npxh5rfw7d] {
    font-weight: 700;
    color: #000;
}

.rebate-applied-details[b-npxh5rfw7d] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 4px;
    font-size: 0.9rem;
    color: #000;
}

.rebate-applied-info[b-npxh5rfw7d] {
    color: #000;
}

.rebate-applied-expiry[b-npxh5rfw7d] {
    text-align: right;
    color: #000;
}

.rebate-remove-btn[b-npxh5rfw7d] {
    margin-top: 8px;
}
/* /Components/Shared/Products/ProductDetailMain.razor.rz.scp.css */
/* ====================================================================================================
   File:       ProductDetailMain.razor.css
   Purpose:    Styles for the ProductDetailMain shared component.
                Covers image display, carousel navigation, price, size selector,
                quantity control, and action buttons.
==================================================================================================== */


/* ---------- Product Image ---------- */
.product-image-wrapper[b-7vpn0r44nv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 520px;
    height: 520px;
    max-width: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
}

.product-image-carousel[b-7vpn0r44nv] {
    position: relative;
    width: 100%;
    max-width: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image[b-7vpn0r44nv] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: auto;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    opacity: 1;
}

    .product-image.fade-out[b-7vpn0r44nv] {
        opacity: 0;
        transform: scale(0.995);
    }


/* ---------- Navigation ---------- */
.products-nav[b-7vpn0r44nv] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
}

.products-arrow[b-7vpn0r44nv] {
    border: none;
    background: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    text-transform: uppercase;
    transition: transform 0.3s ease;
}

    .products-arrow:hover:not(:disabled)[b-7vpn0r44nv] {
        transform: scale(1.08);
    }

    .products-arrow:disabled[b-7vpn0r44nv] {
        opacity: 0.4;
        cursor: not-allowed;
    }


/* ---------- Product Details ---------- */
.product-details[b-7vpn0r44nv] {
    display: flex;
    flex-direction: column;
}


/* ---------- Price ---------- */
.product-price-section[b-7vpn0r44nv] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price-amount[b-7vpn0r44nv] {
    font-size: 24px;
    font-weight: 600;
    color: #333;
}


/* ---------- Shipping ---------- */
.shipping-info[b-7vpn0r44nv] {
    color: #666;
    margin-bottom: 25px;
    font-style: italic;
}


/* ---------- Product Option ---------- */
.product-option[b-7vpn0r44nv] {
    margin-bottom: 20px;
}

.size-selector-wrapper[b-7vpn0r44nv] {
    position: relative;
}

.size-selector[b-7vpn0r44nv] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    height: 44px;
    appearance: none;
    padding-right: 40px;
    background: white;
    outline: none;
}

    .size-selector:focus[b-7vpn0r44nv] {
        outline: none;
        border-color: #333;
        box-shadow: 0 0 0 1px #333;
    }


/* Handle validation edge case */
.size-selector:invalid[b-7vpn0r44nv] {
    box-shadow: none;
}

.size-selector-icon[b-7vpn0r44nv] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}


/* ---------- Stock ---------- */
.out-of-stock-message[b-7vpn0r44nv] {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 20px;
}


/* ---------- Controls ---------- */
.product-controls[b-7vpn0r44nv] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.action-buttons[b-7vpn0r44nv] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 1rem;
}


/* ---------- Buttons ---------- */
.action-btn[b-7vpn0r44nv] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
}

    .action-btn.wishlist-btn[b-7vpn0r44nv] {
        font-size: 40px;
    }

    .action-btn.share-btn[b-7vpn0r44nv] {
        font-size: 28px;
    }

    .action-btn.notify-btn[b-7vpn0r44nv] {
        font-size: 40px;
    }


/* ---------- Quantity ---------- */
.quantity-control[b-7vpn0r44nv] {
    display: flex;
    align-items: center;
    border: 1px solid #333;
    height: 60px;
    width: 170px !important;
}

.qty-btn[b-7vpn0r44nv] {
    width: 60px !important;
    background: transparent;
    border: none;
    cursor: pointer;
}
.qty-input[b-7vpn0r44nv] {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
    outline: none; 
}

    /* Remove arrows */
    .qty-input[b-7vpn0r44nv]::-webkit-outer-spin-button,
    .qty-input[b-7vpn0r44nv]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .qty-input[type="number"][b-7vpn0r44nv] {
        -moz-appearance: textfield;
    }

    


/* ---------- Tabs ---------- */
.product-tabs-container[b-7vpn0r44nv] {
    margin-top: 2rem;
}

.tabs-header[b-7vpn0r44nv] {
    display: flex;
}

.tab-btn[b-7vpn0r44nv] {
    flex: 1;
    padding: 15px;
    border: 1px solid #ddd;
    border-bottom: none;
    background: white;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}

    .tab-btn.active[b-7vpn0r44nv] {
        background: #333;
        color: white;
    }

.tabs-content[b-7vpn0r44nv] {
    border: 1px solid #ddd;
    padding: 2rem;
}


/* ---------- Reviews ---------- */
.reviews-summary[b-7vpn0r44nv] {
    padding: 30px;
    background: #333;
    color: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.review-item[b-7vpn0r44nv] {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
}

.reviewer-name[b-7vpn0r44nv] {
    font-weight: 600;
}


/* ---------- Catalogue Notice ---------- */
.catalogue-notice[b-7vpn0r44nv] {
    border-left: 3px solid #555;
    background: #f8f8f8;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.catalogue-notice-header[b-7vpn0r44nv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.catalogue-notice-icon[b-7vpn0r44nv] {
    font-size: 1.25rem;
    color: #555;
    flex-shrink: 0;
}

.catalogue-notice-title[b-7vpn0r44nv] {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #333;
}

.catalogue-notice-body[b-7vpn0r44nv] {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}


/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .product-image-wrapper[b-7vpn0r44nv] {
        width: 100%;
        height: auto;
    }

    .product-details[b-7vpn0r44nv] {
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .product-details[b-7vpn0r44nv] {
        gap: 1rem;
    }
}
/* /Components/Shared/Products/ProductImage.razor.rz.scp.css */
/* ===================== Product image ===================== */
/* Fills the sized container provided by the call site and keeps aspect ratio. */

.pimg[b-kmh3vqb8iv] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: auto;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    opacity: 1;
}

/* Fade state used by the product detail carousel when swapping images. */
.pimg.fade-out[b-kmh3vqb8iv] {
    opacity: 0;
    transform: scale(0.995);
}

/* ===================== Empty-image placeholder ===================== */
/* Transparent background - just the centred icon, no colour fill behind it. */

.pimg--empty[b-kmh3vqb8iv] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #b4b8bf;
}

.pimg--empty ion-icon[b-kmh3vqb8iv] {
    font-size: 2.75rem;
}
/* /Components/Shared/Products/ProductReviews.razor.rz.scp.css */
/* ====================================================================================================
   File:       ProductReviews.razor.css
   Purpose:    Styles for the ProductReviews shared component.
                Covers review summary panel, rating breakdown bars, CTA, and reviews list.
==================================================================================================== */


/* ---------- Summary Panel ---------- */
.reviews-summary[b-ruxv4zoc3v] {
    background-color: #333;
    color: white;
    padding: 40px;
}

/* ---------- Rating Overview ---------- */
.rating-overview[b-ruxv4zoc3v] {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

/* Left side */
.rating-display[b-ruxv4zoc3v] {
    text-align: center;
    flex-shrink: 0;
}

.rating-number[b-ruxv4zoc3v] {
    font-size: 60px;
    font-weight: 600;
}

.rating-stars[b-ruxv4zoc3v] {
    font-size: 28px;
    letter-spacing: 2px;
}

.review-count[b-ruxv4zoc3v] {
    font-size: 14px;
    color: #bbb;
}


/* ---------- Breakdown ---------- */
.rating-breakdown[b-ruxv4zoc3v] {
    flex: 1;
}

.rating-bar[b-ruxv4zoc3v] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.bar-label[b-ruxv4zoc3v] {
    min-width: 30px;
}

.bar-container[b-ruxv4zoc3v] {
    flex: 1;
    height: 8px;
    background: #555;
    border-radius: 100px;
    overflow: hidden;
}

.bar-fill[b-ruxv4zoc3v] {
    height: 100%;
    background: #e0e0e0;
}

.bar-percent[b-ruxv4zoc3v] {
    min-width: 40px;
    text-align: right;
}


/* ---------- Divider ---------- */
.reviews-divider[b-ruxv4zoc3v] {
    border-top: 1px solid #555;
    margin: 30px 0;
}


/* ---------- CTA ---------- */
.review-cta[b-ruxv4zoc3v] {
    text-align: center;
}

    .review-cta h3[b-ruxv4zoc3v] {
        font-size: 14px;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .review-cta p[b-ruxv4zoc3v] {
        font-size: 14px;
        margin-bottom: 20px;
    }


/* ---------- Reviews List ---------- */
.reviews-list[b-ruxv4zoc3v] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.review-item[b-ruxv4zoc3v] {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
}

.review-header[b-ruxv4zoc3v] {
    margin-bottom: 10px;
}

.reviewer-name[b-ruxv4zoc3v] {
    font-weight: 600;
    margin-bottom: 4px;
}

.review-rating[b-ruxv4zoc3v] {
    font-size: 14px;
    color: #666;
}

.review-title[b-ruxv4zoc3v] {
    font-weight: 600;
    margin-bottom: 8px;
}

.review-text[b-ruxv4zoc3v] {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}


/* ---------- Empty States ---------- */
.reviews-empty[b-ruxv4zoc3v],
.reviews-empty-list[b-ruxv4zoc3v] {
    text-align: center;
    color: #999;
}


/* ====================================
    Responsive
==================================== */

@media (max-width: 768px) {

    .rating-overview[b-ruxv4zoc3v] {
        flex-direction: column;
        text-align: center;
    }

    .rating-breakdown[b-ruxv4zoc3v] {
        margin-top: 20px;
    }

    .reviews-summary[b-ruxv4zoc3v] {
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {

    .rating-number[b-ruxv4zoc3v] {
        font-size: 48px;
    }

    .rating-stars[b-ruxv4zoc3v] {
        font-size: 22px;
    }

    .review-text[b-ruxv4zoc3v] {
        font-size: 13px;
    }
}
/* /Components/Shared/Products/ProductsGrid.razor.rz.scp.css */
/* =========================================
   File: ProductsGrid.razor.css
========================================= */


/* =========================================================
   Utility: full-bleed
   Description: Expands product section to viewport width
========================================================= */

.products-full-bleed[b-u1hgjs9pbo] {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

@supports (width: 100dvw) {
    .products-full-bleed[b-u1hgjs9pbo] {
        width: 100dvw;
        max-width: 100dvw;
    }
}


/* =========================================================
   Component: products-grid
   Description: Full-width grid aligned to page edges
========================================================= */

.products-grid[b-u1hgjs9pbo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.75rem, 2vw, 2rem);
    padding-left: var(--content-padding-x);
    padding-right: var(--content-padding-x);
    padding-bottom: 1rem;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.3s ease;
}

    .products-grid.transitioning[b-u1hgjs9pbo] {
        opacity: 0;
    }


/* =========================================================
   Component: product-card
   Description: Stable card layout
========================================================= */

.product-card[b-u1hgjs9pbo] {
    width: 100%;
    min-width: 0;
    padding: clamp(0.75rem, 1vw, 1.1rem);
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);
    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.45s ease, border-color 0.45s ease, filter 0.45s ease;
}


/* =========================================================
   Element: product media
========================================================= */

.product-media[b-u1hgjs9pbo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(180px, 32vw, 480px);
    overflow: hidden;
}

.product-image[b-u1hgjs9pbo] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* =========================================================
   Element: product content
   Description: Shared centered content column for title + CTA
========================================================= */

.product-content[b-u1hgjs9pbo] {
    --card-content-width: 160px;
    width: var(--card-content-width);
    max-width: 100%;
    margin: 1.25rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    text-align: center;
}


/* =========================================================
   Element: product title
========================================================= */

.product-title[b-u1hgjs9pbo] {
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.4;
    letter-spacing: 0.4px;
    color: #3D3D3D;
    min-height: 2.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.92;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.product-card:hover .product-title[b-u1hgjs9pbo] {
    opacity: 1;
    transform: translateY(-3px);
}


/* =========================================================
   Element: product CTA
   Description: Uses ::deep because Button is a child component
========================================================= */

.product-content[b-u1hgjs9pbo] (.shop-btn) {
    width: 100%;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}


/* =========================================================
   Interaction: luxury hover
========================================================= */

.product-card:hover[b-u1hgjs9pbo] {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 2px 8px rgba(0,0,0,0.015);
    border-color: rgba(0, 0, 0, 0.03);
}


/* =========================================================
   Component: indicators
========================================================= */

.wishlist-indicator[b-u1hgjs9pbo],
.addtocart-indicator[b-u1hgjs9pbo] {
    position: absolute;
    left: 12px;
    width: 44px;
    height: 44px;
}

.wishlist-indicator[b-u1hgjs9pbo] {
    top: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.addtocart-indicator[b-u1hgjs9pbo] {
    top: 60px;
    z-index: 9;
}

.wishlist-indicator ion-icon[b-u1hgjs9pbo],
.addtocart-btn ion-icon[b-u1hgjs9pbo] {
    font-size: 40px;
}

.addtocart-btn[b-u1hgjs9pbo] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    padding: 0;
}


/* =========================================================
   Component: navigation
========================================================= */

.products-nav[b-u1hgjs9pbo] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem;
}

.products-arrow[b-u1hgjs9pbo] {
    border: none;
    background: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s ease;
}

    .products-arrow:hover:not(:disabled)[b-u1hgjs9pbo] {
        transform: scale(1.08);
    }

    .products-arrow:disabled[b-u1hgjs9pbo] {
        opacity: 0.4;
        cursor: not-allowed;
    }


/* =========================================================
   Component: size selection modal (wishlist quick-add)
   Description: Centred overlay modal matching the admin
                settings modals.
========================================================= */

.size-modal-overlay[b-u1hgjs9pbo] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.size-modal-overlay.visible[b-u1hgjs9pbo] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
}

.size-modal-dialog[b-u1hgjs9pbo] {
    position: relative;
    width: min(440px, calc(100% - 40px));
    max-height: 90vh;
    overflow-y: auto;
}

.size-modal-content[b-u1hgjs9pbo] {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 32px;
}

.size-modal-header[b-u1hgjs9pbo] {
    margin-bottom: 20px;
}

.size-modal-title[b-u1hgjs9pbo] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.size-modal-body[b-u1hgjs9pbo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.size-modal-product[b-u1hgjs9pbo] {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
}

.form-group[b-u1hgjs9pbo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.form-label[b-u1hgjs9pbo] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
}

.size-modal-input[b-u1hgjs9pbo] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.size-modal-input:hover[b-u1hgjs9pbo] {
    border-color: #999;
    background-color: white;
}

.size-modal-input:focus[b-u1hgjs9pbo] {
    outline: none;
    border-color: #333;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.size-modal-note[b-u1hgjs9pbo] {
    margin: 0;
    font-size: 0.9rem;
    color: #999;
    font-style: italic;
}

.size-modal-footer[b-u1hgjs9pbo] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

    .size-modal-footer[b-u1hgjs9pbo] (.size-modal-btn) {
        min-width: 120px;
        justify-content: center;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 500;
        font-size: 0.85rem;
    }


/* =========================================================
   Responsive Layout
   Desktop: 4 cards
   Mobile: 2 cards
========================================================= */

@media (max-width: 768px) {
    .products-grid[b-u1hgjs9pbo] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .product-content[b-u1hgjs9pbo] {
        --card-content-width: 140px;
    }
}

@media (max-width: 480px) {
    .products-grid[b-u1hgjs9pbo] {
        grid-template-columns: repeat(2, 1fr);
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        gap: 0.5rem;
    }

    .product-content[b-u1hgjs9pbo] {
        --card-content-width: 132px;
    }

    .product-title[b-u1hgjs9pbo] {
        font-size: 0.9rem;
    }
}
/* /Components/Shared/Products/ProductsGridFullPage.razor.rz.scp.css */
/* =========================================
   File: ProductsGridFullPage.razor.css
========================================= */


/* =========================================================
   Utility: full-bleed
   Description: Expands product grid to viewport width
========================================================= */

.products-full-bleed[b-0dlobnkjmp] {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

@supports (width: 100dvw) {
    .products-full-bleed[b-0dlobnkjmp] {
        width: 100dvw;
        max-width: 100dvw;
    }
}


/* =========================================================
   Component: product-card
========================================================= */

.product-card[b-0dlobnkjmp] {
    width: 100%;
    min-width: 0;
    padding: clamp(0.75rem, 1vw, 1.4rem);
    text-align: center;
    position: relative;
    margin-bottom: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.45s ease, border-color 0.45s ease, background-color 0.45s ease, filter 0.45s ease;
    border: 1px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);
}

.product-card.out-of-stock[b-0dlobnkjmp] {
    filter: brightness(0.6);
    pointer-events: auto;
}

.product-card.out-of-stock .shop-btn[b-0dlobnkjmp],
.product-card.out-of-stock .wishlist-indicator[b-0dlobnkjmp],
.product-card.out-of-stock .addtocart-btn[b-0dlobnkjmp] {
    pointer-events: auto;
}

.product-card.out-of-stock:hover[b-0dlobnkjmp] {
    filter: brightness(0.6);
}

/* Partial out-of-stock indicator */
.partial-out-of-stock[b-0dlobnkjmp] {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 8;
}

.partial-stock-label[b-0dlobnkjmp] {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.wishlist-indicator[b-0dlobnkjmp] {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 10;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.wishlist-indicator ion-icon[b-0dlobnkjmp] {
    font-size: 70px;
    color: #3D3D3D;
    transition: transform 0.12s ease;
}

/* Add-to-cart button shown for wishlist cards */
.addtocart-indicator[b-0dlobnkjmp] {
    position: absolute;
    top: 64px;
    left: 12px;
    z-index: 9;
    width: 48px;
    height: 48px;
}

.addtocart-btn[b-0dlobnkjmp] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #3D3D3D;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    padding: 0;
}

.addtocart-btn:hover[b-0dlobnkjmp] {
    transform: scale(1.15);
    color: #1a1a1a;
}

.addtocart-btn:active[b-0dlobnkjmp] {
    transform: scale(0.95);
}

.addtocart-btn ion-icon[b-0dlobnkjmp] {
    pointer-events: none;
}

/* Product Media */
.product-media[b-0dlobnkjmp] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(180px, 32vw, 500px);
    width: 100%;
    overflow: hidden;
}

.product-image[b-0dlobnkjmp] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-card p[b-0dlobnkjmp] {
    transition: all 0.45s ease;
    opacity: 0.92;
    text-align: center !important;
    margin-top: 2rem;
}

.product-card:hover p[b-0dlobnkjmp] {
    opacity: 1;
    transform: translateY(-3px);
}

/* ===============================================
FULL-PAGE GRID CONTAINER
=============================================== */

.products-grid-fullpage[b-0dlobnkjmp] {
    display: grid;
    grid-template-columns: repeat(var(--products-per-row, 3), 1fr);
    gap: clamp(0.75rem, 2vw, 2rem);
    padding-left: var(--content-padding-x);
    padding-right: var(--content-padding-x);
    padding-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
}

/* ===============================================
LOAD MORE BUTTON CONTAINER
=============================================== */

.load-more-container[b-0dlobnkjmp] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.load-more-btn[b-0dlobnkjmp] {
    font-size: 0.95rem;
    padding: 0.75rem 2rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.load-more-btn:hover:not(:disabled)[b-0dlobnkjmp] {
    transform: scale(1.05);
}

.load-more-btn:disabled[b-0dlobnkjmp] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===============================================
SIZE SELECTOR OVERLAY
=============================================== */

.size-overlay[b-0dlobnkjmp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.size-dialog[b-0dlobnkjmp] {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.size-dialog h4[b-0dlobnkjmp] {
    margin: 0 0 1.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.size-selector-wrapper[b-0dlobnkjmp] {
    position: relative;
    margin-bottom: 1.5rem;
}
.product-card:hover[b-0dlobnkjmp] {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 2px 8px rgba(0,0,0,0.015);
    border-color: rgba(0, 0, 0, 0.03);
}

    .product-card:hover .product-title[b-0dlobnkjmp] {
        opacity: 1;
        transform: translateY(-3px);
    }


.size-selector[b-0dlobnkjmp] {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
    background: white;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
}

.size-selector-icon[b-0dlobnkjmp] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    pointer-events: none;
    color: #333;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.size-selector:hover[b-0dlobnkjmp] {
    border-color: #999;
}

.size-selector:focus[b-0dlobnkjmp] {
    outline: none;
    border-color: #333;
}

.size-selector-wrapper:focus-within .size-selector-icon[b-0dlobnkjmp] {
    transform: translateY(-50%) rotate(180deg);
}

/* Out of stock overlay */
.out-of-stock-overlay[b-0dlobnkjmp] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    background: transparent;
    pointer-events: none;
    padding-top: 1rem;
    height: 100%;
}

.out-of-stock-label[b-0dlobnkjmp] {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    pointer-events: none;
}

/* Size action buttons */
.size-actions[b-0dlobnkjmp] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.size-actions button[b-0dlobnkjmp] {
    flex: 1;
}

.shop-btn[b-0dlobnkjmp] {
    margin-top: auto;
    padding-top: 1.5rem;
    width: 100%;
}

[b-0dlobnkjmp](.shop-btn) {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ===============================================
RESPONSIVE DESIGN
=============================================== */

@media (max-width: 1200px) {
    .products-grid-fullpage[b-0dlobnkjmp] {
        grid-template-columns: repeat(var(--products-per-row, 2), 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 1024px) {
    .products-grid-fullpage[b-0dlobnkjmp] {
        grid-template-columns: repeat(var(--products-per-row, 2), 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .products-grid-fullpage[b-0dlobnkjmp] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .size-dialog[b-0dlobnkjmp] {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .products-grid-fullpage[b-0dlobnkjmp] {
        grid-template-columns: repeat(2, 1fr);
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        gap: 0.5rem;
    }

    .wishlist-indicator[b-0dlobnkjmp] {
        width: 40px;
        height: 40px;
    }

    .wishlist-indicator ion-icon[b-0dlobnkjmp] {
        font-size: 22px;
    }

    .addtocart-indicator[b-0dlobnkjmp] {
        width: 40px;
        height: 40px;
    }

    .addtocart-btn[b-0dlobnkjmp] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .size-dialog[b-0dlobnkjmp] {
        width: 95%;
        padding: 1rem;
    }

    .size-dialog h4[b-0dlobnkjmp] {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
}
/* /Components/Shared/Products/ProductTabs.razor.rz.scp.css */
/* ====================================================================================================
   File:       ProductTabs.razor.css
   Purpose:    Styles for the ProductTabs shared component.
                Covers tab navigation header, tab content panel, and rich text display.
==================================================================================================== */


/* ---------- Container ---------- */
.product-tabs-container[b-ykgexl42vu] {
    margin-top: 2rem;
    width: 100%;
}


/* ---------- Tabs Header ---------- */
.tabs-header[b-ykgexl42vu] {
    display: flex;
    width: 100%;
}

/* Each tab */
.tab-btn[b-ykgexl42vu] {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-bottom: none;
    background-color: white;
    color: #333;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    margin-right: -1px;
}

    /* Hover */
    .tab-btn:hover[b-ykgexl42vu] {
        background-color: #f9f9f9;
    }

    /* Active */
    .tab-btn.active[b-ykgexl42vu] {
        background-color: #333;
        color: #fff;
        border-color: #333;
    }


/* ---------- Content ---------- */
.tabs-content[b-ykgexl42vu] {
    border: 1px solid #ddd;
    padding: 2rem;
}

.tab-pane[b-ykgexl42vu] {
    display: none;
}

    .tab-pane.active[b-ykgexl42vu] {
        display: block;
    }


/* ---------- Rich Text ---------- */
.product-rich-text[b-ykgexl42vu] {
    color: #555;
    line-height: 1.7;
}


/* ====================================
    Responsive Behaviour
==================================== */

/* Tablet */
@media (max-width: 768px) {

    .tabs-header[b-ykgexl42vu] {
        flex-direction: column; /*  stack tabs vertically */
    }

    .tab-btn[b-ykgexl42vu] {
        width: 100%;
        margin-right: 0;
        border-bottom: 1px solid #ddd;
    }

        .tab-btn.active[b-ykgexl42vu] {
            border-bottom: none;
        }

    .tabs-content[b-ykgexl42vu] {
        padding: 1.5rem;
    }
}


/* Mobile */
@media (max-width: 480px) {

    .tab-btn[b-ykgexl42vu] {
        padding: 12px;
        font-size: 11px;
    }

    .tabs-content[b-ykgexl42vu] {
        padding: 1.25rem;
    }

    .product-rich-text[b-ykgexl42vu] {
        font-size: 0.9rem;
    }
}
/* /Components/Shared/Sections/LandingStorySection.razor.rz.scp.css */
/*
    File:       LandingStorySection.razor.css

    Purpose:    Styling for the landing page story section content layout,
                supporting brand blocks, and responsive column arrangement.
*/

/* ====================================
   Column Layout (Two-Column Primary Layout)
======================================= */

.story__columns[b-0dxu7393bf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.story__column[b-0dxu7393bf] {
    display: flex;
    flex-direction: column;
}

.story__column p[b-0dxu7393bf] {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.story__column strong[b-0dxu7393bf] {
    display: inline-block;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

/* ====================================
   Supporting Brand Blocks
======================================= */

.story__support-block[b-0dxu7393bf] {
    margin-top: 1.5rem;
}

.story__support-title[b-0dxu7393bf] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.story__support-description[b-0dxu7393bf] {
    margin-bottom: 0.5rem;
}

/* ====================================
   Call-to-Action Area
======================================= */

.story__cta[b-0dxu7393bf] {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.story__cta :deep(a)[b-0dxu7393bf],
.story__cta :deep(button)[b-0dxu7393bf] {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ====================================
   Science Content Section
======================================= */

.story__divider[b-0dxu7393bf] {
    border: none;
    border-top: 1px solid var(--text-primary);
    margin: 2rem 0;
    opacity: 0.3;
}

.story__science[b-0dxu7393bf] {
    margin: 0 auto;
    text-align: left;
}

.story__science p[b-0dxu7393bf] {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.story__science strong[b-0dxu7393bf] {
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* ====================================
   Responsive - Tablet (768px)
======================================= */

@media (max-width: 768px) {
    .story[b-0dxu7393bf] {
        padding: 2rem 1.25rem;
    }

    .story__columns[b-0dxu7393bf] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .story__support-block[b-0dxu7393bf] {
        margin-top: 1.25rem;
    }
}

/* ====================================
   Responsive - Large Phone (640px)
======================================= */

@media (max-width: 640px) {
    .story[b-0dxu7393bf] {
        padding: 1.75rem 1rem;
    }

    .story__column p[b-0dxu7393bf] {
        font-size: 0.95rem;
    }

    .story__cta[b-0dxu7393bf] {
        margin-bottom: 1.25rem;
    }
}

/* ====================================
   Responsive - Small Phone (480px)
======================================= */

@media (max-width: 480px) {
    .story__column p[b-0dxu7393bf] {
        font-size: 0.9rem;
    }

    .story__science[b-0dxu7393bf] {
        padding: 0 0.5rem;
    }
}
/* /Components/Shared/Settings/SettingsPersonalInfoSection.razor.rz.scp.css */
/* ============================== Personal Info Display ============================== */

.personal-info-display[b-3xjhkfqo0r] {
    margin: 2rem 0;
}

.info-grid[b-3xjhkfqo0r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.info-item[b-3xjhkfqo0r] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #e0e0e0;
}

.info-item:hover[b-3xjhkfqo0r] {
    background-color: transparent;
    border-color: #e0e0e0;
}

.info-label[b-3xjhkfqo0r] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
}

.info-value[b-3xjhkfqo0r] {
    font-size: 1rem;
    font-weight: 400;
    color: #1a1a1a;
    padding-bottom: 0.75rem;
}

/* ============================== Action Button ============================== */

.settings-action-button[b-3xjhkfqo0r] {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 0.75rem;
    border: 1px solid #1a1a1a !important;
    background: transparent !important;
    color: #1a1a1a !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease;
}

.settings-action-button:hover[b-3xjhkfqo0r] {
    background: #1a1a1a !important;
    color: white !important;
}

.settings-action-button[b-3xjhkfqo0r]  ion-icon {
    margin-right: 0.5rem;
}

/* ============================== Responsive ============================== */

@media (max-width: 768px) {
    .info-grid[b-3xjhkfqo0r] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .settings-action-button[b-3xjhkfqo0r] {
        width: 100%;
    }
}
/* /Components/Shared/Settings/SettingsPreferencesSection.razor.rz.scp.css */
/* ============================== Preferences Display ============================== */

.preferences-display[b-6n8gluhow4] {
    margin: 2rem 0;
}

.preferences-list[b-6n8gluhow4] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.preference-item[b-6n8gluhow4] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.2s ease;
}

.preference-item.consent-accepted .preference-icon[b-6n8gluhow4] {
    color: #4a7c59;
}

.preference-item.consent-denied .preference-icon[b-6n8gluhow4] {
    color: #ccc;
}

.preference-icon[b-6n8gluhow4] {
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

/* ============================== Preference Info ============================== */

.preference-info[b-6n8gluhow4] {
    flex: 1;
}

.preference-info strong[b-6n8gluhow4] {
    display: block;
    margin-bottom: 0.25rem;
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 500;
}

.preference-status[b-6n8gluhow4] {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

.preference-description[b-6n8gluhow4] {
    margin: 0.2rem 0 0 0;
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
}

.preference-date[b-6n8gluhow4] {
    margin: 0.25rem 0 0 0;
    color: #999;
    font-size: 0.85rem;
}

/* ============================== Preference Edit Button ============================== */

.preference-button[b-6n8gluhow4] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 8px 12px !important;
    min-width: auto;
    flex-shrink: 0;
    border: 1px solid #1a1a1a !important;
    background: transparent !important;
    color: #1a1a1a !important;
    transition: all 0.2s ease;
}

.preference-button:hover[b-6n8gluhow4] {
    background: #1a1a1a !important;
    color: white !important;
}

.preference-button[b-6n8gluhow4]  ion-icon {
    margin-right: 0;
}

/* ============================== Responsive ============================== */

@media (max-width: 768px) {
    .preference-item[b-6n8gluhow4] {
        flex-wrap: wrap;
    }

    .preference-button[b-6n8gluhow4] {
        width: 100%;
        margin-top: 0.5rem;
    }
}
/* /Components/Shared/Settings/SettingsSecuritySection.razor.rz.scp.css */
/* ============================== Action Button ============================== */

.settings-action-button[b-s3bfjrnoco] {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 0.75rem;
    border: 1px solid #1a1a1a !important;
    background: transparent !important;
    color: #1a1a1a !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease;
}

.settings-action-button:hover[b-s3bfjrnoco] {
    background: #1a1a1a !important;
    color: white !important;
}

.settings-action-button[b-s3bfjrnoco]  ion-icon {
    margin-right: 0.5rem;
}

/* ============================== Responsive ============================== */

@media (max-width: 768px) {
    .settings-action-button[b-s3bfjrnoco] {
        width: 100%;
    }
}
/* /Components/Shared/Tables/CustomTable.razor.rz.scp.css */
.custom-table[b-7wgmiq6joh] {
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.custom-table thead[b-7wgmiq6joh] {
    background: linear-gradient(90deg, #f8f9fa, #ececec);
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.custom-table th[b-7wgmiq6joh] {
    padding: 14px 16px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    text-align: left;
    width: auto;
}

.custom-table td[b-7wgmiq6joh] {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.92rem;
    color: #444;
    text-align: left;
    width: auto;
}

.custom-table.table-hover tbody tr:hover[b-7wgmiq6joh] {
    background: #ececec !important;
    transition: background 0.2s ease-in-out;
}

.custom-table td code[b-7wgmiq6joh],
.custom-table .text-mono[b-7wgmiq6joh],
.custom-table td code *[b-7wgmiq6joh] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Segoe UI Mono", monospace;
    color: #000000 !important;
}

/* Badge styling in table */
.custom-table .badge[b-7wgmiq6joh] {
    display: inline-block;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 0 !important;
}

.custom-table .badge.bg-light[b-7wgmiq6joh] {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    border-radius: 0 !important;
}

.custom-table .badge.bg-success[b-7wgmiq6joh] {
    background-color: #28a745 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.custom-table .badge.bg-secondary[b-7wgmiq6joh] {
    background-color: #6c757d !important;
    color: #fff !important;
    border-radius: 0 !important;
}

/* optional wrapper to enable vertical scrolling when table exceeds max height */
.custom-table-wrapper[b-7wgmiq6joh] {
    max-height: 480px;
    overflow-y: auto;
}

/* keep header visible when scrolling */
.custom-table thead th[b-7wgmiq6joh] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-pager[b-7wgmiq6joh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 3;
}

.table-pager-button[b-7wgmiq6joh] {
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: #3D3D3D;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    pointer-events: auto;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.table-pager-button:hover:not(:disabled)[b-7wgmiq6joh] {
    transform: scale(1.08);
}

.table-pager-button:active:not(:disabled)[b-7wgmiq6joh] {
    transform: scale(0.98);
}

.table-pager-button:disabled[b-7wgmiq6joh] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Responsive adjustments copied from products grid */
@media (max-width: 768px) {
    .table-pager-button[b-7wgmiq6joh] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .table-pager-button[b-7wgmiq6joh] {
        font-size: 0.75rem;
        padding: 0.35rem 0.7rem;
        gap: 0.25rem;
    }
}
/* /Components/Tables/Admin/LiveAccountDisplay.razor.rz.scp.css */
@keyframes spin-b-mzsp93qatb {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.live-account-refresh-rotating[b-mzsp93qatb] {
    animation: spin-b-mzsp93qatb 1s linear infinite;
}

.refresh-rotating[b-mzsp93qatb] {
    animation: spin-b-mzsp93qatb 1s linear infinite;
}
/* /Components/Tables/Admin/LiveDiscountGroupDisplay.razor.rz.scp.css */
@keyframes rotate-b-rmyf92q15s {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.live-refresh-rotating[b-rmyf92q15s] {
    animation: rotate-b-rmyf92q15s 1s linear infinite;
}
/* /Components/Tables/Admin/LiveInventoryDisplay.razor.rz.scp.css */
/* Refresh button rotation animation */
@keyframes refresh-rotate-b-lbygydvpol {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Apply rotation to refresh icons during refresh */
ion-icon.refresh-rotating[b-lbygydvpol] {
    animation: refresh-rotate-b-lbygydvpol 0.6s linear infinite;
    transform-origin: center;
}

/* Smooth disable state for refresh button */
button:disabled[b-lbygydvpol] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Optional: Hover effect for enabled refresh buttons */
button:not(:disabled):hover[b-lbygydvpol] {
    transform: scale(1.1);
}
/* /Pages/Checkout/PaymentConfirmation.razor.rz.scp.css */
/* ===================== Loading ===================== */

.pc-loading[b-dt5lg1sf03] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: #999;
    font-size: 0.95rem;
}

.pc-loading ion-icon[b-dt5lg1sf03] {
    font-size: 20px;
}


/* ===================== Success Banner ===================== */

.pc-success-banner[b-dt5lg1sf03] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: 1px solid #e0e0e0;
    background: #f7f7f7;
    padding: 24px 32px;
    margin-bottom: 32px;
}

.pc-success-icon[b-dt5lg1sf03] {
    font-size: 44px;
    color: #1a1a1a;
    flex-shrink: 0;
    display: block;
}

.pc-success-text[b-dt5lg1sf03] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pc-success-text strong[b-dt5lg1sf03] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.01em;
}

.pc-success-text span[b-dt5lg1sf03] {
    font-size: 0.88rem;
    color: #888;
}


/* ===================== Card ===================== */

.pc-card[b-dt5lg1sf03] {
    border: 1px solid #e6e6e6;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

.pc-card-header[b-dt5lg1sf03] {
    background: #e6e6e6;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a1a1a;
}

.pc-card-body[b-dt5lg1sf03] {
    padding: 20px;
}


/* ===================== Order Top Row ===================== */

.pc-order-top[b-dt5lg1sf03] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.pc-order-number[b-dt5lg1sf03] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.02em;
    margin-top: 4px;
}

.pc-status-badge[b-dt5lg1sf03] {
    background: #1a1a1a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    flex-shrink: 0;
    margin-top: 2px;
}


/* ===================== Meta Grid ===================== */

.pc-meta-grid[b-dt5lg1sf03] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pc-meta-full[b-dt5lg1sf03] {
    grid-column: 1 / -1;
}

.pc-label[b-dt5lg1sf03] {
    font-size: 0.72rem;
    color: #aaa;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.pc-value[b-dt5lg1sf03] {
    font-size: 0.9rem;
    color: #1a1a1a;
    font-weight: 500;
    line-height: 1.4;
}

.pc-value--strong[b-dt5lg1sf03] { font-weight: 700; }

.pc-value--mono[b-dt5lg1sf03] {
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    word-break: break-all;
}


/* ===================== Items List ===================== */

.pc-items-list[b-dt5lg1sf03] {
    display: flex;
    flex-direction: column;
}

.pc-item[b-dt5lg1sf03] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.pc-item:last-child[b-dt5lg1sf03] {
    border-bottom: none;
}

.pc-item-img[b-dt5lg1sf03] {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-item-img img[b-dt5lg1sf03] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pc-item-info[b-dt5lg1sf03] {
    flex: 1;
    min-width: 0;
}

.pc-item-name[b-dt5lg1sf03] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-item-meta[b-dt5lg1sf03] {
    font-size: 0.78rem;
    color: #aaa;
}

.pc-item-price[b-dt5lg1sf03] {
    text-align: right;
    flex-shrink: 0;
}

.pc-price-original[b-dt5lg1sf03] {
    font-size: 0.78rem;
    color: #ccc;
    text-decoration: line-through;
    margin-bottom: 2px;
}

.pc-price-final[b-dt5lg1sf03] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a1a1a;
}


/* ===================== Summary Rows ===================== */

.pc-summary-rows[b-dt5lg1sf03] {
    display: flex;
    flex-direction: column;
}

.pc-summary-row[b-dt5lg1sf03] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.88rem;
    color: #555;
}

.pc-summary-row:last-child[b-dt5lg1sf03] {
    border-bottom: none;
}

.pc-summary-row--discount[b-dt5lg1sf03] {
    color: #b40000;
}

.pc-summary-row--total[b-dt5lg1sf03] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 2px solid #e6e6e6;
    border-bottom: none;
}


/* ===================== Address ===================== */

.pc-address[b-dt5lg1sf03] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.9rem;
    color: #1a1a1a;
    line-height: 1.55;
}


/* ===================== Actions ===================== */

.pc-actions[b-dt5lg1sf03] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

[b-dt5lg1sf03](.pc-actions button),
[b-dt5lg1sf03](.pc-actions a) {
    width: 100%;
    justify-content: center;
}


/* ===================== Responsive ===================== */

@media (max-width: 768px) {
    .pc-success-banner[b-dt5lg1sf03] {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
        gap: 12px;
    }

    .pc-meta-grid[b-dt5lg1sf03] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pc-order-top[b-dt5lg1sf03] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .pc-card-body[b-dt5lg1sf03] {
        padding: 16px;
    }

    .pc-item[b-dt5lg1sf03] {
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    .pc-item-img[b-dt5lg1sf03] {
        width: 50px;
        height: 50px;
    }

    .pc-order-number[b-dt5lg1sf03] {
        font-size: 1.1rem;
    }

    .pc-success-icon[b-dt5lg1sf03] {
        font-size: 36px;
    }
}