@import '_content/Blazor.Flags/Blazor.Flags.bundle.scp.css';

/* /Components/AppModal.razor.rz.scp.css */
.app-modal-overlay[b-3p9wpenenv] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.app-modal[b-3p9wpenenv] {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

.app-modal__header[b-3p9wpenenv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #E5E7EB;
}

.app-modal__title[b-3p9wpenenv] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1F2937;
}

.app-modal__close[b-3p9wpenenv] {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #6B7280;
    cursor: pointer;
    padding: 0.25rem;
}

.app-modal__close:hover[b-3p9wpenenv] {
    color: #1F2937;
}

.app-modal__body[b-3p9wpenenv] {
    padding: 1.25rem;
    overflow-y: auto;
}

.app-modal__footer[b-3p9wpenenv] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #E5E7EB;
}
/* /Components/CountrySelector.razor.rz.scp.css */
/* ── Custom Image Dropdown (Country) ── */
.rg-custom-select-wrap[b-7orh0skyx3] {
    position: relative;
    user-select: none;
}

.rg-custom-select[b-7orh0skyx3] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 56px 0 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    transition: border-color 0.15s;
    outline: none;
}

.rg-custom-select:focus[b-7orh0skyx3] {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.rg-custom-select--open[b-7orh0skyx3] {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.rg-custom-select-placeholder[b-7orh0skyx3] {
    color: #9CA3AF;
    flex: 1;
}

.rg-custom-select-dropdown[b-7orh0skyx3] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    z-index: 9999;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 4px;
}

.rg-custom-select-search-wrap[b-7orh0skyx3] {
    padding: 6px 6px 8px 6px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 4px;
}

.rg-custom-select-search-inner[b-7orh0skyx3] {
    position: relative;
    width: 100%;
}

.rg-custom-select-search-input[b-7orh0skyx3] {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 34px !important;
    font-size: 13px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #F9FAFB;
    color: #111827;
    outline: none;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.rg-custom-select-search-input:focus[b-7orh0skyx3] {
    border-color: #2563EB;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.06);
}

.rg-custom-select-search-icon[b-7orh0skyx3] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.rg-custom-select-search-icon[b-7orh0skyx3]  .mud-icon-root {
    font-size: 16px !important;
}

.rg-custom-select-options-list[b-7orh0skyx3] {
    overflow-y: auto;
    flex: 1;
}

.rg-custom-select-no-results[b-7orh0skyx3] {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: #6B7280;
}

.rg-custom-select-option[b-7orh0skyx3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #111827;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
}

.rg-custom-select-option:hover[b-7orh0skyx3] {
    background: #F3F4F6;
}

.rg-custom-select-option--selected[b-7orh0skyx3] {
    background: #EFF6FF;
    color: #2563EB;
    font-weight: 500;
}

.rg-flag-img[b-7orh0skyx3] {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 0;
    flex-shrink: 0;
}

/* Force Blazor.Flags CountryFlag to align inline — ::deep pierces Blazor CSS isolation */
.rg-custom-select-option[b-7orh0skyx3]  .flag,
.rg-custom-select[b-7orh0skyx3]  .flag {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 1;
}

.rg-custom-select-option[b-7orh0skyx3]  .flag img,
.rg-custom-select[b-7orh0skyx3]  .flag img {
    display: block;
    vertical-align: middle;
}

.rg-select-arrow[b-7orh0skyx3] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rg-select-clear-btn[b-7orh0skyx3] {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 3;
}

.rg-select-clear-btn:hover[b-7orh0skyx3] {
    color: #4B5563;
}

.rg-select-arrow[b-7orh0skyx3]  .mud-icon-root {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

.rg-select-clear-btn[b-7orh0skyx3]  .mud-icon-root {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}
/* /Components/CustomDropdown.razor.rz.scp.css */
.rg-custom-select-wrap[b-2zl8tahp8d] {
    position: relative;
    user-select: none;
    outline: none;
}

.rg-custom-select[b-2zl8tahp8d] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 56px 0 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    transition: border-color 0.15s;
    outline: none;
}

.rg-custom-select:focus[b-2zl8tahp8d] {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.rg-custom-select--open[b-2zl8tahp8d] {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.rg-custom-select-placeholder[b-2zl8tahp8d] {
    color: #9CA3AF;
    flex: 1;
}

.rg-custom-select-dropdown[b-2zl8tahp8d] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    z-index: 9999;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 4px;
}

.rg-custom-select-search-wrap[b-2zl8tahp8d] {
    padding: 6px 6px 8px 6px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 4px;
}

.rg-custom-select-search-inner[b-2zl8tahp8d] {
    position: relative;
    width: 100%;
}

.rg-custom-select-search-input[b-2zl8tahp8d] {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 34px !important;
    font-size: 13px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #F9FAFB;
    color: #111827;
    outline: none;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.rg-custom-select-search-input:focus[b-2zl8tahp8d] {
    border-color: #2563EB;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.06);
}

.rg-custom-select-search-icon[b-2zl8tahp8d] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.rg-custom-select-search-icon[b-2zl8tahp8d]  .mud-icon-root {
    font-size: 16px !important;
}

.rg-custom-select-options-list[b-2zl8tahp8d] {
    overflow-y: auto;
    flex: 1;
}

.rg-custom-select-no-results[b-2zl8tahp8d] {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: #6B7280;
}

.rg-custom-select-option[b-2zl8tahp8d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #111827;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
}

.rg-custom-select-option:hover[b-2zl8tahp8d] {
    background: #F3F4F6;
}

.rg-custom-select-option--selected[b-2zl8tahp8d] {
    background: #EFF6FF;
    color: #2563EB;
    font-weight: 500;
}

.rg-select-arrow[b-2zl8tahp8d] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rg-select-clear-btn[b-2zl8tahp8d] {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 3;
}

.rg-select-clear-btn:hover[b-2zl8tahp8d] {
    color: #4B5563;
}

.rg-select-arrow[b-2zl8tahp8d]  .mud-icon-root {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

.rg-select-clear-btn[b-2zl8tahp8d]  .mud-icon-root {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}
/* /Components/DemoSuccessComponent.razor.rz.scp.css */
.success-wrapper[b-r4pqav74mj] {
    max-width: 720px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.success-banner[b-r4pqav74mj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    background: linear-gradient(90deg,#4F7FF7,#2F6DF6);
    color: #fff;
}

    .success-banner h2[b-r4pqav74mj] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }

    .success-banner p[b-r4pqav74mj] {
        margin: 4px 0 0;
        font-size: 13px;
        line-height: 18px;
        opacity: .95;
    }

.icon-circle[b-r4pqav74mj] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .icon-circle img[b-r4pqav74mj] {
        width: 22px;
        height: 22px;
    }

.success-card[b-r4pqav74mj] {
    background: #fff;
    border: 1px solid #D9E3F0;
    border-radius: 8px;
    padding: 16px;
}
    .success-card h3[b-r4pqav74mj] {
        margin: 0 0 14px;
        font-size: 16px;
        font-weight: 700;
        color: #1A1A1A;
    }
.info-line[b-r4pqav74mj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #2B2B2B;
}
    .info-line img[b-r4pqav74mj] {
        width: 18px;
        height: 18px;
    }
.summary-card[b-r4pqav74mj] {
    background: #fff;
    border: 1px solid #D9E3F0;
    border-radius: 8px;
    padding: 16px;
}

    .summary-card h4[b-r4pqav74mj] {
        margin: 0 0 16px;
        font-size: 15px;
        font-weight: 500;
        color: #3B4A65;
    }

.summary-block[b-r4pqav74mj] {
    margin-bottom: 16px;
}

    .summary-block b[b-r4pqav74mj] {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #212121;
        margin-bottom: 6px;
    }

.value[b-r4pqav74mj] {
    font-size: 14px;
    line-height: 20px;
    color: #4A4A4A;
}

.summary-block ul[b-r4pqav74mj] {
    margin: 4px 0 0 18px;
    padding: 0;
}

.summary-block li[b-r4pqav74mj] {
    font-size: 13px;
    line-height: 20px;
    color: #4A4A4A;
    margin-bottom: 2px;
}

.sub-value[b-r4pqav74mj] {
    margin-top: 4px;
    font-size: 12px;
    color: #666;
}
.summary-block .value[b-r4pqav74mj],
.summary-block .sub-value[b-r4pqav74mj] {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
/* ✅ Buttons */
.actions[b-r4pqav74mj] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.primary-btn[b-r4pqav74mj] {
    background: #4a7de0;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 25px;
    cursor: pointer;
}
.secondary-btn[b-r4pqav74mj] {
    background: white;
    border: 1px solid #4a7de0;
    color: #4a7de0;
    padding: 10px 22px;
    border-radius: 25px;
    cursor: pointer;
}

.summary-block ul[b-r4pqav74mj] {
    margin: 6px 0 0 20px;
    padding: 0;
    list-style-type: disc;
}

.summary-block li[b-r4pqav74mj] {
    font-size: 13px;
    margin-bottom: 5px;
}

@media (min-width: 769px) and (max-width: 1023px) {
    .success-wrapper[b-r4pqav74mj] {
        max-width: calc(100% - 48px);
        margin: 32px auto;
    }
}

@media (max-width: 768px) {
    .success-wrapper[b-r4pqav74mj] {
        max-width: calc(100% - 32px);
        margin: 24px auto;
        gap: 16px;
    }

    .success-banner[b-r4pqav74mj] {
        padding: 14px;
    }

    .success-banner h2[b-r4pqav74mj] {
        font-size: 16px;
    }

    .actions[b-r4pqav74mj] {
        flex-direction: column;
        width: 100%;
    }

    .primary-btn[b-r4pqav74mj],
    .secondary-btn[b-r4pqav74mj] {
        width: 100%;
        text-align: center;
    }
}

.question[b-r4pqav74mj] {
    font-size: 14px;
    font-weight: 500;
    color: #2D2D2D;
    margin-bottom: 6px;
}
/* /Components/EmptyState.razor.rz.scp.css */
.app-empty[b-3izi0i54bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: 0.5rem;
}

.app-empty__icon[b-3izi0i54bh] {
    font-size: 2.5rem;
    color: #9CA3AF;
    margin-bottom: 0.25rem;
}

.app-empty__title[b-3izi0i54bh] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1F2937;
}

.app-empty__message[b-3izi0i54bh] {
    margin: 0;
    color: #6B7280;
    font-size: 0.9rem;
    max-width: 32rem;
}

.app-empty__actions[b-3izi0i54bh] {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
}
/* /Components/FaqAccordion.razor.rz.scp.css */
.faq-accordion-card[b-r9f2ldyq14] {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    width: 100%;
}

.faq-item[b-r9f2ldyq14] {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s;
}

.faq-item:last-child[b-r9f2ldyq14] {
    border-bottom: none;
}

.faq-item-header[b-r9f2ldyq14] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    gap: 16px;
    box-sizing: border-box;
}

.faq-item-header:hover[b-r9f2ldyq14] {
    background: #fafafa;
}

.faq-item-header:focus-visible[b-r9f2ldyq14] {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.faq-question-text[b-r9f2ldyq14] {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
}

.faq-chevron[b-r9f2ldyq14] {
    width: 20px;
    height: 20px;
    color: #64748b;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.faq-item.expanded .faq-chevron[b-r9f2ldyq14] {
    transform: rotate(180deg);
}

.faq-answer-container[b-r9f2ldyq14] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

.faq-item.expanded .faq-answer-container[b-r9f2ldyq14] {
    grid-template-rows: 1fr;
}

.faq-answer-content[b-r9f2ldyq14] {
    overflow: hidden;
    padding: 0 24px;
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

.faq-item.expanded .faq-answer-content[b-r9f2ldyq14] {
    padding: 0 24px 20px 24px;
    transition: padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-content[b-r9f2ldyq14]  p {
    margin: 0 0 16px 0;
}

.faq-answer-content[b-r9f2ldyq14]  p:last-child {
    margin: 0;
}
/* /Components/LoadingSpinner.razor.rz.scp.css */
.app-loading[b-hbajllliwy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
}

.app-loading__spinner[b-hbajllliwy] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(71, 121, 247, 0.2);
    border-top-color: #4779F7;
    border-radius: 50%;
    animation: app-loading-spin-b-hbajllliwy 0.8s linear infinite;
}

.app-loading--small[b-hbajllliwy] {
    padding: 0.5rem;
}

.app-loading--small .app-loading__spinner[b-hbajllliwy] {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.app-loading__message[b-hbajllliwy] {
    color: #6B7280;
    font-size: 0.875rem;
}

@keyframes app-loading-spin-b-hbajllliwy {
    to { transform: rotate(360deg); }
}
/* /Components/Marketplace/CampaignBanner.razor.rz.scp.css */
/* ============================================================
   AG ONE Marketplace — Campaign Banner (scoped)
   Matches Figma "Moving Banners" (node 12199:196648):
   gradient background + fixed-size gift + scrolling text + text CTA.

   The gift is a SEPARATE fixed-size element, so the text (flex:1) always
   starts after it and can never overlap it — at any screen size, with no
   per-breakpoint percentage. Colours / optional background image come from
   CSS custom properties set inline by the component.
   ============================================================ */

.campaign-banner[b-rpcdbzjytk] {
    /* Sits above the hero background (z-index:0) but below the nav (z-index:200). */
    position: relative;
    z-index: 5;           /* clip the marquee text */
    display: flex;
    align-items: center;
    gap: 24px;                 /* Figma desktop gap */
    width: 100%;
    height: 62px;
    /* The parent (.homepage) is a 100dvh column flex; without this the banner
       gets shrunk to fit and collapses (clipping the gift). Keep its full height. */
    flex: 0 0 auto;
    padding: 4px 80px;         /* Figma desktop padding (H=80) */
    box-sizing: border-box;
    /* Clip to the bar: the gift is taller than the banner, so only the portion
       within the banner height is visible (no burst above/below). */
    overflow: hidden;

    color: #3C4C67;   /* base; marquee TextColor (solid or gradient) applied inline on the text spans */
    /* Default = the Figma gradient. A baked-in banner image (--cb-bg-desktop) overrides it, then a
       gradient BackgroundColor (--cb-bg-gradient); --cb-bg-color is a solid fallback underneath. */
    background-color: var(--cb-bg-color, transparent);
    background-image: var(--cb-bg-desktop, var(--cb-bg-gradient, linear-gradient(180deg, #EBF3FF 0%, #C4DAFD 100%)));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    font-family: 'Noto Sans', sans-serif;
}

/* ── Gift (fixed size, reserves its own horizontal space) ── */
.campaign-banner__gift[b-rpcdbzjytk] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.campaign-banner__gift img[b-rpcdbzjytk] {
    height: 77px;              /* ~Figma 77; reserves ~110px width via aspect ratio */
    width: auto;
    display: block;
}

/* ── Scrolling marquee viewport ── */
.campaign-banner__marquee[b-rpcdbzjytk] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    /* Soft fade at both edges so text appears/disappears smoothly. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

/* Two identical copies sit side by side; the track is 200% wide.
   Animating from 0 to -50% scrolls the content leftward — each word enters
   from the right edge and exits at the left (classic news-ticker motion) —
   and loops seamlessly because the copies are identical. */
.campaign-banner__track[b-rpcdbzjytk] {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    will-change: transform;
    animation: campaign-banner-scroll-b-rpcdbzjytk 30s linear infinite;
}

.campaign-banner__text[b-rpcdbzjytk] {
    display: inline-block;
    padding-right: 50px;       /* Figma gap between repeats */
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* Highlighted substrings within the marquee (from the Excel MessageHighlights column):
   weight 600 -> 700 and colour -> blue. ::deep needed for MarkupString content. */
.campaign-banner__text[b-rpcdbzjytk]  .campaign-banner__highlight {
    color: #296DF5;
    /* Stay solid blue even when the parent text is painted with a gradient (clip technique). */
    -webkit-text-fill-color: #296DF5;
    font-weight: 700;
}

@keyframes campaign-banner-scroll-b-rpcdbzjytk {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Call-to-action (winner banner) — text button with arrow, stays visible ── */
.campaign-banner__cta[b-rpcdbzjytk] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    color: #0A50DC;            /* Figma button colour */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;
}

.campaign-banner__cta:hover[b-rpcdbzjytk] {
    text-decoration: underline;
}

.campaign-banner__cta-arrow[b-rpcdbzjytk] {
    flex: 0 0 auto;
}

/* ── Mobile (AC-11 / AC-12 / AC-13) ── */
@media (max-width: 768px) {
    .campaign-banner[b-rpcdbzjytk] {
        gap: 12px;             /* Figma mobile gap */
        padding: 4px 16px;     /* Figma mobile padding (H=16) */
        height: 50px;
        /* Mobile image if provided, else desktop image, else gradient BackgroundColor, else default. */
        background-image: var(--cb-bg-mobile, var(--cb-bg-desktop, var(--cb-bg-gradient, linear-gradient(180deg, #EBF3FF 0%, #C4DAFD 100%))));
    }

    .campaign-banner__gift img[b-rpcdbzjytk] {
        height: 50px;          /* ~Figma mobile 50 */
    }

    .campaign-banner__text[b-rpcdbzjytk] {
        font-size: 13px;
        padding-right: 32px;
    }

    .campaign-banner__cta[b-rpcdbzjytk] {
        font-size: 14px;
    }
}

/* Respect users who prefer reduced motion — show static text instead of scrolling. */
@media (prefers-reduced-motion: reduce) {
    .campaign-banner__track[b-rpcdbzjytk] {
        animation: none;
        transform: translateX(0);
    }

    .campaign-banner__marquee[b-rpcdbzjytk] {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .campaign-banner__text:nth-child(2)[b-rpcdbzjytk] {
        display: none;
    }
}
/* /Components/Marketplace/CampaignPageView.razor.rz.scp.css */
/* ============================================================
   AG ONE Marketplace — Campaign landing page view (scoped)

   Fully data-driven. Three role-based background layers come from CSS custom
   properties set inline by the component:
     --cpg-bg-base   : full-page backdrop (behind everything)
     --cpg-bg-top    : decorative band just below the header
     --cpg-bg-footer : decorative band at the bottom
   Colours: --cpg-highlight (accent title), --cpg-text (body).
   ============================================================ */

   .campaign-page[b-tdhka8u8x9] {
    position: relative;
    width: 100%;
    min-height: 60vh;
    box-sizing: border-box;
    color: var(--cpg-text, #101828);
    font-family: 'Noto Sans', sans-serif;

    /* Base backdrop; falls back to a soft gradient when no image is provided. */
    background-color: #FFFFFF;
    background-image: var(--cpg-bg-base, linear-gradient(180deg, #EEF4FF 0%, #FFFFFF 45%));
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

/* ── Decorative bands (top / footer) ── */
.campaign-page__band[b-tdhka8u8x9] {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.campaign-page__band--top[b-tdhka8u8x9] {
    top: 0;
    height: 750px;
    background-image: var(--cpg-bg-top);
}

.campaign-page__band--footer[b-tdhka8u8x9] {
    bottom: 0;
    height: 260px;
    background-image: var(--cpg-bg-footer);
}

/* Desktop (1024–1980px): scale decorative bands with viewport width so corner
   glows / dot grids stay pinned to the edges — matches Figma Body (1440×1352)
   where top art is full-width at ~623px (46.05% of frame height). */
@media (min-width: 1024px) {
    .campaign-page[b-tdhka8u8x9] {
        background-size: 100% auto;
        background-position: top center;
    }

    .campaign-page__band[b-tdhka8u8x9] {
        background-size: 100% auto;
    }

    .campaign-page__band--top[b-tdhka8u8x9] {
        height: auto;
        aspect-ratio: 1440 / 623;
        background-position: top center;
    }

    .campaign-page__band--footer[b-tdhka8u8x9] {
        height: auto;
        aspect-ratio: 1440 / 260;
        background-position: bottom center;
    }
}

/* Wide desktop: single-line title like Figma Main Title (wraps below this). */
@media (min-width: 1280px) {
    .campaign-page__title[b-tdhka8u8x9] {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

/* ── Content column (above the bands) ──
   Figma Text (14096:216424): 1200-wide column, ~950 content after side inset. */
.campaign-page__inner[b-tdhka8u8x9] {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Fluid side padding keeps the column readable from 1024px → 1980px. */
    padding: 80px clamp(40px, 8.33vw, 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 92px;
}

.campaign-page__intro[b-tdhka8u8x9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
    width: 100%;
    max-width: 950px;
}

.campaign-page__heading[b-tdhka8u8x9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.campaign-page__subtitle[b-tdhka8u8x9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.campaign-page__product-section[b-tdhka8u8x9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.campaign-page__logo[b-tdhka8u8x9] {
    max-height: 35px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* ── Header Group (Title & Subheading) ── */
.campaign-page__header-group[b-tdhka8u8x9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

/* ── Title — Subtitle/Bold/Extra Large (25 / 1.4) ── */
.campaign-page__title[b-tdhka8u8x9] {
    margin: 0;
    font-size: 25px;
    line-height: 1.4;
    font-weight: 700;
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    /* Allow wrap below ~1440 so long titles don't overflow at 1024–1280. */
    white-space: normal;
}

/* Painted via background-clip so --cpg-highlight can be a solid colour OR a CSS gradient
   (e.g. linear-gradient(112deg, #296DF5, #08E1ED, #E2F76E)). Falls back to a solid colour. */
.campaign-page__title-highlight[b-tdhka8u8x9] {
    background: var(--cpg-highlight, #2ED3C6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.campaign-page__title-rest[b-tdhka8u8x9] {
    color: #296DF5;
}

/* Subtitle/Bold/Large */
.campaign-page__subheading[b-tdhka8u8x9] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #171D27;
    text-align: center;
    max-width: 100%;
}

/* ── Body — Body Text/Medium ── */
.campaign-page__body[b-tdhka8u8x9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

.campaign-page__paragraph[b-tdhka8u8x9] {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--cpg-text, #3C4C67);
    text-align: center;
}

/* Highlighted substrings within a body paragraph (from the Excel *Highlights column).
   ::deep reaches the MarkupString content produced by TextHighlighter. */
.campaign-page__paragraph[b-tdhka8u8x9]  .campaign-page__highlight {
    color: #296DF5;
    font-weight: 700;
}

/* ── Info / Schedule row (Figma gap 61px + vertical rule) ── */
.campaign-page__info[b-tdhka8u8x9] {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 61px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0;
}

.campaign-page__info-item[b-tdhka8u8x9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    max-width: 320px;
    line-height: 1.4;
}

.campaign-page__info-item:not(:last-child)[b-tdhka8u8x9]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -31px; /* half of 61px gap */
    width: 1px;
    background-color: #D6DBE6;
}

/* Body Text/Small */
.campaign-page__info-label[b-tdhka8u8x9] {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3C4C67;
}

/* Subtitle/Semibold/Medium */
.campaign-page__info-value[b-tdhka8u8x9] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #283243;
}

/* ── Product callout ── */
.campaign-page__product[b-tdhka8u8x9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.campaign-page__product-header[b-tdhka8u8x9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.campaign-page__product-logo[b-tdhka8u8x9] {
    max-height: 28px;
    width: auto;
    display: block;
}

.campaign-page__product-tagline[b-tdhka8u8x9] {
    margin: 0;
    color: var(--Text-Neutral-SubText-Dark, #3C4C67);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

.campaign-page__ctas[b-tdhka8u8x9] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

/* A lone CTA keeps its natural width and stays centred (never stretches). */
.campaign-page__cta:only-child[b-tdhka8u8x9] {
    flex: 0 0 auto;
}

.campaign-page__cta[b-tdhka8u8x9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    text-decoration: none;
    cursor: pointer;
}

.campaign-page__cta--primary[b-tdhka8u8x9] {
    border-radius: var(--Button-Rounded, 999px);
    background: var(--gradient-p-600-p-400135, linear-gradient(135deg, var(--Color-Primary-600, #0A50DC) 0%, var(--Color-Primary-400, #4D91FA) 100%));
    color: var(--Color-Neutral-White, #FFF);
    display: flex;
    height: 48px;
    min-width: 160px;
    padding: var(--Number-0, 0) var(--Number-40, 40px);
    justify-content: center;
    align-items: center;
    gap: var(--Number-8, 8px);
}

.campaign-page__cta-icon[b-tdhka8u8x9] {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

.campaign-page__cta--primary:hover[b-tdhka8u8x9] {
    filter: brightness(1.05);
}

.campaign-page__cta--secondary[b-tdhka8u8x9] {
    border-radius: var(--Button-Rounded, 999px);
    border: 1.5px solid var(--gradient-p-600-p-400135, #0A50DC);
    display: flex;
    height: 48px;
    min-width: 160px;
    padding: var(--Number-0, 0) var(--Number-40, 40px);
    justify-content: center;
    align-items: center;
    gap: var(--Number-8, 8px);
    color: var(--Button-Secondary-Text-Default, #296DF5);
    text-align: center;

    /* Subtitle/Semibold/Medium */
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 22.4px */
}

/* Figma export is white; tint to secondary text color when shown on the outline button. */
.campaign-page__cta--secondary .campaign-page__cta-icon[b-tdhka8u8x9] {
    filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(2000%) hue-rotate(210deg) brightness(98%) contrast(96%);
}

.campaign-page__cta--secondary:hover[b-tdhka8u8x9] {
    background: #F5F8FF;
}

/* ── Video ── */
.campaign-page__video[b-tdhka8u8x9] {
    width: 100%;
    max-width: 920px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.campaign-page__video-title[b-tdhka8u8x9] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #101828;
}

.campaign-page__video-frame[b-tdhka8u8x9] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #1D2939;
}

.campaign-page__video-player[b-tdhka8u8x9] {
    position: relative;
    width: 100%;
    height: 100%;
}

.campaign-page__video-media[b-tdhka8u8x9] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: 0;
}

/* ── Below desktop (< 1024) — desktop Figma Text styles apply from 1024 up ── */
@media (max-width: 1023px) {
    .campaign-page__inner[b-tdhka8u8x9] {
        padding: 56px 40px 0;
    }

    .campaign-page__intro[b-tdhka8u8x9] {
        max-width: none;
    }

    .campaign-page__title[b-tdhka8u8x9] {
        white-space: normal;
        flex-wrap: wrap;
        line-height: 1.3;
    }

    .campaign-page__info-item:not(:last-child)[b-tdhka8u8x9]::after {
        display: none;
    }
}

/* ── Mobile — Figma (Mob) AG ONE Marketplace/ iSACA Announcment 402×1247 ── */
@media (max-width: 768px) {
    /* Plain white page with a single top band — no base or footer artwork on mobile.
       Hero art lives on the top band (BackgroundImageTopMobileUrl in Excel col 29).
       Figma top art = 13.48% of frame ≈ 168px. */
    .campaign-page[b-tdhka8u8x9] {
        min-height: auto;
        height: auto;
        background-color: #FFFFFF;
        background-image: none;
        background-size: 100% auto;
        background-position: top center;
    }

    .campaign-page__band[b-tdhka8u8x9] {
        background-size: 100% auto;
        background-position: top center;
    }

    .campaign-page__band--top[b-tdhka8u8x9] {
        background-image: var(--cpg-bg-top-mobile, var(--cpg-bg-top));
        height: 168px;
        /* Soft bottom fade — no hard cut into the white page. */
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
    }

    .campaign-page__band--footer[b-tdhka8u8x9] {
        display: none;
    }

    .campaign-page__inner[b-tdhka8u8x9] {
        padding: 32px 16px;
        gap: 40px;
        max-width: none;
    }

    .campaign-page__intro[b-tdhka8u8x9] {
        max-width: none;
        padding-top: 10px;
        gap: 40px;
    }

    .campaign-page__logo[b-tdhka8u8x9] {
        min-height: 35px;
        min-width: 370px;
        width: auto;
    }

    .campaign-page__heading[b-tdhka8u8x9] {
        gap: 24px;
    }

    .campaign-page__subtitle[b-tdhka8u8x9] {
        gap: 24px;
    }

    .campaign-page__header-group[b-tdhka8u8x9] {
        gap: 16px;
    }

    /* Subtitle/Bold/Large — wraps naturally across lines */
    .campaign-page__title[b-tdhka8u8x9] {
        display: block;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
        white-space: normal;
        text-align: center;
        gap: 0;
    }

    .campaign-page__title-highlight[b-tdhka8u8x9],
    .campaign-page__title-rest[b-tdhka8u8x9] {
        display: inline;
    }

    /* Subtitle/Bold/Medium */
    .campaign-page__subheading[b-tdhka8u8x9] {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
        color: #171D27;
    }

    /* Body Text/Small */
    .campaign-page__paragraph[b-tdhka8u8x9] {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;
        color: var(--cpg-text, #3C4C67);
    }

    /* Schedule — stacked with horizontal rule between items */
    .campaign-page__info[b-tdhka8u8x9] {
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
        gap: 12px;
        margin-top: 0;
    }

    .campaign-page__info-item[b-tdhka8u8x9] {
        align-items: center;
        gap: 2px;
        max-width: none;
    }

    .campaign-page__info-item:not(:last-child)[b-tdhka8u8x9]::after {
        content: '';
        display: block;
        position: static;
        top: auto;
        bottom: auto;
        right: auto;
        width: 264px;
        max-width: 100%;
        height: 1px;
        margin-top: 10px;
        background-color: #D6DBE6;
        border: 0;
    }

    .campaign-page__info-label[b-tdhka8u8x9] {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;
        color: #3C4C67;
    }

    .campaign-page__info-value[b-tdhka8u8x9] {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        color: #283243;
    }

    /* AG ONE Safe block */
    .campaign-page__product-section[b-tdhka8u8x9] {
        gap: 24px;
    }

    .campaign-page__product[b-tdhka8u8x9] {
        gap: 24px;
        width: 100%;
    }

    .campaign-page__product-header[b-tdhka8u8x9] {
        gap: 12px;
        width: 100%;
    }

    .campaign-page__product-logo[b-tdhka8u8x9] {
        max-height: 28px;
        width: auto;
        max-width: 179px;
    }

    .campaign-page__product-tagline[b-tdhka8u8x9] {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
        color: #3C4C67;
        white-space: normal;
    }

    .campaign-page__ctas[b-tdhka8u8x9] {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 16px;
    }

    /* Subtitle/Semibold/Small — h36, min 120, px 16 */
    .campaign-page__cta[b-tdhka8u8x9] {
        flex: 0 0 auto;
        height: 36px;
        min-width: 120px;
        padding: 0 16px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        justify-content: center;
        gap: 8px;
    }

    .campaign-page__cta--primary[b-tdhka8u8x9],
    .campaign-page__cta--secondary[b-tdhka8u8x9] {
        height: 36px;
        min-width: 120px;
        padding: 0 16px;
        font-size: 14px;
    }

    .campaign-page__cta-icon[b-tdhka8u8x9] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .campaign-page__video[b-tdhka8u8x9] {
        width: 100%;
        max-width: none;
    }

    .campaign-page__video-frame[b-tdhka8u8x9] {
        aspect-ratio: auto;
        width: 100%;
        height: 235px;
        border-radius: 20px;
        background: #283243;
    }
}
/* /Components/Marketplace/CampaignPopupCard.razor.rz.scp.css */
/* ============================================================
   AG ONE Marketplace — Campaign Popup card (scoped)

   A centred, dismissable launch popup. Size varies by breakpoint;
   the artwork is a per-breakpoint background image (cover). Colours and
   images come from CSS custom properties set inline by the component.

   Sizes (per spec):
     Desktop (>=1024px): 550 x 482
     Tablet  (768-1023): 500 x 438
     Mobile  (<768px)  : 90vw, max 343, min-height 380, auto height
   ============================================================ */

   .campaign-popup__overlay[b-admc8ps3iv] {
    position: fixed;
    inset: 0;
    z-index: 1300;                 /* above the nav (200); below MudBlazor dialogs (~1400) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.55);
    box-sizing: border-box;
    animation: campaign-popup-fade-b-admc8ps3iv 160ms ease-out;
}

/* ── Card (desktop default) ── */
.campaign-popup__card[b-admc8ps3iv] {
    position: relative;
    box-sizing: border-box;
    width: 700px;
    height: 500px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 16px;
    overflow: hidden;
    color: var(--cp-text-color, #101828);

    background-color: var(--cp-bg-color, #FFFFFF);
    /* Desktop artwork; falls back to a soft gradient when no image is provided. */
    background-image: var(--cp-bg-desktop, linear-gradient(180deg, #EBF3FF 0%, #F8FBFF 60%, #FFFFFF 100%));
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 24px 64px rgba(16, 24, 40, 0.28);

    font-family: 'Noto Sans', sans-serif;
    animation: campaign-popup-pop-b-admc8ps3iv 180ms ease-out;
}

/* ── Close (X) ── */
.campaign-popup__close[b-admc8ps3iv] {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #344054;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.campaign-popup__close:hover[b-admc8ps3iv] {
    background: rgba(16, 24, 40, 0.08);
}

/* ── Content ── */
.campaign-popup__content[b-admc8ps3iv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 64px 40px 0;
    height: 100%;
    box-sizing: border-box;
}

.campaign-popup__content--clickable[b-admc8ps3iv] {
    cursor: pointer;
}

/* ── Badge ── */
.campaign-popup__badge[b-admc8ps3iv] {
    overflow: hidden;
    color: var(--Color-Primary-700, #083DA6);
    text-overflow: ellipsis;
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    display: flex;
    padding: var(--Number-6, 6px) var(--Number-12, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--Number-8, 8px);
    border-radius: var(--Label-Tag, 4px);
    background: var(--Surface-Primary-Subtle, #EBF3FF);
    
}

.campaign-popup__badge-icon[b-admc8ps3iv] {
    width: 16px;
    height: 16px;
    display: block;
}

/* ── Title (highlight + main) ── */
.campaign-popup__title[b-admc8ps3iv] {
    text-align: center;
    font-family: "Noto Sans";
    font-size: 31.25px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    min-width: 652px;
}

.campaign-popup__title-highlight[b-admc8ps3iv] {
    background: var(--AI-Color-Dark-03, linear-gradient(272deg, var(--Color-Primary-500, #296DF5) 13.52%, var(--Color-Cyan-300, #08E1ED) 50%, var(--Color-Lime-100, #E2F76E) 75.34%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.campaign-popup__title-main[b-admc8ps3iv] {
    display: block;
    color: inherit;
}

/* ── Subtitle / body (grouped so content gap skips between them) ── */
.campaign-popup__copy[b-admc8ps3iv] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.campaign-popup__subtitle[b-admc8ps3iv],
.campaign-popup__body[b-admc8ps3iv] {
    margin: 0;
}

.campaign-popup__subtitle[b-admc8ps3iv] {
    color: var(--Text-Neutral-Title, #171D27);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.campaign-popup__body[b-admc8ps3iv] {
    color: var(--Text-Neutral-SubText-Dark, #3C4C67);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

/* Highlighted substrings within the subtitle / body (from the Excel *Highlights columns):
   weight 400 -> 700 and colour -> blue. ::deep reaches the MarkupString content. */
.campaign-popup__subtitle[b-admc8ps3iv]  .campaign-popup__highlight,
.campaign-popup__body[b-admc8ps3iv]  .campaign-popup__highlight {
    color: #296DF5;
    font-weight: 600;
}

/* ── CTA ── */
.campaign-popup__cta[b-admc8ps3iv] {
    margin-top: 4px;
    padding: 14px 28px;
    border: none;
    border-radius: 999px;
    background: var(--cp-btn-color, #2E5AAC);
    color: var(--cp-btn-text-color, #FFFFFF);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease;
    display: flex;
    height: 48px;
    min-width: 160px;
    padding: var(--Number-0, 0) var(--Number-40, 40px);
    justify-content: center;
    align-items: center;
    gap: var(--Number-0, 0);
}

.campaign-popup__cta:hover[b-admc8ps3iv] {
    filter: brightness(1.05);
}

/* ── Tablet (768-1023px): 500 x 438 ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .campaign-popup__card[b-admc8ps3iv] {
        width: 600px;
        height: 500px;
        /* Tablet artwork, falling back to the desktop image, then the gradient. */
        background-image: var(--cp-bg-tablet, var(--cp-bg-desktop, linear-gradient(180deg, #EBF3FF 0%, #F8FBFF 60%, #FFFFFF 100%)));
    }

    .campaign-popup__content[b-admc8ps3iv] {
        padding: 44px 36px 0;
        gap: 14px;
    }

    .campaign-popup__title[b-admc8ps3iv] {
        font-size: 28px;
    }
}

/* ── Mobile (<768px): 90vw, max 343, min-height 380, auto height ── */
@media (max-width: 767px) {
    .campaign-popup__card[b-admc8ps3iv] {
        width: 90vw;
        max-width: 350px;
        height: auto;
        min-height: 380px;
        border-radius: 12px;
        /* Mobile artwork, falling back to tablet, then desktop, then the gradient. */
        background-image: var(--cp-bg-mobile, var(--cp-bg-tablet, var(--cp-bg-desktop, linear-gradient(180deg, #EBF3FF 0%, #F8FBFF 60%, #FFFFFF 100%))));
    }

    .campaign-popup__content[b-admc8ps3iv] {
        padding: 64px 20px 32px;
        gap: 16px;
    }

    .campaign-popup__copy[b-admc8ps3iv] {
        gap: 4px;
    }

    .campaign-popup__title[b-admc8ps3iv] {
        min-width: 0;
        width: 100%;
        font-size: 25px;
    }

    .campaign-popup__subtitle[b-admc8ps3iv] {
        font-size: 20px;
    }

    .campaign-popup__body[b-admc8ps3iv] {
        font-size: 16px;
    }

    .campaign-popup__cta[b-admc8ps3iv] {
        min-width: 160px;
        min-height: 48px;
        padding: 14px 40px;
    }
}

/* Respect reduced-motion preferences — no entrance animation. */
@media (prefers-reduced-motion: reduce) {
    .campaign-popup__overlay[b-admc8ps3iv],
    .campaign-popup__card[b-admc8ps3iv] {
        animation: none;
    }
}

@keyframes campaign-popup-fade-b-admc8ps3iv {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes campaign-popup-pop-b-admc8ps3iv {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* /Components/Marketplace/MarketplaceComingSoonState.razor.rz.scp.css */
/* ============================================================
   Marketplace Coming Soon State
   Figma: 9836:151808
   ============================================================ */
.mp-coming-soon[b-9p295lft23] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    gap: 24px;
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
}

.mp-coming-soon__header[b-9p295lft23] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    line-height: 1.4;
    text-align: center;
}

.mp-coming-soon__title[b-9p295lft23] {
    margin: 0;
    width: 100%;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 31.25px;
    line-height: 1.4;
    color: #171D27;
}

.mp-coming-soon__message[b-9p295lft23] {
    margin: 0;
    width: 100%;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #3C4C67;
}

@media (max-width: 640px) {
    .mp-coming-soon__title[b-9p295lft23] {
        font-size: 24px;
    }
}
/* /Components/Marketplace/MarketplaceFilterPanel.razor.rz.scp.css */
.mp-filter-panel[b-rcyj5sw3gt] {
    border-radius: 6px;
    padding: 16px 8px;
    box-sizing: border-box;
    font-family: 'Noto Sans', sans-serif;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mp-filter-panel__header[b-rcyj5sw3gt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 6px;
    margin-bottom: 0;
}

.mp-filter-panel__title[b-rcyj5sw3gt] {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #171D27;
    line-height: 1.4;
}

.mp-filter-panel__clear[b-rcyj5sw3gt] {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    line-height: 1.4;
}

.mp-filter-panel__clear.is-active[b-rcyj5sw3gt] {
    color: #296DF5;
}

.mp-filter-panel__clear.is-active:hover[b-rcyj5sw3gt] {
    text-decoration: underline;
}

.mp-filter-panel__clear.is-disabled[b-rcyj5sw3gt] {
    color: #D6DBE6;
    cursor: default;
}

.mp-filter-panel__search[b-rcyj5sw3gt] {
    position: relative;
    margin-bottom: 0;
    border-bottom: 1px solid #556C91;
}

.mp-filter-panel__search-icon[b-rcyj5sw3gt] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #8892A4;
    pointer-events: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mp-filter-panel__search-input[b-rcyj5sw3gt] {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 0;
    padding: 10px 10px 10px 38px;
    font-size: 16px;
    color: #171D27;
    box-sizing: border-box;
    outline: none;
    background: transparent;
}

.mp-filter-panel__search-input[b-rcyj5sw3gt]::placeholder {
    color: #9FAEC6;
}

.mp-filter-panel__tree[b-rcyj5sw3gt] {
    display: flex;
    flex-direction: column;
}

/* Loading skeleton — shown until the imported filter tree arrives, so labels never flash. */
.mp-filter-skeleton[b-rcyj5sw3gt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
}

.mp-filter-skeleton__row[b-rcyj5sw3gt] {
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F6F8FB 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: mp-filter-shimmer-b-rcyj5sw3gt 1.4s ease infinite;
}

.mp-filter-skeleton__row:nth-child(even)[b-rcyj5sw3gt] {
    width: 78%;
}

@keyframes mp-filter-shimmer-b-rcyj5sw3gt {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mp-filter-skeleton__row[b-rcyj5sw3gt] { animation: none; }
}

.mp-filter-ecosystem__header[b-rcyj5sw3gt],
.mp-filter-scope__header[b-rcyj5sw3gt],
.mp-filter-category[b-rcyj5sw3gt] {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
}

.mp-filter-ecosystem__header[b-rcyj5sw3gt] {
    min-height: 45px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #3C4C67;
}

.mp-filter-ecosystem.is-selected > .mp-filter-ecosystem__header[b-rcyj5sw3gt] {
    color: #296DF5;
}

.mp-filter-ecosystem__label[b-rcyj5sw3gt] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-filter-soon-tag[b-rcyj5sw3gt] {
    font-size: 12px;
    font-weight: 500;
    color: #FFFFFF;
    background: #0AA956;
    border-radius: 999px;
    padding: 0 10px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    flex-shrink: 0;
    white-space: nowrap;
}

.mp-filter-chevron[b-rcyj5sw3gt] {
    display: inline-flex;
    transition: transform 0.15s ease;
    color: #8892A4;
    flex-shrink: 0;
}

.mp-filter-chevron.is-open[b-rcyj5sw3gt] {
    transform: rotate(180deg);
}

.mp-filter-ecosystem__body[b-rcyj5sw3gt] {
    padding-left: 10px;
}

.mp-filter-scope__header[b-rcyj5sw3gt] {
    min-height: 45px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #3C4C67;
}

.mp-filter-scope.is-selected > .mp-filter-scope__header[b-rcyj5sw3gt] {
    color: #296DF5;
    font-weight: 600;
}

.mp-filter-scope__label[b-rcyj5sw3gt] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-filter-scope__items[b-rcyj5sw3gt] {
    display: flex;
    flex-direction: column;
    padding: 0 0 4px 16px;
}

.mp-filter-category[b-rcyj5sw3gt] {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 14px;
    color: #3C4C67;
    justify-content: flex-start;
}

.mp-filter-category.is-selected[b-rcyj5sw3gt] {
    color: #296DF5;
    font-weight: 600;
}

.mp-filter-category[b-rcyj5sw3gt]::before {
    content: "•";
    font-size: 14px;
    color: #3C4C67;
}

.mp-filter-category.is-selected[b-rcyj5sw3gt]::before {
    color: #296DF5;
}

.mp-filter-category__soon[b-rcyj5sw3gt] {
    margin-left: 4px;
    color: #9FAEC6;
    font-weight: 400;
    font-size: 12px;
}
/* /Components/Marketplace/MarketplaceProductCard.razor.rz.scp.css */
/* Figma 8237:110978 — standard card · 8258:117985 — coming soon card */
.agone-mp-product-card[b-p239sr7tlz] {
    background: #FFFFFF;
    border: 1px solid #D6DBE6;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    /* Baseline height keeps the grid uniform; the card may grow taller when the
       title/vendor/tag wrap on narrow widths so the footer button is never clipped. */
    min-height: 368px;
    font-family: 'Noto Sans', sans-serif;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}

.agone-mp-product-card.is-coming-soon[b-p239sr7tlz] {
}

.agone-mp-product-card:not(.is-coming-soon):hover[b-p239sr7tlz] {
    box-shadow: 0 2px 15px 2px rgba(142, 146, 152, 0.2);
    transform: translateY(-2px);
}

.agone-mp-product-card-content[b-p239sr7tlz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.agone-mp-product-card.is-coming-soon .agone-mp-product-card-content[b-p239sr7tlz] {
    flex: 1 1 auto;
    min-height: 0;
}

.agone-mp-product-card-info[b-p239sr7tlz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
}

.agone-mp-product-card-header[b-p239sr7tlz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.agone-mp-product-card-icon-wrapper[b-p239sr7tlz] {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(142, 146, 152, 0.3);
    overflow: hidden;
}

.agone-mp-product-card-icon-img[b-p239sr7tlz] {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

.agone-mp-product-card-coming-soon-badge[b-p239sr7tlz] {
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    background: #0AA956;
    border-radius: 999px;
    padding: 4px 16px;
    white-space: nowrap;
    line-height: 1.4;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.agone-mp-product-card-product-title-subtitle-container[b-p239sr7tlz] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    line-height: 1.4;
}

.agone-mp-product-card-product-title-text[b-p239sr7tlz] {
    font-size: 20px;
    font-weight: 600;
    color: #171D27;
    line-height: 140%;
    margin: 0;
    font-family: "Noto Sans";
    font-style: normal;
    overflow-wrap: break-word;
}

.agone-mp-product-card-product-subtitle-text[b-p239sr7tlz] {
    font-size: 14px;
    font-weight: 400;
    color: #3C4C67;
    line-height: 140%;
    font-family: "Noto Sans";
    font-style: normal;
    margin: 0;
    overflow-wrap: break-word;
}

.agone-mp-product-card-label-tag-container[b-p239sr7tlz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: #EBF3FF;
    border-radius: 4px;
    align-self: flex-start;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.agone-mp-product-card-label-tag-text[b-p239sr7tlz] {
    font-size: 12px;
    font-weight: 500;
    color: #083DA6;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

.agone-mp-product-card-product-description-text[b-p239sr7tlz] {
    font-size: 14px;
    font-weight: 400;
    color: #3C4C67;
    line-height: 1.4;
    margin: 0;
    height: 65px;
    min-height: 65px;
    max-height: 65px;
    flex-shrink: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Wide desktop only — cards are roomy enough for full description height */
@media (min-width: 1280px) {
    .agone-mp-product-card-content[b-p239sr7tlz] {
        overflow: visible;
    }

    .agone-mp-product-card-product-description-text[b-p239sr7tlz] {
        height: auto;
        min-height: 0;
        max-height: none;
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        overflow: visible;
        text-overflow: unset;
    }
}

.agone-mp-product-card-footer[b-p239sr7tlz] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    margin-top: auto;
}

.agone-btn-base-primary-large[b-p239sr7tlz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 24px;
    background: linear-gradient(165.07deg, #0A50DC 0%, #4D91FA 100%);
    border-radius: 999px;
    border: none;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: opacity 0.18s ease, box-shadow 0.18s ease, gap 0.18s ease;
}

.agone-btn-base-primary-large:hover[b-p239sr7tlz] {
    opacity: 0.92;
    box-shadow: 0 4px 16px rgba(10, 80, 220, 0.3);
    text-decoration: none;
}

/* White arrow appears only on hover */
.agone-btn-base-primary-large[b-p239sr7tlz]::after {
    content: '';
    display: block;
    width: 0;
    height: 10px;
    flex-shrink: 0;
    background: url('https://stragone.blob.core.windows.net/agonedesignsystemassets/LineIcons/General/Line-Arrow-Right-White.svg') no-repeat center / contain;
    opacity: 0;
    transition: width 0.18s ease, opacity 0.18s ease;
}

.agone-btn-base-primary-large:not(:disabled):hover[b-p239sr7tlz] {
    gap: 0px;
}

.agone-btn-base-primary-large:not(:disabled):hover[b-p239sr7tlz]::after {
    width: 15px;
    opacity: 1;
}

.agone-btn-base-primary-large-text[b-p239sr7tlz] {
    color: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.agone-btn-base-disabled-large[b-p239sr7tlz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    border: none;
    background: #D6DBE6;
    color: #9FAEC6;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: not-allowed;
    box-sizing: border-box;
}

/* Partner Product card — two service sub-buttons above the primary button (Figma 9836:155289).
   Active when "Partner Card Enabled"; muted/non-navigating otherwise. */
.agone-mp-product-card-sub-buttons[b-p239sr7tlz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-width: 0;
    margin-bottom: 16px;
}

.agone-mp-product-card-sub-button[b-p239sr7tlz] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #296DF5;
    cursor: pointer;
    transition: opacity 0.18s ease;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agone-mp-product-card-sub-button:hover[b-p239sr7tlz] {
    opacity: 0.8;
    text-decoration: none;
}

.agone-mp-product-card-sub-button.is-disabled[b-p239sr7tlz] {
    color: #9FAEC6;
    cursor: not-allowed;
    pointer-events: none;
}

.agone-mp-product-card-sub-divider[b-p239sr7tlz] {
    width: 1px;
    align-self: stretch;
    min-height: 20px;
    background: #E5E8F0;
    flex-shrink: 0;
}

/* Tablet / narrow catalogue cards — keep badge + buttons inside the card */
@media (max-width: 1279px) {
    .agone-mp-product-card[b-p239sr7tlz] {
        padding: 20px;
        gap: 20px;
    }

    .agone-mp-product-card-coming-soon-badge[b-p239sr7tlz] {
        font-size: 12px;
        padding: 4px 10px;
    }

    .agone-btn-base-primary-large[b-p239sr7tlz],
    .agone-btn-base-disabled-large[b-p239sr7tlz] {
        height: 44px;
        padding: 0 16px;
        font-size: 14px;
    }

    .agone-btn-base-primary-large-text[b-p239sr7tlz] {
        font-size: 14px;
    }

    .agone-mp-product-card-product-title-text[b-p239sr7tlz] {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .agone-mp-product-card-header[b-p239sr7tlz] {
        flex-wrap: wrap;
    }

    .agone-mp-product-card-coming-soon-badge[b-p239sr7tlz] {
        margin-left: auto;
    }
}
/* /Components/OverviewVideoPlayer.razor.rz.scp.css */
.ovp[b-po2j05uj3w] {
    --ovp-accent: #296DF5;
    --ovp-bar-height: 46px;
    position: relative;
    width: 100%;
    height: 100%;
    background: #000000;
    overflow: hidden;
    outline: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.ovp:focus-visible[b-po2j05uj3w] {
    box-shadow: 0 0 0 3px rgba(41, 109, 245, 0.55);
}

.ovp-surface[b-po2j05uj3w] {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.ovp-media[b-po2j05uj3w] {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: #000000;
    object-fit: contain;
}

/* ---- centre feedback -------------------------------------------------------------------- */

.ovp-flash[b-po2j05uj3w] {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: rgba(11, 27, 58, 0.62);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
}

.ovp-flash--back[b-po2j05uj3w] {
    left: 10%;
}

.ovp-flash--forward[b-po2j05uj3w] {
    right: 10%;
}

.ovp-flash.is-active[b-po2j05uj3w] {
    animation: ovp-flash-b-po2j05uj3w 0.6s ease-out;
}

@keyframes ovp-flash-b-po2j05uj3w {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.85);
    }

    25% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1);
    }
}

.ovp-spinner[b-po2j05uj3w] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    display: none;
    pointer-events: none;
}

.ovp.is-loading .ovp-spinner[b-po2j05uj3w] {
    display: block;
}

.ovp-spinner span[b-po2j05uj3w] {
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: ovp-spin-b-po2j05uj3w 0.9s linear infinite;
}

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

.ovp-error[b-po2j05uj3w] {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(11, 27, 58, 0.8);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
}

.ovp.has-error .ovp-error[b-po2j05uj3w] {
    display: flex;
}

/* ---- big play button -------------------------------------------------------------------- */

.ovp-big-play[b-po2j05uj3w] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: rgba(11, 27, 58, 0.32);
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s ease;
}

/* Only covers the frame before playback starts (and again once it ends); in between, the surface
   itself toggles playback so the control bar is never blocked. */
.ovp.has-started:not(.is-ended) .ovp-big-play[b-po2j05uj3w] {
    display: none;
}

.ovp-big-play-icon[b-po2j05uj3w] {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: #FFFFFF;
    transition: background 0.15s ease, transform 0.15s ease;
}

.ovp-big-play:hover .ovp-big-play-icon[b-po2j05uj3w] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* ---- controls --------------------------------------------------------------------------- */

.ovp-controls[b-po2j05uj3w] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 28px 12px 6px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.85) 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.ovp.is-controls-visible .ovp-controls[b-po2j05uj3w],
.ovp.is-paused .ovp-controls[b-po2j05uj3w],
.ovp:focus-within .ovp-controls[b-po2j05uj3w] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ---- scrub bar -------------------------------------------------------------------------- */

.ovp-scrub[b-po2j05uj3w] {
    position: relative;
    height: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
    outline: none;
}

.ovp-scrub-track[b-po2j05uj3w] {
    position: relative;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
    transition: height 0.12s ease;
}

.ovp-scrub:hover .ovp-scrub-track[b-po2j05uj3w],
.ovp-scrub:focus-visible .ovp-scrub-track[b-po2j05uj3w],
.ovp.is-scrubbing .ovp-scrub-track[b-po2j05uj3w] {
    height: 8px;
}

.ovp-scrub-buffered[b-po2j05uj3w],
.ovp-scrub-played[b-po2j05uj3w] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
}

.ovp-scrub-buffered[b-po2j05uj3w] {
    width: 0;
    background: rgba(255, 255, 255, 0.45);
}

.ovp-scrub-played[b-po2j05uj3w] {
    width: 0;
    background: var(--ovp-accent);
}

.ovp-scrub-handle[b-po2j05uj3w] {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(0);
    transition: transform 0.12s ease;
}

.ovp-scrub:hover .ovp-scrub-handle[b-po2j05uj3w],
.ovp-scrub:focus-visible .ovp-scrub-handle[b-po2j05uj3w],
.ovp.is-scrubbing .ovp-scrub-handle[b-po2j05uj3w] {
    transform: translateY(-50%) scale(1);
}

.ovp-scrub-tooltip[b-po2j05uj3w] {
    position: absolute;
    bottom: 22px;
    left: 0;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.85);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.ovp-scrub:hover .ovp-scrub-tooltip[b-po2j05uj3w],
.ovp.is-scrubbing .ovp-scrub-tooltip[b-po2j05uj3w] {
    opacity: 1;
}

/* ---- button row ------------------------------------------------------------------------- */

.ovp-bar[b-po2j05uj3w] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--ovp-bar-height);
    color: #FFFFFF;
}

.ovp-btn[b-po2j05uj3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.ovp-btn:hover[b-po2j05uj3w] {
    background: rgba(255, 255, 255, 0.16);
}

.ovp-btn:focus-visible[b-po2j05uj3w] {
    outline: 2px solid #FFFFFF;
    outline-offset: -2px;
}

.ovp-icon-pause[b-po2j05uj3w],
.ovp-icon-collapse[b-po2j05uj3w],
.ovp-icon-muted[b-po2j05uj3w] {
    display: none;
}

.ovp.is-playing .ovp-icon-pause[b-po2j05uj3w] {
    display: block;
}

.ovp.is-playing .ovp-icon-play[b-po2j05uj3w] {
    display: none;
}

.ovp.is-fullscreen .ovp-icon-collapse[b-po2j05uj3w] {
    display: block;
}

.ovp.is-fullscreen .ovp-icon-expand[b-po2j05uj3w] {
    display: none;
}

.ovp.is-muted .ovp-icon-muted[b-po2j05uj3w] {
    display: block;
}

.ovp.is-muted .ovp-icon-sound[b-po2j05uj3w] {
    display: none;
}

.ovp-volume[b-po2j05uj3w] {
    display: flex;
    align-items: center;
}

.ovp-volume-slider[b-po2j05uj3w] {
    width: 0;
    height: 18px;
    margin: 0;
    opacity: 0;
    accent-color: #FFFFFF;
    cursor: pointer;
    transition: width 0.16s ease, opacity 0.16s ease, margin 0.16s ease;
}

.ovp-volume:hover .ovp-volume-slider[b-po2j05uj3w],
.ovp-volume-slider:focus-visible[b-po2j05uj3w] {
    width: 72px;
    margin: 0 8px 0 2px;
    opacity: 1;
}

.ovp-time[b-po2j05uj3w] {
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ovp-spacer[b-po2j05uj3w] {
    flex: 1 1 auto;
}

/* ---- speed menu ------------------------------------------------------------------------- */

.ovp-speed[b-po2j05uj3w] {
    position: relative;
}

.ovp-btn--speed[b-po2j05uj3w] {
    width: auto;
    min-width: 40px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
}

.ovp-speed-menu[b-po2j05uj3w] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: 120px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(17, 24, 39, 0.96);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    display: none;
    flex-direction: column;
}

.ovp.is-menu-open .ovp-speed-menu[b-po2j05uj3w] {
    display: flex;
}

.ovp-speed-option[b-po2j05uj3w] {
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.ovp-speed-option:hover[b-po2j05uj3w] {
    background: rgba(255, 255, 255, 0.14);
}

.ovp-speed-option.is-active[b-po2j05uj3w] {
    color: var(--ovp-accent);
    font-weight: 700;
}

/* ---- fullscreen ------------------------------------------------------------------------- */

.ovp.is-fullscreen[b-po2j05uj3w] {
    border-radius: 0;
}

.ovp.is-fullscreen .ovp-media[b-po2j05uj3w] {
    object-fit: contain;
}

/* ---- responsive ------------------------------------------------------------------------- */

/* Large desktop — match Figma spacing (1440–1980) */
@media (min-width: 1440px) {
    .ovp[b-po2j05uj3w] {
        --ovp-bar-height: 46px;
    }

    .ovp-controls[b-po2j05uj3w] {
        padding: 28px 16px 8px;
    }

    .ovp-btn[b-po2j05uj3w] {
        width: 38px;
        height: 38px;
    }

    .ovp-big-play-icon[b-po2j05uj3w] {
        width: 76px;
        height: 76px;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .ovp[b-po2j05uj3w] {
        --ovp-bar-height: 44px;
    }

    .ovp-controls[b-po2j05uj3w] {
        padding: 24px 14px 6px;
    }

    .ovp-btn[b-po2j05uj3w] {
        width: 36px;
        height: 36px;
    }

    .ovp-big-play-icon[b-po2j05uj3w] {
        width: 68px;
        height: 68px;
    }
}

/* Small tablet / narrow laptop (769–1023) */
@media (min-width: 769px) and (max-width: 1023px) {
    .ovp[b-po2j05uj3w] {
        --ovp-bar-height: 42px;
    }

    .ovp-controls[b-po2j05uj3w] {
        padding: 22px 12px 6px;
    }

    .ovp-btn[b-po2j05uj3w] {
        width: 34px;
        height: 34px;
    }

    .ovp-btn svg[b-po2j05uj3w] {
        width: 20px;
        height: 20px;
    }

    .ovp-time[b-po2j05uj3w] {
        font-size: 12px;
        padding: 0 6px;
    }

    .ovp-big-play-icon[b-po2j05uj3w] {
        width: 64px;
        height: 64px;
    }

    .ovp-flash[b-po2j05uj3w] {
        padding: 12px 14px;
        font-size: 12px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .ovp[b-po2j05uj3w] {
        --ovp-bar-height: 40px;
    }

    .ovp-controls[b-po2j05uj3w] {
        padding: 18px 8px 4px;
    }

    .ovp-bar[b-po2j05uj3w] {
        gap: 1px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ovp-bar[b-po2j05uj3w]::-webkit-scrollbar {
        display: none;
    }

    .ovp-btn[b-po2j05uj3w] {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        border-radius: 6px;
    }

    .ovp-btn svg[b-po2j05uj3w] {
        width: 18px;
        height: 18px;
    }

    .ovp-btn--speed[b-po2j05uj3w] {
        min-width: 34px;
        padding: 0 6px;
        font-size: 11px;
    }

    .ovp-time[b-po2j05uj3w] {
        padding: 0 4px;
        font-size: 10px;
        flex-shrink: 0;
    }

    .ovp-volume[b-po2j05uj3w] {
        flex-shrink: 0;
    }

    .ovp-volume-slider[b-po2j05uj3w],
    .ovp-volume:hover .ovp-volume-slider[b-po2j05uj3w] {
        display: none;
    }

    .ovp-scrub[b-po2j05uj3w] {
        height: 22px;
    }

    .ovp-scrub-track[b-po2j05uj3w] {
        height: 6px;
    }

    .ovp-scrub:hover .ovp-scrub-track[b-po2j05uj3w],
    .ovp-scrub:focus-visible .ovp-scrub-track[b-po2j05uj3w],
    .ovp.is-scrubbing .ovp-scrub-track[b-po2j05uj3w] {
        height: 8px;
    }

    .ovp-scrub-handle[b-po2j05uj3w] {
        transform: translateY(-50%) scale(1);
    }

    .ovp-big-play-icon[b-po2j05uj3w] {
        width: 56px;
        height: 56px;
    }

    .ovp-big-play-icon svg[b-po2j05uj3w] {
        width: 28px;
        height: 28px;
    }

    .ovp-flash[b-po2j05uj3w] {
        padding: 10px 12px;
        font-size: 11px;
    }

    .ovp-flash svg[b-po2j05uj3w] {
        width: 20px;
        height: 20px;
    }

    .ovp-speed-menu[b-po2j05uj3w] {
        min-width: 108px;
        right: -4px;
    }

    .ovp-speed-option[b-po2j05uj3w] {
        padding: 7px 10px;
        font-size: 12px;
    }
}
/* /Components/PhoneNumberInput.razor.rz.scp.css */
/* ── Phone ── */
.rg-phone-wrap[b-e31a9hht98] {
    display: flex;
    align-items: center;
    height: 40px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rg-phone-wrap:focus-within[b-e31a9hht98] {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.rg-phone-wrap--error[b-e31a9hht98] {
    border-color: #EF4444 !important;
}

.rg-phone-flag[b-e31a9hht98] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 100%;
    flex-shrink: 0;
    cursor: pointer;
    border-right: 1px solid #E5E7EB;
}

.rg-phone-input[b-e31a9hht98] {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 12px;
    font-size: 13px;
    height: 100%;
    background: transparent;
}

.rg-phone-chevron[b-e31a9hht98] {
    font-size: 12px;
    color: #4B5563;
    user-select: none;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
}

.rg-phone-code[b-e31a9hht98] {
    color: #9CA3AF;
    font-weight: 400;
    font-size: 13px;
}

.rg-phone-input:focus[b-e31a9hht98] { outline: none; }

.rg-field-icon[b-e31a9hht98] {
    padding: 0 10px;
    font-size: 16px;
}

.rg-field-icon--error[b-e31a9hht98] { color: #EF4444; }

.phone-dropdown[b-e31a9hht98] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 999999; 
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}

.phone-item[b-e31a9hht98] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
}

.phone-item:hover[b-e31a9hht98] {
    background: #F3F4F6;
}

.phone-outer-wrapper[b-e31a9hht98] {
    position: relative;
    width: 100%;
}

/* Force Blazor.Flags CountryFlag to align inline */
.rg-phone-flag[b-e31a9hht98]  .flag,
.phone-item[b-e31a9hht98]  .flag {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 1;
}

.rg-phone-flag[b-e31a9hht98]  .flag img,
.phone-item[b-e31a9hht98]  .flag img {
    display: block;
    vertical-align: middle;
}
/* /Components/ProgressiveStepsBar.razor.rz.scp.css */
.stepper[b-8ezl7apz4u] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}
.stepper-track[b-8ezl7apz4u],
.stepper-progress[b-8ezl7apz4u] {
    position: absolute;
    left: 50px;
    right: 50px;
    height: 2px;
    top: 18px;
    z-index: 0;
}
.stepper-track[b-8ezl7apz4u] {
    background: #dbeafe;
}
.stepper-progress[b-8ezl7apz4u] {
    background: #296DF5;
    z-index: 1;
    transition: width 0.3s ease;
}
/* Step */
.step[b-8ezl7apz4u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 2;
    cursor: default;
}
.step--clickable[b-8ezl7apz4u] {
    cursor: pointer;
}
.step-circle[b-8ezl7apz4u] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dbeafe;
    color: #93c5fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.step--active .step-circle[b-8ezl7apz4u],
.step--done .step-circle[b-8ezl7apz4u] {
    background: #296DF5;
    color: #fff;
}
.step-label[b-8ezl7apz4u] {
    font-size: 0.78rem;
    color: #93c5fd;
    text-align: center;
}
.step--active .step-label[b-8ezl7apz4u],
.step--done .step-label[b-8ezl7apz4u] {
    color: #296DF5;
}
.step--clickable:hover .step-circle[b-8ezl7apz4u] {
    transform: scale(1.05);
    transition: transform 0.15s ease;
}
.step--clickable:hover .step-label[b-8ezl7apz4u] {
    color: #1d4ed8;
}
/* Overlay */
.modal-overlay[b-8ezl7apz4u] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
/* Modal Card */
.confirm-modal[b-8ezl7apz4u] {
    width: 480px;
    background: #ffffff;
    border-radius: 14px;
    padding: 32px 36px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
/* Icon */
.confirm-icon[b-8ezl7apz4u] {
    margin-bottom: 18px;
    display: flex;
    justify-content: center;
}
.confirm-icon svg[b-8ezl7apz4u] {
    filter: drop-shadow(0 6px 10px rgba(249, 115, 22, 0.25));
}
/* Title */
.confirm-title[b-8ezl7apz4u] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}
/* Message */
.confirm-message[b-8ezl7apz4u] {
    font-size: 0.92rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 28px;
}
/* Buttons Container */
.confirm-actions[b-8ezl7apz4u] {
    display: flex;
    gap: 14px;
    justify-content: center;
}
/* Cancel Button */
.btn-outline[b-8ezl7apz4u] {
    padding: 10px 28px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-outline:hover[b-8ezl7apz4u] {
    background: #f9fafb;
}
/* /Components/UserProfileDropdown.razor.rz.scp.css */
/* Figma: AG ONE Portal — Profile dropdown (node 5363:193313) */

.user-profile-dropdown[b-mlmg27l0cg] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.user-profile-dropdown__trigger[b-mlmg27l0cg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

.user-profile-dropdown__avatar[b-mlmg27l0cg] {
    border-radius: 50%;
    background: var(--gradient-default, linear-gradient(135deg, #296df5 0%, #7742ff 100%));
    color: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    user-select: none;
}

.user-profile-dropdown__avatar--trigger[b-mlmg27l0cg] {
    width: 32px;
    height: 32px;
    font-size: 11px;
}

.user-profile-dropdown__avatar--header[b-mlmg27l0cg] {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.user-profile-dropdown__avatar-image[b-mlmg27l0cg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-profile-dropdown__overlay[b-mlmg27l0cg] {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.user-profile-dropdown__panel[b-mlmg27l0cg] {
    position: absolute;
    top: 36px;
    right: 0;
    z-index: 101;
    width: 250px;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 5px 15px 2px rgba(137, 155, 182, 0.4);
    box-sizing: border-box;
}

.user-profile-dropdown__header[b-mlmg27l0cg] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

.user-profile-dropdown__info[b-mlmg27l0cg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    flex: 1;
}

.user-profile-dropdown__name[b-mlmg27l0cg] {
    width: 100%;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #171D27;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-profile-dropdown__email[b-mlmg27l0cg] {
    width: 100%;
    font-family: 'Noto Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    color: #3C4C67;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-profile-dropdown__role[b-mlmg27l0cg] {
    width: 100%;
    font-family: 'Noto Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    color: #296DF5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-profile-dropdown__menu[b-mlmg27l0cg] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.user-profile-dropdown__item[b-mlmg27l0cg] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 100px;
    padding: 8px 16px;
    border: none;
    background: #FFFFFF;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.12s ease;
}

.user-profile-dropdown__item:hover[b-mlmg27l0cg] {
    background: #F5F8FF;
}

.user-profile-dropdown__item-icon[b-mlmg27l0cg] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.user-profile-dropdown__item-label[b-mlmg27l0cg] {
    flex: 1;
    min-width: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #283243;
}
/* /Layout/MarketplaceHeader.razor.rz.scp.css */
/* ============================================================
   Marketplace Header — Shared navigation component
   Used on all Marketplace pages (Index, ProductCatalog, etc.)
   Figma hero  : Z5yWzWeJcaZBlwQ4yJSPZG  Node: 811-37497
   Figma light : Z5yWzWeJcaZBlwQ4yJSPZG  Node: 311-17019
   Figma nav   : Z5yWzWeJcaZBlwQ4yJSPZG  Nodes: 2488-95656, 2488-95955, 2488-95956
   ============================================================ */

/* ── Header shell (fixed layout height; flyout overlays content) ── */
.mp-header-shell[b-sw8js9jyec] {
    width: 100%;
    position: relative;
    z-index: 200;
    flex-shrink: 0;
    height: 75px;
    overflow: visible;
}

.mp-header-shell--onboarding[b-sw8js9jyec] {
    height: 65px;
    border-bottom: 0.5px solid #E5E8F0;
}

/* Unified nav + dropdown panel */
.mp-header-flyout[b-sw8js9jyec] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.mp-header-shell--light .mp-header-flyout[b-sw8js9jyec] {
    background: #FAFDFF;
}

.mp-header-shell--hero:not(.mp-header-shell--open) .mp-header-flyout[b-sw8js9jyec] {
    background: transparent;
}

.mp-header-shell--onboarding .mp-header-flyout[b-sw8js9jyec] {
    background: #FFFFFF;
}

.mp-header-shell .mp-header-flyout--open[b-sw8js9jyec] {
    background: #FFFFFF;
    box-shadow: 0 5px 15px 2px rgba(137, 155, 182, 0.4);
}

/* ── Base nav bar row ── */
.mp-nav[b-sw8js9jyec] {
    width: 100%;
    height: 75px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    background: transparent;
}

.mp-nav--onboarding[b-sw8js9jyec] {
    height: 65px;
    padding: 16px 72px;
}

/* Logo */
.mp-logo[b-sw8js9jyec] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.mp-logo-img[b-sw8js9jyec] {
    width: 130px;
    height: 42px;
    object-fit: contain;
    transition: opacity 0.25s ease;
}

.mp-logo-img--onboarding[b-sw8js9jyec] {
    width: 146px;
    height: 32px;
}

/* Nav links — centered between logo and right-side controls */
.mp-links[b-sw8js9jyec] {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.mp-nav-menu[b-sw8js9jyec] {
    position: relative;
}

.mp-nav-trigger[b-sw8js9jyec] {
    padding: 10px 12px;
    border-radius: 4px;
    background: transparent;
    border: none;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 22.4px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease, border-radius 0.25s ease, padding 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: inherit;
}

.mp-nav-trigger--active[b-sw8js9jyec] {
    background: #EBF3FF;
    color: #052970;
    font-weight: 600;
    border-radius: 8px;
    padding: 10px 16px;
}

.mp-nav-chevron[b-sw8js9jyec] {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}

.mp-nav-trigger--active .mp-nav-chevron[b-sw8js9jyec] {
    transform: rotate(180deg);
}

/* Hero: white triggers */
.mp-header-shell--hero:not(.mp-header-shell--open) .mp-nav-trigger[b-sw8js9jyec] {
    color: #FFFFFF;
}

.mp-header-shell--hero:not(.mp-header-shell--open) .mp-nav-trigger:hover[b-sw8js9jyec] {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

/* Light: dark navy triggers */
.mp-header-shell--light .mp-nav-trigger[b-sw8js9jyec] {
    color: #283243;
}

.mp-header-shell--light .mp-nav-trigger:hover[b-sw8js9jyec] {
    background: rgba(41, 109, 245, 0.08);
    color: #296DF5;
}

/* When dropdown open on hero, switch to dark text on white panel */
.mp-header-shell--hero.mp-header-shell--open .mp-nav-trigger[b-sw8js9jyec] {
    color: #283243;
}

.mp-header-shell--hero.mp-header-shell--open .mp-nav-trigger:hover[b-sw8js9jyec] {
    background: rgba(41, 109, 245, 0.08);
    color: #296DF5;
}

.mp-header-shell--hero.mp-header-shell--open .mp-nav-trigger--active[b-sw8js9jyec] {
    background: #EBF3FF;
    color: #052970;
}

/* Right-side actions */
.mp-nav-actions[b-sw8js9jyec] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

/* ── Log In button ── */
.mp-login-btn[b-sw8js9jyec] {
    width: 120px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0 24px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}

.mp-login-btn:hover[b-sw8js9jyec] {
    opacity: 0.88;
}

.mp-header-shell--hero:not(.mp-header-shell--open) .mp-login-btn[b-sw8js9jyec] {
    background: linear-gradient(180deg, #F5F7F9 0%, #E5E8F0 100%);
    color: #296DF5;
}

.mp-header-shell--light .mp-login-btn[b-sw8js9jyec],
.mp-header-shell--hero.mp-header-shell--open .mp-login-btn[b-sw8js9jyec] {
    background: linear-gradient(135deg, #0A50DC 0%, #4D91FA 100%);
    color: #FFFFFF;
}

/* ── Icon buttons (cart, bell) ── */
.mp-icon-btn[b-sw8js9jyec] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    border-radius: 6px;
    transition: opacity 0.2s ease;
}

.mp-icon-btn:hover[b-sw8js9jyec] {
    opacity: 0.75;
}

.mp-icon[b-sw8js9jyec] {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
    transition: opacity 0.25s ease;
}

.mp-notif-btn[b-sw8js9jyec] {
    position: relative;
}

.mp-badge[b-sw8js9jyec] {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    background: #E53935;
    color: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-sizing: border-box;
    pointer-events: none;
}

/* Right-side controls cluster (login / user icons + mobile toggle) */
.mp-nav-end[b-sw8js9jyec] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Hamburger — home hero mobile only */
.mp-menu-toggle[b-sw8js9jyec] {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.mp-menu-toggle:hover[b-sw8js9jyec] {
    background: rgba(255, 255, 255, 0.22);
}

.mp-menu-bar[b-sw8js9jyec] {
    display: block;
    width: 18px;
    height: 2px;
    background: #FFFFFF;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mp-nav--menu-open .mp-menu-bar:nth-child(1)[b-sw8js9jyec] {
    transform: translateY(7px) rotate(45deg);
}

.mp-nav--menu-open .mp-menu-bar:nth-child(2)[b-sw8js9jyec] {
    opacity: 0;
}

.mp-nav--menu-open .mp-menu-bar:nth-child(3)[b-sw8js9jyec] {
    transform: translateY(-7px) rotate(-45deg);
}

.mp-menu-backdrop[b-sw8js9jyec] {
    display: none;
}

/* ── Home hero: mobile navigation ── */
@media (max-width: 768px) {
    .mp-nav--hero[b-sw8js9jyec] {
        padding: 0 16px;
        height: auto;
        min-height: 60px;
        flex-wrap: wrap;
        align-items: center;
        z-index: 300;
    }

    .mp-nav--hero .mp-logo-img[b-sw8js9jyec] {
        width: 108px;
        height: 34px;
    }

    .mp-nav--hero .mp-login-btn[b-sw8js9jyec] {
        width: auto;
        min-width: 88px;
        height: 36px;
        padding: 0 18px;
        font-size: 13px;
    }

    .mp-nav--hero .mp-user-controls[b-sw8js9jyec] {
        gap: 16px;
    }

    .mp-nav--hero .mp-menu-toggle[b-sw8js9jyec] {
        display: flex;
    }

    .mp-nav--hero .mp-links--hero-mobile[b-sw8js9jyec] {
        display: none;
        flex: none;
        order: 10;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0 16px;
        margin: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .mp-nav--hero.mp-nav--menu-open .mp-links--hero-mobile[b-sw8js9jyec] {
        display: flex;
    }

    .mp-nav--hero .mp-links--hero-mobile .mp-link[b-sw8js9jyec],
    .mp-nav--hero .mp-links--hero-mobile .mp-support-btn[b-sw8js9jyec] {
        width: 100%;
        justify-content: flex-start;
        padding: 14px 4px;
        font-size: 15px;
        border-radius: 8px;
    }

    .mp-nav--hero .mp-menu-backdrop[b-sw8js9jyec] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: -1;
        border: none;
        background: rgba(4, 20, 60, 0.35);
        backdrop-filter: blur(2px);
        cursor: pointer;
    }
}

@media (max-width: 480px) {
    .mp-nav--hero .mp-logo-img[b-sw8js9jyec] {
        width: 96px;
        height: 30px;
    }

    .mp-nav--hero .mp-login-btn[b-sw8js9jyec] {
        min-width: 76px;
        padding: 0 14px;
    }
}

/* ── Full-width dropdown panel (part of unified flyout) ── */
.mp-header-dropdown[b-sw8js9jyec] {
    position: relative;
    padding: 20px 80px;
    background: transparent;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    box-sizing: border-box;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.mp-header-dropdown--visible[b-sw8js9jyec] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mp-dropdown-grid[b-sw8js9jyec] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mp-dropdown-row[b-sw8js9jyec] {
    display: flex;
    gap: 24px;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

/* Cell wrapper — grows and shrinks equally, always sharing the available width */
.mp-dropdown-cell[b-sw8js9jyec] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

/* Child item fills its cell completely */
.mp-dropdown-cell[b-sw8js9jyec]  .mp-dropdown-item {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
}

/* 1 item — left-aligned, capped at 1/3 of the row width */
.mp-dropdown-row.mp-dropdown-row--solo[b-sw8js9jyec] {
    justify-content: flex-start;
}

.mp-dropdown-row.mp-dropdown-row--solo .mp-dropdown-cell[b-sw8js9jyec] {
    flex: 0 0 calc((100% - 48px) / 3);
    width: calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
    min-width: 0;
}

/* 2 items — each takes half the row width (handled automatically by flex: 1 1 0) */
/* 3 items — each takes one third of the row width (handled automatically by flex: 1 1 0) */

/* Direct-item fallback for any items rendered without a .mp-dropdown-cell wrapper */
.mp-dropdown-row .mp-dropdown-item[b-sw8js9jyec],
.mp-dropdown-row[b-sw8js9jyec]  .mp-dropdown-item {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
}

.mp-dropdown-item[b-sw8js9jyec] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.25s ease;
    font-family: 'Noto Sans', sans-serif;
}

[b-sw8js9jyec] .mp-dropdown-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.25s ease;
    font-family: 'Noto Sans', sans-serif;
}

.mp-dropdown-item:hover[b-sw8js9jyec],
[b-sw8js9jyec] .mp-dropdown-item:hover {
    background: #F0F5FF;
}

.mp-dropdown-item:hover .mp-dropdown-item-icon-wrap[b-sw8js9jyec],
[b-sw8js9jyec] .mp-dropdown-item:hover .mp-dropdown-item-icon-wrap {
    background: #E0EBFF;
}

.mp-dropdown-item:hover .mp-dropdown-item-title[b-sw8js9jyec],
[b-sw8js9jyec] .mp-dropdown-item:hover .mp-dropdown-item-title {
    color: #296DF5;
}

.mp-dropdown-item-icon-wrap[b-sw8js9jyec],
[b-sw8js9jyec] .mp-dropdown-item-icon-wrap {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: #EFF2F5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease;
}

.mp-dropdown-item-icon[b-sw8js9jyec],
[b-sw8js9jyec] .mp-dropdown-item-icon {
    width: 22px;
    height: 20px;
    display: block;
}

.mp-dropdown-item-text[b-sw8js9jyec],
[b-sw8js9jyec] .mp-dropdown-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mp-dropdown-item-title[b-sw8js9jyec],
[b-sw8js9jyec] .mp-dropdown-item-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #283243;
    transition: color 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-dropdown-item-desc[b-sw8js9jyec],
[b-sw8js9jyec] .mp-dropdown-item-desc {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #3C4C67;
    white-space: normal;
    word-break: break-word;
}

/* ── Account menu grouped layout ── */
.mp-dropdown-account[b-sw8js9jyec] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mp-dropdown-group[b-sw8js9jyec] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-dropdown-subheader[b-sw8js9jyec] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B7A90;
    padding: 0 20px;
}

.mp-dropdown-row--account[b-sw8js9jyec] {
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* ── Responsiveness (AC-11) ── */
@media (max-width: 1200px) {
    .mp-nav[b-sw8js9jyec],
    .mp-header-dropdown[b-sw8js9jyec] {
        padding-left: 40px;
        padding-right: 40px;
    }

    .mp-links[b-sw8js9jyec] {
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .mp-nav[b-sw8js9jyec] {
        padding: 0 24px;
    }

    .mp-header-dropdown[b-sw8js9jyec] {
        padding: 16px 24px;
    }

    .mp-links[b-sw8js9jyec] {
        gap: 16px;
    }

    .mp-nav-trigger[b-sw8js9jyec] {
        font-size: 14px;
        padding: 8px 10px;
    }

    .mp-nav-trigger--active[b-sw8js9jyec] {
        padding: 8px 12px;
    }

    .mp-dropdown-row[b-sw8js9jyec] {
        flex-direction: column;
        gap: 8px;
    }

    .mp-dropdown-cell[b-sw8js9jyec],
    .mp-dropdown-row.mp-dropdown-row--solo .mp-dropdown-cell[b-sw8js9jyec] {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
    }

    .mp-dropdown-row .mp-dropdown-item[b-sw8js9jyec],
    .mp-dropdown-row[b-sw8js9jyec]  .mp-dropdown-item,
    .mp-dropdown-row--account .mp-dropdown-item[b-sw8js9jyec],
    .mp-dropdown-row--account[b-sw8js9jyec]  .mp-dropdown-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .mp-dropdown-row.mp-dropdown-row--solo[b-sw8js9jyec] {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .mp-links[b-sw8js9jyec] {
        display: none;
    }

    .mp-header-dropdown[b-sw8js9jyec] {
        display: none;
    }
}

/* ============================================================
   Mobile navigation drawer (right-side, tree-style submenus)
   Opens from the hamburger toggle on small screens.
   ============================================================ */
.mp-drawer-root[b-sw8js9jyec] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow: hidden;
    pointer-events: none;
}

@media (max-width: 768px) {
    .mp-drawer-root[b-sw8js9jyec] {
        display: block;
    }
}

.mp-drawer-root--open[b-sw8js9jyec] {
    pointer-events: auto;
}

.mp-drawer-backdrop[b-sw8js9jyec] {
    position: absolute;
    inset: 0;
    background: rgba(4, 20, 60, 0.35);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.mp-drawer-root--open .mp-drawer-backdrop[b-sw8js9jyec] {
    opacity: 1;
    pointer-events: auto;
}

.mp-drawer[b-sw8js9jyec] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(86vw, 344px);
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 30px rgba(15, 35, 75, 0.18);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.mp-drawer-root--open .mp-drawer[b-sw8js9jyec] {
    transform: translateX(0);
}

/* ── Drawer header ── */
.mp-drawer-header[b-sw8js9jyec] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #EDF1F7;
    flex-shrink: 0;
}

.mp-drawer-logo-link[b-sw8js9jyec] {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.mp-drawer-logo[b-sw8js9jyec] {
    width: 104px;
    height: 32px;
    object-fit: contain;
}

.mp-drawer-close[b-sw8js9jyec] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #F2F5FA;
    color: #283243;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.mp-drawer-close:hover[b-sw8js9jyec] {
    background: #E3EBF6;
    color: #296DF5;
}

/* ── Drawer nav (scrollable list of branches) ── */
.mp-drawer-nav[b-sw8js9jyec] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 12px 12px;
    -webkit-overflow-scrolling: touch;
}

.mp-drawer-section[b-sw8js9jyec] {
    border-bottom: 1px solid #F1F4F9;
}

.mp-drawer-section:last-child[b-sw8js9jyec] {
    border-bottom: none;
}

/* Top-level branch (Explore / Company / Support / Account) */
.mp-drawer-branch[b-sw8js9jyec] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #283243;
    text-align: left;
    transition: background 0.2s ease, color 0.2s ease;
}

.mp-drawer-branch:hover[b-sw8js9jyec] {
    background: rgba(41, 109, 245, 0.06);
}

.mp-drawer-section--open > .mp-drawer-branch[b-sw8js9jyec] {
    color: #296DF5;
}

.mp-drawer-branch-chevron[b-sw8js9jyec] {
    flex-shrink: 0;
    transition: transform 0.25s ease;
    color: #6B7A90;
}

.mp-drawer-section--open > .mp-drawer-branch .mp-drawer-branch-chevron[b-sw8js9jyec] {
    transform: rotate(180deg);
    color: #296DF5;
}

/* ── Tree of child items ── */
.mp-drawer-children[b-sw8js9jyec] {
    display: none;
    flex-direction: column;
    margin: 0 0 8px 22px;
    padding-left: 14px;
    border-left: 1.5px solid #DCE4F0;
}

.mp-drawer-section--open > .mp-drawer-children[b-sw8js9jyec] {
    display: flex;
}

.mp-drawer-subhead[b-sw8js9jyec] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B7A90;
    padding: 8px 4px 4px 14px;
}

/* Leaf row + horizontal connector to the tree trunk */
.mp-drawer-leaf[b-sw8js9jyec] {
    position: relative;
}

.mp-drawer-leaf[b-sw8js9jyec]::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 28px;
    width: 12px;
    height: 1.5px;
    background: #DCE4F0;
}

/* Compact the shared dropdown item inside the tree */
.mp-drawer-children[b-sw8js9jyec]  .mp-dropdown-item {
    padding: 10px 12px;
    gap: 12px;
    border-radius: 8px;
}

.mp-drawer-children[b-sw8js9jyec]  .mp-dropdown-item-icon-wrap {
    width: 36px;
    height: 36px;
}

.mp-drawer-children[b-sw8js9jyec]  .mp-dropdown-item-icon {
    width: 18px;
    height: 16px;
}

.mp-drawer-children[b-sw8js9jyec]  .mp-dropdown-item-title {
    font-size: 14px;
}

.mp-drawer-children[b-sw8js9jyec]  .mp-dropdown-item-desc {
    font-size: 11px;
}

/* ── Drawer footer (Log In CTA) ── */
.mp-drawer-footer[b-sw8js9jyec] {
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #EDF1F7;
    flex-shrink: 0;
}

.mp-drawer-login[b-sw8js9jyec] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0A50DC 0%, #4D91FA 100%);
    color: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}

.mp-drawer-login:hover[b-sw8js9jyec] {
    opacity: 0.9;
}
/* /Layout/PricingGateCard.razor.rz.scp.css */
/* ============================================================
   PricingGateCard — Reusable anonymous pricing teaser card
   ============================================================ */

.pgc-wrap[b-v1vam4by5t] {
    display: flex;
    justify-content: center;
    padding: 0;
    width: 100%;
}

.pgc-card[b-v1vam4by5t] {
    width: 100%;
    background: linear-gradient(180deg, #F0F7FF 0%, #E2EDFC 100%);
    border: 1px solid #BFDBFE;
    border-radius: 16px;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    box-sizing: border-box;
    font-family: 'Noto Sans', sans-serif;
}

.pricing-header[b-v1vam4by5t] {
    font-weight: 600;
    font-size: 26px;
    line-height: 130%;
    color: #0A50DC;
    text-align: center;
    margin: 0;
}

.pricing-details[b-v1vam4by5t] {
    font-weight: 500;
    font-size: 15px;
    line-height: 140%;
    color: #296DF5;
    text-align: center;
    margin: 0 0 8px 0;
}

.pricing-button[b-v1vam4by5t] {
    height: 48px;
    min-width: 180px;
    background: #296DF5;
    border: none;
    border-radius: 24px;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 36px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: 'Noto Sans', sans-serif;
}

.pricing-button:hover[b-v1vam4by5t] {
    background: #0A50DC;
    box-shadow: 0 4px 12px rgba(41, 109, 245, 0.2);
}

.pricing-button:active[b-v1vam4by5t] {
    transform: scale(0.98);
}
/* /Pages/AboutAgOne.razor.rz.scp.css */
/* ─── Page Shell ─────────────────────────────────────────────────────────── */
.about-page[b-nqyc4at3aa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f5faff;
    min-height: 100vh;
    isolation: isolate;
}

/* ─── Utility colour helpers ─────────────────────────────────────────────── */
.tc-darker[b-nqyc4at3aa] {
    color: #052970;
}

.tc-primary[b-nqyc4at3aa] {
    color: #296df5;
}

.tc-gradient[b-nqyc4at3aa] {
    background: linear-gradient(159.43deg, #0a50dc 2.48%, #08e1ed 61.51%, #e2f76e 103.21%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tc-gradient-2[b-nqyc4at3aa] {
    background: linear-gradient(159.19deg, #0a50dc 2.48%, #08e1ed 61.51%, #e2f76e 103.21%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.about-hero[b-nqyc4at3aa] {
    position: relative;
    width: 100%;
    z-index: 4;
}

/* Background image — fills the hero band */
.about-hero-bg[b-nqyc4at3aa] {
    height: 650px;
    width: 100%;
    position: relative;
}

    .about-hero-bg img[b-nqyc4at3aa],
    .about-hero-bg svg[b-nqyc4at3aa] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
        user-select: none;
    }

/* Text block floats above the background */
.about-hero-text[b-nqyc4at3aa] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
    padding: 140px 120px 0;
    pointer-events: none;
}

.about-hero-titles[b-nqyc4at3aa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* "Meet Nexa" — gradient H1 */
.about-hero-line1[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 61.04px;
    font-weight: 700;
    line-height: 1.24;
    white-space: nowrap;
    margin: 0;
    background: linear-gradient(150.69deg, #0a50dc 2.48%, #08e1ed 61.51%, #e2f76e 103.21%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* "the Agentic AI that helps you figure it out" */
.about-hero-line2[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 48.83px;
    font-weight: 700;
    line-height: 1.24;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
}

/* Body copy under the headline */
.about-hero-body[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.4;
    color: #171d27;
    width: 100%;
    pointer-events: auto;
}

    .about-hero-body p[b-nqyc4at3aa] {
        margin: 0;
    }

    .about-hero-body strong[b-nqyc4at3aa] {
        font-weight: 700;
    }

/* ─── Deliver Section ────────────────────────────────────────────────────── */
.about-deliver[b-nqyc4at3aa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 200px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
}

.about-deliver-inner[b-nqyc4at3aa] {
    width: 100%;
    max-width: 976px;
}

/* Section header */
.about-deliver-header[b-nqyc4at3aa] {
    text-align: center;
    padding-bottom: 24px;
}

.about-deliver-title[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 48.83px;
    font-weight: 700;
    line-height: 1.24;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 8px;
}

.about-deliver-subtitle[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #3c4c67;
    margin: 0;
}

/* ─── Feature Cards — Sticky Stack ──────────────────────────────────────── */
/*
 * Each card shares .about-stack as its sticky bounding ancestor.
 * All cards stick at the same top offset → each new card slides up from below
 * and covers the previous one (z-index 1→4 ascending).
 * margin-bottom on cards 1-3 provides the scroll distance for each transition.
 * Math: at the moment card 4 sticks, card 4's natural position = its sticky
 * position → smooth exit as the section scrolls away with only card 4 visible.
 */
.about-stack[b-nqyc4at3aa] {
    display: flex;
    flex-direction: column;
    /* no gap — spacing comes from margin-bottom on each card */
}

.about-stack-card[b-nqyc4at3aa] {
    position: sticky;
    top: 80px;
    display: flex;
    gap: 40px;
    align-items: center;
    padding: 32px 40px;
    border-radius: 12px;
    border: 1px solid #c4dafd;
    background-color: #ffffff;
    box-shadow: 0 6px 32px rgba(41, 109, 245, 0.10);
}

/* z-index: later cards appear on top; margin-bottom = scroll space per transition */
.acw-1[b-nqyc4at3aa] { z-index: 1; margin-bottom: 30px; }
.acw-2[b-nqyc4at3aa] { z-index: 2; margin-bottom: 30px; }
.acw-3[b-nqyc4at3aa] { z-index: 3; margin-bottom: 30px; }
.acw-4[b-nqyc4at3aa] { z-index: 4; margin-bottom: 30px; }

.about-stack-icon[b-nqyc4at3aa] {
    width: 100px;
    height: 100px;
    object-fit: cover;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.about-stack-text[b-nqyc4at3aa] {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.about-stack-title[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.4;
    color: #171d27;
    margin: 0;
}

.about-stack-desc[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #3c4c67;
    margin: 0;
}

/* ─── How AG ONE Section ─────────────────────────────────────────────────── */
.about-how[b-nqyc4at3aa] {
    background: #f5faff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 120px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* Inner container: 1178px wide to fit 5 cards exactly */
.about-how-inner[b-nqyc4at3aa] {
    width: 1178px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.about-how-header[b-nqyc4at3aa] {
    text-align: center;
}

.about-how-title[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 48.83px;
    font-weight: 700;
    line-height: 1.24;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 8px;
    text-align: center;
}

.about-how-subtitle[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #3c4c67;
    margin: 0;
    text-align: center;
}

/* ─── Steps Row ──────────────────────────────────────────────────────────── */
/*
 * Cards are flex:1 so they fill the row at any viewport width.
 * At ≥1440px the container is 1178px → each card ≈210px (Figma spec).
 * At 1024-1280px the container shrinks and cards shrink proportionally.
 * Overflow-x:auto is kept as a safety net for very narrow screens.
 */
.about-steps-row[b-nqyc4at3aa] {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .about-steps-row[b-nqyc4at3aa]::-webkit-scrollbar {
        display: none;
    }

/* ─── Step Card ──────────────────────────────────────────────────────────── */
.about-step-card[b-nqyc4at3aa] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 24px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 270px;
    height: auto;
    border: 1px solid #d6dbe6;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 5px rgba(69, 74, 146, 0.2);
    overflow: hidden;
    box-sizing: border-box;
    /* initial state: hidden (opacity only — card animation is opacity-only per Figma) */
    opacity: 0;
}

/* Ghost step number — positioned top-right, clips at card edge */
.about-step-num[b-nqyc4at3aa] {
    position: absolute;
    top: -4px;
    right: -8px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 120px;
    font-weight: 900;
    line-height: 1;
    color: #ebf3ff;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* Icon circle + icon */
.about-step-icon-wrap[b-nqyc4at3aa] {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

/* Gradient circle — CSS-only, no external image needed */
.about-step-icon-circle[b-nqyc4at3aa] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(135deg, #1a5cf8 0%, #38bdf8 100%);
    display: block;
}

.about-step-icon-img[b-nqyc4at3aa] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    object-fit: contain;
    z-index: 1;
}

/* Text */
.about-step-text[b-nqyc4at3aa] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.about-step-title[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.4;
    color: #171d27;
    margin: 0;
}

.about-step-desc[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3c4c67;
    margin: 0;
}

/* ─── Arrow between steps ────────────────────────────────────────────────── */
.about-step-arrow[b-nqyc4at3aa] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    align-self: stretch;
    flex-shrink: 0;
    opacity: 0;
}

.about-step-arrow-img[b-nqyc4at3aa] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    /* Figma: source image is an upward chevron; rotate 90° clockwise → points right */
}

/* ─── Animation ──────────────────────────────────────────────────────────── */
/*
 * Matches Figma motion spec:
 *   - Step cards: fade in (opacity 0→1) with a slight upward lift, ease-in-out.
 *   - Arrows: fade in (opacity 0→1) + slide in from the left (translateX),
 *     mirroring the Figma kf translate: 432px→674px (rightward slide).
 *
 * Pattern: elements are HIDDEN by default (static CSS).  When JS adds
 * .is-visible the animation rule kicks in from scratch, replaying every time
 * the class is re-added after the section has scrolled out of view.
 */
/*
 * Cards — Figma spec: opacity 0→1 only (ease-in-out, 0.3s).
 * No translateY; the Figma step-container keyframes contain only opacity.
 */
@keyframes about-step-card-in-b-nqyc4at3aa {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*
 * Arrows — Figma spec: opacity 0→1 AND translate ≈200px rightward (ease-in-out, 0.3s).
 * The arrow travels ~one card-width from behind the previous card into position.
 * Canvas deltas: 190px→380px (+190px), 432px→674px (+242px), 916px→1158px (+242px).
 * Using -200px as a representative relative offset in the flex row.
 */
@keyframes about-step-arrow-in-b-nqyc4at3aa {
    from {
        opacity: 0;
        transform: translateX(-200px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Default hidden state — snaps back instantly (off-screen) when .is-visible
   is removed, ready for the animation to replay on the next scroll-in. */
.about-step-card[b-nqyc4at3aa] {
    opacity: 0;
}

.about-step-arrow[b-nqyc4at3aa] {
    opacity: 0;
    transform: translateX(-200px);
}

/* Animate in when .is-visible is present */
.about-steps-row.is-visible .about-step-card[b-nqyc4at3aa] {
    animation: about-step-card-in-b-nqyc4at3aa 0.65s ease-in-out both;
}

.about-steps-row.is-visible .about-step-arrow[b-nqyc4at3aa] {
    animation: about-step-arrow-in-b-nqyc4at3aa 0.65s ease-in-out both;
}

/* Staggered delays — card fades in, then arrow slides right, then next card, etc. */
.sc-1[b-nqyc4at3aa] { animation-delay: 0ms; }
.sa-1[b-nqyc4at3aa] { animation-delay: 300ms; }
.sc-2[b-nqyc4at3aa] { animation-delay: 550ms; }
.sa-2[b-nqyc4at3aa] { animation-delay: 850ms; }
.sc-3[b-nqyc4at3aa] { animation-delay: 1100ms; }
.sa-3[b-nqyc4at3aa] { animation-delay: 1400ms; }
.sc-4[b-nqyc4at3aa] { animation-delay: 1650ms; }
.sa-4[b-nqyc4at3aa] { animation-delay: 1950ms; }
.sc-5[b-nqyc4at3aa] { animation-delay: 2200ms; }

/* ─── Copyright Footer ───────────────────────────────────────────────────── */
.about-copyright[b-nqyc4at3aa] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 32px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.about-copyright-text[b-nqyc4at3aa] {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #8c9ebb;
    white-space: nowrap;
    margin: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .about-deliver[b-nqyc4at3aa] {
        padding: 80px 120px;
    }

    /* Minimal horizontal padding so the 5-card row fits without horizontal scroll */
    .about-how[b-nqyc4at3aa] {
        padding: 80px 40px 100px;
    }

    .about-step-title[b-nqyc4at3aa] {
        font-size: 20px;
    }

    .about-step-num[b-nqyc4at3aa] {
        font-size: 100px;
    }
}

@media (max-width: 1024px) {
    .about-hero-text[b-nqyc4at3aa] {
        padding: 100px 60px 0;
    }

    .about-hero-line1[b-nqyc4at3aa] {
        font-size: 48px;
    }

    .about-hero-line2[b-nqyc4at3aa] {
        font-size: 36px;
        white-space: normal;
        justify-content: center;
        flex-wrap: wrap;
    }

    .about-hero-body[b-nqyc4at3aa] {
        font-size: 20px;
    }

    .about-deliver[b-nqyc4at3aa] {
        padding: 60px 60px;
    }

    .about-deliver-title[b-nqyc4at3aa],
    .about-how-title[b-nqyc4at3aa] {
        font-size: 36px;
        white-space: normal;
        justify-content: center;
    }

    /* Tight horizontal padding → inner container fills ~992px → each card ~173px */
    .about-how[b-nqyc4at3aa] {
        padding: 60px 16px 80px;
    }

    .about-how-inner[b-nqyc4at3aa] {
        padding-top: 60px;
        gap: 36px;
    }

    .about-step-card[b-nqyc4at3aa] {
        padding: 20px 12px;
        gap: 12px;
    }

    .about-step-title[b-nqyc4at3aa] {
        font-size: 17px;
    }

    .about-step-num[b-nqyc4at3aa] {
        font-size: 86px;
    }

    .about-step-arrow[b-nqyc4at3aa] {
        width: 24px;
        min-width: 24px;
    }

    .about-step-arrow-img[b-nqyc4at3aa] {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 768px) {
    .about-hero-bg[b-nqyc4at3aa] {
        height: 520px;
    }

    .about-hero-text[b-nqyc4at3aa] {
        padding: 80px 24px 0;
        gap: 24px;
    }

    .about-hero-line1[b-nqyc4at3aa] {
        font-size: 36px;
        white-space: normal;
    }

    .about-hero-line2[b-nqyc4at3aa] {
        font-size: 28px;
        white-space: normal;
        justify-content: center;
        flex-wrap: wrap;
    }

    .about-hero-body[b-nqyc4at3aa] {
        font-size: 16px;
    }

    .about-deliver[b-nqyc4at3aa] {
        padding: 48px 24px;
    }

    .about-deliver-title[b-nqyc4at3aa],
    .about-how-title[b-nqyc4at3aa] {
        font-size: 28px;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .about-deliver-subtitle[b-nqyc4at3aa],
    .about-how-subtitle[b-nqyc4at3aa] {
        font-size: 16px;
    }

    .about-stack-icon[b-nqyc4at3aa] {
        width: 72px;
        height: 72px;
    }

    .about-stack-title[b-nqyc4at3aa] {
        font-size: 20px;
    }

    .about-stack-card[b-nqyc4at3aa] {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px;
        /* tighter scroll distance on small screens */
        margin-bottom: 100px;
    }

    .about-stack-card.acw-4[b-nqyc4at3aa] {
        margin-bottom: 0;
    }

    .about-how[b-nqyc4at3aa] {
        padding-bottom: 80px;
    }

    .about-how-inner[b-nqyc4at3aa] {
        padding: 48px 24px 0;
        gap: 32px;
    }

    .about-step-card[b-nqyc4at3aa] {
        width: 180px;
        min-width: 180px;
        height: auto;
        min-height: 240px;
    }

    .about-step-num[b-nqyc4at3aa] {
        font-size: 90px;
    }

    .about-step-title[b-nqyc4at3aa] {
        font-size: 18px;
    }
}
/* /Pages/Admin/Appointments.razor.rz.scp.css */
.appointments-page[b-ssv0boyfry] {
    background: #FFFFFF;
    font-family: Segoe UI, sans-serif;
}

.appointments-content[b-ssv0boyfry] {
    padding: 30px;
}

.subtitle[b-ssv0boyfry] {
    color: #6b7280;
    margin-bottom: 20px;
}

/* Tabs */

.tabs[b-ssv0boyfry] {
    display: flex;
    align-items: center;
    gap: 30px; 
    border-bottom: 1px solid #e5e7eb;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Each tab */

.tab-item[b-ssv0boyfry] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    cursor: pointer;
    color: #6b7280;
    position: relative;
    font-size: 14px;
    line-height: 1;
}
    /* Active tab */
    .tab-item.active[b-ssv0boyfry] {
        color: #2563eb;
        font-weight: 600;
    }

.tab-item .icon[b-ssv0boyfry] {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-item .icon img[b-ssv0boyfry] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
    filter: grayscale(100%) brightness(0.6);
    transition: 0.2s;
}
.tab-item .count[b-ssv0boyfry] {
    background: #e5e7eb;
    color: #374151;
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 50px;
}
.tab-item.active .icon img[b-ssv0boyfry] {
    filter: invert(32%) sepia(98%) saturate(1500%) hue-rotate(210deg) brightness(95%);
}
/* Active tab */

.tab-item.active[b-ssv0boyfry] {
    color: #2563eb;
    font-weight: 600;
}
.tab-item.active[b-ssv0boyfry]::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2563eb;
}
.card-grid[b-ssv0boyfry] {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 24px;
}



.card[b-ssv0boyfry] {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    transition: all .2s ease;
}
    .card:hover[b-ssv0boyfry] {
        border-color: #cbd5e1;
        transform: translateY(-2px);
    }

.appointment-card-header[b-ssv0boyfry] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 0;
    border-bottom: none;
}

.product-title[b-ssv0boyfry] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

/* Badge */

.badge[b-ssv0boyfry] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    width: 110px;
    text-align: center;
    border: none !important;
}

    .badge.pending[b-ssv0boyfry] {
        background: #FEF3C7;
        color: #92400E;
    }

    .badge.upcoming[b-ssv0boyfry] {
        background: #dbeafe;
        color: #2563eb;
    }

    .badge.cancelled[b-ssv0boyfry] {
        background: #FFD6D6;
        color: #800000;
    }
    .badge.past[b-ssv0boyfry] {
        background: #EFF2F5;
        color: #3C4C67;
    }


/* Info row (icon + text) */


.info[b-ssv0boyfry] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    color: #334155;
    font-size: 15.5px;
    font-weight: 500;
}

    

    /* Icon wrapper */
    .info .icon[b-ssv0boyfry] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-top: 2px;
    }
        .info .icon img[b-ssv0boyfry] {
            width: 20px;
            height: 20px;
            filter: invert(37%) sepia(87%) saturate(2171%) hue-rotate(210deg) brightness(97%) contrast(97%);
        }

.timezone[b-ssv0boyfry] {
    color: #6b7280;
    font-size: 13.5px;
    margin-left: 0;
    margin-top: 4px;
}

/* Meeting Link */


.meeting-link[b-ssv0boyfry] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: #2563eb;
    font-size: 15px;
    text-decoration: none;
}

    .meeting-link:hover[b-ssv0boyfry] {
        text-decoration: underline;
    }


.actions[b-ssv0boyfry] {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #E2E8F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reschedule[b-ssv0boyfry] {
    color: #2563eb;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: opacity 0.2s;
}
.reschedule:hover[b-ssv0boyfry] {
    opacity: 0.8;
}

.cancel[b-ssv0boyfry] {
    color: #EF4444;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    margin-left: auto;
    transition: opacity 0.2s;
}
.cancel:hover[b-ssv0boyfry] {
    opacity: 0.8;
}
.empty-state[b-ssv0boyfry] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #9ca3af;
    text-align: center;
}

.empty-icon[b-ssv0boyfry] {
    width: 60px;
    height: 60px;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

    /* icon inside */
    .empty-icon img[b-ssv0boyfry] {
        width: 22px;
        height: 22px;
        object-fit: contain;
        /* ✅ same blue tone like UI */
        filter: invert(34%) sepia(90%) saturate(1400%) hue-rotate(210deg);
    }
.modal-overlay[b-ssv0boyfry] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal[b-ssv0boyfry] {
    background: white;
    width: 480px;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modal h4[b-ssv0boyfry] {
    font-size: 15px;
    font-weight: 600;
    color: #1F2937;
    margin-top: 24px;
    margin-bottom: 12px;
}

.modal-header[b-ssv0boyfry] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3[b-ssv0boyfry] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.close-btn[b-ssv0boyfry] {
    cursor: pointer;
    font-size: 20px;
    color: #6B7280;
    transition: color 0.2s;
}
.close-btn:hover[b-ssv0boyfry] {
    color: #1F2937;
}

.modal-subtitle[b-ssv0boyfry] {
    color: #4B5563;
    font-size: 14px;
    margin-top: 6px;
    margin-bottom: 20px;
}

/* Red highlight box */
.cancel-card[b-ssv0boyfry] {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.checkbox[b-ssv0boyfry] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    font-size: 14.5px;
    font-weight: 500;
    color: #4B5563;
    cursor: pointer;
}

.info-box[b-ssv0boyfry] {
    margin-top: 24px;
    border: 1px solid #BFDBFE;
    background: #EFF6FF;
    border-radius: 6px;
    color: #1E3A8A;
    padding: 12px 16px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.info-box img[b-ssv0boyfry] {
    width: 16px;
    height: 16px;
}


.modal-actions[b-ssv0boyfry] {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}


.btn-cancel[b-ssv0boyfry] {
    padding: 10px 24px;
    border: 1px solid #cbd5e1;
    background: white;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    color: #334155;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-cancel:hover[b-ssv0boyfry] {
    background: #F8FAFC;
}


.btn-confirm[b-ssv0boyfry] {
    background: #f87171;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.btn-confirm:hover[b-ssv0boyfry] {
    opacity: 0.9;
}

    .btn-confirm:disabled[b-ssv0boyfry] {
        background: #E2E8F0;
        color: #94A3B8;
        cursor: not-allowed;
    }


.other-textbox[b-ssv0boyfry] {
    width: 100%;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 20px;
    color: #1F2937;
}
.other-textbox[b-ssv0boyfry]::placeholder {
    color: #94A3B8;
}
.other-textbox:focus[b-ssv0boyfry] {
    border-color: #2563eb;
    outline: none;
}

.reschedule-card[b-ssv0boyfry] {
    border: 1px solid #D6DBE6;
    background-color: #F5F7F9;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 28px;
}

.form-row[b-ssv0boyfry] {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group[b-ssv0boyfry] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .form-group label[b-ssv0boyfry] {
        font-weight: 500;
        font-size: 14px;
        color: #1f2937;
        margin-bottom: 5px;
    }

    .form-group input:not([type="text"])[b-ssv0boyfry] {
        /* This prevents styling the MudBlazor internal input which is type="text" */
    }

    /* Size for the custom SVG icon in MudDatePicker */
    [b-ssv0boyfry] .mud-input-adornment-start svg {
        width: 15px !important;
        height: 15px !important;
    }
    
    /* Font size for the MudDatePicker text field */
    [b-ssv0boyfry] .mud-input-slot {
        font-size: 14px !important;
    }

    /* Glow effect on hover/focus for native time input */
    .form-group input[type="time"]:hover[b-ssv0boyfry],
    .form-group input[type="time"]:focus[b-ssv0boyfry] {
        border-color: #74A9FB;
        box-shadow: 0 0 5px #74A9FB;
        outline: none;
    }

    /* Glow effect on hover/focus for MudDatePicker */
    [b-ssv0boyfry] .mud-input-outlined:hover .mud-input-outlined-border,
    [b-ssv0boyfry] .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
        border-color: #74A9FB !important;
        box-shadow: 0 0 5px #74A9FB !important;
    }

/* Blue confirm button */
.btn-confirm-blue[b-ssv0boyfry] {
    padding: 10px 20px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 6px;
}

    .btn-confirm-blue:disabled[b-ssv0boyfry] {
        background: #9ca3af;
        cursor: not-allowed;
    }
.loader[b-ssv0boyfry] {
    width: 14px;
    height: 14px;
    border: 2px solid white;
    border-top: 2px solid transparent;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    animation: spin-b-ssv0boyfry 0.8s linear infinite;
}

@keyframes spin-b-ssv0boyfry {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
.time-block[b-ssv0boyfry] {
    display: flex;
    flex-direction: column;
}

.time-range[b-ssv0boyfry] {
    color: #1f2937;
    font-size: 15px;
    line-height: 1.3;
}

.timezone[b-ssv0boyfry] {
    color: #6b7280;
    font-size: 13px;
    margin-top: 2px;
}
.timezone[b-ssv0boyfry] {
    margin-left: 28px;
}



.product-row[b-ssv0boyfry],
.time-row[b-ssv0boyfry] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-row[b-ssv0boyfry] {
    margin-top: 10px;
}

.summary-icon[b-ssv0boyfry] {
    width: 20px;
    height: 20px;
}

.product-name[b-ssv0boyfry] {
    font-weight: 600;
    font-size: 18px;
}
.cancel-product-row[b-ssv0boyfry],
.cancel-time-row[b-ssv0boyfry] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cancel-time-row[b-ssv0boyfry] {
    margin-top: 12px;
    color: #ff1f1f;
}

.cancel-product-name[b-ssv0boyfry] {
    color: #ff1f1f;
    font-size: 18px;
    font-weight: 600;
}

.cancel-icon[b-ssv0boyfry] {
    width: 20px;
    height: 20px;
}

.checkbox input[type="checkbox"][b-ssv0boyfry] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    cursor: pointer;
}


/* /Pages/Admin/AppointmentsAdminView.razor.rz.scp.css */
.appointments-container[b-7f7tl8ljn7] {
    padding: 24px;
    background: #f8fafc;
}
.page-header[b-7f7tl8ljn7] {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
}
.page-header h2[b-7f7tl8ljn7] {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #1f2937;
}

.page-header p[b-7f7tl8ljn7] {
    color: #64748b;
    margin-top: 5px;
}

.stats-grid[b-7f7tl8ljn7] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.stat-card[b-7f7tl8ljn7] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

    .stat-card h3[b-7f7tl8ljn7] {
        margin: 0;
        font-size: 24px;
    }

.stat-label[b-7f7tl8ljn7] {
    color: #64748b;
    font-size: 13px;
}

.stat-icon[b-7f7tl8ljn7] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.total[b-7f7tl8ljn7] {
    background: #e0ecff;
}

.pending[b-7f7tl8ljn7] {
    background: #fff4d6;
}

.confirmed[b-7f7tl8ljn7] {
    background: #dcfce7;
}

.completed[b-7f7tl8ljn7] {
    background: #e2e8f0;
}

.cancelled[b-7f7tl8ljn7] {
    background: var(--Color-Red-50, #FFD6D6);
}
.toolbar[b-7f7tl8ljn7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.search-box[b-7f7tl8ljn7] {
    width: 350px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
}

.table-wrapper[b-7f7tl8ljn7] {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #dde4ef;
    width: 100%;
}

.appointment-table[b-7f7tl8ljn7] {
    width: 100%;
    table-layout: fixed;
}

    .appointment-table thead[b-7f7tl8ljn7] {
        background: linear-gradient( to right, #5ea2ff, #4f8df7 );
        color: white;
    }

    .appointment-table th[b-7f7tl8ljn7] {
        padding: 14px;
        text-align: left;
        font-weight: 600;
    }

    .appointment-table td[b-7f7tl8ljn7] {
        padding: 14px;
        border-bottom: 1px solid #eef2f7;
    }

    .appointment-table tbody tr:hover[b-7f7tl8ljn7] {
        background: #f8fafc;
    }

.status-pill[b-7f7tl8ljn7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    width: 110px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
}
.pending-confirmation[b-7f7tl8ljn7] {
    background: #f5e5a6;
    color: #866500;
}

.upcoming[b-7f7tl8ljn7] {
    background: #14b85a;
    color: white;
}

.completed[b-7f7tl8ljn7] {
    background: #d9dce3;
    color: #596273;
}

.cancelled[b-7f7tl8ljn7] {
    background: #FFD6D6;
    color: #800000;
}

.past[b-7f7tl8ljn7] {
    background: #EFF2F5;
    color: #3C4C67;
}

.action-btn[b-7f7tl8ljn7] {
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 5px;
}

.confirm[b-7f7tl8ljn7] {
    background: #16a34a;
    color: white;
}

.reject[b-7f7tl8ljn7] {
    background: #dc2626;
    color: white;
}

.edit[b-7f7tl8ljn7] {
    background: #f59e0b;
    color: white;
}

.complete[b-7f7tl8ljn7] {
    background: #2563eb;
    color: white;
}

.sort-icon[b-7f7tl8ljn7],
.filter-icon[b-7f7tl8ljn7] {
    float: right;
    font-size: 12px;
    opacity: .8;
}

.appointment-table thead[b-7f7tl8ljn7] {
    background: linear-gradient( 135deg, #69a7ff, #538df3 );
}

.appointment-table th[b-7f7tl8ljn7] {
    color: white;
    font-weight: 600;
    padding: 16px;
    border-right: 1px solid rgba(255,255,255,.25);
}

.stat-card[b-7f7tl8ljn7] {
    background: white;
    border: 1px solid #d7dde8;
    border-radius: 16px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all .2s;
}
.stat-card:hover[b-7f7tl8ljn7] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.search-container[b-7f7tl8ljn7] {
    position: relative;
}
.search-icon[b-7f7tl8ljn7] {
    position: absolute;
    left: 15px;
    top: 13px;
    /* color: #64748b; */
    z-index: 2;
}
.search-box[b-7f7tl8ljn7] {
    width: 420px;
    height: 44px;
    padding-left: 42px;
    border: 1px solid #d2d8e5;
    border-radius: 8px;
    background: white;
}
.appointment-table thead tr[b-7f7tl8ljn7] {
    background: linear-gradient( 90deg, #6ea8ff, #5a95f5 );
}
.action-icons[b-7f7tl8ljn7] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.icon-btn[b-7f7tl8ljn7] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    color: #475569;
    transition: all .2s ease;
}
.icon-btn:hover[b-7f7tl8ljn7] {
    color: #2563eb;
    transform: scale(1.1);
}
.icon-btn i[b-7f7tl8ljn7] {
    font-size: 18px;
}
.appointment-table th[b-7f7tl8ljn7] {
    color: white;
    font-weight: 600;
    font-size: 14px;
    padding: 16px;
    text-align: left;
    border-right: 1px solid rgba(255,255,255,.2);
}
.appointment-table th:last-child[b-7f7tl8ljn7] {
    border-right: none;
}
.table-footer[b-7f7tl8ljn7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    border-top: 1px solid #e5e7eb;
    background: white;
}
.table-info[b-7f7tl8ljn7] {
    color: #7f8ea3;
    font-size: 14px;
}
.pagination[b-7f7tl8ljn7] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-btn[b-7f7tl8ljn7] {
    width: 38px;
    height: 38px;
    border: 1px solid #d7dde8;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    color: #455468;
    font-size: 14px;
    transition: all .2s ease;
}
.page-btn:hover[b-7f7tl8ljn7] {
    background: #f3f6fb;
}
.page-btn.active[b-7f7tl8ljn7] {
    background: #4f8df7;
    color: white;
    border-color: #4f8df7;
}
.page-btn:disabled[b-7f7tl8ljn7] {
    opacity: .45;
    cursor: not-allowed;
}
.clickable-row[b-7f7tl8ljn7] {
    cursor: pointer;
}
.clickable-row:hover[b-7f7tl8ljn7] {
    background: #f6f9ff !important;
}
.modal-overlay[b-7f7tl8ljn7] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.details-modal[b-7f7tl8ljn7] {
    width: 720px;
    max-width: 95vw;
    max-height: 90vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.details-modal .status-pill[b-7f7tl8ljn7] {
    width: 127px;
    height: 25px;
    opacity: 1;
}
.section-divider[b-7f7tl8ljn7] {
    border: 0;
    border-top: 1px solid #E5E7EB;
    margin: 24px 0;
}
.modal-header[b-7f7tl8ljn7] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: white;
    border-bottom: 1px solid #E5E7EB;
}
.modal-header h3[b-7f7tl8ljn7] {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}
.modal-content[b-7f7tl8ljn7] {
    padding: 0 32px 32px;
    overflow-y: auto;
    flex: 1;
}
.close-modal[b-7f7tl8ljn7] {
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
    color: #6b7280;
}
.modal-content h4[b-7f7tl8ljn7] {
    color: #316CFF;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
}
.info-grid[b-7f7tl8ljn7] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 28px;
    margin-bottom: 20px;
}
.info-grid span:not(.status-pill)[b-7f7tl8ljn7] {
    display: block;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 4px;
}
.info-grid span:not(.status-pill)[b-7f7tl8ljn7] {
    display: block;
    margin-bottom: 4px;
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #667085;
}
.cancel-title[b-7f7tl8ljn7] {
    color: #ff2f2f !important;
}
.cancel-section p[b-7f7tl8ljn7] {
    color: #4b5563;
}
.assignee-row[b-7f7tl8ljn7] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}
.assignee-row strong[b-7f7tl8ljn7] {
    margin: 0;
}
.reassign-btn img[b-7f7tl8ljn7] {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}
.reassign-btn[b-7f7tl8ljn7] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #316CFF;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    cursor: pointer;
}
.notes-section[b-7f7tl8ljn7] {
    margin-top: 20px;
}
.notes-content[b-7f7tl8ljn7] {
    color: #4b5563;
    line-height: 1.8;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.note-item[b-7f7tl8ljn7] {
    margin-bottom: 5px;
}
.note-item h5[b-7f7tl8ljn7] {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #1F2937;
}
.note-item ul[b-7f7tl8ljn7] {
    margin: 0;
    padding-left: 20px;
}
.note-item li[b-7f7tl8ljn7] {
    margin-bottom: 4px;
    color: #4B5563;
    font-size: 15px;
}
.note-item li[b-7f7tl8ljn7],
.sub-note[b-7f7tl8ljn7] {
    overflow-wrap: anywhere;
}
.toolbar-actions[b-7f7tl8ljn7] {
    display: flex;
    align-items: center;
    gap: 20px; /* space between filter and refresh */
    margin-right: 12px;
}
.icon-action[b-7f7tl8ljn7] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-action img[b-7f7tl8ljn7] {
    width: 22px;
    height: 22px;
}
.drawer-overlay[b-7f7tl8ljn7] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    z-index: 9999;
}
.filter-drawer[b-7f7tl8ljn7] {
    position: absolute;
    right: 0;
    top: 0;
    width: 420px;
    height: 100vh;
    background: white;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,.12);
}
.drawer-header[b-7f7tl8ljn7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px;
    border-bottom: 1px solid #eef2f7;
}
.drawer-header h3[b-7f7tl8ljn7] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
}
.drawer-close[b-7f7tl8ljn7] {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 22px;
}
.drawer-body[b-7f7tl8ljn7] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}
.field-group[b-7f7tl8ljn7] {
    margin-bottom: 24px;
}
.field-group label[b-7f7tl8ljn7] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}
.field-group select[b-7f7tl8ljn7] {
    width: 100%;
    height: 44px;
    border: 1px solid #cfd8ea;
    border-radius: 8px;
    padding: 0 14px;
}
.drawer-footer[b-7f7tl8ljn7] {
    border-top: 1px solid #eef2f7;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.clear-btn[b-7f7tl8ljn7] {
    border: none;
    background: none;
    color: #667085;
    cursor: pointer;
}
.cancel-btn[b-7f7tl8ljn7] {
    height: 42px;
    padding: 0 22px;
    background: white;
    border: 1px solid #cfd8ea;
    border-radius: 8px;
    margin-right: 10px;
}
.apply-btn[b-7f7tl8ljn7] {
    height: 42px;
    padding: 0 26px;
    background: #316cff;
    color: white;
    border: none;
    border-radius: 8px;
}
/* CUSTOM FILTER DROPDOWNS & POPUPS */

.dropdown-field[b-7f7tl8ljn7] {
    height: 44px;
    border: 1px solid #D2D8E5;
    border-radius: 8px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #64748B;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dropdown-field:hover[b-7f7tl8ljn7] {
    border-color: #316cff;
}

.dropdown-field span[b-7f7tl8ljn7] {
    color: #64748B;
    font-weight: 400;
}

.dropdown-arrow[b-7f7tl8ljn7] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-arrow svg path[b-7f7tl8ljn7] {
    stroke: #64748B;
    transition: stroke 0.15s ease;
}

.dropdown-field:hover .dropdown-arrow svg path[b-7f7tl8ljn7] {
    stroke: #316cff;
}

/* Floating Popups */
.filter-popup[b-7f7tl8ljn7] {
    position: absolute;
    right: 100%;
    margin-right: 16px;
    width: 250px;
    background: #fff;
    border: 1px solid #E6EBF5;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 1px 8px rgba(0, 0, 0, 0.04);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-popup[b-7f7tl8ljn7] {
    top: 145px;
}

.status-popup[b-7f7tl8ljn7] {
    top: 243px;
}

.assignee-popup[b-7f7tl8ljn7] {
    top: 341px;
}

.popup-options-list[b-7f7tl8ljn7] {
    max-height: 240px;
    overflow-y: auto;
    padding: 8px 0;
}

.filter-option[b-7f7tl8ljn7] {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.filter-option:hover[b-7f7tl8ljn7] {
    background: #f8fafc;
}

/* Custom Premium Checkbox Styling */
.filter-option input[type="checkbox"][b-7f7tl8ljn7] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid #CBD5E1;
    border-radius: 6px;
    background-color: #fff;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
}

.filter-option input[type="checkbox"]:checked[b-7f7tl8ljn7] {
    background-color: #316cff;
    border-color: #316cff;
}

.filter-option input[type="checkbox"]:checked[b-7f7tl8ljn7]::after {
    content: "";
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.filter-text[b-7f7tl8ljn7] {
    font-size: 14px;
    color: #334155;
    font-weight: 500;
}

.popup-footer[b-7f7tl8ljn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid #F1F5F9;
    background: #fff;
}

.reset-link[b-7f7tl8ljn7] {
    border: none;
    background: transparent;
    color: #94A3B8;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}

.reset-link:hover[b-7f7tl8ljn7] {
    color: #64748B;
    text-decoration: underline;
}

.mini-apply[b-7f7tl8ljn7] {
    width: 88px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: #316CFF;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.mini-apply:hover[b-7f7tl8ljn7] {
    background: #1e53d6;
}
.request-actions[b-7f7tl8ljn7] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    margin-top: 24px;
    border-top: 1px solid #E5E7EB;
    background: #fff;
    position: sticky;
    bottom: 0;
}

.request-btn[b-7f7tl8ljn7] {
    min-width: 140px;
    height: 42px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
}

.confirm-btn[b-7f7tl8ljn7] {
    background: #316CFF;
    color: #fff;
}
    .confirm-btn:hover[b-7f7tl8ljn7] {
        background: #2557d6;
    }

.cancel-btn[b-7f7tl8ljn7] {
    background: #fff;
    color: #DC2626;
    border: 1px solid #FCA5A5;
}

    .cancel-btn:hover[b-7f7tl8ljn7] {
        background: #FEF2F2;
    }
.confirm-modal[b-7f7tl8ljn7] {
    width: 780px;
    max-width: 90vw;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

.confirm-header[b-7f7tl8ljn7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 32px 0;
}

    .confirm-header h3[b-7f7tl8ljn7] {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
    }

.confirm-description[b-7f7tl8ljn7] {
    padding: 8px 32px 24px;
    color: #475569;
    font-size: 16px;
    line-height: 1.5;
}

.confirm-body[b-7f7tl8ljn7] {
    padding: 0 32px 32px;
}

    .confirm-body label[b-7f7tl8ljn7] {
        display: block;
        margin-bottom: 10px;
        font-weight: 600;
        color: #1f2937;
    }

.meeting-url-input[b-7f7tl8ljn7] {
    width: 100%;
    height: 52px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 15px;
}

.confirm-footer[b-7f7tl8ljn7] {
    border-top: 1px solid #E5E7EB;
    padding: 24px 32px;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.confirm-submit-btn[b-7f7tl8ljn7] {
    background: #316CFF;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-loader[b-7f7tl8ljn7] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin-b-7f7tl8ljn7 .8s linear infinite;
}
@keyframes spin-b-7f7tl8ljn7 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
.confirm-submit-btn:hover[b-7f7tl8ljn7] {
    background: #2557d6;
}
.cancel-confirm-modal[b-7f7tl8ljn7] {
    width: 500px;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

.confirm-body[b-7f7tl8ljn7] {
    padding: 24px 32px;
}

    .confirm-body p[b-7f7tl8ljn7] {
        margin: 0;
        color: #475569;
        line-height: 1.6;
    }

.confirm-footer[b-7f7tl8ljn7] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 32px;
    border-top: 1px solid #E5E7EB;
}

.secondary-btn[b-7f7tl8ljn7] {
    background: white;
    border: 1px solid #D0D5DD;
    color: #344054;
    border-radius: 8px;
    padding: 10px 18px;
    cursor: pointer;
}

.danger-btn[b-7f7tl8ljn7] {
    background: #D92D20;
    border: none;
    color: white;
    border-radius: 8px;
    padding: 10px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-loader[b-7f7tl8ljn7] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin-b-7f7tl8ljn7 .8s linear infinite;
}
@keyframes spin-b-7f7tl8ljn7 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
.validation-error[b-7f7tl8ljn7] {
    color: #dc2626;
    font-size: 13px;
    margin-top: 6px;
}


.send-email-btn[b-7f7tl8ljn7] {
    height: 38px;
    min-width: 100px;
    background: linear-gradient(135deg, #0A50DC 50%, #4D91FA 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    transition: all 200ms linear;
    justify-content: center;
}

    .send-email-btn:disabled[b-7f7tl8ljn7] {
        opacity: .5;
        cursor: not-allowed;
    }

.checkbox-column[b-7f7tl8ljn7] {
    width: 60px;
    text-align: center;
}

.custom-checkbox[b-7f7tl8ljn7] {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: #0A50DC; /* Purple color */
    vertical-align: middle;
}

.date-filter-select[b-7f7tl8ljn7] {
    width: 100%;
    height: 44px;
    border: 1px solid #dce3eb;
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    font-size: 14px;
}

.date-range-section[b-7f7tl8ljn7] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.datetime-field[b-7f7tl8ljn7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .datetime-field span[b-7f7tl8ljn7] {
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
    }

    .datetime-field input[b-7f7tl8ljn7] {
        width: 100%;
        height: 42px;
        padding: 0 12px;
        border: 1px solid #dce3eb;
        border-radius: 8px;
        font-size: 14px;
        background: white;
    }

.range-card[b-7f7tl8ljn7] {
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #dcedff;
    border-radius: 12px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

    .range-card:hover[b-7f7tl8ljn7] {
        background: #f0f7ff;
        border-color: #316cff;
        box-shadow: 0 2px 8px rgba(49, 108, 255, 0.08);
    }

.range-input[b-7f7tl8ljn7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .range-input label[b-7f7tl8ljn7] {
        font-size: 13px;
        font-weight: 600;
        color: #1f2937;
        letter-spacing: 0.3px;
    }

    .range-input input[b-7f7tl8ljn7] {
        width: 100%;
        height: 40px;
        padding: 8px 12px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 14px;
        background: white;
        color: #1f2937;
        transition: all 0.2s ease;
    }

        .range-input input:hover[b-7f7tl8ljn7] {
            border-color: #94a3b8;
            background: #fafbfc;
        }

        .range-input input:focus[b-7f7tl8ljn7] {
            outline: none;
            border-color: #316cff;
            background: white;
            box-shadow: 0 0 0 3px rgba(49, 108, 255, 0.1);
        }

        .range-input input[b-7f7tl8ljn7]::placeholder {
            color: #94a3b8;
        }

        .range-input input[type="datetime-local"][b-7f7tl8ljn7] {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

.range-divider[b-7f7tl8ljn7] {
    text-align: center;
    margin: 8px 0;
    color: #94a3b8;
}
.status-action-row[b-7f7tl8ljn7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.mark-complete-btn[b-7f7tl8ljn7] {
    background: #22c55e;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .mark-complete-btn:hover[b-7f7tl8ljn7] {
        background: #16a34a;
    }

    .mark-complete-btn:disabled[b-7f7tl8ljn7] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .mark-complete-btn[b-7f7tl8ljn7],
    .mark-complete-btn *[b-7f7tl8ljn7],
    .mark-complete-btn span[b-7f7tl8ljn7] {
        color: #fff !important;
    }
/* /Pages/Admin/MasterTenant/Wallet.razor.rz.scp.css */
/* Scoped styles for Wallet.razor - moved verbatim from inline <style> (Phase 3.3c batch 2). */
    .wallet-page[b-h7pnlgai4r] {
        padding: 24px;
        min-height: calc(100vh - 65px);
        background: linear-gradient(to bottom, #F5F7FF, #EFF3FF);
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .wallet-header[b-h7pnlgai4r] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .wallet-title[b-h7pnlgai4r] {
        font-size: 25px;
        font-weight: 700;
        color: #171D27;
        margin: 0;
        line-height: 1.3;
    }

    .wallet-subtitle[b-h7pnlgai4r] {
        font-size: 16px;
        font-weight: 400;
        color: #3C4C67;
        margin: 0;
    }

    .wallet-body[b-h7pnlgai4r] {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .coming-soon-text[b-h7pnlgai4r] {
        font-size: 39px;
        font-weight: 700;
        color: #8C9EBB;
    }

    .wallet-footer[b-h7pnlgai4r] {
        text-align: center;
        font-size: 12px;
        color: #8C9EBB;
        background: #FFFFFF;
        padding: 16px 24px;
        margin: 0 -24px -24px;
    }
/* /Pages/Admin/NotificationSettings.razor.rz.scp.css */
/* Scoped styles for NotificationSettings.razor - moved verbatim from inline <style> (Phase 3.3c batch 2). */
    .border-b[b-idzfst1tgw] { border-bottom: 1px solid #E5E7EB; }
/* /Pages/Admin/Settings/Company.razor.rz.scp.css */
/* Scoped styles for Company.razor - moved verbatim from inline <style> (Phase 3.3c batch 2). */
    .border-b[b-1axlpa1s37] { border-bottom: 1px solid #E5E7EB; }
/* /Pages/CampaignPage.razor.rz.scp.css */
.campaign-page-host[b-llmr9f51o5] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: #FFFFFF;
}

/* Loading / not-found states sit centred below the header. */
.campaign-page-status[b-llmr9f51o5] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
}
/* /Pages/Cart.razor.rz.scp.css */
/* ============================================================
   Cart / Checkout Wizard
   ============================================================ */

.cart-page[b-oks66osu6g] {
    min-height: 100vh;
    background: #f4f6fb;
    display: flex;
    flex-direction: column;
}

.cart-header-wrap[b-oks66osu6g] {
    position: sticky;
    top: 0;
    z-index: 200;
    overflow: visible;
}

/* ── Loading ── */
.cart-loading[b-oks66osu6g] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

/* ── Empty State ── */
.cart-empty[b-oks66osu6g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    gap: 16px;
}

.cart-empty-icon[b-oks66osu6g] {
    color: #c5ccd8;
}

.cart-empty-title[b-oks66osu6g] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.cart-empty-sub[b-oks66osu6g] {
    font-size: 0.95rem;
    color: #6b7280;
    max-width: 460px;
    margin: 0;
}

.cart-explore-btn[b-oks66osu6g] {
    display: inline-block;
    margin-top: 8px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.15s;
}

    .cart-explore-btn:hover[b-oks66osu6g] {
        background: #1d4ed8;
    }

/* ── Wizard Shell ── */
.cart-wizard[b-oks66osu6g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1090px;
    margin: 0 auto;
    width: 100%;
    padding: 40px 40px 120px;
    gap: 28px;
}

/* ── Wizard Header ── */
.cart-wizard-header[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
}

/* ── Titles (hidden when compact) ── */
.cart-wizard-titles[b-oks66osu6g] {
    overflow: hidden;
    max-height: 120px;
    opacity: 1;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
    margin-bottom: 0;
}

.cart-wizard-header.compact .cart-wizard-titles[b-oks66osu6g] {
    max-height: 0;
    opacity: 0;
    margin-bottom: -8px;
}

.cart-wizard-title[b-oks66osu6g] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.cart-wizard-sub[b-oks66osu6g] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 4px 0 0;
}

/* ── Stepper ── */

.cart-stepper[b-oks66osu6g] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center; /* ✅ important */
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

.cart-stepper-track[b-oks66osu6g],
.cart-stepper-progress[b-oks66osu6g] {
    position: absolute;
    left: 40px;
    right: 40px; /* ✅ proper alignment */
    height: 2px;
    top: 18px;
    z-index: 0;
}


.cart-stepper-progress[b-oks66osu6g] {
    background: #296DF5;
    z-index: 1;
    transition: width 0.3s ease;
    width: 100%
}

.cart-stepper-track[b-oks66osu6g] {
    background: #dbeafe;
}

.cart-stepper-track[b-oks66osu6g] {
    background: #dbeafe;
}

.cart-stepper-progress[b-oks66osu6g] {
    background: #296DF5;
    z-index: 1;
    transition: width 0.3s ease;
}

.cart-step[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 2;
    cursor: default;
}

.cart-step--clickable[b-oks66osu6g] {
    cursor: pointer;
}
    /* Optional: subtle hover effect */
    .cart-step--clickable:hover .cart-step-circle[b-oks66osu6g] {
        transform: scale(1.05);
        transition: transform 0.15s ease;
    }
    /* Optional: label highlight on hover */
    .cart-step--clickable:hover .cart-step-label[b-oks66osu6g] {
        color: #1d4ed8;
    }

.cart-step-circle[b-oks66osu6g] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: #dbeafe;
    color: #93c5fd;
    position: relative;
}

.cart-step--active .cart-step-circle[b-oks66osu6g],
.cart-step--done .cart-step-circle[b-oks66osu6g] {
    background: #296DF5;
    color: #fff;
}

.cart-step-label[b-oks66osu6g] {
    font-size: 0.78rem;
    color: #93c5fd;
    text-align: center;
    line-height: 1.3;
}

.cart-step--active .cart-step-label[b-oks66osu6g],
.cart-step--done .cart-step-label[b-oks66osu6g] {
    color: #296DF5;
}

.cart-step-line[b-oks66osu6g] {
    flex: 1;
    height: 2px;
    background: #dbeafe;
    min-width: 24px;
    margin: 0 6px;
    margin-top: 17px;
    align-self: flex-start;
}

.cart-step-line--done[b-oks66osu6g] {
    background: #296DF5;
}

/* ── Wizard Step Row (stepper + billing toggle stacked) ── */
.cart-wizard-step-row[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 64px;
    z-index: 50;
    background: #f4f6fb;
    padding: 8px 0;
    transition: padding 0.25s ease, box-shadow 0.25s ease;
    justify-content: center;
}

.cart-wizard-header.compact + .cart-wizard-step-row[b-oks66osu6g] {
    padding: 6px 0 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

/* ── Billing Toggle ── */
/*.cart-billing-toggle {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    align-self: flex-end;
}

.cart-billing-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

    .cart-billing-btn.active {
        border-color: #296DF5;
        background: #eff6ff;
        color: #296DF5;
        font-weight: 600;
    }

.cart-billing-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    display: inline-block;
    flex-shrink: 0;
}*/
.cart-billing-toggle[b-oks66osu6g] {
    display: flex;
    gap: 28px;
    align-items: center;
    margin-left: auto;
}

.cart-billing-btn[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
}

    .cart-billing-btn.active[b-oks66osu6g] {
        color: #2563eb;
        font-weight: 600;
    }

.cart-billing-radio[b-oks66osu6g] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
    /* ───────── RADIO DOT ───────── */
    .cart-billing-radio[b-oks66osu6g]::after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: transparent;
        transition: all 0.15s ease;
    }

.cart-billing-radio--on[b-oks66osu6g] {
    border-color: #2563eb;
}

    .cart-billing-radio--on[b-oks66osu6g]::after {
        background: #2563eb;
    }

.cart-top-bar[b-oks66osu6g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
/* ── Discount Banner ── */
.cart-discount-banner[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.88rem;
    color: #166534;
}

    .cart-discount-banner button[b-oks66osu6g] {
        margin-left: auto;
        background: none;
        border: none;
        cursor: pointer;
        color: #166534;
        font-size: 0.85rem;
        opacity: 0.7;
    }

/* ── Cart Item Card ── */
.cart-item-card[b-oks66osu6g] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-item-header[b-oks66osu6g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cart-item-identity[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-item-logo[b-oks66osu6g] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.cart-item-name[b-oks66osu6g] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
}

.cart-item-billing[b-oks66osu6g] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 2px;
}

.cart-discount-badge[b-oks66osu6g] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 5px;
}

.cart-item-actions[b-oks66osu6g] {
    display: flex;
    gap: 12px;
}

.cart-item-remove[b-oks66osu6g],
.cart-item-view[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    background: transparent;
    text-decoration: none;
}
/* Remove button */
.cart-item-remove[b-oks66osu6g] {
    border: 1px solid #ef4444;
    color: #dc2626;
}

    .cart-item-remove:hover[b-oks66osu6g] {
        background: #fee2e2;
    }
/* View button */
.cart-item-view[b-oks66osu6g] {
    border: 1px solid #2563eb;
    color: #2563eb;
}

    .cart-item-view:hover[b-oks66osu6g] {
        background: #eff6ff;
    }
/* ───────── ADDONS ───────── */
.cart-addons[b-oks66osu6g] {
    border-top: none;
    padding-top: 14px;
}

.cart-addons-title[b-oks66osu6g] {
    color: #171D27;
    margin-bottom: 12px;
    font-family: Noto Sans;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0%;
}

/* ───────── ADDON CARD ROW ───────── */
.cart-addon-row[b-oks66osu6g] {
    display: grid;
    grid-template-columns: 1fr 140px 140px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    margin-bottom: 12px;
    gap: 16px;
}

    .cart-addon-row:hover[b-oks66osu6g] {
        background: #f9fafb;
        border-color: #d1d5db;
    }

/* ───────── LEFT INFO ───────── */
.cart-addon-info[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cart-addon-name[b-oks66osu6g] {
    color: #283243;
    font-family: Noto Sans;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cart-addon-unit[b-oks66osu6g] {
    color: #3C4C67;
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0%;
    vertical-align: middle;
}

/* ───────── RIGHT SIDE (QTY + PRICE) ───────── */
.cart-addon-right[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ───────── QTY CONTROL ───────── */
.cart-addon-qty[b-oks66osu6g] {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
    height: 36px;
}

/* buttons */
.cart-qty-btn[b-oks66osu6g] {
    width: 36px;
    height: 36px;
    border: none;
    background: #f9fafb;
    font-size: 1.1rem;
    cursor: pointer;
    color: #374151;
}

    .cart-qty-btn:hover[b-oks66osu6g] {
        background: #e5e7eb;
    }

.cart-qty-val[b-oks66osu6g] {
    width: 40px;
    text-align: center;
    color: #283243;
    font-family: Noto Sans;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: 0%;
    vertical-align: middle;
}
/* ───────── PRICE ───────── */
.cart-addon-total[b-oks66osu6g] {
    min-width: 120px;
    text-align: right;
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
}
/* ───────── LINK ───────── */
.cart-see-included[b-oks66osu6g] {
    font-size: 0.9rem;
    color: #3C4C67;
    text-decoration: none;
    cursor: pointer;
}

    .cart-see-included:hover[b-oks66osu6g] {
        text-decoration: underline;
    }

/* ── Program-offer bundle breakdown (Step 1) ── */
.cart-bundle[b-oks66osu6g] {
    margin-top: 12px;
    border-top: 1px solid #E6ECF5;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-bundle-label[b-oks66osu6g] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8C9EBB;
}

.cart-bundle-row[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
}

.cart-bundle-name[b-oks66osu6g] {
    font-weight: 600;
    color: #171D27;
}

.cart-bundle-meta[b-oks66osu6g] {
    color: #556C91;
}

.cart-bundle-price[b-oks66osu6g] {
    margin-left: auto;
    font-weight: 600;
    color: #283243;
    white-space: nowrap;
}
/* ── Step 1: Cart Items ── */
.cart-step1[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* ── Promo code status banner ── */
.cart-promo-banner[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}
.cart-promo-banner svg[b-oks66osu6g] { flex-shrink: 0; }
.cart-promo-banner--ok[b-oks66osu6g] { background: #ECFDF3; border: 1px solid #ABEFC6; color: #067647; }
.cart-promo-banner--warn[b-oks66osu6g] { background: #FFFAEB; border: 1px solid #FEDF89; color: #B54708; }
/* ── Discount Banner (AC-07) ── */
.cart-discount-banner[b-oks66osu6g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: #F4FFF8;
    border: 1px solid #0CD46C;
    border-radius: 8px;
    box-sizing: border-box;
    gap: 24px;
}

.cart-discount-banner-content[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.cart-discount-banner-icon[b-oks66osu6g] {
    flex-shrink: 0;
    color: #0AA956;
}

.cart-discount-banner-content span[b-oks66osu6g] {
    font-size: 14px;
    font-weight: 600;
    color: #0AA956;
    line-height: 1.4;
}

.cart-discount-banner-close[b-oks66osu6g] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #0AA956;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.15s;
}

    .cart-discount-banner-close:hover[b-oks66osu6g] {
        opacity: 1;
    }

.cart-step2[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* ───────── CARD ───────── */
.cart-form-card[b-oks66osu6g] {
    background: #FFFFFF;
    border: 1px solid #D6DBE6;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}
/* ───────── SECTION TITLE ───────── */
.cart-form-title[b-oks66osu6g] {
    font-size: 1rem;
    font-weight: 700;
    color: #171D27;
    margin-bottom: 4px;
    font-family: Noto Sans;
}

.card-form-body[b-oks66osu6g] {
    font-size: 14px;
    font-weight: 400;
    color: #3C4C67;
    margin-bottom: 16px;
    font-family: Noto Sans;
}
/* ───────── GRID ───────── */
.cart-form-grid[b-oks66osu6g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
}
/* ───────── FIELD ───────── */
.cart-field[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* ───────── LABEL ───────── */
.cart-label[b-oks66osu6g] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #171D27;
}
/* ───────── INPUT ───────── */
.cart-input[b-oks66osu6g] {
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid #9FAEC6;
    background: #FFFFFF;
    font-size: 14px;
    color: #171D27;
    outline: none;
    transition: all 0.15s ease;
    width: 100%;
    box-sizing: border-box;
    font-weight: 400;
}

.cart-input[b-oks66osu6g]::placeholder {
    color: #9FAEC6;
}
.cart-select[b-oks66osu6g] {
    color: #171D27;
    
}
/* focus state */
.cart-input:focus[b-oks66osu6g] {
    border-color: #2563eb;
    background: #ffffff;
}
/* ───────── SELECT ───────── */
.cart-select[b-oks66osu6g] {
    appearance: none;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}
/* ───────── NOTICE ───────── */
.cart-info-notice[b-oks66osu6g] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #74A9FB;
    border-radius: 10px;
    padding: 14px 16px;
    color: #296DF5;
    font-family: Noto Sans;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0%;
    vertical-align: middle;
    background-color: #F5FAFF;
}
/* ── Step 3: Review / Agreement ── */
.cart-step3[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-review-card[b-oks66osu6g] {
    background: #f8fafc;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    overflow: hidden;
}

.cart-review-card-top[b-oks66osu6g] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cart-review-card-header[b-oks66osu6g] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.cart-review-identity[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cart-review-name[b-oks66osu6g] {
    font-size: 16px;
    font-weight: 600;
    color: #171D27;
}

.cart-review-billing[b-oks66osu6g] {
    font-size: 14px;
    color: #3C4C67;
    margin-top: 2px;
    font-weight:400;
}

.cart-review-meta[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cart-review-meta-row[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #171D27;
    font-weight: 600;
}

.cart-review-addons[b-oks66osu6g] {
    padding-left: 10px;
}

/* ── Review Body (Step 3 two-column: meta + add-ons) ── */
.cart-review-body[b-oks66osu6g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    position: relative;
}

    /*.cart-review-body::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: #e5e7eb;
    }*/

.cart-review-addon-row[b-oks66osu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #374151;
    padding: 6px 0;
}

.cart-review-addon-price[b-oks66osu6g] {
    font-weight: 600;
    color: #1f2937;
    text-align: right;
}

.cart-agreement-row[b-oks66osu6g] {
    background: #F5F7F9;
    border: 1px solid #D6DBE6;
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 20px 20px;
}

.cart-agreement-left[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.cart-agreement-check[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #1f2937;
    cursor: pointer;
}

    .cart-agreement-check input[type="checkbox"][b-oks66osu6g] {
        width: 16px;
        height: 16px;
        accent-color: #296DF5;
        flex-shrink: 0;
    }

.cart-agreement-sub[b-oks66osu6g] {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0 0 0 26px;
}

.cart-view-agreement-btn[b-oks66osu6g] {
    flex-shrink: 0;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to bottom right, #0A50DC, #4D91FA) border-box;
    border: 1.5px solid transparent;
    color: #296DF5;
    font-size: 14px;
    font-weight: 600;
    padding: 0 24px;
    height: 38px;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

    .cart-view-agreement-btn:hover[b-oks66osu6g] {
        opacity: 0.85;
    }

.cart-billed-to[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    padding: 20px 24px;
}

.cart-billed-label[b-oks66osu6g] {
    font-size: 1rem;
    font-weight: 700;
    color: #171D27;
    margin-bottom: 4px;
}

.cart-billed-name[b-oks66osu6g] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
}

.cart-billed-detail[b-oks66osu6g] {
    font-size: 0.87rem;
    color: #374151;
}

/* ── Step 4: Payment ── */
.cart-step4[b-oks66osu6g] {
}

.cart-pay-layout[b-oks66osu6g] {
    display: grid;
    grid-template-columns: 1fr 578px;
    gap: 24px;
    align-items: start;
}

.cart-pay-products[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-pay-product-row[b-oks66osu6g] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d6dbe6;
    overflow: hidden;
}

.cart-pay-product-toggle[b-oks66osu6g] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.cart-pay-product-identity[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cart-pay-product-name[b-oks66osu6g] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #171d27;
}

.cart-pay-product-price[b-oks66osu6g] {
    font-size: 0.83rem;
    color: #6b7280;
    margin-top: 2px;
}

.cart-pay-product-detail-wrap[b-oks66osu6g] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.cart-pay-product-row.expanded .cart-pay-product-detail-wrap[b-oks66osu6g] {
    max-height: 600px;
}

.cart-pay-product-chevron[b-oks66osu6g] {
    flex-shrink: 0;
    color: #8c9ebb;
    transition: transform 0.25s ease;
}

.cart-pay-product-row.expanded .cart-pay-product-chevron[b-oks66osu6g] {
    transform: rotate(180deg);
}

.cart-pay-product-detail[b-oks66osu6g] {
    padding: 0 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid #f0f3f8;
}

.cart-pay-product-detail-row[b-oks66osu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}

.cart-pay-product-detail-label[b-oks66osu6g] {
    color: #8c9ebb;
    font-weight: 400;
}

.cart-pay-product-detail-value[b-oks66osu6g] {
    color: #171d27;
    font-weight: 500;
}

.cart-pay-product-detail-divider[b-oks66osu6g] {
    height: 1px;
    background: #f0f3f8;
    margin: 4px 0;
}

.cart-pay-product-detail-row--total[b-oks66osu6g] {
    font-size: 0.875rem;
}

.cart-pay-product-detail-row--discount .cart-pay-product-detail-label[b-oks66osu6g],
.cart-pay-product-detail-row--discount .cart-pay-product-detail-value[b-oks66osu6g] {
    color: #047857;
}

.cart-pay-product-detail-value--total[b-oks66osu6g] {
    font-weight: 700;
    color: #171d27;
}

.cart-pay-methods[b-oks66osu6g] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d6dbe6;
    display: flex;
    flex-direction: column;
    gap: 21px;
    padding: 24px;
}

.cart-pay-tabs[b-oks66osu6g] {
    display: flex;
    gap: 16px;
}

.cart-pay-tab[b-oks66osu6g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 19px;
    padding: 16px;
    background: #fff;
    border: 1px solid #d6dbe6;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
    min-width: 0;
}

    .cart-pay-tab.active[b-oks66osu6g] {
        border: 2px solid #296df5;
        background: #f5faff;
    }

    .cart-pay-tab:hover:not(.active)[b-oks66osu6g] {
        border-color: #bfdbfe;
        background: #fafcff;
    }

.cart-pay-tab-top[b-oks66osu6g] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.cart-pay-tab-icon-wrap[b-oks66osu6g] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5faff, #d8e7fe);
    border-radius: 8px;
    color: #296df5;
}

.cart-pay-tab-info[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.cart-pay-tab-title[b-oks66osu6g] {
    font-size: 1rem;
    font-weight: 600;
    color: #171d27;
    line-height: 1.2;
}

.cart-pay-tab-sub[b-oks66osu6g] {
    font-size: 0.875rem;
    color: #3c4c67;
    line-height: 1.4;
}

.cart-pay-tab-logos[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-pay-card-logo[b-oks66osu6g] {
    height: 24px;
    width: auto;
    object-fit: contain;
}

.cart-pay-tab-balance[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-pay-wallet-bal[b-oks66osu6g] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #296df5;
    line-height: 1.3;
}

.cart-pay-tab-balance .cart-pay-tab-sub[b-oks66osu6g] {
    font-size: 0.75rem;
    color: #3c4c67;
}

.cart-saved-cards-section[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-saved-cards-label[b-oks66osu6g] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #171d27;
}

.cart-saved-cards-optional[b-oks66osu6g] {
    font-size: 0.75rem;
    font-weight: 400;
    color: #8c9ebb;
}

.cart-saved-card[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #9faec6;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

    .cart-saved-card.selected[b-oks66osu6g] {
        border: 2px solid #296df5;
        background: #f5faff;
    }

    .cart-saved-card:hover:not(.selected)[b-oks66osu6g] {
        background: #f9fafb;
    }

.cart-saved-card-info[b-oks66osu6g] {
    flex: 1;
    min-width: 0;
}

.cart-saved-card-name[b-oks66osu6g] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1f2937;
}

.cart-saved-card-sub[b-oks66osu6g] {
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 1px;
}

.cart-saved-card-remove[b-oks66osu6g] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.cart-saved-card:hover .cart-saved-card-remove[b-oks66osu6g],
.cart-saved-card.selected .cart-saved-card-remove[b-oks66osu6g] {
    opacity: 1;
}

.cart-saved-card-remove:hover[b-oks66osu6g] {
    background: #fee2e2;
    color: #dc2626;
}

.cart-saved-card-cvc[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    margin-top: -4px;
    margin-bottom: 8px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
}

.cart-saved-card-cvc-note[b-oks66osu6g] {
    font-size: 0.74rem;
    color: #9ca3af;
}

.cart-add-card[b-oks66osu6g] {
    border-style: dashed;
    color: #296df5;
    font-size: 0.88rem;
    font-weight: 500;
}

    .cart-add-card.active[b-oks66osu6g] {
        background: #eff6ff;
        border-color: #296df5;
    }

.cart-add-card-icon[b-oks66osu6g] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #296df5;
    flex-shrink: 0;
}

/* ── New Card Form ── */
.cart-new-card-form[b-oks66osu6g] {
    border: 1px solid #d6dbe6;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #f5f7f9;
}

.cart-new-card-field[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* ── 3DS challenge overlay ───────────────────────────────────────────────────
   Airwallex injects the issuer's authentication iframe into #awx-3ds-auth when a
   card requires a challenge. The container is a fixed, high-z-index overlay so the
   OTP screen is always visible and centered. It stays hidden while empty (no
   challenge in progress) and only shows once the SDK adds the iframe. */
.cart-3ds-auth:empty[b-oks66osu6g] {
    display: none;
}

.cart-3ds-auth[b-oks66osu6g] {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
}

    .cart-3ds-auth > iframe[b-oks66osu6g] {
        width: 100%;
        max-width: 420px;
        height: 100%;
        max-height: 640px;
        border: none;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    }

/* Expiry + CVC share a two-column row beneath the full-width card number. */
.cart-new-card-grid[b-oks66osu6g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Airwallex Card Element mount target — the SDK injects its iframe here, so the
   container needs an explicit height/box or the iframe collapses to nothing. */
.cart-airwallex-element[b-oks66osu6g] {
    min-height: 46px;
    padding: 12px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.12s;
}

    .cart-airwallex-element.error[b-oks66osu6g] {
        border-color: #ef4444;
    }

.cart-new-card-error[b-oks66osu6g] {
    font-size: 0.78rem;
    color: #ef4444;
}

/* ── Payment Not Completed banner ───────────────────────────────────────── */
.cart-payment-failed[b-oks66osu6g] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    background: #fdeff0;
    border: 1px solid #f2b8bd;
    border-radius: 12px;
}

.cart-payment-failed-icon[b-oks66osu6g] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e11d2a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
}

.cart-payment-failed-text[b-oks66osu6g] {
    flex: 1;
    min-width: 0;
}

.cart-payment-failed-title[b-oks66osu6g] {
    color: #d61f2b;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
}

.cart-payment-failed-msg[b-oks66osu6g] {
    color: #4b5563;
    font-size: 0.86rem;
    line-height: 1.45;
}

.cart-payment-failed-close[b-oks66osu6g] {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #d61f2b;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cart-payment-failed-close:hover[b-oks66osu6g] {
        opacity: 0.7;
    }

/* ── Payment Still Processing (webhook not yet confirmed) ───────────────── */
.cart-payment-pending[b-oks66osu6g] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    background: #fff8ec;
    border: 1px solid #f3d9a4;
    border-radius: 12px;
}

.cart-payment-pending-icon[b-oks66osu6g] {
    flex-shrink: 0;
    color: #b9770e;
    display: flex;
    align-items: center;
}

.cart-payment-pending-title[b-oks66osu6g] {
    color: #b9770e;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
}

.cart-payment-pending-msg[b-oks66osu6g] {
    color: #4b5563;
    font-size: 0.86rem;
    line-height: 1.45;
}

.cart-new-card-label[b-oks66osu6g] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
}

.cart-new-card-input-wrap[b-oks66osu6g] {
    position: relative;
    display: flex;
    align-items: center;
}

    .cart-new-card-input-wrap svg[b-oks66osu6g] {
        position: absolute;
        left: 12px;
        color: #9ca3af;
        pointer-events: none;
    }

    .cart-new-card-input-wrap .cart-new-card-input[b-oks66osu6g] {
        padding-left: 38px;
    }

.cart-new-card-input[b-oks66osu6g] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #111827;
    outline: none;
    transition: border-color 0.12s;
    box-sizing: border-box;
}

    .cart-new-card-input:focus[b-oks66osu6g] {
        border-color: #296df5;
    }

    .cart-new-card-input[b-oks66osu6g]::placeholder {
        color: #d1d5db;
    }

.cart-new-card-row[b-oks66osu6g] {
    display: flex;
    gap: 12px;
}

.cart-new-card-save[b-oks66osu6g] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
}

    .cart-new-card-save--notice[b-oks66osu6g] {
        cursor: default;
    }

    .cart-new-card-save input[type="checkbox"][b-oks66osu6g] {
        width: 16px;
        height: 16px;
        margin-top: 2px;
        cursor: pointer;
        flex-shrink: 0;
        accent-color: #296df5;
    }

.cart-new-card-save-title[b-oks66osu6g] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1f2937;
}

.cart-new-card-save-sub[b-oks66osu6g] {
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 2px;
}

.cart-new-card-secure[b-oks66osu6g] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #8c9ebb;
    text-align: center;
    padding-top: 2px;
}

/* ── Card validation error ── */
.cart-new-card-error[b-oks66osu6g] {
    font-size: 0.78rem;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: -4px;
}

/* ── Card Type Selector ── */
.cart-card-type-selector[b-oks66osu6g] {
    padding: 0 0 12px;
}

.cart-card-type-hint[b-oks66osu6g] {
    font-size: 0.78rem;
    color: #6b7280;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cart-card-type-options[b-oks66osu6g] {
    display: flex;
    gap: 10px;
}

.cart-card-type-opt[b-oks66osu6g] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

    .cart-card-type-opt:hover[b-oks66osu6g] {
        border-color: #a5b4fc;
        background: #fafafe;
    }

    .cart-card-type-opt.active[b-oks66osu6g] {
        border-color: #6366f1;
        background: #f5f3ff;
        box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
    }

/* Remove old icon/name sub-elements — no longer used */

/* ── Cards loading spinner ── */
.cart-cards-loading[b-oks66osu6g] {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* ── PayPal panel ── */
.cart-paypal-panel[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    margin-top: 4px;
    text-align: center;
}

.cart-paypal-icon[b-oks66osu6g] {
    width: 64px;
    height: 64px;
    background: #e8f4ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-paypal-title[b-oks66osu6g] {
    font-size: 1rem;
    font-weight: 600;
    color: #003087;
    margin-top: 4px;
}

.cart-paypal-sub[b-oks66osu6g] {
    font-size: 0.83rem;
    color: #6b7280;
    max-width: 280px;
}

/* ── Order Bar ── */
.cart-bar-toggle[b-oks66osu6g] {
    background-color: #0b2a5b; /* dark navy blue */
    color: #ffffff; /* white icon */
    border: none;
    border-radius: 6px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cart-order-container[b-oks66osu6g] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

.cart-order-bar[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 40px;
    background: var(--Color-Primary-900, #041A49);
    border-top: 3px solid #2563eb;
}
/* ───────── EXPANDED PANEL STYLES ───────── */
.cart-order-expanded-panel[b-oks66osu6g] {
    background: #f8fafc;
    padding: 30px 40px 40px 40px;
    max-height: 65vh;
    overflow-y: auto;
}

.cart-order-expanded-title[b-oks66osu6g] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 24px 0;
    font-family: 'Noto Sans', sans-serif;
}

.cart-order-products-list[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-bottom: 10px;
    /*border-bottom: 1px solid #e5e7eb;*/
    padding-bottom: 10px;
}

.cart-order-product-name[b-oks66osu6g] {
    font-weight: 700;
    color: #1f2937;
    font-size: 0.95rem;
    margin-bottom: 10px;
    font-family: 'Noto Sans', sans-serif;
}

.cart-order-product-fee-row[b-oks66osu6g] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #4b5563;
    padding: 3px 0;
    font-family: 'Noto Sans', sans-serif;
}

    .cart-order-product-fee-row span:last-child[b-oks66osu6g] {
        font-weight: 600;
        color: #1f2937;
    }

.cart-order-discount-row[b-oks66osu6g] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #4b5563;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
    font-family: 'Noto Sans', sans-serif;
}

    .cart-order-discount-row span:last-child[b-oks66osu6g] {
        font-weight: 700;
        color: #1f2937;
    }

/* Itemized discount deduction lines (per-product offers + order-level promo). */
.cart-order-fee-discount span[b-oks66osu6g] {
    color: #047857;
}

    .cart-order-fee-discount span:last-child[b-oks66osu6g] {
        font-weight: 600;
        color: #047857;
    }

/* Per-product net subscription subtotal after its discounts. */
.cart-order-subtotal-row span:last-child[b-oks66osu6g] {
    font-weight: 700;
    color: #1f2937;
}

/* Subtotal + SST breakdown above the payable total. */
.cart-order-tax-summary[b-oks66osu6g] {
    margin: 10px 0 4px;
}

.cart-order-tax-row[b-oks66osu6g] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #4b5563;
    padding: 4px 0;
    font-family: 'Noto Sans', sans-serif;
}

    .cart-order-tax-row span:last-child[b-oks66osu6g] {
        font-weight: 600;
        color: #1f2937;
    }

.cart-order-est-total[b-oks66osu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #e5e7eb;
}

.text-right[b-oks66osu6g] {
    text-align: right;
}

.next-month-label[b-oks66osu6g] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 4px;
    font-family: 'Noto Sans', sans-serif;
}

.next-month-value[b-oks66osu6g] {
    font-size: 0.9rem;
    color: #1f2937;
    margin-top: 4px;
    font-weight: 500;
    font-family: 'Noto Sans', sans-serif;
}

.est-total-label[b-oks66osu6g] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    font-family: 'Noto Sans', sans-serif;
}

.est-total-value[b-oks66osu6g] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2563eb;
    font-family: 'Noto Sans', sans-serif;
}

.cart-order-extra-section[b-oks66osu6g] {
    margin: 6px 0;
}

.cart-order-tax-note[b-oks66osu6g] {
    color: #8C9EBB;
    margin-left: 6px;
    font-family: Noto Sans;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
}

.cart-order-label[b-oks66osu6g] {
    font-size: 0.82rem;
    color: #8C9EBB;
    margin-bottom: 2px;
    font-family: Noto Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
}

.cart-order-notes[b-oks66osu6g] {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.6;
    font-family: 'Noto Sans', sans-serif;
}

.cart-order-total[b-oks66osu6g] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f6fbfbff;
}

.cart-order-notes p[b-oks66osu6g] {
    margin: 0 0 6px 0;
}

.cart-order-notes ul[b-oks66osu6g] {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc !important;
}

.cart-order-notes li[b-oks66osu6g] {
    margin-bottom: 3px;
}

    .cart-order-notes li strong[b-oks66osu6g] {
        font-weight: 600;
        color: #4b5563;
    }

.cart-order-product-item[b-oks66osu6g] {
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.cart-bar-actions[b-oks66osu6g] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-left: auto;
}
/* ───────── CANCEL BUTTON ───────── */
.cart-bar-cancel[b-oks66osu6g] {
    background: #e5e7eb;
    border: none;
    border-radius: 999px; /* pill shape */
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    transition: background 0.15s;
}

    .cart-bar-cancel:hover[b-oks66osu6g] {
        background: #d1d5db;
    }
/* ───────── CONTINUE BUTTON ───────── */
.cart-bar-continue[b-oks66osu6g] {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border: none;
    border-radius: 999px; /* pill */
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .cart-bar-continue:hover:not(.disabled)[b-oks66osu6g] {
        background: linear-gradient(90deg, #1d4ed8, #2563eb);
    }

    .cart-bar-continue.disabled[b-oks66osu6g],
    .cart-bar-continue:disabled[b-oks66osu6g] {
        background: #93c5fd; /* unchanged */
        cursor: not-allowed;
    }
/* ── Responsive ── */
@media (max-width: 768px) {
    .cart-wizard[b-oks66osu6g] {
        padding: 24px 16px 100px;
    }

    .cart-form-grid[b-oks66osu6g] {
        grid-template-columns: 1fr;
    }

    .cart-pay-layout[b-oks66osu6g] {
        grid-template-columns: 1fr;
    }

    .cart-item-header[b-oks66osu6g] {
        flex-direction: column;
    }

    .cart-order-bar[b-oks66osu6g] {
        padding: 14px 16px;
    }

    .cart-review-body[b-oks66osu6g] {
        grid-template-columns: 1fr;
    }
}

/* ── AG Wallet Panel (Step 4) ── */
.cart-wallet-panel[b-oks66osu6g] {
    background: linear-gradient(135deg, #08e1ed 0%, #0a50dc 100%);
    border-radius: 12px;
    padding: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Free order (total = 0) — no payment method is collected. */
.cart-free-order-panel[b-oks66osu6g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 28px 24px;
}

.cart-free-order-badge[b-oks66osu6g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
}

.cart-free-order-title[b-oks66osu6g] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #14532d;
}

.cart-free-order-sub[b-oks66osu6g] {
    font-size: 0.875rem;
    color: #166534;
    max-width: 360px;
    line-height: 1.5;
}

.cart-wallet-panel-badge[b-oks66osu6g] {
    position: absolute;
    top: 14px;
    right: 14px;
    opacity: 0.25;
}

.cart-wallet-bal-label[b-oks66osu6g] {
    font-size: 0.875rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 4px;
}

.cart-wallet-bal-amount[b-oks66osu6g] {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.cart-wallet-divider[b-oks66osu6g] {
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
    margin-bottom: 14px;
}

.cart-wallet-row[b-oks66osu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: #ffffff;
    padding: 4px 0;
}

.cart-wallet-row-value[b-oks66osu6g] {
    font-weight: 600;
}

.cart-wallet-row--pay[b-oks66osu6g] {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-top: 4px;
}

.cart-wallet-insufficient[b-oks66osu6g] {
    background: #fffceb;
    border: 1px solid #fad000;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-wallet-insufficient-title[b-oks66osu6g] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #cc9500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-wallet-insufficient-sub[b-oks66osu6g] {
    font-size: 0.82rem;
    color: #92400e;
    line-height: 1.4;
}

/* ── Wallet Action Buttons ── */
.cart-wallet-actions[b-oks66osu6g] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cart-wallet-btn-outline[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #296df5;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #296df5;
    cursor: pointer;
    transition: background 0.12s;
}

    .cart-wallet-btn-outline:hover[b-oks66osu6g] {
        background: #f5faff;
    }

.cart-wallet-btn-filled[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #0a50dc 0%, #4d91fa 100%);
    border: none;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.12s;
}

    .cart-wallet-btn-filled:hover[b-oks66osu6g] {
        opacity: 0.9;
    }

/* ── Agreement Modal ─────────────────────────────────────── */

.cart-agr-overlay[b-oks66osu6g] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cart-agr-modal[b-oks66osu6g] {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 550px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.cart-agr-modal-header[b-oks66osu6g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 28px 20px;
    flex-shrink: 0;
}

.cart-agr-modal-product[b-oks66osu6g] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
    line-height: 1.3;
}

.cart-agr-modal-subtitle[b-oks66osu6g] {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.cart-agr-modal-close[b-oks66osu6g] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 16px;
    transition: background 0.12s;
}

    .cart-agr-modal-close:hover[b-oks66osu6g] {
        background: #e5e7eb;
        color: #111827;
    }

.cart-agr-modal-divider[b-oks66osu6g] {
    height: 1px;
    background: #e5e7eb;
    flex-shrink: 0;
}

.cart-agr-modal-body[b-oks66osu6g] {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1;
}

.cart-agr-meta[b-oks66osu6g] {
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 24px;
}

.cart-agr-section[b-oks66osu6g] {
    margin-bottom: 18px;
}

    .cart-agr-section h4[b-oks66osu6g] {
        font-size: 13.5px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 6px;
    }

    .cart-agr-section p[b-oks66osu6g] {
        font-size: 13px;
        color: #374151;
        line-height: 1.65;
        margin: 0 0 6px;
    }

    .cart-agr-section ul[b-oks66osu6g] {
        margin: 4px 0 0 0;
        padding: 0;
        list-style: none;
    }

        .cart-agr-section ul li[b-oks66osu6g] {
            font-size: 13px;
            color: #374151;
            line-height: 1.65;
            padding-left: 18px;
            position: relative;
        }

            .cart-agr-section ul li[b-oks66osu6g]::before {
                content: "\2022";
                position: absolute;
                left: 4px;
                color: #9ca3af;
            }
/* ───────── MODAL OVERLAY ───────── */
.cart-modal-overlay[b-oks66osu6g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45); /* dim background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* ───────── MODAL BOX ───────── */
.cart-modal[b-oks66osu6g] {
    width: 520px;
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
/* ───────── TITLE ───────── */
.cart-modal-title[b-oks66osu6g] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}
/* ───────── MESSAGE ───────── */
.cart-modal-message[b-oks66osu6g] {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 24px;
}
/* ───────── ACTIONS ───────── */
.cart-modal-actions[b-oks66osu6g] {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}
/* ───────── BUTTON BASE ───────── */
.cart-modal-btn[b-oks66osu6g] {
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
    /* OUTLINE BUTTON (Leave Anyway) */
    .cart-modal-btn.outline[b-oks66osu6g] {
        border: 1px solid #cbd5e1;
        background: #fff;
        color: #374151;
    }

        .cart-modal-btn.outline:hover[b-oks66osu6g] {
            background: #f9fafb;
        }

    .cart-modal-btn.primary[b-oks66osu6g] {
        border: none;
        background: linear-gradient(90deg, #2563eb, #3b82f6);
        color: white;
    }

        .cart-modal-btn.primary:hover[b-oks66osu6g] {
            background: linear-gradient(90deg, #1d4ed8, #2563eb);
        }
/* Overlay */
.cart-modal-overlay[b-oks66osu6g] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* Modal Card */
.cart-confirm-modal[b-oks66osu6g] {
    width: 480px;
    background: #ffffff;
    border-radius: 14px;
    padding: 32px 36px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
/* Icon */
.cart-confirm-icon[b-oks66osu6g] {
    margin-bottom: 18px;
    display: flex;
    justify-content: center;
}

    .cart-confirm-icon svg[b-oks66osu6g] {
        filter: drop-shadow(0 6px 10px rgba(249, 115, 22, 0.25));
    }

/* Title */
.cart-confirm-title[b-oks66osu6g] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

/* Message */
.cart-confirm-message[b-oks66osu6g] {
    font-size: 0.92rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Buttons Container */
.cart-confirm-actions[b-oks66osu6g] {
    display: flex;
    gap: 14px;
    justify-content: center;
}

/* Cancel Button */
.cart-btn-outline[b-oks66osu6g] {
    padding: 10px 28px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
}

    .cart-btn-outline:hover[b-oks66osu6g] {
        background: #f9fafb;
    }

/* Continue Button */
.cart-btn-primary[b-oks66osu6g] {
    padding: 10px 28px;
    border-radius: 8px;
    border: none;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

    .cart-btn-primary:hover[b-oks66osu6g] {
        background: #1d4ed8;
    }


.cart-overlay[b-oks66osu6g] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.cart-overlay-content[b-oks66osu6g] {
    width: 550px;
    height: 348px; /* fixed height */
    max-width: 90%;
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 48px; /* matches design */

    display: flex; /* vertical flow */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px; /* spacing between items */

    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    text-align: center;
}

.overlay-spinner[b-oks66osu6g] {
    margin-bottom: 8px;
    width: 56px;
    height: 56px;
}

.overlay-title[b-oks66osu6g] {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.4; /* 140% */
    letter-spacing: 0;
    text-align: center;
    color: #171D27;
    margin: 0; /* remove default h2 spacing */
}

.overlay-sub[b-oks66osu6g] {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4; /* 140% */
    letter-spacing: 0;
    text-align: center;
    color: #3C4C67;
    max-width: 420px;
    margin: 0;
}

    .overlay-sub--muted[b-oks66osu6g] {
        font-size: 13px;
        opacity: 0.7;
        margin-top: 6px;
    }

input.input-validation-error[b-oks66osu6g],
select.input-validation-error[b-oks66osu6g] {
    border: 1px solid #dc2626;
    background-color: #fef2f2; /* light red */
}

.validation-message[b-oks66osu6g] {
    color: #dc2626; /* red-600 */
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

.cart-contact-card[b-oks66osu6g] {
    border: 1px solid #D6DBE6;
    border-radius: 10px;
    margin-bottom: 16px;
    background: #fff;
}

.cart-contact-header[b-oks66osu6g] {
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.cart-contact-header-right[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cart-contact-title[b-oks66osu6g] {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #171D27;
}

.cart-contact-sub[b-oks66osu6g] {
    font-size: 14px;
    color: #8C9EBB;
    margin-top: 4px;
    font-family: 'Noto Sans', sans-serif;
}

.cart-contact-body[b-oks66osu6g] {
    padding: 18px;
    border-top: 1px solid #D6DBE6;
}

.cart-row[b-oks66osu6g] {
    display: flex;
    gap: 16px;
}

.cart-field[b-oks66osu6g] {
    flex: 1;
}

    .cart-field.full[b-oks66osu6g] {
        width: 100%;
        margin-bottom: 16px;
    }

.badge[b-oks66osu6g] {
    padding: 6px 12px;
    font-size: 12px;
    /*border-radius: 20px;*/
    border: none;
    height: 29px;
    width: 76px;
}

    .badge.required[b-oks66osu6g] {
        font-family: 'Noto Sans', sans-serif;
        background: #296DF5;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 500;
    }

    .badge.optional[b-oks66osu6g] {
        font-family: 'Noto Sans', sans-serif;
        background: #E5E8F0;
        color: #283243;
        font-size: 12px;
        font-weight: 500;
    }

.chevron[b-oks66osu6g] {
    font-size: 12px;
    color: #64748b;
}


.custom-cart-hr[b-oks66osu6g] {
    border: none;
    border-top: 1px solid #E5E8F0;
    margin-bottom: 12px;
}




.phone-input-container[b-oks66osu6g] {
    display: flex;
    align-items: center;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    height: 44px;
    padding: 0 10px;
    gap: 8px;
    width: 100%;
}

.phone-prefix[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.flag[b-oks66osu6g] {
    font-size: 18px;
}

.arrow[b-oks66osu6g] {
    font-size: 10px;
    color: #475467;
}

.phone-code[b-oks66osu6g] {
    color: #667085;
    font-size: 14px;
}

.phone-number-input[b-oks66osu6g] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
}

/* Dropdown */
.phone-dropdown[b-oks66osu6g] {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 300px;
    margin-top: 4px;
    z-index: 100;
}

.phone-item[b-oks66osu6g] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
}

    .phone-item:hover[b-oks66osu6g] {
        background: #f2f4f7;
    }

.code[b-oks66osu6g] {
    margin-left: auto;
    color: #667085;
}

.phone-wrapper[b-oks66osu6g] {
    position: relative;
}

.phone-dropdown[b-oks66osu6g] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 6px;
    z-index: 9999;
    max-height: 220px;
    overflow-y: auto;
}

.cart-delegate-card[b-oks66osu6g] {
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
    padding: 20px;
    margin: 20px 0;
}

.cart-delegate-content[b-oks66osu6g] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.cart-delegate-icon[b-oks66osu6g] {
    color: #667085;
    margin-top: 4px;
}

.cart-delegate-text[b-oks66osu6g] {
    flex: 1;
}

.cart-delegate-title[b-oks66osu6g] {
    font-size: 18px;
    font-weight: 600;
    color: #101828;
    margin-bottom: 6px;
}

.cart-delegate-description[b-oks66osu6g] {
    font-size: 14px;
    color: #475467;
    line-height: 1.5;
}

.cart-delegate-toggle[b-oks66osu6g] {
    display: flex;
    align-items: center;
}

    .cart-delegate-toggle input[type="checkbox"][b-oks66osu6g] {
        width: 42px;
        height: 22px;
    }

.cart-delegate-toggle[b-oks66osu6g] {
    display: flex;
    align-items: center;
}

.cart-switch[b-oks66osu6g] {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
}

    .cart-switch input[b-oks66osu6g] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.cart-slider[b-oks66osu6g] {
    position: absolute;
    inset: 0;
    background: #d0d5dd;
    border-radius: 999px;
    cursor: pointer;
    transition: all .3s ease;
}

    .cart-slider[b-oks66osu6g]::before {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        transition: all .3s ease;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }

.cart-switch input:checked + .cart-slider[b-oks66osu6g] {
    background: #3b82f6;
}

    .cart-switch input:checked + .cart-slider[b-oks66osu6g]::before {
        transform: translateX(18px);
    }

.cart-delegate-divider[b-oks66osu6g] {
    border: 0;
    border-top: 1px solid #eaecf0;
    margin: 24px 0;
}

.cart-org-label[b-oks66osu6g] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #101828;
    margin-bottom: 12px;
}

.required[b-oks66osu6g] {
    color: #ef4444;
}

.cart-org-options[b-oks66osu6g] {
    display: flex;
    gap: 16px;
}

.cart-org-card[b-oks66osu6g] {
    flex: 1;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 14px;
    cursor: pointer;
    transition: all .2s ease;
}

    .cart-org-card.selected[b-oks66osu6g] {
        border: 2px solid #296DF5;
    }

    .cart-org-card.disabled[b-oks66osu6g] {
        background: #f9fafb;
        color: #98a2b3;
        cursor: not-allowed;
    }

.cart-org-radio[b-oks66osu6g] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d0d5dd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.cart-org-card.selected .cart-org-radio[b-oks66osu6g] {
    border-color: #296DF5;
}

.cart-org-dot[b-oks66osu6g] {
    display: none;
    width: 10px;
    height: 10px;
    background: #296DF5;
    border-radius: 50%;
}

.cart-org-radio.empty[b-oks66osu6g] {
    border-color: #d0d5dd;
}

.cart-org-card.selected .cart-org-dot[b-oks66osu6g] {
    display: block;
}

.cart-org-title[b-oks66osu6g] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.cart-org-description[b-oks66osu6g] {
    font-size: 14px;
    color: #475467;
    line-height: 1.5;
}

.coming-soon[b-oks66osu6g] {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.entity-setup-card[b-oks66osu6g] {
    margin-top: 18px;
    border: 1px solid #d0d5dd;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.entity-setup-header[b-oks66osu6g] {
    padding: 18px 20px;
    background: #F5F7F9;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.entity-setup-icon-process1[b-oks66osu6g] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg,#4D91FA 100%,#296DF5 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.entity-setup-icon[b-oks66osu6g] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #0ea5b7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.entity-title-row[b-oks66osu6g] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.entity-setup-title[b-oks66osu6g] {
    font-size: 16px;
    font-weight: 600;
    color: #171D27;
}

.entity-setup-subtitle[b-oks66osu6g] {
    color: #3C4C67;
    font-size: 14px;
}

.required-badge[b-oks66osu6g] {
    background: #296DF5;
    color: white;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
}

.parent-company-box[b-oks66osu6g] {
    margin: 18px;
    padding: 12px 16px;
    background: #F5FAFF;
    border: 1px solid #C4DAFD;
    border-radius: 12px;
    color: #3C4C67;
}

.entity-tabs[b-oks66osu6g] {
    display: flex;
    gap: 10px;
    padding: 0 18px 18px;
}

.entity-tab[b-oks66osu6g] {
    padding: 10px 24px;
    border-radius: 999px;
    border: 1px solid #D6DBE6;
    background: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #283243;
}

    .entity-tab.active[b-oks66osu6g] {
        background: #296DF5;
        color: white;
        border-color: #296DF5;
    }

.entity-list[b-oks66osu6g] {
    padding: 0 18px 18px;
}

.entity-item[b-oks66osu6g] {
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.entity-name[b-oks66osu6g] {
    font-weight: 600;
    color: #283243;
    font-size: 16px;
}

.entity-location[b-oks66osu6g] {
    color: #3C4C67;
    font-size: 14px;
    font-weight: 400;
}

/* An entity that already subscribes to a cart product cannot be purchased for. */
.entity-item--disabled[b-oks66osu6g] {
    background: #F7F8FA;
    border-color: #E4E7EC;
    cursor: not-allowed;
}

.entity-item--disabled .entity-name[b-oks66osu6g],
.entity-item--disabled .entity-location[b-oks66osu6g] {
    color: #98A2B3;
}

.entity-subscribed-tag[b-oks66osu6g] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F4F7;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

/* Blocks Continue on step 2 when the purchase has no valid target. */
.cart-target-error[b-oks66osu6g] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #F2A0A0;
    background: #FEF3F2;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    color: #B42318;
    font-family: Noto Sans;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
}

.cart-form-newcard[b-oks66osu6g] {
    background: #FFFFFF;
    padding: 20px;
}


/*Included details Model*/
.modal-backdrop[b-oks66osu6g] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.included-modal[b-oks66osu6g] {
    background: #fff;
    width: 420px;
    max-width: 90vw;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
    overflow: hidden;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
}
.modal-header[b-oks66osu6g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
}
.header-content h4[b-oks66osu6g] {
    margin: 0;
    font-family: Noto Sans;
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
    vertical-align: middle;
}
.modal-close[b-oks66osu6g] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
}
.modal-body[b-oks66osu6g] {
    padding-left: 20px;
    overflow-y: auto;
}
.header-content h5[b-oks66osu6g] {
    margin-bottom: 16px;
    color: #6b7280;
    font-family: Noto Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
    vertical-align: middle;
}
.included-list[b-oks66osu6g] {
    list-style: none;
    padding: 0;
    margin: 0;
}
.included-list li[b-oks66osu6g] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}
.checkmark[b-oks66osu6g] {
    color: #22c55e;
    font-weight: bold;
}
/* /Pages/CookiesPolicy.razor.rz.scp.css */
/* Scoped styles for CookiesPolicy.razor - moved verbatim from inline <style> blocks (Phase 3.3c). */
    .privacy-page[b-0jgr3xshze] {
        display: flex;
        padding: 64px 200px 132px 200px;
        flex-direction: column;
        align-items: flex-start;
        gap: 64px;
        align-self: stretch;
    }

    .privacy-card[b-0jgr3xshze] {
        box-sizing: border-box;
        width: 100%;
        max-width: 1040px;
        background: #ffffff;
        border: none;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .h1-title[b-0jgr3xshze] {
        color: #171D27;
        text-align: center;
        font-family: "Noto Sans";
        font-size: 48.83px;
        font-style: normal;
        font-weight: 700;
        line-height: 124%;
        margin: 0 0 64px;
    }

    .privacy-text[b-0jgr3xshze] {
        color: var(--Text-Neutral-BodyText, #283243);
        font-family: "Noto Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* 22.4px */
        align-self: stretch;
    }

    .privacy-content-stack[b-0jgr3xshze] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

        /* Paragraph-to-paragraph and block spacing (24px from design) */
        .privacy-content-stack > .privacy-text[b-0jgr3xshze] {
            margin-bottom: 0;
        }

    .h2-title[b-0jgr3xshze] {
        font-family: 'Noto Sans';
        font-style: normal;
        font-size: 24px;
        line-height: 130%;
        color: #296df5;
        margin: 0;
        padding-top: 0;
    }

    .h2-title-sub[b-0jgr3xshze] {
        color: #3c4c67;
        text-align: left;
        font-family: "Noto Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 28px */
    }

    .privacy-section-num[b-0jgr3xshze] {
        margin-right: 0.25em;
    }

    .privacy-list[b-0jgr3xshze] {
        margin: 0;
        padding-left: 1.25rem;
        list-style-type: disc;
    }

    ol.privacy-list[b-0jgr3xshze] {
        list-style-type: decimal;
        padding-left: 1.5rem;
    }

    .privacy-list .privacy-text[b-0jgr3xshze] {
        margin-bottom: 12px;
    }

        .privacy-list .privacy-text:last-child[b-0jgr3xshze] {
            margin-bottom: 0;
        }

    .privacy-text strong[b-0jgr3xshze] {
        color: #171d27;
        font-weight: 700;
    }


    /* Tablet */
    @media (max-width: 1024px) {
        .privacy-page[b-0jgr3xshze] {
            padding: 48px 80px 100px;
        }

        .h1-title[b-0jgr3xshze] {
            font-size: 36px;
        }
    }

    /* Mobile */
    @media (max-width: 768px) {
        .privacy-page[b-0jgr3xshze] {
            padding: 32px 20px 80px;
            gap: 40px;
        }

        .privacy-card[b-0jgr3xshze] {
            padding: 16px;
            border-radius: 8px;
        }

        .h1-title[b-0jgr3xshze] {
            font-size: 28px;
            margin-bottom: 32px;
            text-align: left; /* better UX */
        }

        .h2-title[b-0jgr3xshze] {
            font-size: 20px;
        }

        .h2-title-sub[b-0jgr3xshze] {
            font-size: 18px;
        }

        .privacy-text[b-0jgr3xshze] {
            font-size: 14px;
            line-height: 150%;
        }
    }

    /*  Small Mobile */
    @media (max-width: 480px) {
        .privacy-page[b-0jgr3xshze] {
            padding: 20px 12px 60px;
        }

        .privacy-text[b-0jgr3xshze] {
            font-size: 13px;
        }
    }
/* /Pages/Directory.razor.rz.scp.css */
/* ─── Page Container ────────────────────────────────────────────────────── */
.directory-page[b-w9th1t2uec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8fafc;
    min-height: 100vh;
    width: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1e293b;
    isolation: isolate;
    box-sizing: border-box;
}

/* ─── Header Section ────────────────────────────────────────────────────── */
.dir-header[b-w9th1t2uec] {
    width: 100%;
    max-width: 1000px;
    padding: 56px 24px 24px 24px;
    box-sizing: border-box;
    text-align: left;
}

    .dir-header h1[b-w9th1t2uec] {
        font-family: 'Noto Sans', 'Inter', sans-serif;
        font-size: 25px;
        font-weight: 700;
        line-height: 1.4;
        color: #171D27;
        /*margin: 0 0 8px 0;*/
        letter-spacing: -0.02em;
    }

    .dir-header p[b-w9th1t2uec] {
        font-size: 16px;
        font-weight: 400;
        color: #3C4C67;
        margin: 0;
        line-height: 1.4;
    }

/* ─── Explore Section ───────────────────────────────────────────────────── */
.explore-section[b-w9th1t2uec] {
    width: 100%;
    max-width: 1000px;
    padding: 24px;
    box-sizing: border-box;
}

.section-title[b-w9th1t2uec] {
    font-family: 'Noto Sans', 'Inter', sans-serif;
    font-size: 31.25px;
    font-weight: 700;
    color: #052970;
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.section-subtitle[b-w9th1t2uec] {
    font-size: 16px;
    color: #3C4C67;
    margin: 0 0 28px 0;
    line-height: 1.4;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.explore-grid[b-w9th1t2uec] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.explore-card[b-w9th1t2uec] {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5FAFF 100%);
    border-radius: 12px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    cursor: pointer;
    text-decoration: none !important;
    color: inherit;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #C4DAFD;
}

.explore-card:hover[b-w9th1t2uec] {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.05), 0 8px 8px -6px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.icon-wrapper[b-w9th1t2uec] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    flex-shrink: 0;
}

.card-title[b-w9th1t2uec] {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.card-desc[b-w9th1t2uec] {
    font-size: 14px;
    font-weight: 500;
    color: #3C4C67;
    line-height: 1.4;
    margin: 0;
}

/* ─── One Trusted Directory Section ─────────────────────────────────────── */
.trusted-section[b-w9th1t2uec] {
    width: 100%;
    max-width: 1000px;
    padding: 32px 24px 56px 24px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.trusted-left[b-w9th1t2uec] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trusted-title[b-w9th1t2uec] {
    font-family: 'Noto Sans', 'Inter', sans-serif;
    font-size: 31.25px;
    font-weight: 700;
    color: #052970;
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.trusted-desc[b-w9th1t2uec] {
    font-size: 16px;
    color: #3C4C67;
    line-height: 1.4;
    margin: 0;
    font-weight: 400;
}

.trusted-right[b-w9th1t2uec] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.logo-link-card[b-w9th1t2uec] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none !important;
    transition: all 0.25s;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.logo-link-card:hover[b-w9th1t2uec] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05);
}

.logo-container[b-w9th1t2uec] {
    height: 32px;
    display: flex;
    align-items: center;
}

.logo-img[b-w9th1t2uec] {
    max-height: 28px;
    width: auto;
}

.logo-link-text[b-w9th1t2uec] {
    font-size: 14px;
    font-weight: 500;
    color: #296DF5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.logo-link-text svg[b-w9th1t2uec] {
    transition: transform 0.2s;
}

.logo-link-card:hover .logo-link-text svg[b-w9th1t2uec] {
    transform: translateX(4px);
}

/* ─── Partner with Us Section ───────────────────────────────────────────── */
.partner-section[b-w9th1t2uec] {
    width: 100%;
    max-width: 1000px;
    padding: 0 24px 48px 24px;
    box-sizing: border-box;
}

.partner-banner[b-w9th1t2uec] {
    background: linear-gradient(135deg, #052970 100%, #083DA6 100%);
    border-radius: 12px;
    padding: 32px;
    color: #ffffff;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.partner-left[b-w9th1t2uec] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.partner-title[b-w9th1t2uec] {
    font-family: 'Noto Sans', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.partner-desc[b-w9th1t2uec] {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
}

.btn-preregister[b-w9th1t2uec] {
    background: #f8fafc;
    color:  var(--Text-Primary-Default, #296DF5);
    border-radius: 9999px;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
    text-decoration: none !important;
}

.btn-preregister:hover[b-w9th1t2uec] {
    background-color: #e2e8f0;
}

.btn-preregister svg[b-w9th1t2uec] {
    transition: transform 0.2s;
}

.btn-preregister:hover svg[b-w9th1t2uec] {
    transform: translateX(4px);
}

.partner-right[b-w9th1t2uec] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.partner-benefit-item[b-w9th1t2uec] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
}

.benefit-icon-wrapper[b-w9th1t2uec] {
    width: 38px;
    height: 38px;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0947cb;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* ─── Support & Policies Section ────────────────────────────────────────── */
.policies-section[b-w9th1t2uec] {
    width: 100%;
    max-width: 1000px;
    padding: 0 24px 48px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.policies-grid[b-w9th1t2uec] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.policy-card[b-w9th1t2uec] {
    background: #ffffff;
    border: 1px solid #D6DBE6;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.policy-card-title[b-w9th1t2uec] {
    font-size: 20px;
    font-weight: 700;
    color: #171D27;
    margin: 0 0 10px 0;
}

.policy-links[b-w9th1t2uec] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #296DF5;
}

.policy-link[b-w9th1t2uec] {
    color: #296DF5;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.policy-link:hover[b-w9th1t2uec] {
    text-decoration: underline;
}

.policy-separator[b-w9th1t2uec] {
    color: #3C4C67;
}

/* ─── Connect with Us Section ───────────────────────────────────────────── */
.connect-section[b-w9th1t2uec] {
    width: 100%;
    max-width: 1000px;
    padding: 0 24px 48px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.social-pill-bar[b-w9th1t2uec] {
    background: #ffffff;
    border: 1px solid #D6DBE6;
    border-radius: 12px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.social-link[b-w9th1t2uec] {
    color: #3C4C67;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-size: 14px;
}

.social-link:hover[b-w9th1t2uec] {
    color: #2563eb;
}

.social-icon-img[b-w9th1t2uec] {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(27%) sepia(13%) saturate(1478%) hue-rotate(180deg) brightness(96%) contrast(89%);
}

.social-separator[b-w9th1t2uec] {
    color: #3C4C67;
}

/* ─── Trusted, Audited, and Certified Section ───────────────────────────── */
.cert-section[b-w9th1t2uec] {
    width: 100%;
    max-width: 1000px;
    padding: 0 24px 60px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.cert-badges-row[b-w9th1t2uec] {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.cert-badge-img[b-w9th1t2uec] {
    max-height: 48px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.cert-badge-img:hover[b-w9th1t2uec] {
    opacity: 1;
}

/* ─── Footer Section ────────────────────────────────────────────────────── */
.support-footer[b-w9th1t2uec] {
    width: 100%;
    padding: 32px 24px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    background: #ffffff;
}

.support-copyright-text[b-w9th1t2uec] {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

/* ─── Responsive Media Queries ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .explore-grid[b-w9th1t2uec] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .trusted-section[b-w9th1t2uec] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .partner-banner[b-w9th1t2uec] {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 24px;
    }
}

@media (max-width: 768px) {
    .dir-header[b-w9th1t2uec] {
        padding: 40px 20px 16px 20px;
    }

    .dir-header h1[b-w9th1t2uec] {
        font-size: 28px;
    }

    .trusted-title[b-w9th1t2uec] {
        font-size: 24px;
    }

    .partner-banner[b-w9th1t2uec] {
        padding: 24px;
    }

    .partner-title[b-w9th1t2uec] {
        font-size: 20px;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* ============================================================
   AG ONE Marketplace — Home Page Scoped Styles
   Figma File: Z5yWzWeJcaZBlwQ4yJSPZG  Node: 811:37494
   ADO Ticket: #22726
   All values extracted directly from Figma REST API
   ============================================================ */

/* ── Root: marketplace-home ── */
/*
   Design is 1440px wide. For wider screens, the banner image stretches (cover)
   and inner content stays centered. No max-width set per product requirement.
*/
.marketplace-home[b-ayh4futjqd] {
    font-family: 'Noto Sans', sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #FFFFFF;
    overflow-x: hidden;
}

/* ── GROUP: Homepage ── */
/* 100dvh = dynamic viewport height (Safari 15.4+): excludes browser chrome */
/* 100vh fallback for older browsers; -webkit-fill-available for older iOS Safari */
.homepage[b-ayh4futjqd] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* fallback */
    height: -webkit-fill-available;
    /* older iOS Safari */
    height: 100dvh;
    /* modern Safari / Chrome: excludes mobile address bar */
    overflow: visible;
    width: 100%;
    background: transparent;
}

/* ── RECTANGLE: Banner Placeholder (H=496.89)
   Uses figma-background.jpg — the exact Figma purple-to-blue-to-white gradient.
   No CSS overlay needed; the image naturally fades to white where the lower
   section begins (matching Figma exactly).
*/
.banner-placeholder[b-ayh4futjqd] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Scale with viewport: banner was 65% of page height in Figma (496.89/762.78) */
    height: 65vh;
    height: 65dvh;
    background-image: url('images/figma-background.jpg');
    background-size: 100% 100%;
    background-position: top left;
    z-index: 0;
}

/* ── FRAME: Container nav+hero ── */
.container-nav-hero[b-ayh4futjqd] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* Scale padding & gap with viewport height so spacing stays proportional */
    padding-top: clamp(40px, 7vh, 76px);
    padding-bottom: clamp(20px, 4vh, 40px);
    flex-shrink: 0;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    gap: clamp(32px, 7vh, 76px);
    justify-content: center;
}

/* ── Hero Section — full width, centered content ── */
.hero-section[b-ayh4futjqd] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 806px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    /* reset global app.css .hero-section overrides */
    background: transparent !important;
    min-height: unset !important;
    padding: 0 !important;
    margin: 0 auto;
    box-sizing: border-box !important;
    overflow: visible !important;
    align-items: center !important;
    justify-content: center !important;
}

.text-block[b-ayh4futjqd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}


.hero-section[b-ayh4futjqd]::before {
    display: none !important;
}



/* Hero Title — fluid on smaller viewports */
.hero-title[b-ayh4futjqd] {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 5vw + 0.5rem, 48.83px);
    line-height: 1.24;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.02em;
}

/* Hero Subtitle */
.hero-subtitle[b-ayh4futjqd] {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(1.125rem, 2vw + 0.25rem, 25px);
    line-height: 1.4;
    color: #FFFFFF;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    max-width: none;
    white-space: nowrap;
}

.hero-subtitle-gradient[b-ayh4futjqd] {
    font-weight: 700;
    background: linear-gradient(106.38deg, #08E1ED 0%, #E2F76E 103.21%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle-word[b-ayh4futjqd] {
    display: inline-flex;
    gap: 0;
}

.explore-solutions-btn[b-ayh4futjqd] {
    height: 48px;
    background: linear-gradient(180deg, #F5F7F9 0%, #E5E8F0 100%);
    border-radius: 999px;
    padding: 0 32px;
    color: #296DF5;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-decoration: none;
    flex-shrink: 0;
    cursor: pointer;
    box-sizing: border-box;
    transition: gap 0.3s ease, padding 0.3s ease;
}

.explore-solutions-btn:hover[b-ayh4futjqd] {
    gap: 8px;
    padding: 0 36px;
}

[b-ayh4futjqd] .explore-solutions-btn-icon {
    display: inline-flex;
    max-width: 0;
    opacity: 0;
    transform: translateX(-6px);
    overflow: hidden;
    transition: max-width 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    color: #296DF5;
}

.explore-solutions-btn:hover[b-ayh4futjqd]  .explore-solutions-btn-icon {
    max-width: 24px;
    opacity: 1;
    transform: translateX(0);
}

/* ── Container lower — Experion + quick links below hero ── */
.container-lower[b-ayh4futjqd] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    width: 100%;
    align-items: center;
    /* Let this section grow to fill remaining viewport height */
    flex: 1 1 auto;
    gap: clamp(16px, 3vh, 32px);
    /* Center children vertically within the remaining space */
    justify-content: space-evenly;
}

/* Experion Section — aligned within hero container */
.experion-section[b-ayh4futjqd] {
    display: flex;
    flex-direction: row;
    gap: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
    width: 100%;
    max-width: 806px;
    margin: 0 auto;
    padding-top: clamp(12px, 2.5vh, 27px);
}


/* Section left panel — fluid width */
.section[b-ayh4futjqd] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 563px;
    flex-shrink: 0;
    padding: 0;
}

.container-title-block[b-ayh4futjqd] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

/* Section Title */
.section-title[b-ayh4futjqd] {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(1.375rem, 3.5vw + 0.5rem, 31.25px);
    line-height: 1.4;
    font-style: normal;
    color: #083DA6;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.nexa-img[b-ayh4futjqd] {
    display: block;
    width: 155px;
    height: 65px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Section Subtitle — Noto Sans 500 16px #4a5565 */
.section-subtitle[b-ayh4futjqd] {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22.4px;
    color: #4A5565;
    margin: 0;
}

/* Search pill — fluid width */
.search-home-experion[b-ayh4futjqd] {
    width: 100%;
    max-width: 563px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cointainer-search[b-ayh4futjqd] {
    width: 100%;
    height: 56px;
    min-height: 48px;
    background: #FFFFFF;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 8px 20px;
    border-radius: 999px;
    border: 1px solid #E0E5EF;
    box-sizing: border-box;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(41, 109, 245, 0.08);
}

.cointainer-search:hover[b-ayh4futjqd] {
    border-color: var(--primary-500, #6366F1);
}

/* ── Search Suggestions Dropdown ── */
.search-suggestions[b-ayh4futjqd] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E0E5EF;
    border-radius: 16px;
    padding: 12px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: flex;
    flex-direction: column;
}


.suggestion-item[b-ayh4futjqd] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #3C4C67;
    text-align: left;
    width: 100%;
    transition: background 0.12s ease;
}

.suggestion-item:hover[b-ayh4futjqd] {
    background: #F5F7F9;
}

.cointainer-search:focus-within[b-ayh4futjqd] {
    box-shadow: 0 0 0 3px rgba(156, 194, 252, 0.5);
}

[b-ayh4futjqd] .suggestion-icon {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    color: #9AA2B0;
    flex-shrink: 0;
}

.search-icon-img[b-ayh4futjqd] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

.search-input[b-ayh4futjqd] {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    color: #283243;
    background: transparent;
    min-width: 0;
    padding-left: 4px;
}

.search-input[b-ayh4futjqd]::placeholder {
    color: #9AA2B0;
}

.send-icon-btn[b-ayh4futjqd] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #296DF5;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 0;
    transition: background 0.15s ease;
}

.send-icon-btn:hover[b-ayh4futjqd] {
    background: #0A50DC;
}

.send-icon-img[b-ayh4futjqd] {
    width: 20px;
    height: 20px;
    display: block;
    filter: brightness(0) invert(1);
}

/* Quick Link Card (H=auto, gap=24, pL=80 pR=80) — max-width centered */
.quick-link-card[b-ayh4futjqd] {
    display: flex;
    flex-direction: row;
    gap: 24px;
    /* Remove fixed height so it adapts to available space */
    height: auto;
    padding: clamp(8px, 1.5vh, 16px) 80px;
    flex-shrink: 0;
    box-sizing: border-box;
    align-items: flex-start;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

/* [M].Card (W=302 H=176, r=12, p=20/24)
   Figma fill: GRAD #ffffff@0% → #f5faff@100% */
.m-card[b-ayh4futjqd] {
    width: 302px;
    height: 176px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5FAFF 100%);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #EEF2FB;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.m-card:hover[b-ayh4futjqd] {
    box-shadow: 0 4px 16px rgba(41, 109, 245, 0.12);
    transform: translateY(-2px);
}

/* Icon container (W=48 H=48, r=8, p=12)
   Figma fill: GRAD #f5faff → #d8e7fe */
.base-vector-icon[b-ayh4futjqd] {
    width: 48px;
    height: 48px;
    background: linear-gradient(180deg, #F5FAFF 0%, #D8E7FE 100%);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
}
.quick-link-custom-svg[b-ayh4futjqd] {
    width: 24px;
    height: 24px;
    color: #296DF5;
    fill: currentColor;
}

.m-card:hover .quick-link-custom-svg[b-ayh4futjqd] {
    color: white;
}

[b-ayh4futjqd] .card-icon {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    color: #296DF5;
}

.text-frame[b-ayh4futjqd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.title-container[b-ayh4futjqd] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 28px;
}

/* Card Title — Noto Sans 700 20px #171d27 */
.card-title[b-ayh4futjqd] {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #171D27;
}

/* Card Description — Noto Sans 500 14px #3c4c67 */
.card-description[b-ayh4futjqd] {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 19.6px;
    color: #3C4C67;
    margin: 0;
}

/*this is from new*/

.quick-link-card>a[b-ayh4futjqd] {
    flex: 1 1 280px;
    max-width: 320px;
    min-width: 0;
}

/* Quick link cards — design system overrides for home */
.marketplace-home[b-ayh4futjqd]  .agone-mp-icon-card,
.marketplace-home .agone-mp-icon-card[b-ayh4futjqd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-height: 160px;
    padding: 20px 22px;
    border-radius: 12px;
    border: 1px solid #EEF2FB;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5FAFF 100%);
    text-decoration: none;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.marketplace-home .agone-mp-icon-card:hover[b-ayh4futjqd] {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(41, 109, 245, 0.14);
    border-color: #296DF5;
}

.marketplace-home .agone-mp-icon-card-icon-wrapper[b-ayh4futjqd] {
    flex-shrink: 0;
}

.marketplace-home .agone-mp-icon-card-icon-img[b-ayh4futjqd] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(180deg, #F5FAFF 0%, #D8E7FE 100%);
}

.marketplace-home .agone-mp-icon-card-text-title[b-ayh4futjqd] {
    color: #171D27;
    display: block;
    margin-bottom: 4px;
}

.marketplace-home .agone-mp-icon-card-text-description[b-ayh4futjqd] {
    color: #3C4C67;
    margin: 0;
    line-height: 1.4;
}

.m-card[b-ayh4futjqd] {
    transition: all 0.25s ease;
    /* smooth animation */
    border: 1px solid #D1D5DB;
    /* light border */
    background: #ffffff;
}

/* HOVER EFFECT */
.m-card:hover[b-ayh4futjqd] {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    border-color: #2563EB;
}

/*  Icon background change */
.m-card:hover .base-vector-icon[b-ayh4futjqd] {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
}

.m-card:hover .base-vector-icon svg[b-ayh4futjqd] {
    color: white !important;
}


/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    .container-nav-hero[b-ayh4futjqd] {
        padding-left: 24px;
        padding-right: 24px;
        gap: clamp(24px, 5vh, 48px);
    }

    .hero-section[b-ayh4futjqd] {
        padding: 0 8px !important;
        gap: 24px;
    }

    .explore-solutions-btn[b-ayh4futjqd] {
        max-width: min(100%, 280px);
    }

    .experion-section[b-ayh4futjqd] {
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }

    .quick-link-card[b-ayh4futjqd] {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 768px) {
    .marketplace-home[b-ayh4futjqd] {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .homepage[b-ayh4futjqd] {
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .banner-placeholder[b-ayh4futjqd] {
        height: 58vh;
        height: 58dvh;
        background-size: cover;
        background-position: center top;
    }

    .container-nav-hero[b-ayh4futjqd] {
        padding-top: 28px;
        padding-bottom: 20px;
        padding-left: 16px;
        padding-right: 16px;
        min-height: auto;
        gap: 28px;
    }

    .hero-section[b-ayh4futjqd] {
        gap: 20px;
    }

    .text-block[b-ayh4futjqd] {
        gap: 8px;
    }

    .explore-solutions-btn[b-ayh4futjqd] {
        width: 100%;
        max-width: 100%;
        height: 44px;
    }

    .container-lower[b-ayh4futjqd] {
        flex: none;
        justify-content: flex-start;
        gap: 40px;
        padding-bottom: 24px;
    }

    .experion-section[b-ayh4futjqd] {
        flex-direction: column;
        position: relative;
        gap: 14px;
        height: auto;
        align-items: center;
        padding: 0 16px;
        margin-top: 16px;
    }

    .experion-section .section[b-ayh4futjqd] {
        width: 100%;
        align-items: center;
        gap: 18px;
    }

    .experion-section .container-title-block[b-ayh4futjqd] {
        padding-right: 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: fit-content;
        max-width: 100%;
        position: relative;
        z-index: 2;
    }

    .section[b-ayh4futjqd] {
        position: relative;
    }

    .section-subtitle[b-ayh4futjqd] {
        font-size: 14px;
        line-height: 1.45;
        width: 280px;
    }

    .section-title[b-ayh4futjqd] {
        font-size: clamp(18px, 5vw, 22px);
        flex-direction: row;
        align-items: center;
        height: auto;
        white-space: nowrap;
        width: auto;
        max-width: 100%;
        gap: 8px;
    }

    .nexa-img[b-ayh4futjqd] {
        width: clamp(96px, 26vw, 104px);
        height: auto;
    }

    .search-home-experion[b-ayh4futjqd] {
        width: 100%;
        max-width: 563px;
        position: relative;
        z-index: 1;
    }

    .search-input[b-ayh4futjqd] {
        font-size: 15px;
    }

    .search-input[b-ayh4futjqd]::placeholder {
        font-size: 14px;
    }

    .send-icon-btn[b-ayh4futjqd] {
        width: 44px;
        height: 44px;
    }

    .quick-link-card[b-ayh4futjqd] {
        flex-direction: column;
        align-items: stretch;
        padding: 0 16px 8px;
        gap: 12px;
    }

    .quick-link-card>a[b-ayh4futjqd] {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }

    .marketplace-home .agone-mp-icon-card[b-ayh4futjqd] {
        min-height: unset;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
    }

    .marketplace-home .agone-mp-icon-card-text-container[b-ayh4futjqd] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }

    .marketplace-home .agone-mp-icon-card-icon-img[b-ayh4futjqd] {
        width: 44px;
        height: 44px;
    }

    .marketplace-home .agone-mp-icon-card-icon-img .quick-link-custom-svg[b-ayh4futjqd] {
        width: 22px;
        height: 22px;
    }

    .m-card[b-ayh4futjqd] {
        width: min(100%, 320px);
    }
}

@media (max-width: 480px) {
    .banner-placeholder[b-ayh4futjqd] {
        height: 52vh;
        height: 52dvh;
    }

    .container-nav-hero[b-ayh4futjqd] {
        padding-top: 20px;
        gap: 22px;
    }

    .hero-section[b-ayh4futjqd] {
        padding: 0 !important;
    }

    .hero-subtitle[b-ayh4futjqd] {
        max-width: none;
    }

    .explore-solutions-btn[b-ayh4futjqd] {
        font-size: 15px;
    }

    .cointainer-search[b-ayh4futjqd] {
        height: 56px;
        padding: 8px 8px 8px 24px;
    }

    .search-suggestions[b-ayh4futjqd] {
        border-radius: 12px;
        max-height: 240px;
        overflow-y: auto;
    }

    .suggestion-item[b-ayh4futjqd] {
        padding: 12px 16px;
        font-size: 13px;
    }

    .quick-link-card[b-ayh4futjqd] {
        padding: 0 12px 12px;
    }

    .marketplace-home .agone-mp-icon-card-text-title[b-ayh4futjqd] {
        font-size: 16px !important;
    }

    .marketplace-home .agone-mp-icon-card-text-description[b-ayh4futjqd] {
        font-size: 13px !important;
    }
}

@media (max-width: 380px) {
    .hero-title[b-ayh4futjqd] {
        font-size: 1.625rem;
    }

}
/* /Pages/LuckyDraw.razor.rz.scp.css */
.luckydraw-home[b-1sj5g34i2p] {
    width: 100%;
    /* Match Lucky Draw artwork mid-tone (#F3F9FF) / top-left (#D8E7FE) */
    background: #F3F9FF;
    overflow-x: hidden;
    font-family: 'Noto Sans', sans-serif;
    /* Wave-Desktop 4320×750 — reserve that height so content clears the bottom art. */
    --ld-wave-clearance: calc(70vw * 750 / 4320 + 40px);
}

.homepage[b-1sj5g34i2p] {
    position: relative;
    min-height: 100vh;
}

.banner-placeholder[b-1sj5g34i2p] {
    position: absolute;
    /* Start below MarketplaceHeader (75px) so dots/top of BG aren't covered by nav */
    top: 75px;
    left: 0;
    width: 100%;
    height: calc(100% - 75px);
    /* Base fill matches artwork; layers keep natural aspect (no 100% 100% stretch). */
    background-color: #F3F9FF;
    background-image:
        url('https://stragone.blob.core.windows.net/agonedesignsystemassets/Background%20Images/Halftone-Desktop.png'),
        url('https://stragone.blob.core.windows.net/agonedesignsystemassets/Background%20Images/Wave-Desktop.png');
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom center;
    /* Figma 12402:241750 Halftone = 506×506 on 1440 artboard (~35.14vw).
       Wave (4320×750): full width, height auto — no vertical squash at 1024/1980. */
    background-size: min(506px, 35.14vw) auto, 100% auto;
    z-index: 0;
    pointer-events: none;
}

.lucky-content[b-1sj5g34i2p] {
    position: relative;
    z-index: 2;
    padding: 40px clamp(24px, 6.25vw, 90px) var(--ld-wave-clearance);
    max-width: 1980px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
}

.lucky-inner[b-1sj5g34i2p] {
    display: flex;
    flex-direction: column;
    gap: 46px;
    width: 100%;
    max-width: 1259px;
    margin: 0 auto;
}

.lucky-main[b-1sj5g34i2p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    min-width: 0;
}

.lucky-header[b-1sj5g34i2p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.lucky-title-block[b-1sj5g34i2p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.campaign-badge[b-1sj5g34i2p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #08E1ED 0%, #06AFB8 100%);
    color: #FFFFFF;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: clamp(18px, 1.8vw, 25px);
    line-height: 1.4;
}

.winner-title[b-1sj5g34i2p] {
    font-size: clamp(20px, 1.8vw, 25px);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    background: linear-gradient(175.78deg, #0A50DC 0%, #4D91FA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.winner-title-line[b-1sj5g34i2p] {
    display: inline;
}

.winner-title-line + .winner-title-line[b-1sj5g34i2p]::before {
    content: " ";
}

.title-emoji[b-1sj5g34i2p] {
    -webkit-text-fill-color: initial;
}

.campaign-description[b-1sj5g34i2p] {
    color: #3C4C67;
    line-height: 1.4;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 1259px;
    text-align: center;
}

.campaign-description p[b-1sj5g34i2p] {
    margin: 0;
}

.custom-hr[b-1sj5g34i2p] {
    border: none;
    height: 1px;
    width: 100%;
    background-color: #C4DAFD;
    margin: 0;
}

.winners-list[b-1sj5g34i2p] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 23px;
    width: 100%;
    max-width: 1247px;
    min-width: 0;
}

.winner-layout[b-1sj5g34i2p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 2.5vw, 32px);
    width: 100%;
    min-width: 0;
}

.winner-secondary[b-1sj5g34i2p] {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.5vw, 32px);
    width: 100%;
    min-width: 0;
}

.winner-row-top[b-1sj5g34i2p] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

.winner-row[b-1sj5g34i2p] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
}

.winner-card[b-1sj5g34i2p] {
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 1.6vw, 24px);
    min-width: 0;
    width: 100%;
}

/* Desktop top row — Figma 12161:243887: fixed card width, not stretched columns */
.winner-row-top .winner-card[b-1sj5g34i2p] {
    flex: 0 0 auto;
    width: auto;
    gap: 24px;
}

.winner-row-top .winner-image-container[b-1sj5g34i2p] {
    width: 90px;
    height: 90px;
}

.winner-row-top .winner-details[b-1sj5g34i2p] {
    flex: 0 0 228px;
    width: 228px;
    max-width: 228px;
    min-width: 228px;
}

.winner-image-container[b-1sj5g34i2p] {
    width: 65px;
    height: 65px;
    background: #ffffff;
    border-radius: 13px;
    box-shadow: 0 2px 15px 2px rgba(142, 146, 152, 0.2);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.winner-image-frame[b-1sj5g34i2p] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.winner-image[b-1sj5g34i2p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Figma crop offsets for assets that are zoomed inside their frame */
.prize-crop-laptop .winner-image[b-1sj5g34i2p] {
    object-fit: cover;
    object-position: center 42%;
    transform: scale(1.08);
}

.prize-crop-ipad .winner-image[b-1sj5g34i2p] {
    position: absolute;
    width: 138.89%;
    height: 126.58%;
    max-width: none;
    left: -19.44%;
    top: -13.92%;
    object-fit: cover;
}

.prize-crop-samsung .winner-image[b-1sj5g34i2p] {
    position: absolute;
    width: 150%;
    height: 100.12%;
    max-width: none;
    left: -29.17%;
    top: -0.06%;
    object-fit: cover;
}

.prize-crop-garmin .winner-image[b-1sj5g34i2p] {
    position: absolute;
    width: 100%;
    height: 130.28%;
    max-width: none;
    left: 0;
    top: -11.36%;
    object-fit: cover;
}

.winner-details[b-1sj5g34i2p] {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.winner-info[b-1sj5g34i2p] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.4;
    width: 100%;
    min-width: 0;
}

.prize-name[b-1sj5g34i2p] {
    background: #FAD000;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #171D27;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.winner-name[b-1sj5g34i2p] {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: #171D27;
    width: 100%;
}

.winner-company[b-1sj5g34i2p] {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #283243;
    width: 100%;
}

.winner-brn[b-1sj5g34i2p] {
    font-size: 14px;
    color: #8C9EBB;
    font-weight: 500;
    line-height: 1.4;
    width: 100%;
}

.prize-disclaimer[b-1sj5g34i2p] {
    color: #8C9EBB;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    width: 100%;
}

.disclaimer-break[b-1sj5g34i2p] {
    display: inline;
}

.terms-section[b-1sj5g34i2p] {
    position: relative;
    z-index: 2;
    text-align: left;
    font-size: 12px;
    color: #3C4C67;
    line-height: 1.4;
    max-width: 941px;
    width: 100%;
}

.terms-section h3[b-1sj5g34i2p] {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #3C4C67;
    margin: 0 0 10px;
}

.terms-section ul[b-1sj5g34i2p] {
    padding-left: 4px;
    margin: 0;
    font-weight: 500;
    list-style: disc;
}

.terms-section li[b-1sj5g34i2p] {
    margin: 0;
}

/* Large desktop — match Figma spacing (1440–1980) */
@media (min-width: 1440px) {
    .luckydraw-home[b-1sj5g34i2p] {
        --ld-wave-clearance: calc(10vw * 750 / 4320 + 40px);
    }

    .lucky-content[b-1sj5g34i2p] {
        padding: 40px 90px var(--ld-wave-clearance);
    }

    .winner-row-top[b-1sj5g34i2p] {
        gap: 40px;
    }

    .winner-row[b-1sj5g34i2p] {
        gap: 0;
    }

    .winner-card[b-1sj5g34i2p] {
        gap: 24px;
    }

    .winner-row-top .winner-card[b-1sj5g34i2p] {
        gap: 24px;
    }

    .winner-row-top .winner-details[b-1sj5g34i2p] {
        flex: 0 0 228px;
        width: 228px;
        max-width: 228px;
        min-width: 228px;
    }
}

/* Mid desktop / laptop (1024–1439): keep 3+4 layout, slightly tighter gap */
@media (min-width: 1024px) and (max-width: 1439px) {
    .lucky-content[b-1sj5g34i2p] {
        padding: 36px clamp(24px, 4vw, 48px) var(--ld-wave-clearance);
    }

    .winner-row-top[b-1sj5g34i2p] {
        gap: 28px;
    }

    .winner-row[b-1sj5g34i2p] {
        gap: 12px 8px;
    }

    .winner-card[b-1sj5g34i2p] {
        gap: 14px;
    }

    .winner-row-top .winner-card[b-1sj5g34i2p] {
        gap: 20px;
    }

    .winner-row-top .winner-image-container[b-1sj5g34i2p] {
        width: 90px;
        height: 90px;
    }

    .winner-image-container[b-1sj5g34i2p] {
        width: 58px;
        height: 58px;
    }

    .winner-row-top .winner-details[b-1sj5g34i2p] {
        flex: 0 0 200px;
        width: 200px;
        max-width: 200px;
        min-width: 200px;
    }

    .winner-row .winner-image-frame[b-1sj5g34i2p] {
        transform: translate(-50%, -50%) scale(0.89);
        transform-origin: center center;
    }
}

/* Small tablet / narrow laptop below 1024 */
@media (min-width: 769px) and (max-width: 1023px) {
    .lucky-content[b-1sj5g34i2p] {
        padding: 32px 24px var(--ld-wave-clearance);
    }

    .winner-row-top[b-1sj5g34i2p] {
        flex-wrap: wrap;
        gap: 24px 16px;
    }

    .winner-row[b-1sj5g34i2p] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }

    .winner-row-top .winner-card[b-1sj5g34i2p] {
        gap: 16px;
    }

    .winner-row-top .winner-image-container[b-1sj5g34i2p] {
        width: 80px;
        height: 80px;
    }

    .winner-row-top .winner-image-frame[b-1sj5g34i2p] {
        transform: translate(-50%, -50%) scale(0.89);
    }

    .winner-row-top .winner-details[b-1sj5g34i2p] {
        flex: 0 0 180px;
        width: 180px;
        max-width: 180px;
        min-width: 180px;
    }

    .winner-card[b-1sj5g34i2p] {
        gap: 12px;
    }
}

/* Mobile — Figma node 12161:246109 (≤768px) */
@media (max-width: 768px) {
    .luckydraw-home[b-1sj5g34i2p] {
        /* Wave-Mobile 1206×609 */
        --ld-wave-clearance: calc(70vw * 609 / 1206 + 40px);
    }

    .banner-placeholder[b-1sj5g34i2p] {
        background-image:
            url('https://stragone.blob.core.windows.net/agonedesignsystemassets/Background%20Images/Halftone-Mobile.png'),
            url('https://stragone.blob.core.windows.net/agonedesignsystemassets/Background%20Images/Wave-Mobile.png');
        background-repeat: no-repeat, no-repeat;
        background-position: top left, bottom center;
        /* Keep halftone smaller on mobile; Wave-Mobile 1206×609 — width-fit. */
        background-size: min(280px, 55vw) auto, 100% auto;
    }

    .lucky-content[b-1sj5g34i2p] {
        padding: 30px 16px var(--ld-wave-clearance);
        z-index: 2;
    }

    .lucky-inner[b-1sj5g34i2p] {
        gap: 24px;
        align-items: center;
    }

    .lucky-main[b-1sj5g34i2p] {
        gap: 24px;
    }

    .lucky-header[b-1sj5g34i2p] {
        gap: 12px;
    }

    .lucky-title-block[b-1sj5g34i2p] {
        gap: 12px;
    }

    .winner-title[b-1sj5g34i2p] {
        font-size: 20px;
        line-height: 1.4;
    }

    /* Figma: title wraps to two lines on mobile */
    .winner-title-line[b-1sj5g34i2p] {
        display: block;
    }

    .winner-title-line + .winner-title-line[b-1sj5g34i2p]::before {
        content: none;
    }

    .campaign-badge[b-1sj5g34i2p] {
        font-size: 20px;
    }

    /* Figma mobile has the #C4DAFD divider between header and winners */
    .custom-hr[b-1sj5g34i2p] {
        display: block;
    }

    .winners-list[b-1sj5g34i2p],
    .winner-layout[b-1sj5g34i2p],
    .winner-secondary[b-1sj5g34i2p] {
        gap: 16px;
    }

    .winner-row-top[b-1sj5g34i2p] {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 16px;
    }

    .winner-row[b-1sj5g34i2p] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .winner-card[b-1sj5g34i2p] {
        align-items: flex-start;
        gap: 24px;
    }

    .winner-row-top .winner-card[b-1sj5g34i2p] {
        width: 100%;
        flex: none;
    }

    .winner-row-top .winner-details[b-1sj5g34i2p] {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    /* Figma mobile: all prize thumbnails are 90×90 */
    .winner-image-container[b-1sj5g34i2p],
    .winner-row-top .winner-image-container[b-1sj5g34i2p] {
        width: 90px;
        height: 90px;
    }

    .winner-row-top .winner-image-frame[b-1sj5g34i2p] {
        transform: translate(-50%, -50%) scale(1);
    }

    /* Secondary prizes are authored for 65px; scale up into Figma's 90px frames */
    .winner-row .winner-image-frame[b-1sj5g34i2p] {
        transform: translate(-50%, -50%) scale(1.38);
        transform-origin: center center;
    }

    .winner-name[b-1sj5g34i2p] {
        font-size: 16px;
    }

    .winner-company[b-1sj5g34i2p],
    .winner-brn[b-1sj5g34i2p] {
        font-size: 14px;
    }

    .prize-name[b-1sj5g34i2p] {
        font-size: 14px;
        white-space: nowrap;
    }

    /* Mobile Figma: disclaimer wraps to 2 lines */
    .disclaimer-break[b-1sj5g34i2p] {
        display: block;
    }

    .terms-section[b-1sj5g34i2p] {
        font-size: 12px;
        max-width: 370px;
    }

    .terms-section h3[b-1sj5g34i2p] {
        font-size: 12px;
    }
}
/* /Pages/Partner.razor.rz.scp.css */
/* ─── Page Wrapper ──────────────────────────────────────────────────────── */
.partner-page[b-8280mqg7bu] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background: #f8fafc;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── Hero Section with Gradients ───────────────────────────────────────── */
.partner-hero[b-8280mqg7bu] {
    flex: 1;
    width: 100%;
    background: linear-gradient(135deg, #0947cb 0%, #00b2fe 100%);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 40px;
    box-sizing: border-box;
    overflow: hidden;
}

/* ─── Background Decorative Patterns ────────────────────────────────────── */
.dot-pattern-left[b-8280mqg7bu] {
    position: absolute;
    left: 40px;
    top: 20%;
    width: 120px;
    height: 180px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.25) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    pointer-events: none;
}

.dot-pattern-right[b-8280mqg7bu] {
    position: absolute;
    right: 40px;
    bottom: 10%;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.25) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    pointer-events: none;
}

.bg-circle-pattern[b-8280mqg7bu] {
    position: absolute;
    left: -100px;
    top: -100px;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    pointer-events: none;
}

.bg-circle-pattern[b-8280mqg7bu]::after {
    content: '';
    position: absolute;
    left: 50px;
    top: 50px;
    width: 500px;
    height: 500px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

/* ─── Main Grid Layout ──────────────────────────────────────────────────── */
.partner-container[b-8280mqg7bu] {
    width: 100%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* ─── Left Column text block ────────────────────────────────────────────── */
.partner-left[b-8280mqg7bu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.partner-breadcrumb[b-8280mqg7bu] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 24px;
    font-weight: 500;
}

.coming-soon-img[b-8280mqg7bu] {
    height: 42px;
    width: auto;
    margin-bottom: 28px;
}

.partner-title[b-8280mqg7bu] {
    font-family: 'Noto Sans', 'Inter', sans-serif;
    font-size: 31.25px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
}

.partner-title span[b-8280mqg7bu] {
    color: #00f0ff;
}

.partner-desc[b-8280mqg7bu] {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.5;
    margin: 0 0 28px 0;
}

.partner-subdesc[b-8280mqg7bu] {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

/* ─── Right Column (Registration Card) ──────────────────────────────────── */
.form-card[b-8280mqg7bu] {
    background: #ffffff;
    border-radius: 24px;
    padding: 36px 44px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 600px;
    max-width: 100%;
    min-height: 464px;
    height: auto;
    justify-content: center;
    transition: transform 0.3s ease;
}

.form-title[b-8280mqg7bu] {
    font-family: 'Noto Sans', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #0f2d59;
    text-align: center;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

/* ─── Form Inputs ───────────────────────────────────────────────────────── */
.form-group[b-8280mqg7bu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    text-align: left;
}

.form-label[b-8280mqg7bu] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

[b-8280mqg7bu] .input-control {
    width: 100%;
    height: 48px;
    border: 1px solid #9FAEC6;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 15px;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #ffffff;
}

[b-8280mqg7bu] .input-control::placeholder {
    color: #94a3b8;
}

[b-8280mqg7bu] .input-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.input-with-icon[b-8280mqg7bu] {
    position: relative;
    width: 100%;
}

.input-with-icon[b-8280mqg7bu]  .input-control {
    padding-left: 48px;
}

.input-icon[b-8280mqg7bu] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #3c4c67;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Button States ─────────────────────────────────────────────────────── */
.btn-submit[b-8280mqg7bu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 280px;
    height: 48px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 16px auto 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    text-decoration: none;
}

.btn-submit.disabled[b-8280mqg7bu] {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

.btn-submit.active[b-8280mqg7bu] {
    background: linear-gradient(240deg, #08C9D4 0%, #0A50DC 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 80, 220, 0.25);
}

.btn-submit.active:hover[b-8280mqg7bu] {
    background: linear-gradient(240deg, #0be2ef 0%, #0a5be0 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(10, 80, 220, 0.35);
}

.btn-submit.active:active[b-8280mqg7bu] {
    transform: translateY(0);
}

/* ─── Validation Error Messages ────────────────────────────────────────── */
[b-8280mqg7bu] .validation-error,
[b-8280mqg7bu] .validation-message {
    font-size: 12px;
    color: #dc2626 !important;
    margin-top: 4px;
    font-weight: 500;
}

[b-8280mqg7bu] .input-control.invalid {
    border-color: #dc2626 !important;
}

[b-8280mqg7bu] .input-control.invalid:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* ─── Success Card View ─────────────────────────────────────────────────── */
.success-container[b-8280mqg7bu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeIn-b-8280mqg7bu 0.4s ease-out;
}

.success-title[b-8280mqg7bu] {
    font-family: 'Noto Sans', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #0f2d59;
    line-height: 1.35;
    margin: 0 0 16px 0;
    letter-spacing: -0.01em;
}

.success-desc[b-8280mqg7bu] {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 32px 0;
}

@keyframes fadeIn-b-8280mqg7bu {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Footer Section ────────────────────────────────────────────────────── */
.partner-footer[b-8280mqg7bu] {
    width: 100%;
    padding: 24px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.partner-copyright[b-8280mqg7bu] {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

/* ─── Responsive Media Queries ──────────────────────────────────────────── */
@media (max-width: 950px) {
    .partner-container[b-8280mqg7bu] {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .partner-left[b-8280mqg7bu] {
        align-items: center;
        text-align: center;
    }

    .coming-soon-img[b-8280mqg7bu] {
        margin-bottom: 24px;
    }

    .partner-hero[b-8280mqg7bu] {
        padding: 60px 24px;
    }

    .dot-pattern-left[b-8280mqg7bu],
    .dot-pattern-right[b-8280mqg7bu] {
        display: none;
    }

    .form-card[b-8280mqg7bu] {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding: 32px;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .partner-hero[b-8280mqg7bu] {
        padding: 40px 16px;
    }

    .partner-title[b-8280mqg7bu] {
        font-size: 28px;
    }

    .partner-desc[b-8280mqg7bu] {
        font-size: 15px;
    }

    .form-card[b-8280mqg7bu] {
        padding: 24px 16px;
    }

    .form-title[b-8280mqg7bu] {
        font-size: 24px;
    }

    .btn-submit[b-8280mqg7bu] {
        width: 100%;
        min-width: 0;
    }
}
/* /Pages/PartnerProductDetails.razor.rz.scp.css */
/* Partner Product detail page (e.g. Microsoft 365). Figma 9596-120704 / 9596-120836. */
.ppd-page[b-ixi8cux3vr] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    color: #171D27;
}

.ppd-inner[b-ixi8cux3vr] {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 120px;
    padding-right: 120px;
    box-sizing: border-box;
}

.ppd-loading[b-ixi8cux3vr], .ppd-not-found[b-ixi8cux3vr] {
    padding: 80px 120px;
    text-align: center;
    color: #3C4C67;
}

.ppd-back-btn[b-ixi8cux3vr] {
    color: #296DF5;
    text-decoration: none;
    font-weight: 600;
}

/* ── Header (breadcrumb + product + banner) ── */
.ppd-hero[b-ixi8cux3vr] {
    background: linear-gradient(180deg, #F5FAFF 0%, #D8E7FE 100%);
    padding: 40px 0;
}

.ppd-breadcrumb[b-ixi8cux3vr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    margin-bottom: 32px;
}
.ppd-breadcrumb-link[b-ixi8cux3vr] { color: #3C4C67; text-decoration: none; }
.ppd-breadcrumb-link:hover[b-ixi8cux3vr] { text-decoration: underline; }
.ppd-breadcrumb-sep[b-ixi8cux3vr] { color: #9FAEC6; }
.ppd-breadcrumb-current[b-ixi8cux3vr] { color: #283243; font-weight: 500; }

.ppd-hero-card[b-ixi8cux3vr] {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: 40px;
}

.ppd-hero-info[b-ixi8cux3vr] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ppd-hero-idrow[b-ixi8cux3vr] { display: flex; align-items: center; gap: 24px; }

.ppd-hero-logo[b-ixi8cux3vr] {
    width: 100px;
    height: 100px;
    padding: 4px;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0px 2px 8px 2px rgba(142, 146, 152, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
}
.ppd-hero-logo img[b-ixi8cux3vr] { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }

.ppd-hero-titles[b-ixi8cux3vr] { display: flex; flex-direction: column; gap: 2px; }
.ppd-hero-name[b-ixi8cux3vr] { font-size: 32px; font-weight: 700; color: #171D27; margin: 0; line-height: 1.3; }
.ppd-hero-vendor[b-ixi8cux3vr] { font-size: 16px; color: #3C4C67; }

.ppd-hero-heading[b-ixi8cux3vr] { font-size: 20px; font-weight: 600; color: #171D27; margin: 0; line-height: 1.4; }
.ppd-hero-desc[b-ixi8cux3vr] { font-size: 14px; line-height: 1.6; color: #3C4C67; margin: 0; }

.ppd-hero-banner[b-ixi8cux3vr] { min-width: 0; }
.ppd-hero-banner img[b-ixi8cux3vr] {
    width: 100%;
    height: 348px;
    max-height: 348px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* ── Tabs ── */
.ppd-tabs-wrap[b-ixi8cux3vr] { background: #FFFFFF; border-bottom: 1px solid #D6DBE6; display: flex; justify-content: center; }
.ppd-tabs[b-ixi8cux3vr] { display: flex; gap: 40px; justify-content: center;}

.ppd-tab[b-ixi8cux3vr] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 16px 4px;
    font-size: 15px;
    font-weight: 600;
    color: #3C4C67;
    cursor: pointer;
    margin-bottom: -1px;
}
.ppd-tab.is-active[b-ixi8cux3vr] { color: #296DF5; border-bottom-color: #296DF5; }

/* ── Body / sections ── */
.ppd-body[b-ixi8cux3vr] { padding-top: 80px; padding-bottom: 80px; }
.ppd-section[b-ixi8cux3vr] { display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px; }

.ppd-eyebrow[b-ixi8cux3vr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #296DF5;
    text-transform: uppercase;
}
.ppd-eyebrow[b-ixi8cux3vr]::before {
    content: "";
    width: 38px;
    height: 1px;
    background: #296DF5;
    display: inline-block;
}
.ppd-eyebrow--spaced[b-ixi8cux3vr] { margin-top: 40px; }

.ppd-section-title[b-ixi8cux3vr] { font-size: 30px; font-weight: 700; color: #052970; margin: 0; line-height: 1.4; }
.ppd-paragraph[b-ixi8cux3vr] { font-size: 16px; line-height: 1.6; color: #3C4C67; margin: 0; }

.ppd-card-grid[b-ixi8cux3vr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 16px;
}

.ppd-info-card[b-ixi8cux3vr] {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5FAFF 100%);
    border: 1px solid #C4DAFD;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ppd-info-card-title[b-ixi8cux3vr] { font-size: 20px; font-weight: 700; color: #171D27; margin: 0; }
.ppd-info-card-desc[b-ixi8cux3vr] { font-size: 14px; line-height: 1.55; color: #3C4C67; margin: 0; }

/* ── Journey tab (placeholder) ── */
.ppd-journey-soon[b-ixi8cux3vr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 640px;
    margin: 32px auto;
    padding: 64px 32px;
    border: 1px solid #E3ECFB;
    border-radius: 20px;
    background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
}

.ppd-journey-soon-badge[b-ixi8cux3vr] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2B63E8;
    background: #EAF1FE;
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 20px;
}

.ppd-journey-soon-title[b-ixi8cux3vr] { font-size: 28px; font-weight: 700; line-height: 1.4; color: #052970; margin: 0 0 12px; }
.ppd-journey-soon-text[b-ixi8cux3vr] { font-size: 16px; line-height: 1.6; color: #3C4C67; margin: 0; }

@media (max-width: 640px) {
    .ppd-journey-soon[b-ixi8cux3vr] { padding: 44px 20px; }
    .ppd-journey-soon-title[b-ixi8cux3vr] { font-size: 22px; }
}

/* ── CTA banner (clickable) ── */
.ppd-cta-banner[b-ixi8cux3vr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    text-align: left;
    background: linear-gradient(180deg, #4D91FA 0%, #296DF5 100%);
    border: none;
    border-radius: 12px;
    padding: 32px;
    color: #FFFFFF;
    margin-top: 24px;
    cursor: pointer;
    transition: filter 0.18s ease;
}
.ppd-cta-banner:hover[b-ixi8cux3vr] { filter: brightness(1.04); }
.ppd-cta-text[b-ixi8cux3vr] { display: flex; flex-direction: column; gap: 8px; }
.ppd-cta-title[b-ixi8cux3vr] { font-size: 28px; font-weight: 700; margin: 0; }
.ppd-cta-desc[b-ixi8cux3vr] { font-size: 18px; line-height: 1.5; margin: 0; opacity: 0.95; }
.ppd-cta-arrow[b-ixi8cux3vr] { flex-shrink: 0; color: #FFFFFF; }

/* ── Benefits: department pill ── */
.ppd-pill-wrap[b-ixi8cux3vr] { display: flex; justify-content: center; margin: 24px 0 16px; }
.ppd-pill[b-ixi8cux3vr] {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, #6FA6FB 0%, #4D91FA 100%);
    border: 2px solid #A9CBFD;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
}

/* ── Benefits: department table ── */
.ppd-dept-table[b-ixi8cux3vr] { display: flex; flex-direction: column; border: 1px solid #D6DBE6; border-radius: 12px; overflow: hidden; }
.ppd-dept-row[b-ixi8cux3vr] { display: grid; grid-template-columns: 220px repeat(3, 1fr); border-top: 1px solid #E5E8F0; }
.ppd-dept-row:first-child[b-ixi8cux3vr] { border-top: none; }
.ppd-dept-cell[b-ixi8cux3vr] { padding: 16px 24px; font-size: 14px; color: #283243; border-left: 1px solid #E5E8F0; }
.ppd-dept-cell:first-child[b-ixi8cux3vr] { border-left: none; }
.ppd-dept-cell--focus[b-ixi8cux3vr] { font-weight: 600; color: #171D27; background: #FAFCFF; }

/* Coloured department headers (Focus Area · Finance · IT · Procurement). */
.ppd-dept-row--head .ppd-dept-cell[b-ixi8cux3vr] { font-size: 18px; font-weight: 600; }
.ppd-dept-row--head .ppd-dept-cell--focus[b-ixi8cux3vr] { color: #556C91; background: #FFFFFF; }
.ppd-dept-row--head .ppd-dept-cell:nth-child(2)[b-ixi8cux3vr] { color: #FF6733; background: #FFF6F0; }
.ppd-dept-row--head .ppd-dept-cell:nth-child(3)[b-ixi8cux3vr] { color: #06AFB8; background: #F5FEFF; }
.ppd-dept-row--head .ppd-dept-cell:nth-child(4)[b-ixi8cux3vr] { color: #296DF5; background: #F5FAFF; }

.ppd-dept-cell-heading[b-ixi8cux3vr] { font-weight: 600; color: #171D27; margin-bottom: 6px; }
.ppd-dept-features[b-ixi8cux3vr] { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* ── Benefits: business scale ── */
.ppd-scale-toggle[b-ixi8cux3vr] {
    display: inline-flex;
    align-self: flex-start;
    background: #EEF3FB;
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
    margin: 8px 0 16px;
}
.ppd-scale-tab[b-ixi8cux3vr] {
    border: none;
    background: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #3C4C67;
    cursor: pointer;
}
.ppd-scale-tab.is-active[b-ixi8cux3vr] { background: #296DF5; color: #FFFFFF; }

.ppd-scale-grid[b-ixi8cux3vr] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ppd-scale-card[b-ixi8cux3vr] {
    background: #FFFFFF;
    border: 1px solid #E5E8F0;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 2px 12px rgba(142, 146, 152, 0.18);
}

/* ── Pricing ── */
.ppd-pricing[b-ixi8cux3vr] { gap: 20px; align-items: center; }

/* Segment + variant switch bar (centered pills) */
.ppd-price-switchbar[b-ixi8cux3vr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.ppd-segment-pill[b-ixi8cux3vr] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #F1F2F4;
    border-radius: 999px;
    padding: 8px;
}
.ppd-segment-tab[b-ixi8cux3vr] {
    border: none;
    background: none;
    padding: 8px 28px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 600;
    color: #283243;
    cursor: pointer;
}
.ppd-segment-tab.is-active[b-ixi8cux3vr] { background: #296DF5; color: #FFFFFF; }

.ppd-variant-tabs[b-ixi8cux3vr] { display: flex; gap: 12px; }
.ppd-variant-tab[b-ixi8cux3vr] {
    border: 1px solid #C4DAFD;
    background: #FFFFFF;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 500;
    color: #283243;
    cursor: pointer;
}
.ppd-variant-tab.is-active[b-ixi8cux3vr] { background: #4D91FA; color: #FFFFFF; border-color: #4D91FA; }

/* Currency + billing controls row */
.ppd-price-controls[b-ixi8cux3vr] {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.ppd-currency[b-ixi8cux3vr] { display: flex; flex-direction: column; gap: 6px; }
.ppd-currency-label[b-ixi8cux3vr] { font-size: 14px; font-weight: 500; color: #171D27; }
.ppd-currency-box[b-ixi8cux3vr] {
    min-width: 169px;
    padding: 10px 16px;
    border: 1px solid #C9D2E0;
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 15px;
    color: #283243;
}
select.ppd-currency-select[b-ixi8cux3vr] {
    font-family: inherit;
    cursor: pointer;
}

.ppd-billing[b-ixi8cux3vr] { display: flex; align-items: center; gap: 16px; }
.ppd-billing-opt[b-ixi8cux3vr] {
    border: none;
    background: none;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    color: #9FAEC6;
    cursor: pointer;
}
.ppd-billing-opt.is-active[b-ixi8cux3vr] { color: #296DF5; }
.ppd-save-pill[b-ixi8cux3vr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4D91FA 0%, #296DF5 100%);
    border: 2px solid #BFE0FF;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
}
.ppd-save-pill em[b-ixi8cux3vr] { font-style: normal; font-size: 11px; font-weight: 600; }
/* Muted while Monthly is selected (mirrors the greyed-out "Billed Yearly" label). */
.ppd-save-pill.is-muted[b-ixi8cux3vr] {
    background: #B9C4D6;
    border-color: #E1E8F2;
}

.ppd-switch[b-ixi8cux3vr] {
    position: relative;
    width: 60px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: #EBF3FF;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.ppd-switch-knob[b-ixi8cux3vr] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #296DF5;
    transition: left 0.18s ease;
}
.ppd-switch.is-monthly .ppd-switch-knob[b-ixi8cux3vr] { left: 32px; }

/* Plan cards */
.ppd-plan-grid[b-ixi8cux3vr] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 8px;
}
.ppd-plan-card[b-ixi8cux3vr] {
    border: 1px solid #E1E7F0;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ppd-plan-card:hover[b-ixi8cux3vr] { border-color: #C4DAFD; box-shadow: 0 8px 24px rgba(41, 109, 245, 0.12); }
.ppd-plan-head[b-ixi8cux3vr] {
    padding: 24px;
    border-bottom: 1px solid #E1E7F0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ppd-plan-card--t0 .ppd-plan-head[b-ixi8cux3vr] { background: #FFF6F0; }
.ppd-plan-card--t1 .ppd-plan-head[b-ixi8cux3vr] { background: #F5FEFF; }
.ppd-plan-card--t2 .ppd-plan-head[b-ixi8cux3vr] { background: #F5FAFF; }

.ppd-plan-name[b-ixi8cux3vr] { font-size: 20px; font-weight: 600; color: #171D27; margin: 0; }
.ppd-plan-subtitle[b-ixi8cux3vr] { font-size: 14px; color: #556C91; margin: 0; line-height: 1.45; }
/*.ppd-plan-price { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }*/
/*.ppd-plan-base { font-size: 18px; font-weight: 700; color: #9FAEC6; text-decoration: line-through; }*/
.ppd-plan-final-row[b-ixi8cux3vr] { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
/*.ppd-plan-amount { font-size: 32px; font-weight: 700; }*/
.ppd-plan-card--t0 .ppd-plan-amount[b-ixi8cux3vr], .ppd-plan-card--t0 .ppd-plan-star[b-ixi8cux3vr] { color: #FF6733; }
.ppd-plan-card--t1 .ppd-plan-amount[b-ixi8cux3vr], .ppd-plan-card--t1 .ppd-plan-star[b-ixi8cux3vr] { color: #06AFB8; }
.ppd-plan-card--t2 .ppd-plan-amount[b-ixi8cux3vr], .ppd-plan-card--t2 .ppd-plan-star[b-ixi8cux3vr] { color: #052970; }
.ppd-plan-star[b-ixi8cux3vr] { font-size: 18px; }
.ppd-plan-unit[b-ixi8cux3vr] { font-size: 15px; font-weight: 600; color: #283243; }
/*.ppd-plan-equiv { font-size: 12px; color: #556C91; }*/

.ppd-plan-body[b-ixi8cux3vr] { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.ppd-plan-meta[b-ixi8cux3vr] { font-size: 13px; color: #6B7A93; }
.ppd-plan-btn[b-ixi8cux3vr] {
    height: 44px;
    border: 1px solid #296DF5;
    background:blue;
    color: #FFFFFF;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}
.ppd-plan-btn:hover[b-ixi8cux3vr] { background: blue; }
.ppd-plan-features[b-ixi8cux3vr] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: #283243; line-height: 1.45; }
.ppd-plan-features li[b-ixi8cux3vr] { display: flex; align-items: flex-start; gap: 10px; }
.ppd-check[b-ixi8cux3vr] { flex-shrink: 0; margin-top: 2px; color: #296DF5; }

.ppd-addsvc[b-ixi8cux3vr] { width: 100%; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; align-items: flex-start; }
/*.ppd-addsvc-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 400px));
    gap: 24px;
    margin-top: 8px;
}*/
/*.ppd-addsvc-card {
    border: 1px solid #D6DBE6;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #FFFFFF;
}*/
/*.ppd-addsvc-title { font-size: 20px; font-weight: 600; color: #171D27; margin: 0; }*/
/*.ppd-addsvc-sub { font-size: 14px; color: #556C91; margin: 0; line-height: 1.45; }*/
.ppd-addsvc-amount[b-ixi8cux3vr] { color: #052970; }
/*.ppd-addsvc-desc { font-size: 14px; color: #3C4C67; line-height: 1.55; margin: 0; }*/

/* ── Footer ── */
.ppd-footer[b-ixi8cux3vr] { margin-top: auto; padding: 16px 24px; text-align: center; color: #8C9EBB; font-size: 12px; }

/* Trim the wide 120px gutters before things get cramped. */
@media (max-width: 1280px) {
    .ppd-inner[b-ixi8cux3vr] { padding-left: 64px; padding-right: 64px; }
}

/* Stack the hero (info above banner) only once it's genuinely narrow. */
@media (max-width: 900px) {
    .ppd-hero-card[b-ixi8cux3vr] { grid-template-columns: 1fr; }
    .ppd-hero-banner img[b-ixi8cux3vr] { height: 260px; }
}

@media (max-width: 1024px) {
    .ppd-inner[b-ixi8cux3vr] { padding-left: 24px; padding-right: 24px; }
    .ppd-card-grid[b-ixi8cux3vr], .ppd-scale-grid[b-ixi8cux3vr], .ppd-plan-grid[b-ixi8cux3vr] { grid-template-columns: 1fr; }
    .ppd-dept-row[b-ixi8cux3vr] { grid-template-columns: 1fr; }
}
.ppd-addsvc-grid[b-ixi8cux3vr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.ppd-addsvc-card[b-ixi8cux3vr] {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 18px;
    padding: 18px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
}
.ppd-addsvc-header[b-ixi8cux3vr] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.ppd-addsvc-logo[b-ixi8cux3vr] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #ececec;
    padding: 6px;
}
.ppd-addsvc-title-wrap[b-ixi8cux3vr] {
    flex: 1;
}
.ppd-addsvc-title[b-ixi8cux3vr] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: #1f2937;
}
.ppd-addsvc-sub[b-ixi8cux3vr] {
    margin-top: 6px;
    color: #616161;
    font-size: 14px;
    line-height: 1.4;
}
.ppd-plan-price[b-ixi8cux3vr] {
    margin-bottom: 20px;
}
.ppd-plan-base[b-ixi8cux3vr] {
    font-size: 18px;
    font-weight: 600;
    color: #8a8a8a;
    text-decoration: line-through;
    margin-bottom: 4px;
}
.ppd-plan-amount[b-ixi8cux3vr] {
    display: block;
    font-size: 48px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}
.ppd-plan-equiv[b-ixi8cux3vr] {
    margin-top: 4px;
    color: #555;
    font-size: 14px;
}
.ppd-addsvc-desc[b-ixi8cux3vr] {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.5;
    margin-bottom: 20px;
}
/*.ppd-plan-btn:hover {
    background: #1d4ed8;
}*/

.ppd-apps-section[b-ixi8cux3vr] {
    margin-top: auto;
    padding-top: 40px;
}

.ppd-apps-heading[b-ixi8cux3vr] {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #2f2f2f;
}

.ppd-apps-list[b-ixi8cux3vr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ppd-app-icon[b-ixi8cux3vr] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ppd-app-icon img[b-ixi8cux3vr] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
/* /Pages/PaymentSuccess.razor.rz.scp.css */
/* Payment Success — matches Purchase Confirmed (Figma node 748:31659) */

/* "Loading your portal…" overlay shown while permissions refresh before entering /admin/my-products */
.ps-portal-loading-overlay[b-ghs17z3faa] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(244, 246, 251, 0.94);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 24px;
}

.ps-portal-loading-text[b-ghs17z3faa] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0d0d2b;
    margin: 6px 0 0;
}

.ps-portal-loading-sub[b-ghs17z3faa] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
    max-width: 360px;
}

.ps-page[b-ghs17z3faa] {
    min-height: 100vh;
    background: #f4f6fb;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-family: 'Noto Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.cart-header-wrap[b-ghs17z3faa] {
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.ps-loading[b-ghs17z3faa],
.ps-not-found[b-ghs17z3faa] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 80px 20px;
    color: #3c4c67;
    text-align: center;
}

.ps-shell[b-ghs17z3faa] {
    width: 100%;
    max-width: 1042px;
    margin: 40px auto 120px;
    padding: 24px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #d6dbe6;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    color: #171d27;
    position: relative;
}

.ps-header[b-ghs17z3faa] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ps-success-icon[b-ghs17z3faa] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(225deg, #22c55e 0%, #16a34a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ps-header-text[b-ghs17z3faa] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ps-title[b-ghs17z3faa] {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.4;
    color: #171d27;
}

.ps-subtitle[b-ghs17z3faa] {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3c4c67;
}

.ps-sections[b-ghs17z3faa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ps-card[b-ghs17z3faa] {
    border: 1px solid #d6dbe6;
    border-radius: 12px;
    background: #ffffff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ps-card-title[b-ghs17z3faa] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #171d27;
}

.ps-product-row[b-ghs17z3faa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ps-product-info[b-ghs17z3faa] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.ps-product-logo[b-ghs17z3faa] {
    display: flex;
    width: 64px;
    height: 64px;
    padding: 2px;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    border-radius: 4px;
    background: var(--Surface-Neutral-Negative, #FFF);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.10), 0 2px 8px 2px rgba(142, 146, 152, 0.30);
}

.ps-product-logo-img[b-ghs17z3faa] {
    object-fit: contain;
    display: flex;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.ps-product-copy[b-ghs17z3faa] {
    min-width: 0;
}

.ps-product-name[b-ghs17z3faa] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #171d27;
}

.ps-product-sub[b-ghs17z3faa] {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3c4c67;
}

.ps-status-badge[b-ghs17z3faa] {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: #e4d9ff;
    color: #380099;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.ps-cta-banner[b-ghs17z3faa] {
    position: relative;
    overflow: hidden;
    border: 1px solid #efe9ff;
    border-radius: 12px;
    padding: 24px 44px;
    background: linear-gradient(157deg, #ebf3ff 16%, #ebfdfe 57%, #f8fed8 111%);
    display: flex;
    align-items: center;
    min-height: 190px;
    isolation: isolate;
}

.ps-cta-copy[b-ghs17z3faa] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: min(514px, 58%);
}

.ps-cta-heading[b-ghs17z3faa] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ps-cta-title[b-ghs17z3faa] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #296df5;
}

.ps-cta-title-accent[b-ghs17z3faa] {
    color: #296df5;
}

.ps-cta-subtitle[b-ghs17z3faa] {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3c4c67;
}

.ps-cta-btn[b-ghs17z3faa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    min-width: 120px;
    height: 38px;
    padding: 0 24px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(163deg, #0a50dc 0%, #4d91fa 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.ps-cta-btn:hover[b-ghs17z3faa] {
    opacity: 0.92;
}

.ps-cta-btn-icon[b-ghs17z3faa] {
    flex-shrink: 0;
}

.ps-cta-art[b-ghs17z3faa] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ps-cta-ellipse[b-ghs17z3faa],
.ps-cta-sphere[b-ghs17z3faa] {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
}

.ps-cta-ellipse[b-ghs17z3faa] {
    width: 45.35%;
    aspect-ratio: 1;
    top: -30%;
}

.ps-cta-ellipse--6[b-ghs17z3faa] {
    z-index: 2;
    right: 0;
}

.ps-cta-ellipse--5[b-ghs17z3faa] {
    z-index: 3;
    right: -48px;
    bottom: -183px;
}

.ps-cta-ellipse--4[b-ghs17z3faa] {
    z-index: 4;
    right: -91px;
    bottom: -183px;
}

.ps-cta-sphere[b-ghs17z3faa] {
    top: 1px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -6px;
    bottom: -248px;
}

.ps-summary-table[b-ghs17z3faa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ps-summary-row[b-ghs17z3faa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
    line-height: 1.4;
}

.ps-summary-key[b-ghs17z3faa] {
    color: #3c4c67;
    font-weight: 400;
}

.ps-summary-key-hint[b-ghs17z3faa] {
    color: #3c4c67;
    font-weight: 400;
    font-size: 14px;
}

.ps-summary-val[b-ghs17z3faa] {
    color: #171d27;
    font-weight: 600;
    text-align: right;
}

.ps-summary-row--discount .ps-summary-key[b-ghs17z3faa],
.ps-summary-row--discount .ps-summary-val[b-ghs17z3faa] {
    color: #047857;
}

.ps-summary-divider[b-ghs17z3faa] {
    height: 1px;
    background: #d9d9d9;
}

.ps-attachments-head[b-ghs17z3faa] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ps-attachments-note[b-ghs17z3faa] {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #3c4c67;
}

.ps-invoice-card[b-ghs17z3faa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 96px;
    padding: 16px 24px;
    border: 1px solid #74a9fb;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(235, 243, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.ps-invoice-content[b-ghs17z3faa] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
}

.ps-invoice-icon[b-ghs17z3faa] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #296df5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ps-invoice-name[b-ghs17z3faa] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #171d27;
}

.ps-invoice-date[b-ghs17z3faa] {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3c4c67;
}

.ps-invoice-download[b-ghs17z3faa] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    border-bottom: 1px solid #296df5;
    background: transparent;
    color: #296df5;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.ps-invoice-download:hover[b-ghs17z3faa] {
    opacity: 0.8;
}

.ps-invoice-download:disabled[b-ghs17z3faa] {
    opacity: 0.5;
    cursor: default;
}

.ps-go-btn[b-ghs17z3faa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 38px;
    padding: 0 24px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(163deg, #0a50dc 0%, #4d91fa 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.ps-go-btn:hover[b-ghs17z3faa] {
    opacity: 0.92;
}

@media (max-width: 768px) {
    .ps-shell[b-ghs17z3faa] {
        margin: 24px 16px 64px;
        padding: 20px;
        gap: 24px;
        width: auto;
    }

    .ps-header[b-ghs17z3faa] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ps-product-row[b-ghs17z3faa] {
        flex-direction: column;
        align-items: flex-start;
    }

    .ps-status-badge[b-ghs17z3faa] {
        align-self: flex-start;
    }

    .ps-cta-banner[b-ghs17z3faa] {
        padding: 20px;
        min-height: 0;
    }

    .ps-cta-copy[b-ghs17z3faa] {
        max-width: 100%;
    }

    .ps-cta-art[b-ghs17z3faa] {
        opacity: 0.7;
    }

    .ps-cta-ellipse[b-ghs17z3faa] {
        width: 38%;
    }

    .ps-cta-sphere[b-ghs17z3faa] {
        width: 34%;
    }

    .ps-summary-row[b-ghs17z3faa] {
        flex-direction: column;
        align-items: flex-start;
    }

    .ps-summary-val[b-ghs17z3faa] {
        text-align: left;
    }

    .ps-invoice-card[b-ghs17z3faa] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/PdpaNotice.razor.rz.scp.css */
/* Scoped styles for PdpaNotice.razor - moved verbatim from inline <style> blocks (Phase 3.3c). */
    .pdpa-page[b-fje43hvgu9] {
        display: flex;
        padding: 64px 200px 132px 200px;
        flex-direction: column;
        align-items: flex-start;
        gap: 64px;
        align-self: stretch;
    }

    .pdpa-card[b-fje43hvgu9] {
        box-sizing: border-box;
        width: 100%;
        max-width: 1040px;
        background: #ffffff;
        border: none;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .h1-title[b-fje43hvgu9] {
        color: #171d27;
        /* text-align: center; */
        font-family: "Noto Sans";
        font-size: 48.83px;
        font-style: normal;
        font-weight: 700;
        line-height: 124%;
        margin: 0 0 64px;
    }

    .pdpa-text[b-fje43hvgu9] {
        color: var(--Text-Neutral-BodyText, #283243);
        font-family: "Noto Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        align-self: stretch;
    }

    .pdpa-content-stack[b-fje43hvgu9] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .pdpa-content-stack > .pdpa-text[b-fje43hvgu9] {
        margin-bottom: 0;
    }

    .h2-title[b-fje43hvgu9] {
        font-family: 'Noto Sans';
        font-style: normal;
        font-size: 24px;
        line-height: 130%;
        color: #296df5;
        margin: 0;
        padding-top: 0;
    }

    .h2-title-sub[b-fje43hvgu9] {
        color: #3c4c67;
        text-align: left;
        font-family: "Noto Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
    }

    /* .pdpa-subsection-heading {
        padding-bottom: 12px;
        border-bottom: 1px solid #e2e8f0;
        margin: 0;
    } */

    .pdpa-section-num[b-fje43hvgu9] {
        margin-right: 0.25em;
    }

    .pdpa-list[b-fje43hvgu9] {
        margin: 0;
        padding-left: 2rem;
        list-style-type: disc;
    }

    .pdpa-list .pdpa-text[b-fje43hvgu9] {
        margin-bottom: 12px;
    }

    .pdpa-list .pdpa-text:last-child[b-fje43hvgu9] {
        margin-bottom: 0;
    }

    .pdpa-text strong[b-fje43hvgu9] {
        color: #171d27;
        font-weight: 700;
    }

    /*  Tablet */
    @media (max-width: 1024px) {
        .pdpa-page[b-fje43hvgu9] {
            padding: 48px 80px 100px;
        }

        .h1-title[b-fje43hvgu9] {
            font-size: 36px;
        }
    }

    /*  Mobile */
    @media (max-width: 768px) {
        .pdpa-page[b-fje43hvgu9] {
            padding: 32px 20px 80px;
            gap: 40px;
        }

        .pdpa-card[b-fje43hvgu9] {
            padding: 16px;
            border-radius: 8px;
        }

        .h1-title[b-fje43hvgu9] {
            font-size: 28px;
            margin-bottom: 32px;
        }

        .h2-title[b-fje43hvgu9] {
            font-size: 20px;
        }

        .h2-title-sub[b-fje43hvgu9] {
            font-size: 18px;
        }

        .pdpa-text[b-fje43hvgu9] {
            font-size: 14px;
            line-height: 150%;
        }
    }

    /*  Small mobile */
    @media (max-width: 480px) {
        .pdpa-page[b-fje43hvgu9] {
            padding: 20px 12px 60px;
        }

        .pdpa-text[b-fje43hvgu9] {
            font-size: 13px;
        }
    }
/* /Pages/PrivacyPolicy.razor.rz.scp.css */
/* Scoped styles for PrivacyPolicy.razor - moved verbatim from inline <style> blocks (Phase 3.3c). */
    .privacy-page[b-jy40yjr4k3] {
        display: flex;
        padding: 64px 200px 132px 200px;
        flex-direction: column;
        align-items: flex-start;
        gap: 64px;
        align-self: stretch;
    }

    .privacy-card[b-jy40yjr4k3] {
        box-sizing: border-box;
        width: 100%;
        max-width: 1040px;
        background: #ffffff;
        border: none;
        border-radius: 12px;
        padding: 24px; 
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .h1-title[b-jy40yjr4k3] {
        color: #171D27;
        text-align: center;
        font-family: "Noto Sans";
        font-size: 48.83px;
        font-style: normal;
        font-weight: 700;
        line-height: 124%;
        margin: 0 0 64px;
    }

    .privacy-text[b-jy40yjr4k3] {
        color: var(--Text-Neutral-BodyText, #283243);
        font-family: "Noto Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* 22.4px */
        align-self: stretch;
    }

    .privacy-content-stack[b-jy40yjr4k3] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

        /* Paragraph-to-paragraph and block spacing (24px from design) */
        .privacy-content-stack > .privacy-text[b-jy40yjr4k3] {
            margin-bottom: 0;
        }

    .h2-title[b-jy40yjr4k3] {
        font-family: 'Noto Sans';
        font-style: normal;
        font-size: 24px;
        line-height: 130%;
        color: #296df5;
        margin: 0;
        padding-top: 0;
    }

    .h2-title-sub[b-jy40yjr4k3] {
        color: #3c4c67;
        text-align: left;
        font-family: "Noto Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 28px */
    }

    .privacy-section-num[b-jy40yjr4k3] {
        margin-right: 0.25em;
    }

    .privacy-list[b-jy40yjr4k3] {
        margin: 0;
        padding-left: 1.25rem;
        list-style-type: disc;
    }

    ol.privacy-list[b-jy40yjr4k3] {
        list-style-type: decimal;
        padding-left: 1.5rem;
    }

    .privacy-list .privacy-text[b-jy40yjr4k3] {
        margin-bottom: 12px;
    }

        .privacy-list .privacy-text:last-child[b-jy40yjr4k3] {
            margin-bottom: 0;
        }

    .privacy-text strong[b-jy40yjr4k3] {
        color: #171d27;
        font-weight: 700;
    }

    .cookies-link[b-jy40yjr4k3] {
        color: #296DF5;
        text-decoration: underline;
    }

        /* ✅ Tablet */
    @media (max-width: 1024px) {
        .privacy-page[b-jy40yjr4k3] {
            padding: 48px 80px 100px;
        }

        .h1-title[b-jy40yjr4k3] {
            font-size: 36px;
            text-align: left;
        }
    }

    /* ✅ Mobile */
    @media (max-width: 768px) {
        .privacy-page[b-jy40yjr4k3] {
            padding: 32px 20px 80px;
        }

        .privacy-card[b-jy40yjr4k3] {
            padding: 16px;
            border-radius: 8px;
        }

        .h1-title[b-jy40yjr4k3] {
            font-size: 28px;
            margin-bottom: 32px;
        }

        .h2-title[b-jy40yjr4k3] {
            font-size: 20px;
        }

        .privacy-text[b-jy40yjr4k3] {
            font-size: 14px;
            line-height: 150%;
        }
    }

    /* ✅ Small mobile */
    @media (max-width: 480px) {
        .privacy-page[b-jy40yjr4k3] {
            padding: 20px 12px 60px;
        }

        .privacy-text[b-jy40yjr4k3] {
            font-size: 13px;
        }
        
        .privacy-list[b-jy40yjr4k3] {
            padding-left: 1rem;
        }
    }
/* /Pages/ProductCatalog.razor.rz.scp.css */
/* ============================================================
   Product Catalogue Page
   Figma: 8258:120057 (layout) · 8237:110976 (grid)
   ============================================================ */

.catalog-page[b-f4pbzbmg9f] {
    min-height: 100vh;
    background: linear-gradient(180deg, #FAFCFF 16.16%, #F5FAFF 100%);
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans', sans-serif;
}

.catalog-header-wrap[b-f4pbzbmg9f] {
    width: 100%;
    flex-shrink: 0;
}

/* ── Layout: filter sidebar + main (8258:120057) ── */
.catalog-layout[b-f4pbzbmg9f] {
    display: flex;
    flex: 1;
    gap: 24px;
    align-items: stretch;
    width: 100%;
    padding: 0 40px 80px;
    box-sizing: border-box;
}

.catalog-sidebar[b-f4pbzbmg9f] {
    width: 300px;
    flex-shrink: 0;
    padding-top: 20px;
    position: sticky;
    top: 24px;
    align-self: flex-start;
}

.catalog-sidebar-panel[b-f4pbzbmg9f] {
    width: 100%;
}

.catalog-main[b-f4pbzbmg9f] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.catalog-filter-toggle[b-f4pbzbmg9f] {
    display: none;
}

/* ── Header band (8258:118186) ── */
.catalog-main-header[b-f4pbzbmg9f] {
    background: #FAFCFF;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    width: 100%;
    z-index: 2;
    box-sizing: border-box;
}

.catalog-hero[b-f4pbzbmg9f] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.4;
    margin: 0;
    width: 100%;
}

.catalog-title[b-f4pbzbmg9f] {
    font-size: 25px;
    font-weight: 700;
    color: #296DF5;
    margin: 0;
    line-height: 1.4;
    width: 100%;
}

.catalog-subtitle[b-f4pbzbmg9f] {
    font-size: 16px;
    font-weight: 500;
    color: #3C4C67;
    margin: 0;
    line-height: 1.4;
    width: 100%;
}

/* ── Search bar (8258:118188 — 42px) ── */
.catalog-search-wrap[b-f4pbzbmg9f] {
    width: 100%;
    height: 42px;
}

.catalog-search[b-f4pbzbmg9f] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    background: #FFFFFF;
    border: 1px solid #9FAEC6;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.catalog-search:focus-within[b-f4pbzbmg9f] {
    border-color: #296DF5;
    box-shadow: 0 0 0 3px rgba(41, 109, 245, 0.12);
}

.catalog-search-icon[b-f4pbzbmg9f] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #8892A4;
    pointer-events: none;
    position: static;
}

.catalog-search-input[b-f4pbzbmg9f] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #171D27;
    line-height: 1.4;
    padding: 0;
    margin: 0;
    height: 22px;
    width: 100%;
    box-sizing: border-box;
}

.catalog-search-input[b-f4pbzbmg9f]::placeholder {
    color: #9FAEC6;
}

/* ── Product grid (8237:110977) ── */
.catalog-main-body[b-f4pbzbmg9f] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding-top: 20px;
    width: 100%;
    z-index: 1;
    box-sizing: border-box;
}

.catalog-card-list[b-f4pbzbmg9f] {
    width: 100%;
}

.product-grid[b-f4pbzbmg9f] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

.product-grid__item[b-f4pbzbmg9f] {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-width: 0;
    width: 100%;
}

.product-grid__item > *[b-f4pbzbmg9f] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

/* ── No Results ── */
.no-results-state[b-f4pbzbmg9f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    width: 100%;
}

.no-results-title[b-f4pbzbmg9f] {
    margin-top: 24px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #8E9298;
    margin-bottom: 8px;
}

.no-results-desc[b-f4pbzbmg9f] {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #A0A5AA;
    margin: 0;
}

/* ── Responsive ── */
/* Tablet (1024) and similar: sidebar + 3 cols makes cards too narrow for
   category tags / Coming Soon badge. Use 2 cols until the layout is wide enough. */
@media (max-width: 1279px) {
    .product-grid[b-f4pbzbmg9f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .catalog-layout[b-f4pbzbmg9f] {
        flex-direction: column;
        padding: 0 20px 48px;
    }

    .catalog-filter-toggle[b-f4pbzbmg9f] {
        display: block;
        width: 100%;
        height: 44px;
        margin-bottom: 12px;
        border: 1px solid #D6DBE6;
        border-radius: 6px;
        background: #FFFFFF;
        color: #171D27;
        font-family: 'Noto Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .catalog-sidebar[b-f4pbzbmg9f] {
        width: 100%;
        position: static;
        padding-top: 0;
    }

    .catalog-sidebar-panel[b-f4pbzbmg9f] {
        display: none;
    }

    .catalog-sidebar-panel.is-open[b-f4pbzbmg9f] {
        display: block;
    }

    .product-grid[b-f4pbzbmg9f] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .catalog-title[b-f4pbzbmg9f] {
        font-size: 22px;
    }
}
.catalog-title[b-f4pbzbmg9f] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.coming-soon-text[b-f4pbzbmg9f] {
    font-family: Noto Sans;
    font-weight: 600;
    font-style: Italic;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
    color: #296DF5;
}
/* /Pages/ProductDetails.razor.rz.scp.css */
/* Scoped styles for ProductDetails.razor - moved verbatim from inline <style> (Phase 3.3c batch 2). */
    .pd-solution-callout[b-92mqyzjkna] {
        margin-top: 32px;
        padding: 24px 32px;
        display: flex;
        align-items: center;
        gap: 12px;
        background: #D8E7FE;
        border: 1px solid #74A9FB;
        border-radius: 12px;
    }


    .pd-solution-callout-text[b-92mqyzjkna] {
        color: #052970;
        font-size: 20px;
        font-style: italic;
        font-weight: 600;
        line-height: 140%;
        font-family: "Noto Sans";
        font-style: italic;
        font-weight: 600;
    }
    .pd-solution-callout-star[b-92mqyzjkna] {
    width: 22px;
    height: 20px;
    flex-shrink: 0;
    margin-bottom:28px;
    }
    .pd-solution-callout-star svg[b-92mqyzjkna] {
        display: block;
        }
/* /Pages/Register.razor.rz.scp.css */
@font-face {
    font-family: 'Twemoji Country Flags';
    src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
}

/* ── Layout ── */
.reg-container[b-d462jagllj] {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.reg-form-panel[b-d462jagllj] {
    width: clamp(360px, 38%, 520px);
    min-width: 360px;
    flex-shrink: 0;
    height: 100vh;
    overflow-y: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.reg-form-scroll[b-d462jagllj] {
    flex: 1;
    padding: 32px 48px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
}

.reg-image-panel[b-d462jagllj] {
    flex: 1;
    background-image: url('/images/auth-bg.png');
    background-size: cover;
    background-position: right bottom;
    position: relative;
}

.reg-image-overlay[b-d462jagllj] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,22,40,0.15) 0%, rgba(10,22,40,0.5) 100%);
}

/* ── Logo ── */
.reg-logo[b-d462jagllj] {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.reg-logo img[b-d462jagllj] { 
    width: 142px;
    height: 46px;
    opacity: 1;
    object-fit: contain;
}

/* ── Heading ── */
.reg-title[b-d462jagllj] {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
    text-align: center;
}

.reg-subtitle[b-d462jagllj] {
    font-size: 13px;
    color: #6B7280;
    margin: 0 0 20px;
    text-align: center;
}

/* ── Form ── */
.reg-form[b-d462jagllj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rg-field[b-d462jagllj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rg-field label[b-d462jagllj] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.rg-optional[b-d462jagllj] {
    font-size: 12px;
    font-weight: 400;
    color: #9CA3AF;
}

.rg-field input:not(.rg-phone-input)[b-d462jagllj],
.rg-select-wrap select[b-d462jagllj] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 13px;
    color: #111827;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.rg-field input:focus[b-d462jagllj],
.rg-select-wrap select:focus[b-d462jagllj] {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.rg-field input[b-d462jagllj]::placeholder { color: #9CA3AF; }

/* ── Error state ── */
.rg-field--error input[b-d462jagllj],
.rg-field--error .rg-select-wrap select[b-d462jagllj],
.rg-phone-wrap--error[b-d462jagllj],
.rg-pw-wrap--error[b-d462jagllj] {
    border-color: #EF4444 !important;
}

.rg-error[b-d462jagllj] {
    font-size: 11.5px;
    color: #EF4444;
    margin-top: 2px;
}

.rg-success[b-d462jagllj] {
    font-size: 11.5px;
    color: #10B981;
    margin-top: 2px;
}

/* ── Select ── */
.rg-select-wrap[b-d462jagllj] {
    position: relative;
}

.rg-select-wrap select[b-d462jagllj] {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 56px;
    cursor: pointer;
    color: #111827;
    font-family: "Twemoji Country Flags", "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px;
}

.rg-select-wrap select option[b-d462jagllj] {
    font-family: "Twemoji Country Flags", "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px;
}

.rg-select-wrap select option[value=""][b-d462jagllj] { color: #9CA3AF; }

/* ── Custom Image Dropdown (Country) ── */
.rg-custom-select-wrap[b-d462jagllj] {
    position: relative;
    user-select: none;
}

.rg-custom-select[b-d462jagllj] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 56px 0 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    transition: border-color 0.15s;
    outline: none;
}

.rg-custom-select:focus[b-d462jagllj] {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.rg-custom-select--open[b-d462jagllj] {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.rg-custom-select-placeholder[b-d462jagllj] {
    color: #9CA3AF;
    flex: 1;
}

.rg-custom-select-dropdown[b-d462jagllj] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    z-index: 9999;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 4px;
}

.rg-custom-select-search-wrap[b-d462jagllj] {
    padding: 6px 6px 8px 6px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 4px;
}

.rg-custom-select-search-inner[b-d462jagllj] {
    position: relative;
    width: 100%;
}

.rg-custom-select-search-input[b-d462jagllj] {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 34px !important;
    font-size: 13px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #F9FAFB;
    color: #111827;
    outline: none;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.rg-custom-select-search-input:focus[b-d462jagllj] {
    border-color: #2563EB;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.06);
}

.rg-custom-select-search-icon[b-d462jagllj] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.rg-custom-select-search-icon[b-d462jagllj]  .mud-icon-root {
    font-size: 16px !important;
}

.rg-custom-select-options-list[b-d462jagllj] {
    overflow-y: auto;
    flex: 1;
}

.rg-custom-select-no-results[b-d462jagllj] {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: #6B7280;
}

.rg-custom-select-option[b-d462jagllj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #111827;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
}

.rg-custom-select-option:hover[b-d462jagllj] {
    background: #F3F4F6;
}

.rg-custom-select-option--selected[b-d462jagllj] {
    background: #EFF6FF;
    color: #2563EB;
    font-weight: 500;
}

.rg-flag-img[b-d462jagllj] {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 0;
    flex-shrink: 0;
}

/* Force Blazor.Flags CountryFlag to align inline — ::deep pierces Blazor CSS isolation */
.rg-custom-select-option[b-d462jagllj]  .flag,
.rg-custom-select[b-d462jagllj]  .flag,
.rg-phone-flag[b-d462jagllj]  .flag {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 1;
}

.rg-custom-select-option[b-d462jagllj]  .flag img,
.rg-custom-select[b-d462jagllj]  .flag img,
.rg-phone-flag[b-d462jagllj]  .flag img {
    display: block;
    vertical-align: middle;
}

.rg-select-arrow[b-d462jagllj] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rg-select-clear-btn[b-d462jagllj] {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 3;
}

.rg-select-clear-btn:hover[b-d462jagllj] {
    color: #4B5563;
}

.rg-select-arrow .mud-icon-root[b-d462jagllj] {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

.rg-select-clear-btn .mud-icon-root[b-d462jagllj] {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* ── Phone ── */

.rg-phone-wrap[b-d462jagllj] {
    display: flex;
    align-items: center;
    height: 40px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
}





.rg-phone-flag[b-d462jagllj] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 100%;
    flex-shrink: 0;
    cursor: pointer;
    border-right: 1px solid #E5E7EB;
}


.rg-phone-input[b-d462jagllj] {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 12px;
    font-size: 13px;
    height: 100%;
    background: transparent;
}


.rg-phone-chevron[b-d462jagllj] {
    font-size: 12px;
    color: #4B5563;
    user-select: none;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
}

.rg-phone-code[b-d462jagllj] {
    color: #9CA3AF;
    font-weight: 400;
    font-size: 13px;
}



.rg-phone-input:focus[b-d462jagllj] { outline: none; }

.rg-field-icon[b-d462jagllj] {
    padding: 0 10px;
    font-size: 16px;
}

.rg-field-icon--error[b-d462jagllj] { color: #EF4444; }

/* ── Password ── */
.rg-pw-wrap[b-d462jagllj] {
    display: flex;
    align-items: center;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    overflow: hidden;
    height: 40px;
    background: #fff;
}

.rg-pw-wrap input[b-d462jagllj] {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100%;
    padding: 0 12px !important;
}

.rg-pw-wrap input:focus[b-d462jagllj] { outline: none; }

.rg-pw-icons[b-d462jagllj] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 6px;
    flex-shrink: 0;
}

.rg-icon-btn[b-d462jagllj] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1;
}

/* ── Program Code ── */
.rg-code-wrap[b-d462jagllj] {
    display: flex;
    align-items: center;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    overflow: hidden;
    height: 40px;
    background: #fff;
}

.rg-code-wrap--error[b-d462jagllj] { border-color: #EF4444; }
.rg-code-wrap--valid[b-d462jagllj] { border-color: #10B981; }

.rg-code-wrap input[b-d462jagllj] {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100%;
    font-size: 13px;
}


.rg-code-wrap input:focus[b-d462jagllj] { outline: none; }

.rg-apply-btn[b-d462jagllj] {
    padding: 0 14px;
    height: 100%;
    background: none;
    border: none;
    border-left: 1px solid #D1D5DB;
    font-size: 13px;
    font-weight: 600;
    color: #2563EB;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}

.rg-apply-btn:hover[b-d462jagllj] { background: #F0F4FF; }
.rg-apply-btn:disabled[b-d462jagllj] { color: #9CA3AF; cursor: default; }

/* ── Terms ── */
.rg-terms[b-d462jagllj] { margin-top: 4px; }

.rg-terms--error .rg-checkbox-label[b-d462jagllj] {
    color: #EF4444;
}

.rg-terms--error .rg-checkbox-label input[type="checkbox"][b-d462jagllj] {
    outline: 2px solid #EF4444;
    outline-offset: 1px;
}

.rg-checkbox-label[b-d462jagllj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.rg-checkbox-label input[type="checkbox"][b-d462jagllj] {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: #2563EB;
    cursor: pointer;
}

.rg-checkbox-label a[b-d462jagllj] {
    color: #2563EB;
    text-decoration: none;
}

.rg-checkbox-label a:hover[b-d462jagllj] { text-decoration: underline; }

/* ── Submit ── */
.rg-submit-btn[b-d462jagllj] {
    width: 100%;
    height: 42px;
    background: #1740CC;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
}

.rg-submit-btn:hover:not(:disabled)[b-d462jagllj] { background: #1533B0; }
.rg-submit-btn:disabled[b-d462jagllj] { opacity: 0.7; cursor: not-allowed; }

/* ── Spinner ── */
.rg-spinner[b-d462jagllj] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rg-spin-b-d462jagllj 0.7s linear infinite;
}

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

/* ── Sign-in link ── */
.reg-signin-link[b-d462jagllj] {
    text-align: center;
    font-size: 13px;
    color: #6B7280;
    margin: 12px 0 0;
}

.reg-signin-link a[b-d462jagllj] {
    color: #2563EB;
    font-weight: 500;
    text-decoration: none;
}

.reg-signin-link a:hover[b-d462jagllj] { text-decoration: underline; }

/* ── Compliance footer ── */
.reg-compliance-footer[b-d462jagllj] {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.reg-compliance-badges[b-d462jagllj] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.reg-cert-badge[b-d462jagllj] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reg-cert-badge img[b-d462jagllj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.reg-cert-badge--wide[b-d462jagllj] {
    width: 72px;
    height: 32px;
    background: #fff;
}

.reg-copyright[b-d462jagllj] {
    font-size: 11px;
    color: #9CA3AF;
    margin: 0;
    text-align: center;
}

/* ── Info Card (right panel overlay) ── */
.reg-info-card[b-d462jagllj] {
    position: absolute;
    width: auto;
    left: 40px;   /* Anchored on the left */
    right: 170px; /* Anchored next to the Experion orb */
    height: auto;
    min-height: 100px;
    bottom: 60px;
    background: #041A4980;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid #38BFFF;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 16px 20px;
    gap: 12px;
    z-index: 2;
    box-sizing: border-box;
}

.reg-info-card-top[b-d462jagllj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.reg-info-card-text[b-d462jagllj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.reg-info-card-right[b-d462jagllj] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

.reg-info-logos-img[b-d462jagllj] {
    width: 110px; /* Change this to resize the image directly! Typo fixed (no space before px) */
    height: auto;  /* Height scales proportionally automatically! */
    object-fit: contain;
}

.reg-info-series[b-d462jagllj] {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.08em;
    text-transform: none;
}

.reg-info-headline[b-d462jagllj] {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

.reg-info-highlight[b-d462jagllj] {
    color: #38BFFF;
}

/* ── Ticker ── */
.reg-info-ticker-wrap[b-d462jagllj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
    overflow: hidden;
}

.reg-info-ticker-label[b-d462jagllj] {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    flex-shrink: 0;
}

.reg-info-ticker-track-container[b-d462jagllj] {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.reg-info-ticker-track[b-d462jagllj] {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    animation: reg-ticker-scroll-b-d462jagllj 18s linear infinite;
    will-change: transform;
}

.ticker-product-link[b-d462jagllj] {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    cursor: pointer;
}

.ticker-product-link:hover[b-d462jagllj] {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.reg-info-dot[b-d462jagllj] {
    color: rgba(255, 255, 255, 0.3);
}

@keyframes reg-ticker-scroll-b-d462jagllj {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Responsive info card ── */

/* Large monitors (1440px+) — give more breathing room */
@media (min-width: 1440px) {
    .reg-info-card[b-d462jagllj] {
        width: auto;
        left: 48px;
        right: 180px; /* Constant gap to the larger orb */
        bottom: 72px;
    }

    .reg-info-logos-img[b-d462jagllj] {
        width: 120px;
    }
}

/* Standard laptops (1024px–1280px) — tighten margins */
@media (max-width: 1280px) {
    .reg-info-card[b-d462jagllj] {
        width: auto;
        left: 28px;
        right: 150px; /* Constant gap to the standard laptop orb */
        bottom: 40px;
    }

    .reg-info-headline[b-d462jagllj] {
        font-size: 15px;
    }

    .reg-info-logos-img[b-d462jagllj] {
        width: 95px;
    }
}

/* Small laptops / tablets (768px–1023px) */
@media (max-width: 1024px) {
    .reg-info-card[b-d462jagllj] {
        width: auto;
        left: 20px;
        right: 130px; /* Constant gap to the smaller screen orb */
        bottom: 28px;
        padding: 10px 16px;
        min-height: 88px;
    }

    .reg-info-headline[b-d462jagllj] {
        font-size: 14px;
    }

    .reg-info-series[b-d462jagllj] {
        font-size: 10px;
    }

    .reg-info-logos-img[b-d462jagllj] {
        width: 80px;
    }

    .reg-info-card-right[b-d462jagllj] {
        margin-left: 6px;
    }
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    .reg-container[b-d462jagllj] {
        flex-direction: column;
    }

    .reg-image-panel[b-d462jagllj] {
        display: none;
    }

    .reg-form-panel[b-d462jagllj] {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 100vh;
    }

    .reg-form-scroll[b-d462jagllj] {
        padding: 24px 24px 24px;
        overflow: visible !important;
    }
}

.phone-dropdown[b-d462jagllj] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 999999; 

    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}

.phone-item[b-d462jagllj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
}

.phone-item:hover[b-d462jagllj] {
    background: #F3F4F6;
}


.phone-outer-wrapper[b-d462jagllj] {
    position: relative;
}
/* /Pages/ResetPassword.razor.rz.scp.css */
.reset-password-container[b-kfxtoyup5c] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    background: url('/images/auth-bg.png') center/cover no-repeat, #F3F4F6;
    padding: 24px;
    box-sizing: border-box;
}

.reset-password-card[b-kfxtoyup5c] {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 48px;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.auth-logo[b-kfxtoyup5c] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.auth-title[b-kfxtoyup5c] {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin: 0 0 24px 0;
}

.login-email-form[b-kfxtoyup5c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.login-field-group[b-kfxtoyup5c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-field-label[b-kfxtoyup5c] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.login-field-input[b-kfxtoyup5c] {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    background: #FFFFFF;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.login-field-input:focus[b-kfxtoyup5c] {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.login-field-input[b-kfxtoyup5c]::placeholder {
    color: #9CA3AF;
}

.login-pw-wrap[b-kfxtoyup5c] {
    position: relative;
    display: flex;
    align-items: center;
}

.login-pw-wrap .login-field-input[b-kfxtoyup5c] {
    padding-right: 48px;
}

.login-pw-toggle[b-kfxtoyup5c] {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
}

.login-continue-btn[b-kfxtoyup5c] {
    width: 100%;
    height: 44px;
    background: #2563EB;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
    margin-top: 16px;
}

.login-continue-btn:hover:not(:disabled)[b-kfxtoyup5c] {
    background: #1D4ED8;
}

.login-continue-btn:disabled[b-kfxtoyup5c] {
    opacity: 0.65;
    cursor: not-allowed;
}

.login-btn-spinner[b-kfxtoyup5c] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: login-spin-b-kfxtoyup5c 0.65s linear infinite;
    flex-shrink: 0;
}

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

.auth-switch[b-kfxtoyup5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

.auth-switch-text[b-kfxtoyup5c] {
    font-size: 13px;
    color: #4B5563;
}

.register-btn[b-kfxtoyup5c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid #3B82F6;
    color: #3B82F6;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.register-btn:hover[b-kfxtoyup5c] {
    background: #EFF6FF;
}
/* /Pages/ScheduleDemo.razor.rz.scp.css */
.schedule-demo-page[b-yknj1y2yp6] {
    min-height: calc(100vh - 75px);
    background: #fafcff;
    color: #171d27;
    font-family: 'Noto Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Shared column so header arrow/title aligns with main card (Figma: both at 80px inset) */
.schedule-demo-content[b-yknj1y2yp6] {
    width: fit-content;
    max-width: calc(100% - 160px);
    margin: 0 auto;
}

.page-header[b-yknj1y2yp6] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 70px;
    padding: 20px 0;
    background: #fafcff;
}

/* Back button — match Figma 30×26 arrow slot, flush with card left edge */
[b-yknj1y2yp6] .back-btn {
    border: none;
    background: transparent;
    width: 30px;
    height: 26px;
    min-width: 30px;
    min-height: 26px;
    padding: 0;
    margin: 0;
    font-size: 20px;
    cursor: pointer;
    color: #296df5;
}

[b-yknj1y2yp6] .back-btn .mud-icon-root {
    font-size: 26px;
}

/* Title */
.header-title[b-yknj1y2yp6] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #171d27;
}

.main-card[b-yknj1y2yp6] {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 40px;
    padding: 40px;
    border: 1px solid #d6dbe6;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    box-shadow: none;
}

.left-panel[b-yknj1y2yp6] {
    flex: 0 0 498px;
    width: 498px;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.calendar[b-yknj1y2yp6] {
    width: 498px;
    max-width: 100%;
    margin-bottom: 0;
}

.calendar-header[b-yknj1y2yp6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    margin-bottom: 0;
    font-weight: 600;
}

.calendar-header span[b-yknj1y2yp6] {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #171d27;
}

.calendar-header button[b-yknj1y2yp6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 4px;
    border: none;
    border-radius: 6px;
    background: #ffffff;
    color: #283243;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.calendar-header button:hover[b-yknj1y2yp6] {
    background: #ebf3ff;
}

.calendar-grid[b-yknj1y2yp6] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 0;
    column-gap: 0;
    width: 100%;
}

.weekday[b-yknj1y2yp6] {
    text-align: center;
    padding: 12px 0;
    border-bottom: 1px solid #d6dbe6;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #3c4c67;
}

.empty[b-yknj1y2yp6] {
    min-height: 48px;
    padding: 4px 0;
}

.day[b-yknj1y2yp6] {
    justify-self: center;
    width: 40px;
    height: 40px;
    margin: 4px 0;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #283243;
    font-size: 16px;
    line-height: 1.4;
}

.day:disabled[b-yknj1y2yp6] {
    opacity: 1;
    cursor: not-allowed;
    color: #9faec6;
}

.day:disabled:hover[b-yknj1y2yp6] {
    background: transparent;
    cursor: not-allowed;
}

.day:hover[b-yknj1y2yp6] {
    background: #ebf3ff;
}

.day.selected[b-yknj1y2yp6] {
    background: #4d91fa;
    color: #ffffff;
}

/* Slots */

.time-slots[b-yknj1y2yp6] {
    width: 498px;
    max-width: 100%;
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.slot[b-yknj1y2yp6] {
    width: 105px;
    min-height: 45px;
    padding: 12px 20px;
    text-align: center;
    border-radius: 999px;
    border: 1px solid #296df5;
    cursor: pointer;
    color: #171d27;
    background: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
}

.slot:hover:not(:disabled)[b-yknj1y2yp6] {
    background: #ebf3ff;
}

.no-slots[b-yknj1y2yp6] {
    width: 100%;
    margin: 0;
    padding: 12px 0;
    color: #6f819f;
    font-size: 14px;
    line-height: 1.4;
}

.slot.selected[b-yknj1y2yp6] {
    border-color: #296df5;
    background: #296df5;
    color: #ffffff;
}

.timezone-single-row[b-yknj1y2yp6] {
    width: 498px;
    max-width: 100%;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.timezone-left[b-yknj1y2yp6] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: #171d27;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.timezone-left .icon[b-yknj1y2yp6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 18px;
    line-height: 1;
}

.timezone-right[b-yknj1y2yp6] {
    position: relative;
    flex: 1 1 auto;
    max-width: 426px;
}

.timezone-right select[b-yknj1y2yp6] {
    width: 100%;
    min-height: 44px;
    padding: 10px 42px 10px 16px;
    border-radius: 6px;
    border: 1px solid #9faec6;
    background: #ffffff;
    color: #283243;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.timezone-right select:hover[b-yknj1y2yp6] {
    border-color: #296df5;
}

.timezone-right select:focus[b-yknj1y2yp6] {
    outline: none;
    border-color: #296df5;
    box-shadow: 0 0 0 2px rgba(41, 109, 245, 0.16);
}

.timezone-right[b-yknj1y2yp6]::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-65%) rotate(45deg);
    border-right: 1.5px solid #283243;
    border-bottom: 1.5px solid #283243;
    pointer-events: none;
}

.summary[b-yknj1y2yp6] {
    position: relative;
    flex: 0 0 328px;
    width: 328px;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #74a9fb;
    background: linear-gradient(180deg, rgba(235, 243, 255, 0.96) 0%, rgba(235, 243, 255, 0.72) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    height: fit-content;
    max-height: none;
}

.summary h3[b-yknj1y2yp6] {
    margin: 0 0 4px;
    color: #171d27;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

/* Text */
.summary span[b-yknj1y2yp6] {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3c4c67;
}

.summary p[b-yknj1y2yp6] {
    margin: 0;
    color: #283243;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.summary small[b-yknj1y2yp6] {
    color: #283243;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* Button */
.summary button[b-yknj1y2yp6] {
    width: 100%;
    height: 48px;
    margin-top: 4px;
    padding: 0 40px;
    border-radius: 999px;
    background: linear-gradient(165deg, #0a50dc 0%, #4d91fa 100%);
    color: #ffffff;
    border: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.summary button:hover:not(:disabled)[b-yknj1y2yp6] {
    filter: brightness(1.03);
}

.summary button:disabled[b-yknj1y2yp6] {
    background: #d6dbe6;
    color: #6f819f;
    cursor: not-allowed;
}

.slot:disabled[b-yknj1y2yp6] {
    opacity: 1;
    cursor: not-allowed;
    border-color: #d6dbe6;
    color: #9faec6;
    background: #ffffff;
}

/* Tablet / narrow desktop (769px – 1023px) — two-column desktop layout, scaled */
@media (min-width: 769px) and (max-width: 1023px) {
    .schedule-demo-content[b-yknj1y2yp6] {
        width: 100%;
        max-width: calc(100% - 48px);
    }

    .page-header[b-yknj1y2yp6] {
        padding: 16px 0;
    }

    .main-card[b-yknj1y2yp6] {
        width: 100%;
        padding: 32px;
        gap: 20px;
    }

    .left-panel[b-yknj1y2yp6] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .calendar[b-yknj1y2yp6],
    .time-slots[b-yknj1y2yp6],
    .timezone-single-row[b-yknj1y2yp6] {
        width: 100%;
    }

    .summary[b-yknj1y2yp6] {
        flex: 0 0 280px;
        width: 280px;
        padding: 20px;
    }

    .slot[b-yknj1y2yp6] {
        width: calc(33.333% - 6px);
        min-width: 88px;
        padding: 10px 12px;
    }
}

/* Mobile (≤768px) — stacked layout */
@media (max-width: 768px) {
    .schedule-demo-page[b-yknj1y2yp6] {
        min-height: calc(100vh - 60px);
    }

    .schedule-demo-content[b-yknj1y2yp6] {
        width: 100%;
        max-width: calc(100% - 32px);
    }

    .page-header[b-yknj1y2yp6] {
        gap: 12px;
        min-height: 56px;
        padding: 12px 0;
    }

    .header-title[b-yknj1y2yp6] {
        font-size: 15px;
    }

    .main-card[b-yknj1y2yp6] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 20px 16px;
        margin-bottom: 24px;
        gap: 20px;
    }

    .left-panel[b-yknj1y2yp6],
    .calendar[b-yknj1y2yp6],
    .time-slots[b-yknj1y2yp6],
    .timezone-single-row[b-yknj1y2yp6] {
        flex: none;
        width: 100%;
    }

    .calendar-header[b-yknj1y2yp6] {
        padding: 12px 0;
    }

    .calendar-header span[b-yknj1y2yp6] {
        font-size: 15px;
    }

    .weekday[b-yknj1y2yp6] {
        padding: 8px 0;
        font-size: 12px;
    }

    .day[b-yknj1y2yp6] {
        width: 36px;
        height: 36px;
        margin: 2px 0;
        font-size: 14px;
    }

    .empty[b-yknj1y2yp6] {
        min-height: 40px;
    }

    .slot[b-yknj1y2yp6] {
        width: calc(50% - 4px);
        min-height: 40px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .timezone-single-row[b-yknj1y2yp6] {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .timezone-right[b-yknj1y2yp6] {
        width: 100%;
        max-width: none;
    }

    .summary[b-yknj1y2yp6] {
        flex: none;
        width: 100%;
        padding: 20px 16px;
    }

    .summary h3[b-yknj1y2yp6] {
        font-size: 18px;
    }

    .demo-form-wrapper[b-yknj1y2yp6] {
        width: 100%;
        margin-top: 20px;
        padding: 0;
    }

    .demo-form[b-yknj1y2yp6] {
        width: 100%;
    }

    .submit-wrapper[b-yknj1y2yp6] {
        transform: none;
        justify-content: stretch;
        margin-top: 16px;
        margin-bottom: 24px;
        padding: 0;
    }

    .submitFormBtn[b-yknj1y2yp6] {
        width: 100%;
    }
}
/* Wrapper (centering) */
.demo-form-wrapper[b-yknj1y2yp6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 30px;
}

/* Card */
.demo-form[b-yknj1y2yp6] {
    width: 700px;
    max-width: 100%;
    background: #ffffff;
    /*padding: 32px;*/
   /* border-radius: 12px;
    border: 1px solid #e5e7eb;*/
}

    /* Questions */
    .demo-form h4[b-yknj1y2yp6] {
        font-size: 14px;
        font-weight: 600;
        margin-top: 20px;
        margin-bottom: 12px;
        color: #111827;
    }

/* Radio group */
.radio[b-yknj1y2yp6] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

    /* Radio input */
    .radio input[b-yknj1y2yp6] {
        cursor: pointer;
    }
    /* Design system radio icons */
    .demo-form .radio input[type="checkbox"][b-yknj1y2yp6],
    .demo-form .radio input[type="radio"][b-yknj1y2yp6] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 18px;
        height: 18px;
        min-width: 18px;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        background-image: url("https://stragone.blob.core.windows.net/agonedesignsystemassets/Icons/Checkbox%20and%20Radio/Radio-Default-Primary.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .demo-form .radio input[type="checkbox"]:checked[b-yknj1y2yp6],
    .demo-form .radio input[type="radio"]:checked[b-yknj1y2yp6] {
        background-image: url("https://stragone.blob.core.windows.net/agonedesignsystemassets/Icons/Checkbox%20and%20Radio/Radio-Selected-Primary.svg");
    }

    /* Text */
    .radio span[b-yknj1y2yp6] {
        font-size: 14px;
        color: #374151;
    }

/* Textarea */
.demo-form textarea[b-yknj1y2yp6] {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    margin-top: 10px;
    resize: none;
}

.submit-wrapper[b-yknj1y2yp6] {
    display: flex;
    justify-content: center;
    width: 700px;
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.submitFormBtn[b-yknj1y2yp6] {
    width: 200px; /* ✅ SAME as form width */
    padding: 14px;
    border-radius: 30px;
    border: none;
    background: linear-gradient(90deg, #4A7DE0 0%, #3B6EDC 100%);
    color: white;
    font-size: 14px;
}

    /* Disabled */
    .submitFormBtn:disabled[b-yknj1y2yp6] {
        background: #d1d5db;
        color: #94a3b8;
    }

.radio input:checked + span[b-yknj1y2yp6] {
    font-weight: 600;
    color: #4A7DE0;
}
/* Sub textarea under option */
.sub-textarea[b-yknj1y2yp6] {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
}

/* Wrapper for last textarea */
.textarea-wrapper[b-yknj1y2yp6] {
    position: relative;
}

/* Character count */
.char-count[b-yknj1y2yp6] {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 12px;
    color: #9ca3af;
}
.spinner[b-yknj1y2yp6] {
    width: 14px;
    height: 14px;
    border: 2px solid #ccc;
    border-top: 2px solid #333;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-yknj1y2yp6 0.6s linear infinite;
    margin-right: 5px;
}

@keyframes spin-b-yknj1y2yp6 {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Setup/SetupOnboarding.razor.rz.scp.css */
/* ============================================================
   Setup Wizard — Onboarding Introduction Page
   Figma: Cge6r7szWv3jYjGv7Cshw3  Node: 4625-144207
   ============================================================ */

.sw-page[b-ynngj1yydy] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sw-body[b-ynngj1yydy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);
}

.sw-content[b-ynngj1yydy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 27px;
    width: 100%;
    max-width: 726px;
    text-align: center;
    box-sizing: border-box;
    padding: 60.5px 0;
}

/* ── Hero ── */
.sw-hero[b-ynngj1yydy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 560px;
}

.sw-hero-title[b-ynngj1yydy] {
    margin: 0;
    font-size: 31.25px;
    font-weight: 700;
    line-height: 1.4;
    color: #171D27;
}

.sw-hero-subtitle[b-ynngj1yydy] {
    color: #296DF5;
}

.sw-hero-desc[b-ynngj1yydy] {
    margin: 0;
    line-height: 1.4;
    color: #171D27;
}

.sw-hero-desc--medium[b-ynngj1yydy] {
    font-size: 16px;
    font-weight: 400;
}

.sw-hero-desc--small[b-ynngj1yydy] {
    font-size: 14px;
    font-weight: 400;
}

/* ── Overview cards ── */
.sw-overview-strip[b-ynngj1yydy] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    min-width: 726px;
}

.sw-overview-card[b-ynngj1yydy] {
    flex: 1;
    min-width: 0;
    height: 76px;
    background: #FFFFFF;
    border: 1px solid #D6DBE6;
    border-radius: 8px;
    padding: 13px 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
}

.sw-overview-icon[b-ynngj1yydy] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #EBF3FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sw-overview-text[b-ynngj1yydy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
}

.sw-overview-value[b-ynngj1yydy] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #171D27;
    white-space: nowrap;
}

.sw-overview-label[b-ynngj1yydy] {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3C4C67;
}

/* ── What you'll need ── */
.sw-card-need[b-ynngj1yydy] {
    background: #FFFFFF;
    border: 1px solid #D6DBE6;
    border-radius: 12px;
    padding: 16px;
    width: 100%;
    max-width: 438px;
    text-align: left;
    box-sizing: border-box;
}

.sw-need-title[b-ynngj1yydy] {
    margin: 0 0 17px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #3C4C67;
}

.sw-need-list[b-ynngj1yydy] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sw-need-list li[b-ynngj1yydy] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #171D27;
}

.sw-check-icon[b-ynngj1yydy] {
    flex-shrink: 0;
}

/* ── CTA button ── */
.sw-actions[b-ynngj1yydy] {
    display: flex;
    justify-content: center;
}

.sw-start-btn[b-ynngj1yydy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    background: linear-gradient(163.5deg, #0A50DC 0%, #4D91FA 100%);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.sw-start-btn:hover[b-ynngj1yydy] {
    opacity: 0.92;
}

/* ── Disclaimer & footer ── */
.sw-disclaimer[b-ynngj1yydy] {
    margin: 0;
    max-width: 503px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #8C9EBB;
}

.sw-footer[b-ynngj1yydy] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    box-sizing: border-box;
}

.sw-copyright[b-ynngj1yydy] {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #8C9EBB;
    white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sw-content[b-ynngj1yydy] {
        padding: 40px 24px 0;
    }

    .sw-overview-strip[b-ynngj1yydy] {
        flex-direction: column;
    }

    .sw-overview-card[b-ynngj1yydy] {
        max-width: 100%;
    }

    .sw-hero-title[b-ynngj1yydy] {
        font-size: 26px;
    }

    .sw-copyright[b-ynngj1yydy] {
        white-space: normal;
        text-align: center;
    }
}
/* /Pages/SubscriptionExpired.razor.rz.scp.css */
.sub-expired-page[b-vcyqq019dk] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6fb;
    padding: 24px;
}

.sub-expired-card[b-vcyqq019dk] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(15, 34, 88, 0.08);
    padding: 48px 40px;
    max-width: 480px;
    text-align: center;
}

.sub-expired-icon[b-vcyqq019dk] {
    color: #d97706;
    margin-bottom: 16px;
}

.sub-expired-card h1[b-vcyqq019dk] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.sub-expired-card p[b-vcyqq019dk] {
    font-size: 0.92rem;
    color: #6b7280;
    margin-bottom: 10px;
}

.sub-expired-actions[b-vcyqq019dk] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.sub-expired-btn[b-vcyqq019dk] {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1.5px solid #296df5;
    background: #fff;
    color: #296df5;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}

    .sub-expired-btn--primary[b-vcyqq019dk] {
        background: #296df5;
        color: #fff;
    }
/* /Pages/Support.razor.rz.scp.css */
/* ─── Page Container ────────────────────────────────────────────────────── */
.support-page[b-y2ttna74eo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8fafc;
    min-height: 100vh;
    width: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1e293b;
    isolation: isolate;
}

/* ─── Hero Section ──────────────────────────────────────────────────────── */
.support-hero[b-y2ttna74eo] {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #0f5ae5 0%, #1e8bf0 60%, #00e5ff 100%);
    padding: 96px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

    .support-hero[b-y2ttna74eo]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);
        pointer-events: none;
    }

    .support-hero h1[b-y2ttna74eo] {
        font-family: 'Noto Sans', 'Inter', sans-serif;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 12px 0;
        letter-spacing: -0.02em;
    }

    .support-hero p[b-y2ttna74eo] {
        font-size: 16px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.95);
        width: min(100%, 675px);
        max-width: 675px;
        margin: 0 auto 32px auto;
        line-height: 1.5;
    }

/* ─── Search Container ──────────────────────────────────────────────────── */
.search-container[b-y2ttna74eo] {
    position: relative;
    width: min(100%, 675px);
    max-width: 675px;
    margin: 0 auto 32px auto;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 9999px;
    padding: 6px 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .search-container:focus-within[b-y2ttna74eo] {
        transform: scale(1.02);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    }

.search-icon-img[b-y2ttna74eo] {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    opacity: 1;
    flex-shrink: 0;
}

.search-input[b-y2ttna74eo] {
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    color: #1e293b;
    padding: 10px 0;
    background: transparent;
}

    .search-input[b-y2ttna74eo]::placeholder {
        color: #94a3b8;
    }

/* ─── Filter Pills ──────────────────────────────────────────────────────── */
.filter-pills-container[b-y2ttna74eo] {
    width: 100%;
    max-width: 1000px;
    padding: 40px 24px 0 24px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    box-sizing: border-box;
}

.pill-btn[b-y2ttna74eo] {
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 24px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

    .pill-btn:hover[b-y2ttna74eo] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #1e293b;
    }

    .pill-btn.active[b-y2ttna74eo] {
        background: #2563eb;
        color: #ffffff;
        border-color: #2563eb;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    }

/* ─── FAQ Section ────────────────────────────────────────────────────────── */
.faq-section[b-y2ttna74eo] {
    width: 100%;
    max-width: 1000px;
    padding: 40px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
}

.faq-group[b-y2ttna74eo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-category-title[b-y2ttna74eo] {
    font-family: 'Noto Sans', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #2563eb;
    margin: 0;
    letter-spacing: -0.01em;
}



/* ─── Bottom Support Banner ─────────────────────────────────────────────── */
.support-banner-section[b-y2ttna74eo] {
    width: 100%;
    max-width: 1000px;
    padding: 0 24px 60px 24px;
    box-sizing: border-box;
}

.support-gradient-banner[b-y2ttna74eo] {
    background: linear-gradient(135deg, #0947cb 0%, #00d2ff 100%);
    border-radius: 16px;
    padding: 40px;
    color: #ffffff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

    .support-gradient-banner h2[b-y2ttna74eo] {
        font-family: 'Noto Sans', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 700;
        margin: 0 0 12px 0;
        letter-spacing: -0.01em;
    }

    .support-gradient-banner p[b-y2ttna74eo] {
        font-size: 15px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.9);
        max-width: 800px;
        margin: 0 0 32px 0;
    }

.banner-cards-grid[b-y2ttna74eo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.support-option-card[b-y2ttna74eo] {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    box-sizing: border-box;
    transition: transform 0.25s, box-shadow 0.25s;
    text-decoration: none !important;
    border: none;
    text-align: left;
    align-items: flex-start;
}

    .support-option-card:hover[b-y2ttna74eo] {
        transform: translateY(-4px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
    }

.option-card-header[b-y2ttna74eo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.option-icon-wrapper[b-y2ttna74eo] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    flex-shrink: 0;
}

.option-icon-img[b-y2ttna74eo] {
    width: 24px;
    height: 24px;
}

.support-option-card h3[b-y2ttna74eo] {
    font-size: 18px;
    font-weight: 700;
    color: #2563eb;
    margin: 0;
}

.support-option-card p[b-y2ttna74eo] {
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
    margin: 0;
}

.option-card-link[b-y2ttna74eo] {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #2563eb;
    gap: 6px;
}

    .option-card-link svg[b-y2ttna74eo] {
        transition: transform 0.2s;
    }

.support-option-card:hover .option-card-link svg[b-y2ttna74eo] {
    transform: translateX(4px);
}

/* ─── Footer Section ────────────────────────────────────────────────────── */
.support-footer[b-y2ttna74eo] {
    width: 100%;
    padding: 32px 24px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    background: #ffffff;
}

.support-copyright-text[b-y2ttna74eo] {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

/* ─── Responsive Media Queries ──────────────────────────────────────────── */
@media (max-width: 868px) {
    .banner-cards-grid[b-y2ttna74eo] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .support-hero[b-y2ttna74eo] {
        padding: 64px 20px;
    }

        .support-hero h1[b-y2ttna74eo] {
            font-size: 32px;
        }

    .support-gradient-banner[b-y2ttna74eo] {
        padding: 24px;
    }

        .support-gradient-banner h2[b-y2ttna74eo] {
            font-size: 22px;
        }
}

/* ─── Empty State ───────────────────────────────────────────────────────── */
.faq-empty-state-container[b-y2ttna74eo] {
    width: 100%;
    margin: 0 auto;
}

.search-results-header[b-y2ttna74eo] {
    font-size: 1rem;
    color: #475569;
    padding-bottom: 12px;
    border-bottom: 1px solid #cbd5e1;
    margin-bottom: 60px;
    font-weight: 500;
}

.search-keyword[b-y2ttna74eo] {
    color: #3b82f6;
    font-weight: 600;
}

.empty-state-content[b-y2ttna74eo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 100px;
}

.empty-state-icon-wrapper[b-y2ttna74eo] {
    background-color: #f1f5f9;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.empty-state-search-icon[b-y2ttna74eo] {
    width: 44px;
    height: 44px;
    stroke: #94a3b8;
}

.empty-state-title[b-y2ttna74eo] {
    font-size: 1.25rem;
    color: #1e293b;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.empty-state-subtitle[b-y2ttna74eo] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}

/* /Pages/TenantSetup.razor.rz.scp.css */

.sticky-top-header[b-4xx30tmhkj] {
    position: sticky;
    top: 0; /* sticks to top */
    z-index: 1000; /* stays above content */

    background: #ffffff; /* ✅ MUST, otherwise content overlaps */
    padding-bottom: 10px; /* spacing under stepper */

    border-bottom: 1px solid #e5e7eb; /* subtle separation */
}
.setup-wizard[b-4xx30tmhkj] {
    max-width: 1050px;
    margin: 0 auto;
    padding: 40px;
}

/* Header */
.setup-wizard-header[b-4xx30tmhkj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 0;
}

.setup-wizard-title[b-4xx30tmhkj] {
    font-size: 1.6rem;
    font-weight: 700;
}

.setup-wizard-sub[b-4xx30tmhkj] {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Step bar container */
.setup-wizard-step-row[b-4xx30tmhkj] {
    margin: 20px 0;
    padding-bottom: 8px;
}

/* Button */
.btn-outline[b-4xx30tmhkj] {
    border: 1px solid #0A50DC; 
    color: #296DF5;
    background: white;
    padding: 0px 16px;
    border-radius: 6px;
    text-transform: none;
    height: 38px;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content */
.setup-content[b-4xx30tmhkj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Info box */
.info-box[b-4xx30tmhkj] {
    display: flex;
    gap: 12px;
    padding: 16px;
    border: 1px solid #c7dbff;
    background: #eef5ff;
    border-radius: 12px;
}

.info-title[b-4xx30tmhkj] {
    font-weight: 600;
    color: #2563eb;
}

.info-text[b-4xx30tmhkj] {
    font-size: 0.9rem;
}

/* Section */
.setup-section[b-4xx30tmhkj] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.section-title[b-4xx30tmhkj] {
    font-weight: 600;
    margin-bottom: 16px;
}

/* Cards */
.setup-card-wrapper[b-4xx30tmhkj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}


.setup-card[b-4xx30tmhkj] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.setup-card.active[b-4xx30tmhkj] {
    border: 2px solid #3b82f6;
    background: #f9fbff;
}
.setup-card:hover[b-4xx30tmhkj] {
    border-color: #d1d5db;
}
.card-icon[b-4xx30tmhkj] {
    width: 42px;
    height: 42px;
    background: #eef2ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
/* Default icon color */
.card-icon .mud-icon-root[b-4xx30tmhkj] {
    color: #4f46e5;
}
/* ✅ Active icon background */
.active-icon[b-4xx30tmhkj] {
    background: var(--Color-Primary-25, #EBF3FF);
}
/* Card active state */
.setup-card.active[b-4xx30tmhkj] {
    border: 2px solid #3b82f6;
    background: var(--surface-neutral-negative, #FFF);
}
.card-title[b-4xx30tmhkj] {
    font-weight: 600;
    padding-top: 16px;
}
.info-icon .mud-icon-root[b-4xx30tmhkj] {
    color: #2563eb;
    font-size: 18px;
}
.card-desc[b-4xx30tmhkj] {
    font-size: 0.9rem;
    color: #6b7280;
}

/* Badge */
.badge[b-4xx30tmhkj] {
    margin-top: 10px;
    background: #d1fae5;
    color: #047857;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
}

.setup-card.active[b-4xx30tmhkj] {
    box-shadow: 0 0 0 2px #3b82f6 inset;
}
.setup-card.active .card-icon[b-4xx30tmhkj] {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
/* Footer */
/*.setup-footer {
    display: flex;
    justify-content: flex-end;
}*/
.next-btn[b-4xx30tmhkj] {
    text-transform: none !important; /* ✅ remove ALL CAPS */
    padding: 8px 22px;
    border-radius: 8px;
    font-weight: 500;
}
.next-btn[b-4xx30tmhkj] {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: white !important;
}
.success-box[b-4xx30tmhkj] {
    margin-top: 16px;
    border: 1px solid #22c55e;
    background: #ecfdf5;
    border-radius: 10px;
    padding: 14px 16px;
}

.success-content[b-4xx30tmhkj] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* ✅ Green circle container */
.success-icon[b-4xx30tmhkj] {
    width: 26px;
    height: 26px;
    background: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

/* ✅ White tick */
.success-check-icon[b-4xx30tmhkj] {
    color: white !important;
    font-size: 16px;
}

/*.success-icon .mud-icon-root {
    color: white !important;
    font-size: 20px;
}*/

.success-title[b-4xx30tmhkj] {
    color: #166534;
    font-weight: 600;
    font-size: 0.95rem;
}

.success-sub[b-4xx30tmhkj] {
    color: #4b5563;
    font-size: 0.85rem;
    margin-top: 2px;
}
.success-box[b-4xx30tmhkj] {
    animation: fadeIn-b-4xx30tmhkj 0.2s ease-in;
}
@keyframes fadeIn-b-4xx30tmhkj {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-section[b-4xx30tmhkj] {
    margin-top: 20px;
}

/* Title */
.admin-title[b-4xx30tmhkj] {
    font-weight: 600;
    margin-bottom: 10px;
}

/* Helper text */
.admin-helper[b-4xx30tmhkj] {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 14px;
}

.admin-info-box[b-4xx30tmhkj] {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid #c7dbff;
    background: #eef5ff;
    border-radius: 10px;
}

.mud-button.mud-disabled[b-4xx30tmhkj] {
    background: #e5e7eb !important;
    color: #9ca3af !important;
}

.admin-title[b-4xx30tmhkj] {
    font-weight: 600;
    margin-bottom: 12px;
    margin-top: 4px;
}

.back-btn[b-4xx30tmhkj] {
    text-transform: none;
    border-radius: 8px;
    padding: 8px 18px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}
/* hover */
.back-btn:hover[b-4xx30tmhkj] {
    background: #e5e7eb;
}
.setup-footer[b-4xx30tmhkj] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.setup-footer.has-back[b-4xx30tmhkj] {
    justify-content: space-between;
    align-items: center;
}
.mud-input-error[b-4xx30tmhkj] {
    font-size: 0.8rem;
}


/* Overlay */

.modal-overlay[b-4xx30tmhkj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* ✅ higher than sticky header */
}

/* Modal */
.success-modal[b-4xx30tmhkj] {
    background: white;
    width: 420px;
    padding: 24px;
    border-radius: 16px;
    text-align: center;
}

/* Icon */
.modal-icon[b-4xx30tmhkj] {
    width: 56px;
    height: 56px;
    background: #22c55e;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-icon .mud-icon-root[b-4xx30tmhkj] {
    color: white;
    font-size: 28px;
}
/* Title */
.modal-title[b-4xx30tmhkj] {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
}
/* Text */
.modal-text[b-4xx30tmhkj] {
    font-size: 0.9rem;
    color: #4b5563;
    margin-bottom: 16px;
}
.email-highlight[b-4xx30tmhkj] {
    color: #2563eb;
    font-weight: 500;
}

/* Button */
.modal-btn[b-4xx30tmhkj] {
    margin-bottom: 16px;
    text-transform: none;
    border-radius: 8px;
    padding: 8px 20px;
}

/* Info box */
.modal-info-box[b-4xx30tmhkj] {
    text-align: left;
    display: flex;
    gap: 10px;
    padding: 12px;
    border: 1px solid #c7dbff;
    background: #eef5ff;
    border-radius: 10px;
}
/* ===== Form Layout ===== */
.form-group[b-4xx30tmhkj] {
    margin-bottom: 18px;
}

/* Label row */
.form-label[b-4xx30tmhkj] {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Helper text */
.helper-text[b-4xx30tmhkj] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Small info icon on right */
.field-icon[b-4xx30tmhkj] {
    font-size: 16px;
    color: #9ca3af;
    cursor: pointer;
}

/* Section Title tweak */
.section-title[b-4xx30tmhkj] {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
}
/* Domain grid (2 columns like design) */
.domain-grid[b-4xx30tmhkj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Optional label */
.optional[b-4xx30tmhkj] {
    font-size: 12px;
    color: #9ca3af;
    margin-left: 4px;
}

/* Required field asterisk */
.required-asterisk[b-4xx30tmhkj] {
    color: #dc2626;
    font-weight: 600;
    line-height: 1;
}

/* Submit error banner */
.error-box[b-4xx30tmhkj] {
    display: flex;
    gap: 12px;
    padding: 16px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 12px;
    margin-bottom: 16px;
}

.error-icon .mud-icon-root[b-4xx30tmhkj] {
    color: #dc2626;
    font-size: 18px;
}

.error-title[b-4xx30tmhkj] {
    font-weight: 600;
    color: #b91c1c;
}

.error-list[b-4xx30tmhkj] {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 0.9rem;
    color: #7f1d1d;
}

.error-list li[b-4xx30tmhkj] {
    margin-top: 2px;
}

/* Step 4: Review & submit */
.review-content[b-4xx30tmhkj] {
    gap: 16px;
}

.review-section[b-4xx30tmhkj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.review-section > .section-title[b-4xx30tmhkj] {
    color: #000000;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
}

.review-section-header[b-4xx30tmhkj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.review-section-header .section-title[b-4xx30tmhkj] {
    margin-bottom: 0;
    color: #000000;
    font-size: 15px;
    font-weight: 600;
}

.review-edit-link[b-4xx30tmhkj] {
    border: none;
    background: none;
    color: #2563eb;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.review-edit-link:hover[b-4xx30tmhkj] {
    text-decoration: underline;
}

.review-fields[b-4xx30tmhkj] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.review-row[b-4xx30tmhkj] {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: start;
    column-gap: 24px;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.review-fields > .review-row:first-child[b-4xx30tmhkj] {
    padding-top: 0;
}

.review-fields > .review-row:last-child[b-4xx30tmhkj] {
    padding-bottom: 0;
    border-bottom: none;
}

.review-label[b-4xx30tmhkj] {
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
    font-weight: 400;
}

.review-value[b-4xx30tmhkj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    color: #000000;
    word-break: break-word;
    min-width: 0;
}

.review-value-line[b-4xx30tmhkj] {
    display: block;
    color: #000000;
    font-weight: 400;
}

.review-subsection-title[b-4xx30tmhkj] {
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    padding: 16px 0 4px;
    width: 100%;
}

@media (max-width: 640px) {
    .review-row[b-4xx30tmhkj] {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
}


.review-submit-info[b-4xx30tmhkj] {
    margin-top: 4px;
}

/* Step 3: Assign Roles */
.roles-loading[b-4xx30tmhkj] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.roles-empty-text[b-4xx30tmhkj] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
}

.roles-section[b-4xx30tmhkj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.role-assign-list[b-4xx30tmhkj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.role-assign-card[b-4xx30tmhkj] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.role-assign-card.expanded[b-4xx30tmhkj] {
    border-color: #d1d5db;
}

.role-assign-header[b-4xx30tmhkj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    user-select: none;
}

.role-assign-header-text[b-4xx30tmhkj] {
    flex: 1;
    min-width: 0;
}

.role-assign-title[b-4xx30tmhkj] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #111827;
}

.role-assign-desc[b-4xx30tmhkj] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 2px;
}

.role-tag[b-4xx30tmhkj] {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.role-tag.optional[b-4xx30tmhkj],
.role-tag.required[b-4xx30tmhkj] {
    background: #f3f4f6;
    color: #4b5563;
}

.role-chevron[b-4xx30tmhkj] {
    flex-shrink: 0;
    color: #9ca3af !important;
    font-size: 1.25rem !important;
}

.role-assign-body[b-4xx30tmhkj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 18px 16px;
    border-top: 1px solid #f3f4f6;
}

.role-email-row[b-4xx30tmhkj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
}

.role-email-row .role-email-input[b-4xx30tmhkj] {
    flex: 1;
    margin-top: 0;
}

.role-email-remove[b-4xx30tmhkj] {
    margin-top: 6px;
    color: #9ca3af !important;
}

.role-email-remove:hover[b-4xx30tmhkj] {
    color: #6b7280 !important;
    background: #f3f4f6 !important;
}

.assign-more-btn[b-4xx30tmhkj] {
    text-transform: none !important;
    border-radius: 8px !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    width: 100%;
    justify-content: center;
}

.assign-more-btn:hover[b-4xx30tmhkj] {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

@media (max-width: 640px) {
    .role-assign-header[b-4xx30tmhkj] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .role-tag[b-4xx30tmhkj] {
        order: 3;
        margin-left: auto;
    }

    .role-chevron[b-4xx30tmhkj] {
        order: 4;
    }
}
/* INVITED USER SECTION */
.invited-user-wrapper[b-4xx30tmhkj] {
    background: #f9fafb;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #e5e7eb;
}

.invited-title[b-4xx30tmhkj] {
    font-weight: 600;
    margin-bottom: 6px;
}

.invited-desc[b-4xx30tmhkj] {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
}

.invited-card[b-4xx30tmhkj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
}

.invited-left[b-4xx30tmhkj] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.invited-icon[b-4xx30tmhkj] {
    background: #f3f4f6;
    border-radius: 50%;
    padding: 8px;
}

.invited-role[b-4xx30tmhkj] {
    font-weight: 600;
}

.invited-email[b-4xx30tmhkj] {
    font-size: 12px;
    color: #6b7280;
}

.invited-badge[b-4xx30tmhkj] {
    background: #fde68a;
    color: #92400e;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
}


/* TENANT OWNER */
.owner-card[b-4xx30tmhkj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
    background: #ffffff;
}

.owner-left[b-4xx30tmhkj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.owner-icon[b-4xx30tmhkj] {
    background: #fef3c7;
    border-radius: 50%;
    padding: 8px;
}

.owner-role[b-4xx30tmhkj] {
    font-weight: 600;
}

.owner-email[b-4xx30tmhkj] {
    font-size: 12px;
    color: #6b7280;
}

.owner-badge[b-4xx30tmhkj] {
    background: #d1fae5;
    color: #065f46;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
}
.custom-input[b-4xx30tmhkj] {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    outline: none;
    transition: border 0.2s ease;
}

    /* focus */
    .custom-input:focus[b-4xx30tmhkj] {
        border: 2px solid #3b82f6;
    }

/* error */
.input-error[b-4xx30tmhkj] {
    border: 2px solid #ef4444 !important;
}

/* error text */
.input-error-text[b-4xx30tmhkj] {
    font-size: 12px;
    color: #dc2626;
    margin-top: 4px;
}
/* placeholder */
.custom-input[b-4xx30tmhkj]::placeholder {
    color: #9ca3af;
}
.section-divider[b-4xx30tmhkj] {
    margin: 24px 0;
    border-top: 1px solid #e5e7eb;
}
.primary-btn[b-4xx30tmhkj] {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

    .primary-btn:disabled[b-4xx30tmhkj] {
        background: #e5e7eb;
        color: #9ca3af;
        cursor: not-allowed;
    }
.readonly-input[b-4xx30tmhkj] {
    background: #f3f4f6;
    color: #6b7280;
}
.tooltip-wrapper[b-4xx30tmhkj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tooltip[b-4xx30tmhkj] {
    position: relative;
}
.tooltip-text[b-4xx30tmhkj] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 25px;
    top: -5px;
    width: 250px;
    background: #111827;
    color: white;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    transition: 0.2s;
    z-index: 100;
}

.tooltip:hover .tooltip-text[b-4xx30tmhkj] {
    visibility: visible;
    opacity: 1;
}

/* row */
.role-email-row[b-4xx30tmhkj] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* remove button */
.remove-btn[b-4xx30tmhkj] {
    border: none;
    background: #f3f4f6;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #6b7280;
}

    .remove-btn:hover[b-4xx30tmhkj] {
        background: #e5e7eb;
    }

/* add button */
.assign-more-btn[b-4xx30tmhkj] {
    margin-top: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    width: 100%;
    font-weight: 500;
    cursor: pointer;
}

    .assign-more-btn:hover[b-4xx30tmhkj] {
        background: #f9fafb;
    }
.back-btn[b-4xx30tmhkj] {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

    /* hover */
    .back-btn:hover[b-4xx30tmhkj] {
        background: #e5e7eb;
    }

    /* disabled state (if needed later) */
    .back-btn:disabled[b-4xx30tmhkj] {
        background: #e5e7eb;
        color: #9ca3af;
        cursor: not-allowed;
    }
/* /Pages/TenantSetupStatus.razor.rz.scp.css */
body[b-lxgvgtvd1p] {
    background-color: #f5f7fb;
    font-family: "Segoe UI", sans-serif;
}

.setup-container[b-lxgvgtvd1p] {
    padding: 30px;
}

/* Header */
.header h2[b-lxgvgtvd1p] {
    margin: 0;
    font-weight: 600;
}

.header p[b-lxgvgtvd1p] {
    color: #6b7280;
    margin-top: 5px;
}

/* Card */
.setup-card[b-lxgvgtvd1p] {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient( 180deg, #ffffff 0%, #f5f9ff 40%, #ebf3ff 100% );
    border: 1.5px solid #3b82f6;
}

/* Header Layout */
.card-header[b-lxgvgtvd1p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.left[b-lxgvgtvd1p] {
    display: flex;
    gap: 15px;
}

/* Icon */

.icon-box[b-lxgvgtvd1p] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-img[b-lxgvgtvd1p] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    /* Optional: make white if your SVG supports it */
    filter: brightness(0) invert(1);
}

/* Right */
.right[b-lxgvgtvd1p] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Badge */
.badge[b-lxgvgtvd1p] {
    background: #e5edff;
    color: #2563eb;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}

/* Button */
.btn-primary[b-lxgvgtvd1p] {
    background: #2563eb;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

    .btn-primary:hover[b-lxgvgtvd1p] {
        background: #1d4ed8;
    }

/* Progress */
.progress-section[b-lxgvgtvd1p] {
    margin: 15px 0;
}

.progress-header[b-lxgvgtvd1p] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 6px;
}

.progress-bar[b-lxgvgtvd1p] {
    background: #e5e7eb;
    border-radius: 6px;
    height: 8px;
}

.progress-fill[b-lxgvgtvd1p] {
    background: #22c55e;
    height: 100%;
    border-radius: 6px;
}

/* Checklist */
.checklist[b-lxgvgtvd1p] {
    list-style: none;
    padding: 0;
}

    .checklist li[b-lxgvgtvd1p] {
        margin: 10px 0;
        font-size: 14px;
    }

.completed[b-lxgvgtvd1p] {
    color: #16a34a;
    font-weight: 500;
}

/* Note */
.note[b-lxgvgtvd1p] {
    font-size: 13px;
    color: #6b7280;
}

/* Subscribed */
.subscribed[b-lxgvgtvd1p] {
    margin-top: 25px;
}

    .subscribed h4[b-lxgvgtvd1p] {
        margin-bottom: 10px;
    }

.info-box[b-lxgvgtvd1p] {
    border: 1px solid #3b82f6;
    background: #eef4ff;
    border-radius: 8px;
    padding: 15px;
}

    .info-box strong[b-lxgvgtvd1p] {
        color: #2563eb;
    }

    .info-box p[b-lxgvgtvd1p] {
        margin-top: 5px;
    }
/* Grid */
.product-grid[b-lxgvgtvd1p] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 15px;
}

.product-card[b-lxgvgtvd1p] {
    background: #ffffff;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    /*  REMOVE TRANSITIONS */
    transition: none !important;
    /* SET DEFAULT CURSOR */
    cursor: default;
}
.product-card:hover[b-lxgvgtvd1p] {
    /* REMOVE HOVER EFFECTS */
    transform: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    /*  KEEP NORMAL CURSOR */
    cursor: default;
}
/* Header */
.product-header[b-lxgvgtvd1p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo */
.product-logo[b-lxgvgtvd1p] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
}

/* Menu dots */
/*.menu {
    font-size: 18px;
    cursor: pointer;
    color: #6b7280;
}*/

/* Text */
.product-card h5[b-lxgvgtvd1p] {
    margin: 10px 0 4px;
    font-size: 15px;
    font-weight: 600;
}

.product-card p[b-lxgvgtvd1p] {
    font-size: 13px;
    color: #6b7280;
}

/* Status */
.status[b-lxgvgtvd1p] {
    display: inline-block;
    margin-top: 10px;
    background: #d1fae5;
    color: #059669;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}

@media (max-width: 768px) {
    .product-grid[b-lxgvgtvd1p] {
        grid-template-columns: 1fr; /* 1 item per row on mobile */
    }
}
.success-card[b-lxgvgtvd1p] {
    background: #f3f9ff;
    border: 1px solid #cfe5ff;
}

.badge[b-lxgvgtvd1p] {
    padding: 6px 12px;
    border-radius: 20px;
    background: #ffe0d6;
    color: #c24b2a;
}
.submitted-card[b-lxgvgtvd1p] {
    background: #f3f9ff;
    border: 1px solid #cfe5ff;
}

.submitted-badge[b-lxgvgtvd1p] {
    background: #ffe0d6;
    color: #c24b2a;
    padding: 6px 12px;
    border-radius: 20px;
}
.menu-wrapper[b-lxgvgtvd1p] {
    position: relative;
}

/* three dots button */
.menu[b-lxgvgtvd1p] {
    font-size: 18px;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    border-radius: 50%;
}

    .menu:hover[b-lxgvgtvd1p] {
        background: #f3f4f6;
    }

    /* Tooltip "More" */
    .menu[b-lxgvgtvd1p]::after {
        content: "More";
        position: absolute;
        top: -30px;
        right: 0;
        background: #111827;
        color: white;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 6px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }

    .menu:hover[b-lxgvgtvd1p]::after {
        opacity: 1;
    }

/* Popup menu */
.menu-popup[b-lxgvgtvd1p] {
    position: absolute;
    top: 35px;
    right: 0;
    background: white;
    border-radius: 8px;
    padding: 8px 0;
    width: 180px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
    z-index: 10;
}

/* Menu item */
.menu-item[b-lxgvgtvd1p] {
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
}

    .menu-item:hover[b-lxgvgtvd1p] {
        background: #f3f4f6;
    }
/* /Pages/VerifyEmail.razor.rz.scp.css */
/* Scoped styles for VerifyEmail.razor - moved verbatim from inline <style> (Phase 3.3c batch 2). */
    .ve-page[b-v1ffiutcqh] {
        min-height: 100vh;
        background: linear-gradient(160deg, #F0F4FF 0%, #E8EEFB 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 16px 24px;
        box-sizing: border-box;
    }

    .ve-logo[b-v1ffiutcqh] {
        margin-bottom: 40px;
    }

    .ve-card[b-v1ffiutcqh] {
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 520px;
        width: 100%;
        text-align: center;
    }

    .ve-envelope[b-v1ffiutcqh] {
        margin-bottom: 24px;
    }

    .ve-title[b-v1ffiutcqh] {
        font-size: 26px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 12px;
    }

    .ve-desc[b-v1ffiutcqh] {
        font-size: 14px;
        color: #6B7280;
        line-height: 1.6;
        margin: 0 0 32px;
    }

    .ve-desc strong[b-v1ffiutcqh] { color: #111827; }

    .ve-expiry-hint[b-v1ffiutcqh] {
        display: inline-block;
        margin-top: 6px;
        font-size: 13px;
        color: #9CA3AF;
    }

    /* ── OTP row ── */
    .ve-otp-row[b-v1ffiutcqh] {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-bottom: 8px;
    }

    .ve-otp-box[b-v1ffiutcqh] {
        width: 52px;
        height: 60px;
        border: 1.5px solid #D1D5DB;
        border-radius: 10px;
        text-align: center;
        font-size: 22px;
        font-weight: 600;
        color: #111827;
        background: #fff;
        outline: none;
        transition: border-color 0.15s, box-shadow 0.15s;
        caret-color: #2563EB;
    }

    .ve-otp-box:focus[b-v1ffiutcqh] {
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }

    .ve-otp-box--error[b-v1ffiutcqh] {
        border-color: #EF4444;
    }

    .ve-otp-error[b-v1ffiutcqh] {
        font-size: 12.5px;
        color: #EF4444;
        margin: 4px 0 0;
    }

    /* ── Loading ── */
    .ve-loading[b-v1ffiutcqh] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #6B7280;
        margin-top: 12px;
    }

    .ve-spinner[b-v1ffiutcqh] {
        width: 16px;
        height: 16px;
        border: 2px solid #D1D5DB;
        border-top-color: #2563EB;
        border-radius: 50%;
        animation: ve-spin-b-v1ffiutcqh 0.7s linear infinite;
    }

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

    /* ── Resend ── */
    .ve-resend[b-v1ffiutcqh] {
        margin-top: 20px;
        font-size: 13px;
        color: #6B7280;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ve-link-btn[b-v1ffiutcqh] {
        background: none;
        border: none;
        color: #2563EB;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        padding: 0;
        text-decoration: none;
    }

    .ve-link-btn:hover[b-v1ffiutcqh] { text-decoration: underline; }
    .ve-link-btn:disabled[b-v1ffiutcqh] { color: #9CA3AF; cursor: default; }

    .ve-resend-wait[b-v1ffiutcqh] { color: #9CA3AF; }

    /* ── Change email ── */
    .ve-change-email[b-v1ffiutcqh] {
        margin-top: 10px;
    }

    .ve-change-link[b-v1ffiutcqh] {
        font-size: 13px;
        color: #2563EB;
        text-decoration: none;
    }

    .ve-change-link:hover[b-v1ffiutcqh] { text-decoration: underline; }

    .ve-change-btn[b-v1ffiutcqh] {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .ve-modal-backdrop[b-v1ffiutcqh] {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 16px;
    }

    .ve-modal[b-v1ffiutcqh] {
        background: #fff;
        border-radius: 12px;
        padding: 28px;
        max-width: 420px;
        width: 100%;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        text-align: left;
    }

    .ve-modal-title[b-v1ffiutcqh] {
        margin: 0 0 8px;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

    .ve-modal-desc[b-v1ffiutcqh] {
        margin: 0 0 16px;
        font-size: 14px;
        color: #6B7280;
        line-height: 1.5;
    }

    .ve-modal-input[b-v1ffiutcqh] {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
        border: 1px solid #D1D5DB;
        border-radius: 8px;
        font-size: 14px;
        margin-bottom: 8px;
    }

    .ve-modal-input:focus[b-v1ffiutcqh] {
        outline: none;
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }

    .ve-modal-actions[b-v1ffiutcqh] {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 16px;
    }

    .ve-modal-cancel[b-v1ffiutcqh],
    .ve-modal-submit[b-v1ffiutcqh] {
        border-radius: 8px;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }

    .ve-modal-cancel[b-v1ffiutcqh] {
        background: #fff;
        border: 1px solid #D1D5DB;
        color: #374151;
    }

    .ve-modal-submit[b-v1ffiutcqh] {
        background: #2563EB;
        border: none;
        color: #fff;
    }

    .ve-modal-submit:disabled[b-v1ffiutcqh],
    .ve-modal-cancel:disabled[b-v1ffiutcqh] {
        opacity: 0.6;
        cursor: default;
    }

    /* ── Footer ── */
    .ve-footer[b-v1ffiutcqh] {
        margin-top: auto;
        padding-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .ve-footer-badges[b-v1ffiutcqh] {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .ve-cert-badge[b-v1ffiutcqh] {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ve-cert-badge img[b-v1ffiutcqh] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .ve-cert-badge--wide[b-v1ffiutcqh] {
        width: 72px;
        height: 32px;
        background: #fff;
        border-radius: 6px;
    }

    .ve-copyright[b-v1ffiutcqh] {
        font-size: 11px;
        color: #9CA3AF;
        margin: 0;
    }