/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-pyerdtnftk],
.components-reconnect-repeated-attempt-visible[b-pyerdtnftk],
.components-reconnect-failed-visible[b-pyerdtnftk],
.components-pause-visible[b-pyerdtnftk],
.components-resume-failed-visible[b-pyerdtnftk],
.components-rejoining-animation[b-pyerdtnftk] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* About Page Styles */
a[b-q9klrvyeaf], button[b-q9klrvyeaf] {
    text-decoration: none !important;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

.about-page[b-q9klrvyeaf] {
    background: #f5f7fa;
    min-height: 100vh;
}

/* Hero Section */
.hero-section[b-q9klrvyeaf] {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(to bottom, var(--primary-blue) 0%, #0062ff4b 100%), url('/images/about-header-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
    color: white;
    text-align: center;
}

/* Floating Bone Animations */
.floating-bone[b-q9klrvyeaf] {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.bone-1[b-q9klrvyeaf] {
    top: 12%;
    left: 8%;
    width: 70px;
    animation: float1-b-q9klrvyeaf 4s ease-in-out infinite;
}

.bone-2[b-q9klrvyeaf] {
    bottom: 18%;
    right: 10%;
    width: 90px;
    animation: float2-b-q9klrvyeaf 5s ease-in-out infinite;
}

.bone-3[b-q9klrvyeaf] {
    top: 60%;
    left: 15%;
    width: 55px;
    opacity: 0.8;
    animation: float3-b-q9klrvyeaf 4.5s ease-in-out infinite 0.5s;
}

.bone-4[b-q9klrvyeaf] {
    top: 25%;
    right: 18%;
    width: 65px;
    opacity: 0.75;
    animation: float4-b-q9klrvyeaf 5.5s ease-in-out infinite 1s;
}

@keyframes float1-b-q9klrvyeaf {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-12px) translateX(5px) rotate(5deg);
    }
    50% {
        transform: translateY(-20px) translateX(0) rotate(10deg);
    }
    75% {
        transform: translateY(-8px) translateX(-5px) rotate(3deg);
    }
}

@keyframes float2-b-q9klrvyeaf {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    33% {
        transform: translateY(-18px) translateX(-8px) rotate(-8deg);
    }
    66% {
        transform: translateY(-25px) translateX(5px) rotate(-12deg);
    }
}

@keyframes float3-b-q9klrvyeaf {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(-5deg);
    }
    40% {
        transform: translateY(-15px) translateX(10px) rotate(8deg);
    }
    80% {
        transform: translateY(-22px) translateX(-5px) rotate(0deg);
    }
}

@keyframes float4-b-q9klrvyeaf {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(10deg);
    }
    30% {
        transform: translateY(-10px) translateX(-10px) rotate(-5deg);
    }
    60% {
        transform: translateY(-28px) translateX(8px) rotate(15deg);
    }
    85% {
        transform: translateY(-12px) translateX(-3px) rotate(5deg);
    }
}

.hero-section .container[b-q9klrvyeaf] {
    position: relative;
    z-index: 2;
}

.section-tag[b-q9klrvyeaf] {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.hero-section h1[b-q9klrvyeaf] {
    font-size: 2.75rem;
    margin: 0 0 16px;
    font-weight: 700;
    color: #fde272;
}

.hero-subtitle[b-q9klrvyeaf] {
    font-size: 1.5rem;
    margin: 0 0 24px;
    opacity: 0.95;
}

.hero-subtitle strong[b-q9klrvyeaf] {
    color: #ffd700;
}

.hero-description[b-q9klrvyeaf] {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.9;
}

/* History Section */
.history-section[b-q9klrvyeaf] {
    background: white;
    padding: 80px 0;
}

.history-content[b-q9klrvyeaf] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 60px;
    align-items: center;
}

.history-text h2[b-q9klrvyeaf] {
    font-size: 2.25rem;
    color: #1e5bb5;
    margin: 0 0 24px;
    font-weight: 700;
}

.company-name[b-q9klrvyeaf] {
    color: #1e5bb5;
    font-size: inherit;
    font-weight: 700;
}

.history-text p[b-q9klrvyeaf] {
    color: #4a5568;
    line-height: 2;
    margin: 0 0 20px;
    font-size: 1.1rem;
}

.history-image[b-q9klrvyeaf] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.history-image img[b-q9klrvyeaf] {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

/* Branches Section */
.branches-section[b-q9klrvyeaf] {
    background: linear-gradient(135deg, #1a365d 0%, #2d5aa0 100%);
    padding: 40px 0;
    overflow: hidden;
}

.branch-items[b-q9klrvyeaf] {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

.branch-item[b-q9klrvyeaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: white;
}

.branch-mascot[b-q9klrvyeaf] {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.branch-name[b-q9klrvyeaf] {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Shopping Section */
.shopping-section[b-q9klrvyeaf] {
    padding: 60px 0;
}

.shopping-content[b-q9klrvyeaf] {
    display: flex;
    align-items: center;
    gap: 100px;
    max-width: 1100px;
    margin: 0 auto;
}

.shopping-image[b-q9klrvyeaf] {
    flex: 0 0 auto;
    max-width: 500px;
}

.shopping-image img[b-q9klrvyeaf] {
    width: 100%;
    height: auto;
    object-fit: contain;
}


.shopping-text[b-q9klrvyeaf] {
    flex: 1;
}

.shopping-text h2[b-q9klrvyeaf] {
    font-size: 2.25rem;
    color: #1e5bb5;
    margin: 0 0 24px;
    font-weight: 700;
}

.shopping-text p[b-q9klrvyeaf] {
    color: #4a5568;
    line-height: 2;
    font-size: 1.1rem;
}

/* Services Section */
.services-section[b-q9klrvyeaf] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #fef6e8 0%, #fff9f0 100%);
    padding: 80px 0;
}

/* Services Section Floating Bones */
.service-bone-1[b-q9klrvyeaf] {
    top: 5%;
    left: 3%;
    width: 80px;
    animation: float1-b-q9klrvyeaf 4s ease-in-out infinite;
}

.service-bone-2[b-q9klrvyeaf] {
    top: 8%;
    right: 5%;
    width: 90px;
    animation: float2-b-q9klrvyeaf 5s ease-in-out infinite 0.5s;
}

.services-header[b-q9klrvyeaf] {
    text-align: center;
    margin-bottom: 50px;
}

.services-section .section-tag[b-q9klrvyeaf] {
    background: transparent;
    color: #1e5bb5;
    font-weight: 600;
    font-size: 1rem;
}

.services-section h2[b-q9klrvyeaf] {
    font-size: 2.25rem;
    color: #1a365d;
    margin: 16px 0;
    font-weight: 700;
}

.services-description[b-q9klrvyeaf] {
    max-width: 900px;
    margin: 0 auto;
    color: #4a5568;
    line-height: 1.9;
    font-size: 1.05rem;
}

.services-layout[b-q9klrvyeaf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.services-column[b-q9klrvyeaf] {
    display: flex;
    flex-direction: column;
    gap: 60px;
    flex: 0 0 240px;
}

.services-center[b-q9klrvyeaf] {
    flex: 0 0 auto;
    max-width: 380px;
}

.services-center img[b-q9klrvyeaf] {
    width: 100%;
    height: auto;
}

.service-card[b-q9klrvyeaf] {
    background: transparent;
    padding: 20px;
    text-align: center;
    box-shadow: none !important;
}

.service-card-icon[b-q9klrvyeaf] {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
}

.service-card-icon img[b-q9klrvyeaf] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service-card h3[b-q9klrvyeaf] {
    font-size: 1.15rem;
    color: #1a365d;
    margin: 0 0 10px;
    font-weight: 700;
}

.service-card p[b-q9klrvyeaf] {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 14px;
}

.service-link[b-q9klrvyeaf] {
    color: #1e5bb5;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.service-link:hover[b-q9klrvyeaf] {
    text-decoration: underline;
}

.service-link i[b-q9klrvyeaf] {
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .services-layout[b-q9klrvyeaf] {
        flex-wrap: wrap;
    }
    
    .services-center[b-q9klrvyeaf] {
        order: -1;
        max-width: 320px;
    }
    
    .services-column[b-q9klrvyeaf] {
        flex-direction: row;
        flex: 0 0 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-section h1[b-q9klrvyeaf] {
        font-size: 2rem;
    }

    .hero-subtitle[b-q9klrvyeaf] {
        font-size: 1.25rem;
    }

    .history-content[b-q9klrvyeaf] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .history-image[b-q9klrvyeaf] {
        order: -1;
    }

    .shopping-content[b-q9klrvyeaf] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .shopping-image[b-q9klrvyeaf] {
        max-width: 300px;
        margin: 0 auto;
    }

    .branch-items[b-q9klrvyeaf] {
        gap: 24px;
    }

    .branch-mascot[b-q9klrvyeaf] {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

    .services-grid[b-q9klrvyeaf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Account/Addresses.razor.rz.scp.css */
/* Address Page Styles */

.account-page[b-a2pxmylvng] {
    background: #f5f7fa;
    min-height: 100vh;
    padding: 20px 0 60px;
}

.breadcrumb[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.breadcrumb a[b-a2pxmylvng] {
    color: var(--primary-blue);
    text-decoration: none;
}

.breadcrumb .current[b-a2pxmylvng] {
    color: var(--gray-600);
}

.account-layout[b-a2pxmylvng] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

.account-sidebar[b-a2pxmylvng] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    height: fit-content;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.user-info[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 20px;
}

.user-avatar[b-a2pxmylvng] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.user-details h3[b-a2pxmylvng] {
    font-size: 1rem;
    color: var(--gray-800);
    margin: 0;
}

.user-details p[b-a2pxmylvng] {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin: 4px 0 0;
}

.account-nav[b-a2pxmylvng] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-toggle[b-a2pxmylvng] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.nav-toggle .arrow[b-a2pxmylvng] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--gray-400);
}

.nav-submenu[b-a2pxmylvng] {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 32px;
}

.nav-submenu li a[b-a2pxmylvng] {
    display: block;
    padding: 8px 12px;
    color: var(--gray-600);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
}

.nav-submenu li.active a[b-a2pxmylvng] {
    background: #e8f4ff;
    color: var(--primary-blue);
    font-weight: 500;
}

.nav-link[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: var(--gray-700);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
}

.account-content[b-a2pxmylvng] {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.content-header[b-a2pxmylvng] {
    margin-bottom: 24px;
}

.header-row[b-a2pxmylvng] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.content-header h1[b-a2pxmylvng] {
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin: 0 0 8px;
}

.content-header p[b-a2pxmylvng] {
    color: var(--gray-500);
    margin: 0;
}

.btn-add-address[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    background: var(--primary-blue);
    color: white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(1, 69, 178, 0.2);
}

.btn-add-address:hover[b-a2pxmylvng] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(1, 69, 178, 0.35);
}

.success-alert[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #166534;
    padding: 14px 18px;
    border-radius: 12px;
    border-left: 4px solid #16a34a;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.08);
}

.error-alert[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #991b1b;
    padding: 14px 18px;
    border-radius: 12px;
    border-left: 4px solid #dc2626;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.08);
}

/* Address List */
.address-list[b-a2pxmylvng] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.address-card[b-a2pxmylvng] {
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: white;
}

.address-card:hover[b-a2pxmylvng] {
    border-color: var(--gray-300);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.address-card.default[b-a2pxmylvng] {
    border-color: var(--primary-blue);
    border-width: 2px;
    box-shadow: 0 2px 12px rgba(1, 69, 178, 0.1);
}

.address-header[b-a2pxmylvng] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fafbfc 0%, #f0f7ff 100%);
    border-bottom: 1px solid var(--gray-100);
}

.address-name[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.address-name .name[b-a2pxmylvng] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
}

.default-badge[b-a2pxmylvng] {
    background: var(--primary-blue);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.address-actions[b-a2pxmylvng] {
    display: flex;
    gap: 8px;
}

.btn-edit[b-a2pxmylvng],
.btn-delete[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.25s ease;
}

.btn-edit[b-a2pxmylvng] {
    background: white;
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
}

.btn-edit:hover[b-a2pxmylvng] {
    background: var(--primary-blue);
    color: white;
}

.btn-delete[b-a2pxmylvng] {
    background: white;
    border: 1px solid #dc3545;
    color: #dc3545;
}

.btn-delete:hover[b-a2pxmylvng] {
    background: #dc3545;
    color: white;
}

.address-body[b-a2pxmylvng] {
    padding: 20px;
}

.address-body .recipient[b-a2pxmylvng] {
    margin: 0 0 8px;
    font-size: 1rem;
}

.address-body .recipient strong[b-a2pxmylvng] {
    color: var(--gray-800);
}

.address-body .phone[b-a2pxmylvng] {
    color: var(--gray-500);
    margin-left: 12px;
}

.address-body .address-text[b-a2pxmylvng] {
    margin: 0 0 4px;
    color: var(--gray-700);
    line-height: 1.5;
}

.address-body .location[b-a2pxmylvng] {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.9rem;
}

.address-footer[b-a2pxmylvng] {
    padding: 12px 20px;
    border-top: 1px solid var(--gray-100);
    background: linear-gradient(135deg, #fafbfc 0%, #f0f7ff 100%);
}

.btn-set-default[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--primary-blue);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0;
    transition: all 0.2s;
}

.btn-set-default:hover[b-a2pxmylvng] {
    color: #0055aa;
}

/* Empty State */
.empty-state[b-a2pxmylvng] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-a2pxmylvng] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f4ff 0%, #dbeafe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: float-b-a2pxmylvng 3s ease-in-out infinite;
}

@keyframes float-b-a2pxmylvng {

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

    50% {
        transform: translateY(-8px);
    }
}

.empty-state h3[b-a2pxmylvng] {
    color: var(--gray-700);
    margin: 0 0 8px;
}

.empty-state p[b-a2pxmylvng] {
    color: var(--gray-500);
    margin: 0 0 24px;
}

.btn-add-first[b-a2pxmylvng] {
    display: inline-flex;
    align-items: center;
    padding: 12px 32px;
    border: none;
    background: var(--primary-blue);
    color: white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(1, 69, 178, 0.2);
}

.btn-add-first:hover[b-a2pxmylvng] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(1, 69, 178, 0.35);
}

/* Loading State */
.loading-state[b-a2pxmylvng] {
    text-align: center;
    padding: 60px 20px;
}

.spinner[b-a2pxmylvng] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-a2pxmylvng 0.8s linear infinite;
    margin: 0 auto 16px;
}

/* Address Form */
.address-form[b-a2pxmylvng] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: white;
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.form-title[b-a2pxmylvng] {
    padding: 20px 24px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    border-bottom: 1px solid var(--gray-200);
}

.form-title h2[b-a2pxmylvng] {
    font-size: 1.2rem;
    color: var(--primary-blue);
    margin: 0;
    display: flex;
    align-items: center;
}

.form-row[b-a2pxmylvng] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    align-items: start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-100);
}

.form-row label[b-a2pxmylvng] {
    font-weight: 500;
    color: var(--gray-700);
    padding-top: 10px;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.label-hint[b-a2pxmylvng] {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--gray-500);
}

.input-group[b-a2pxmylvng] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.input-field[b-a2pxmylvng] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-a2pxmylvng] {
    font-size: 0.85rem;
    color: var(--gray-500);
}

.address-form input[type="text"][b-a2pxmylvng],
.address-form input[type="tel"][b-a2pxmylvng],
.address-form select[b-a2pxmylvng],
.address-form textarea[b-a2pxmylvng] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--gray-800);
    transition: all 0.2s;
    font-family: inherit;
}

.address-form input:focus[b-a2pxmylvng],
.address-form select:focus[b-a2pxmylvng],
.address-form textarea:focus[b-a2pxmylvng] {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.address-form textarea[b-a2pxmylvng] {
    resize: vertical;
    min-height: 80px;
}

.address-form select[b-a2pxmylvng] {
    appearance: none;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 16px center;
    cursor: pointer;
}

.checkbox-label[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 400 !important;
    padding-top: 0 !important;
}

.checkbox-label input[type="checkbox"][b-a2pxmylvng] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-actions[b-a2pxmylvng] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fafbfc 0%, #f0f7ff 100%);
    border-top: 1px solid var(--gray-200);
}

.btn-cancel[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-600);
    transition: all 0.25s ease;
}

.btn-cancel:hover[b-a2pxmylvng] {
    background: var(--gray-100);
    transform: translateY(-1px);
}

.btn-save[b-a2pxmylvng] {
    padding: 12px 32px;
    border: none;
    background: var(--primary-blue);
    color: white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(1, 69, 178, 0.2);
}

.btn-save:hover[b-a2pxmylvng] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(1, 69, 178, 0.35);
}

.btn-save:disabled[b-a2pxmylvng] {
    background: var(--gray-400);
    cursor: not-allowed;
}

.spinner-small[b-a2pxmylvng] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-a2pxmylvng 0.8s linear infinite;
}

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

@media (max-width: 900px) {
    .account-page[b-a2pxmylvng] {
        padding: 0 0 100px;
        background: #f2f2f7;
    }

    .account-page > .container[b-a2pxmylvng] {
        padding: 0;
    }

    .breadcrumb[b-a2pxmylvng] {
        display: none;
    }

    .account-layout[b-a2pxmylvng] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .account-sidebar[b-a2pxmylvng] {
        display: none;
    }

    .account-content[b-a2pxmylvng] {
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    /* Page header */
    .content-header[b-a2pxmylvng] {
        padding: 20px 16px 8px;
    }

    .content-header h1[b-a2pxmylvng] {
        font-size: 1.2rem;
        color: #1c1c1e;
    }

    .header-row[b-a2pxmylvng] {
        flex-direction: column;
        gap: 12px;
    }

    .btn-add-address[b-a2pxmylvng] {
        width: 100%;
        justify-content: center;
        border-radius: 12px;
    }

    /* Address list — cards with spacing */
    .address-list[b-a2pxmylvng] {
        padding: 8px 16px 0;
    }

    .address-card[b-a2pxmylvng] {
        border-radius: 12px;
        margin-bottom: 12px;
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
        border: 1px solid #e8e8ed;
    }

    /* Form — white card */
    .address-form[b-a2pxmylvng] {
        padding: 0;
        background: white;
        border-radius: 12px;
        margin: 8px 16px 0;
        overflow: hidden;
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
    }

    .form-row[b-a2pxmylvng] {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px 16px;
        border-bottom: 1px solid #f0f0f5;
    }

    .form-row:last-of-type[b-a2pxmylvng] {
        border-bottom: none;
    }

    .form-row label[b-a2pxmylvng] {
        padding-top: 0;
        font-size: 0.82rem;
        font-weight: 600;
        color: #86868b;
    }

    .input-group[b-a2pxmylvng] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-a2pxmylvng] {
        padding: 20px 16px;
    }

    .address-header[b-a2pxmylvng] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .address-actions[b-a2pxmylvng] {
        width: 100%;
    }

    .btn-edit[b-a2pxmylvng],
    .btn-delete[b-a2pxmylvng] {
        flex: 1;
        text-align: center;
        border-radius: 8px;
    }

    .empty-state[b-a2pxmylvng] {
        margin: 8px 16px;
        border-radius: 12px;
    }
}

/* ===== Map / GPS Pin Styles ===== */
.map-section[b-a2pxmylvng] {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.map-section-header[b-a2pxmylvng] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    border-bottom: 1px solid var(--gray-200);
}

.map-section-label[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 0.95rem;
}

.map-section-label i[b-a2pxmylvng] {
    font-size: 1.1rem;
}

.btn-current-location[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--primary-blue);
    background: white;
    color: var(--primary-blue);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

.btn-current-location:hover[b-a2pxmylvng] {
    background: var(--primary-blue);
    color: white;
    box-shadow: 0 2px 8px rgba(1, 69, 178, 0.25);
}

.btn-current-location:disabled[b-a2pxmylvng] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-current-location i[b-a2pxmylvng] {
    font-size: 0.9rem;
}

#address-map-container[b-a2pxmylvng] {
    height: 280px;
    width: 100%;
}

.map-hint[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fafbfc;
    border-top: 1px solid var(--gray-100);
    font-size: 0.82rem;
    color: var(--gray-500);
}

.map-hint i[b-a2pxmylvng] {
    color: var(--primary-blue);
    font-size: 0.9rem;
}

.map-coords[b-a2pxmylvng] {
    margin-left: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--gray-400);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Leaflet custom map pin */
[b-a2pxmylvng] .custom-map-pin {
    background: none !important;
    border: none !important;
}

[b-a2pxmylvng] .custom-map-pin .pin-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e53935;
    font-size: 36px;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
    animation: pin-drop-b-a2pxmylvng 0.4s ease-out;
    text-rendering: geometricPrecision;
}

[b-a2pxmylvng] .custom-map-pin.mini .pin-wrapper {
    font-size: 22px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

@keyframes pin-drop-b-a2pxmylvng {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    60% {
        transform: translateY(3px);
        opacity: 1;
    }

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

/* Mini-map preview on address cards */
.mini-map-wrapper[b-a2pxmylvng] {
    margin-top: 12px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.mini-map-container[b-a2pxmylvng] {
    height: 120px;
    width: 100%;
}

.location-badge[b-a2pxmylvng] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 10px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 500;
}

.location-badge i[b-a2pxmylvng] {
    font-size: 0.72rem;
}

@media (max-width: 900px) {
    #address-map-container[b-a2pxmylvng] {
        height: 220px;
    }

    .map-section-header[b-a2pxmylvng] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .btn-current-location[b-a2pxmylvng] {
        width: 100%;
        justify-content: center;
    }

    .mini-map-container[b-a2pxmylvng] {
        height: 100px;
    }
}

/* Auto-filled indicator for postcode lookup */
.address-form select.auto-filled[b-a2pxmylvng] {
    border-color: #16a34a;
    background-color: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
    animation: auto-fill-pulse-b-a2pxmylvng 0.5s ease-out;
}

@keyframes auto-fill-pulse-b-a2pxmylvng {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.35);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(22, 163, 74, 0);
    }

    100% {
        box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
    }
}

/* Delete Confirmation Modal */
.modal-overlay[b-a2pxmylvng] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fade-in-b-a2pxmylvng 0.2s ease-out;
    pointer-events: none;
}

.modal-dialog[b-a2pxmylvng] {
    background: white;
    border-radius: 20px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: modal-pop-b-a2pxmylvng 0.3s ease-out;
    pointer-events: auto;
}

.modal-icon[b-a2pxmylvng] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.modal-dialog h3[b-a2pxmylvng] {
    font-size: 1.2rem;
    color: var(--gray-800);
    margin: 0 0 8px;
}

.modal-dialog p[b-a2pxmylvng] {
    color: var(--gray-500);
    margin: 0 0 24px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-actions[b-a2pxmylvng] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-modal-cancel[b-a2pxmylvng] {
    padding: 10px 24px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-600);
    transition: all 0.2s;
}

.btn-modal-cancel:hover[b-a2pxmylvng] {
    background: var(--gray-100);
}

.btn-modal-confirm[b-a2pxmylvng] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: none;
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

.btn-modal-confirm:hover[b-a2pxmylvng] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
}

@keyframes fade-in-b-a2pxmylvng {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-pop-b-a2pxmylvng {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* /Components/Pages/Account/ChangePassword.razor.rz.scp.css */
/* Change Password Page Styles */

.account-page[b-iwazaxi29c] {
    background: #f5f7fa;
    min-height: 100vh;
    padding: 20px 0 60px;
}

.breadcrumb[b-iwazaxi29c] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.breadcrumb a[b-iwazaxi29c] {
    color: var(--primary-blue);
    text-decoration: none;
}

.breadcrumb a:hover[b-iwazaxi29c] {
    text-decoration: underline;
}

.breadcrumb span[b-iwazaxi29c] {
    color: var(--gray-400);
}

.breadcrumb .current[b-iwazaxi29c] {
    color: var(--gray-600);
}

.account-layout[b-iwazaxi29c] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

.account-content[b-iwazaxi29c] {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.content-header[b-iwazaxi29c] {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-100);
}

.content-header h1[b-iwazaxi29c] {
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin: 0 0 8px;
}

.content-header p[b-iwazaxi29c] {
    color: var(--gray-500);
    margin: 0;
}

/* Alerts */
.success-alert[b-iwazaxi29c] {
    background: #d4edda;
    color: #155724;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-alert[b-iwazaxi29c] {
    background: #f8d7da;
    color: #721c24;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-alert[b-iwazaxi29c] {
    background: #e7f3ff;
    color: #0066cc;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Form */
/* .password-form {
    max-width: 500px;
} */

.form-row[b-iwazaxi29c] {
    margin-bottom: 24px;
}

.form-row label[b-iwazaxi29c] {
    display: block;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 8px;
}

/* Password Input with Toggle */
.password-input-wrapper[b-iwazaxi29c] {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input[b-iwazaxi29c] {
    width: 100%;
    padding: 12px 48px 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--gray-800);
    transition: all 0.2s;
    font-family: inherit;
}

.password-input-wrapper input:focus[b-iwazaxi29c] {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.password-input-wrapper input[b-iwazaxi29c]::placeholder {
    color: var(--gray-400);
}

.toggle-password[b-iwazaxi29c] {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.toggle-password:hover[b-iwazaxi29c] {
    color: var(--gray-600);
}

/* Password Strength */
.password-strength[b-iwazaxi29c] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.strength-bar[b-iwazaxi29c] {
    flex: 1;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.strength-fill[b-iwazaxi29c] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s, background-color 0.3s;
}

.strength-fill.weak[b-iwazaxi29c] {
    background: #dc3545;
}

.strength-fill.fair[b-iwazaxi29c] {
    background: #ffc107;
}

.strength-fill.good[b-iwazaxi29c] {
    background: #20c997;
}

.strength-fill.strong[b-iwazaxi29c] {
    background: #28a745;
}

.strength-text[b-iwazaxi29c] {
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 60px;
}

.strength-text.weak[b-iwazaxi29c] {
    color: #dc3545;
}

.strength-text.fair[b-iwazaxi29c] {
    color: #d39e00;
}

.strength-text.good[b-iwazaxi29c] {
    color: #17a673;
}

.strength-text.strong[b-iwazaxi29c] {
    color: #28a745;
}

/* Password Requirements */
.password-requirements[b-iwazaxi29c] {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.password-requirements li[b-iwazaxi29c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--gray-500);
    transition: color 0.2s;
}

.password-requirements li i[b-iwazaxi29c] {
    font-size: 0.75rem;
    width: 16px;
    text-align: center;
}

.password-requirements li.valid[b-iwazaxi29c] {
    color: #28a745;
}

.password-requirements li.valid i[b-iwazaxi29c] {
    color: #28a745;
}

.password-requirements li:not(.valid) i[b-iwazaxi29c] {
    color: var(--gray-400);
}

/* Field Messages */
.field-error[b-iwazaxi29c] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #dc3545;
}

.field-success[b-iwazaxi29c] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #28a745;
}

/* Form Actions */
.form-actions[b-iwazaxi29c] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
    margin-top: 8px;
    border-top: 1px solid var(--gray-100);
}

.btn-cancel[b-iwazaxi29c] {
    padding: 12px 24px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-700);
    transition: all 0.2s;
    font-family: inherit;
}

.btn-cancel:hover[b-iwazaxi29c] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-save[b-iwazaxi29c] {
    padding: 12px 24px;
    border: none;
    background: var(--primary-blue);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

.btn-save:hover:not(:disabled)[b-iwazaxi29c] {
    background: #0055a3;
}

.btn-save:disabled[b-iwazaxi29c] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive — Mobile Redesign */
@media (max-width: 900px) {
    .account-page[b-iwazaxi29c] {
        padding: 0 0 100px;
        background: #f2f2f7;
    }

    .account-page > .container[b-iwazaxi29c] {
        padding: 0;
    }

    .breadcrumb[b-iwazaxi29c] {
        display: none;
    }

    .account-layout[b-iwazaxi29c] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .account-content[b-iwazaxi29c] {
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .content-header[b-iwazaxi29c] {
        padding: 20px 16px 8px;
    }

    .content-header h1[b-iwazaxi29c] {
        font-size: 1.2rem;
        color: #1c1c1e;
    }

    /* Form — white card */
    .password-form[b-iwazaxi29c] {
        background: white;
        border-radius: 12px;
        margin: 8px 16px 0;
        padding: 16px;
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
    }

    .password-requirements[b-iwazaxi29c] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-iwazaxi29c] {
        flex-direction: column;
        padding: 20px 16px;
    }

    .btn-cancel[b-iwazaxi29c],
    .btn-save[b-iwazaxi29c] {
        width: 100%;
        justify-content: center;
        padding: 16px 24px;
        font-size: 1.1rem;
        border-radius: 12px;
    }

    .btn-save[b-iwazaxi29c] {
        border-radius: 50rem;
    }
}
/* /Components/Pages/Account/Favorites.razor.rz.scp.css */
/* Favorites Page Styles */

.account-page[b-wx2nm3tegb] {
    background: #f5f7fa;
    min-height: 100vh;
    padding: 20px 0 60px;
}

.breadcrumb[b-wx2nm3tegb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.breadcrumb a[b-wx2nm3tegb] {
    color: var(--primary-blue);
    text-decoration: none;
}

.breadcrumb .current[b-wx2nm3tegb] {
    color: var(--gray-600);
}

.account-layout[b-wx2nm3tegb] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

.account-sidebar[b-wx2nm3tegb] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    height: fit-content;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.user-info[b-wx2nm3tegb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 20px;
}

.user-avatar[b-wx2nm3tegb] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue), #4a90d9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.user-details h3[b-wx2nm3tegb] {
    font-size: 1rem;
    color: var(--gray-800);
    margin: 0;
}

.user-details p[b-wx2nm3tegb] {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin: 4px 0 0;
}

.account-nav[b-wx2nm3tegb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-toggle[b-wx2nm3tegb] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.nav-toggle .arrow[b-wx2nm3tegb] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--gray-400);
}

.nav-toggle:hover[b-wx2nm3tegb] {
    background: var(--gray-100);
}

.nav-submenu[b-wx2nm3tegb] {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 32px;
}

.nav-submenu li a[b-wx2nm3tegb] {
    display: block;
    padding: 8px 12px;
    color: var(--gray-600);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
}

.nav-submenu li a:hover[b-wx2nm3tegb] {
    background: #e8f4ff;
    color: var(--primary-blue);
}

.nav-submenu li.active a[b-wx2nm3tegb] {
    background: #e8f4ff;
    color: var(--primary-blue);
    font-weight: 500;
}

.nav-link[b-wx2nm3tegb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: var(--gray-700);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
}

.nav-link.active[b-wx2nm3tegb] {
    background: #e8f4ff;
    color: var(--primary-blue);
}

.favorites-content[b-wx2nm3tegb] {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.content-header h1[b-wx2nm3tegb] {
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin: 0 0 24px;
}

/* Loading */
.loading[b-wx2nm3tegb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
}

.spinner[b-wx2nm3tegb] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-wx2nm3tegb 0.8s linear infinite;
}

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

/* Empty State */
.empty-state[b-wx2nm3tegb] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-wx2nm3tegb] {
    font-size: 4rem;
    display: block;
    margin-bottom: 20px;
}

.empty-state h3[b-wx2nm3tegb] {
    font-size: 1.3rem;
    color: var(--gray-700);
    margin: 0 0 10px;
}

.empty-state p[b-wx2nm3tegb] {
    color: var(--gray-500);
    margin: 0 0 24px;
}

.btn-browse[b-wx2nm3tegb] {
    display: inline-block;
    padding: 12px 32px;
    background: var(--primary-blue);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 500;
}

/* Favorites Grid */
.favorites-grid[b-wx2nm3tegb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Product Card */
.product-card[b-wx2nm3tegb] {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.2s;
}

.product-card:hover[b-wx2nm3tegb] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-image[b-wx2nm3tegb] {
    display: block;
    aspect-ratio: 1;
    background: var(--gray-100);
    position: relative;
    overflow: hidden;
}

.product-image img[b-wx2nm3tegb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.product-card:hover .product-image img[b-wx2nm3tegb] {
    transform: scale(1.05);
}

.no-image[b-wx2nm3tegb] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--gray-400);
}

.discount-badge[b-wx2nm3tegb] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff6b6b;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.product-info[b-wx2nm3tegb] {
    padding: 16px;
}

.brand[b-wx2nm3tegb] {
    font-size: 0.8rem;
    color: var(--primary-blue);
    font-weight: 600;
    text-transform: uppercase;
}

.product-name[b-wx2nm3tegb] {
    margin: 6px 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.product-name a[b-wx2nm3tegb] {
    color: var(--gray-800);
    text-decoration: none;
}

.product-name a:hover[b-wx2nm3tegb] {
    color: var(--primary-blue);
}

.product-desc[b-wx2nm3tegb] {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin: 0 0 10px;
    line-height: 1.4;
}

.product-price[b-wx2nm3tegb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.current-price[b-wx2nm3tegb] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-orange);
}

.original-price[b-wx2nm3tegb] {
    font-size: 0.85rem;
    color: var(--gray-400);
    text-decoration: line-through;
}

.discount[b-wx2nm3tegb] {
    font-size: 0.75rem;
    background: #fff0f0;
    color: #ff6b6b;
    padding: 2px 6px;
    border-radius: 4px;
}

.product-meta[b-wx2nm3tegb] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.shipping[b-wx2nm3tegb] {
    font-size: 0.75rem;
    color: var(--primary-blue);
    background: #e8f4ff;
    padding: 2px 8px;
    border-radius: 4px;
}

.stock[b-wx2nm3tegb] {
    font-size: 0.75rem;
    color: var(--primary-orange);
    background: #fff8f0;
    padding: 2px 8px;
    border-radius: 4px;
}

.product-rating[b-wx2nm3tegb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.stars[b-wx2nm3tegb] {
    color: var(--gray-700);
}

.sold[b-wx2nm3tegb] {
    color: var(--gray-500);
}

/* Remove Button (Wishlist Heart) */
.btn-remove[b-wx2nm3tegb] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
    z-index: 10;
}

.product-card:hover .btn-remove[b-wx2nm3tegb] {
    transform: scale(1.1);
}

.btn-remove:hover[b-wx2nm3tegb] {
    background: #fff0f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Responsive — Mobile Redesign */
@media (max-width: 1200px) {
    .favorites-grid[b-wx2nm3tegb] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .account-page[b-wx2nm3tegb] {
        padding: 0 0 100px;
        background: #f2f2f7;
    }

    .account-page > .container[b-wx2nm3tegb] {
        padding: 0;
    }

    .breadcrumb[b-wx2nm3tegb] {
        display: none;
    }

    .account-layout[b-wx2nm3tegb] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .account-sidebar[b-wx2nm3tegb] {
        display: none;
    }

    .favorites-content[b-wx2nm3tegb] {
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .content-header[b-wx2nm3tegb] {
        padding: 20px 16px 8px;
    }

    .content-header h1[b-wx2nm3tegb] {
        font-size: 1.2rem;
        color: #1c1c1e;
    }

    .favorites-grid[b-wx2nm3tegb] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px 16px 24px;
    }

    .product-card[b-wx2nm3tegb] {
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        border: 1px solid #e8e8ed;
        overflow: hidden;
    }

    /* Product image — slightly taller */
    .product-image[b-wx2nm3tegb] {
        aspect-ratio: 1;
    }

    /* Product info — clean spacing */
    .product-info[b-wx2nm3tegb] {
        padding: 12px;
    }

    .brand[b-wx2nm3tegb] {
        font-size: 0.7rem;
        margin-bottom: 2px;
    }

    .product-name[b-wx2nm3tegb] {
        font-size: 0.88rem;
        margin: 4px 0 6px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-desc[b-wx2nm3tegb] {
        display: none;
    }

    .product-price[b-wx2nm3tegb] {
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 6px;
    }

    .current-price[b-wx2nm3tegb] {
        font-size: 0.95rem;
        font-weight: 700;
    }

    .original-price[b-wx2nm3tegb] {
        font-size: 0.75rem;
    }

    .discount[b-wx2nm3tegb] {
        font-size: 0.68rem;
        padding: 1px 5px;
    }

    .product-meta[b-wx2nm3tegb] {
        gap: 4px;
        margin-bottom: 6px;
        flex-wrap: wrap;
    }

    .shipping[b-wx2nm3tegb],
    .stock[b-wx2nm3tegb] {
        font-size: 0.68rem;
        padding: 2px 6px;
    }

    .product-rating[b-wx2nm3tegb] {
        font-size: 0.75rem;
        gap: 6px;
    }

    /* Remove button — smaller on mobile */
    .btn-remove[b-wx2nm3tegb] {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
        top: 8px;
        right: 8px;
    }

    .discount-badge[b-wx2nm3tegb] {
        top: 8px;
        left: 8px;
        right: auto;
        font-size: 0.7rem;
        padding: 3px 6px;
    }

    .empty-state[b-wx2nm3tegb] {
        margin: 8px 16px;
        border-radius: 12px;
        background: white;
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
    }
}

@media (max-width: 400px) {
    .favorites-grid[b-wx2nm3tegb] {
        gap: 8px;
        padding: 8px 12px 20px;
    }

    .product-info[b-wx2nm3tegb] {
        padding: 10px;
    }

    .product-name[b-wx2nm3tegb] {
        font-size: 0.82rem;
    }

    .current-price[b-wx2nm3tegb] {
        font-size: 0.88rem;
    }
}
/* /Components/Pages/Account/Index.razor.rz.scp.css */
/* =====================================================
   ACCOUNT HUB PAGE STYLES (Mobile First)
   ===================================================== */

.account-page[b-rntcikx88d] {
    background: #f5f7fa;
    min-height: 100vh;
    padding: 20px 0 60px;
}

/* Breadcrumb */
.breadcrumb[b-rntcikx88d] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.breadcrumb a[b-rntcikx88d] {
    color: var(--primary-blue);
    text-decoration: none;
}

.breadcrumb a:hover[b-rntcikx88d] {
    text-decoration: underline;
}

.breadcrumb span[b-rntcikx88d] {
    color: #999;
}

.breadcrumb .current[b-rntcikx88d] {
    color: #666;
}

/* =====================================================
   MOBILE LAYOUT (≤900px) — iOS Settings Style
   ===================================================== */
@media (max-width: 900px) {
    .desktop-only[b-rntcikx88d] {
        display: none !important;
    }

    .account-page[b-rntcikx88d] {
        padding: 0 0 80px 0;
        background: #f2f2f7;
    }

    .account-page > .container[b-rntcikx88d] {
        padding: 0;
    }

    .breadcrumb[b-rntcikx88d] {
        display: none;
    }

    .account-layout[b-rntcikx88d] {
        display: block !important;
    }

    .account-content[b-rntcikx88d] {
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* Dashboard — compact, flush top */
    .hub-dashboard-card[b-rntcikx88d] {
        border-radius: 0 0 20px 20px;
        padding: 24px 20px 20px;
        margin-bottom: 0;
        box-shadow: 0 4px 12px rgba(1, 69, 178, 0.12);
    }

    .hub-user-profile[b-rntcikx88d] {
        gap: 14px;
        margin-bottom: 16px;
    }

    .hub-avatar[b-rntcikx88d] {
        width: 52px;
        height: 52px;
        border-width: 2px;
    }

    .hub-avatar .initials[b-rntcikx88d] {
        font-size: 1.1rem;
    }

    .hub-name[b-rntcikx88d] {
        font-size: 1.1rem;
        margin-bottom: 4px;
    }

    .hub-member-tier[b-rntcikx88d] {
        font-size: 0.75rem;
        padding: 3px 10px;
    }

    .hub-stats[b-rntcikx88d] {
        border-radius: 12px;
        padding: 12px;
    }

    .stat-icon[b-rntcikx88d] {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 0.95rem;
    }

    .hub-stat-item[b-rntcikx88d] {
        gap: 10px;
    }

    .stat-value[b-rntcikx88d] {
        font-size: 1rem;
    }

    .stat-label[b-rntcikx88d] {
        font-size: 0.7rem;
    }

    .hub-stat-divider[b-rntcikx88d] {
        height: 30px;
    }

    /* Navigation — iOS grouped settings style */
    .hub-navigation-menus[b-rntcikx88d] {
        padding: 20px 16px 0;
    }

    .hub-menu-title[b-rntcikx88d] {
        font-size: 0.78rem;
        font-weight: 600;
        color: #86868b;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin: 0 0 6px 4px;
        padding-left: 0;
    }

    .hub-menu-group[b-rntcikx88d] {
        border-radius: 12px;
        margin-bottom: 24px;
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
        border: none;
    }

    .hub-menu-item[b-rntcikx88d] {
        padding: 13px 16px;
        border-bottom: 1px solid #f0f0f5;
    }

    .hub-menu-item:last-child[b-rntcikx88d] {
        border-bottom: none;
    }

    .hub-menu-item:active[b-rntcikx88d] {
        background-color: #e5e5ea;
    }

    .hub-menu-icon[b-rntcikx88d] {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 0.95rem;
        margin-right: 12px;
    }

    .hub-menu-name[b-rntcikx88d] {
        font-size: 0.9rem;
        font-weight: 500;
        color: #1c1c1e;
    }

    .hub-menu-desc[b-rntcikx88d] {
        font-size: 0.73rem;
        color: #8e8e93;
        margin-top: 1px;
    }

    .hub-menu-arrow[b-rntcikx88d] {
        font-size: 0.75rem;
        color: #c7c7cc;
    }

    .mt-4[b-rntcikx88d] {
        margin-top: 0 !important;
    }
}

/* =====================================================
   DESKTOP LAYOUT
   ===================================================== */
.account-layout[b-rntcikx88d] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

.account-content[b-rntcikx88d] {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* =========================================
   HUB WIDGET: User Summary / Dashboard
   ========================================= */
.hub-dashboard-card[b-rntcikx88d] {
    background: var(--primary-blue, #0145b2);
    border-radius: 0 0 24px 24px;
    padding: 32px 24px 24px;
    color: white;
    margin-bottom: 24px;
    box-shadow: 0 6px 12px rgba(1, 69, 178, 0.15);
}

@media (min-width: 901px) {
    .hub-dashboard-card[b-rntcikx88d] {
        border-radius: 20px;
        padding: 28px;
        margin-bottom: 32px;
    }
}

.hub-user-profile[b-rntcikx88d] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.hub-avatar[b-rntcikx88d] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.hub-avatar img[b-rntcikx88d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-avatar .initials[b-rntcikx88d] {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
}

.hub-user-details[b-rntcikx88d] {
    display: flex;
    flex-direction: column;
}

.hub-name[b-rntcikx88d] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: white;
}

.hub-member-tier[b-rntcikx88d] {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 0;
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
    font-weight: 500;
}

.hub-stats[b-rntcikx88d] {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.hub-stat-item[b-rntcikx88d] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.hub-stat-divider[b-rntcikx88d] {
    width: 1px;
    height: 40px;
    background: #e5e7eb;
}

.stat-icon[b-rntcikx88d] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fef08a;
    color: #ca8a04;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stat-icon.coupon[b-rntcikx88d] {
    background: #fee2e2;
    color: #ef4444;
}

.stat-info[b-rntcikx88d] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-rntcikx88d] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.stat-label[b-rntcikx88d] {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

/* =========================================
   HUB WIDGET: Navigation Menus
   ========================================= */
.hub-navigation-menus[b-rntcikx88d] {
    padding: 0 16px;
}

@media (min-width: 901px) {
    .hub-navigation-menus[b-rntcikx88d] {
        padding: 0;
    }
}

.hub-menu-title[b-rntcikx88d] {
    font-size: 1rem;
    font-weight: 700;
    color: #374151;
    margin: 0 0 12px 0;
    padding-left: 8px;
}

.hub-menu-group[b-rntcikx88d] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #f3f4f6;
}

.hub-menu-item[b-rntcikx88d] {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
}

.hub-menu-item:last-child[b-rntcikx88d] {
    border-bottom: none;
}

.hub-menu-item:hover[b-rntcikx88d], .hub-menu-item:active[b-rntcikx88d] {
    background-color: #f9fafb;
}

.hub-menu-icon[b-rntcikx88d] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-right: 16px;
    flex-shrink: 0;
}

.hub-menu-text[b-rntcikx88d] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hub-menu-name[b-rntcikx88d] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}

.hub-menu-desc[b-rntcikx88d] {
    font-size: 0.8rem;
    color: #6b7280;
}

.hub-menu-arrow[b-rntcikx88d] {
    color: #d1d5db;
    font-size: 0.9rem;
    margin-left: 8px;
}

.text-danger[b-rntcikx88d] {
    color: #ef4444;
}

.mt-4[b-rntcikx88d] {
    margin-top: 24px;
}
/* /Components/Pages/Account/MyCoupons.razor.rz.scp.css */
/* Account Page Layout Styles */
.account-page[b-2zil7jhuf6] {
    background: linear-gradient(135deg, var(--gray-50, #f9fafb) 0%, var(--primary-blue-light, #eaf3ff) 100%);
    min-height: 100vh;
    padding: 20px 0 60px;
}

.breadcrumb[b-2zil7jhuf6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.breadcrumb a[b-2zil7jhuf6] { color: var(--primary-blue, #0145b2); text-decoration: none; }
.breadcrumb a:hover[b-2zil7jhuf6] { text-decoration: underline; }
.breadcrumb span[b-2zil7jhuf6] { color: var(--gray-400, #9ca3af); }
.breadcrumb .current[b-2zil7jhuf6] { color: var(--gray-600, #4b5563); }

.account-layout[b-2zil7jhuf6] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

.account-content[b-2zil7jhuf6] {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.content-header[b-2zil7jhuf6] { margin-bottom: 24px; }
.content-header h1[b-2zil7jhuf6] { font-size: 1.5rem; color: var(--primary-blue, #0145b2); margin: 0; }

.order-tabs[b-2zil7jhuf6] {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.order-tabs .tab[b-2zil7jhuf6] {
    flex: 1;
    background: white;
    border: none;
    border-right: 1px solid #e5e7eb;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.order-tabs .tab:last-child[b-2zil7jhuf6] { border-right: none; }
.order-tabs .tab:hover[b-2zil7jhuf6] { background: #f9fafb; }
.order-tabs .tab.active[b-2zil7jhuf6] { color: white; background: var(--primary-blue, #0145b2); }

.order-tabs .tab .count[b-2zil7jhuf6] {
    background: #e5e7eb;
    color: #6b7280;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.order-tabs .tab.active .count[b-2zil7jhuf6] {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

.empty-state[b-2zil7jhuf6] {
    text-align: center;
    padding: 60px 20px;
    background: #f9fafb;
    border-radius: 12px;
}

.empty-state .empty-icon[b-2zil7jhuf6] { font-size: 4rem; display: block; margin-bottom: 16px; }
.empty-state h3[b-2zil7jhuf6] { color: #1a365d; margin: 0 0 8px; }
.empty-state p[b-2zil7jhuf6] { color: #6b7280; margin: 0 0 24px; }
.btn-shop[b-2zil7jhuf6] {
    display: inline-block;
    padding: 12px 24px;
    background: var(--primary-blue, #0145b2);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(1, 69, 178, 0.25);
}
.btn-shop:hover[b-2zil7jhuf6] { background: #013d9e; transform: translateY(-1px); }

/* Grid styling follows */
.coupons-grid[b-2zil7jhuf6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}

@media (max-width: 800px) {
    .coupons-grid[b-2zil7jhuf6] {
        grid-template-columns: 1fr;
        margin: 12px 16px;
    }
}

.coupon-card[b-2zil7jhuf6] {
    display: flex;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    position: relative;
    height: 130px;
}

.coupon-card.is-inactive[b-2zil7jhuf6] {
    opacity: 0.6;
    filter: grayscale(100%);
}

.theme-orange[b-2zil7jhuf6] { --coupon-color: #f27823; }
.theme-blue[b-2zil7jhuf6] { --coupon-color: #2860e1; }
.theme-green[b-2zil7jhuf6] { --coupon-color: #25c264; }

.coupon-left[b-2zil7jhuf6] {
    background-color: var(--coupon-color);
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    padding: 0 12px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.coupon-divider[b-2zil7jhuf6] {
    position: relative;
    width: 0;
    border-left: 2px dashed #e8e8e8;
    z-index: 5;
    background: white;
}

/* Because account content background is white, we match cutout color to #fff */
.divider-cutout[b-2zil7jhuf6] {
    position: absolute;
    left: -9px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    z-index: 10;
}

.divider-cutout.top[b-2zil7jhuf6] { top: -8px; }
.divider-cutout.bottom[b-2zil7jhuf6] { bottom: -8px; }

.left-discount-label[b-2zil7jhuf6] {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.left-discount-value[b-2zil7jhuf6] {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.coupon-right[b-2zil7jhuf6] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    position: relative;
}

.coupon-info[b-2zil7jhuf6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.coupon-tag-row[b-2zil7jhuf6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.promo-tag[b-2zil7jhuf6] {
    background: #eef4ff;
    color: #2860e1;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
}

.expire-warn-text[b-2zil7jhuf6] {
    color: #e53935;
    font-size: 0.65rem;
    font-weight: 700;
}

.coupon-title[b-2zil7jhuf6] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}

.coupon-code[b-2zil7jhuf6] {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 4px;
}

.coupon-code strong[b-2zil7jhuf6] {
    color: #333;
    letter-spacing: 0.5px;
}

.coupon-expiry[b-2zil7jhuf6] {
    font-size: 0.8rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: auto;
}

.coupon-action[b-2zil7jhuf6] {
    display: flex;
    align-items: flex-end;
}

.btn-use[b-2zil7jhuf6] {
    background: #2860e1;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 800;
    color: white;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-use:hover[b-2zil7jhuf6] {
    background: #1e4bb3;
    color: white;
}

.status-badge[b-2zil7jhuf6] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-badge.used[b-2zil7jhuf6] {
    background: #e6f4ea;
    color: #1e8e3e;
}

.status-badge.expired[b-2zil7jhuf6] {
    background: #fce8e6;
    color: #d93025;
}

/* Skeleton Loading */
.skeleton-text[b-2zil7jhuf6] {
    background: #e2e5e9;
    border-radius: 6px;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.6) 20%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: placeholderShimmer-b-2zil7jhuf6 1.5s infinite linear;
}

@keyframes placeholderShimmer-b-2zil7jhuf6 {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

@media (max-width: 640px) {
    .coupon-card[b-2zil7jhuf6] {
        height: auto;
        min-height: 105px;
    }
    
    .coupon-left[b-2zil7jhuf6] {
        width: 85px;
        padding: 0 4px;
    }

    .left-discount-label[b-2zil7jhuf6] { font-size: 0.65rem; }
    .left-discount-value[b-2zil7jhuf6] { font-size: 1.25rem; }
    .coupon-right[b-2zil7jhuf6] { padding: 10px 12px; }
    .coupon-tag-row[b-2zil7jhuf6] { margin-bottom: 4px; flex-wrap: wrap; }
    .promo-tag[b-2zil7jhuf6] { font-size: 0.6rem; padding: 2px 6px; }
    .expire-warn-text[b-2zil7jhuf6] { font-size: 0.6rem; }

    .coupon-title[b-2zil7jhuf6] {
        font-size: 0.85rem;
        margin-bottom: 4px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .coupon-expiry[b-2zil7jhuf6] { font-size: 0.65rem; }
    .btn-use[b-2zil7jhuf6] { font-size: 0.7rem; padding: 6px 12px; }
}

/* Responsive Account Layout Adjustments */
@media (max-width: 900px) {
    .account-page[b-2zil7jhuf6] { padding: 0 0 100px; background: #f2f2f7; }
    .account-page > .container[b-2zil7jhuf6] { padding: 0; }
    .breadcrumb[b-2zil7jhuf6] { display: none; }
    .account-layout[b-2zil7jhuf6] { grid-template-columns: 1fr; gap: 0; }
    .account-content[b-2zil7jhuf6] {
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }
    .content-header[b-2zil7jhuf6] { padding: 20px 16px 8px; }
    .content-header h1[b-2zil7jhuf6] { font-size: 1.2rem; color: #1c1c1e; }
    .order-tabs[b-2zil7jhuf6] { margin: 12px 16px; border-radius: 12px; border: 1px solid #e8e8ed; }
    .empty-state[b-2zil7jhuf6] { margin: 8px 16px; border-radius: 12px; }
}

@media (max-width: 768px) {
    .order-tabs[b-2zil7jhuf6] { flex-wrap: wrap; gap: 8px; border: none; background: transparent; margin-bottom: 20px; }
    .order-tabs .tab[b-2zil7jhuf6] {
        flex: 1 1 calc(33% - 8px);
        border: 1px solid #e5e7eb;
        border-radius: 8px !important;
        white-space: nowrap;
        padding: 10px 8px;
        font-size: 0.82rem;
    }
}
/* /Components/Pages/Account/OrderDetail.razor.rz.scp.css */
/* Order Detail Page Styles */
a[b-snqv3w8dop],
button[b-snqv3w8dop] {
    text-decoration: none !important;
}

.order-detail-page[b-snqv3w8dop] {
    background: linear-gradient(135deg, var(--gray-50, #f9fafb) 0%, var(--primary-blue-light, #eaf3ff) 100%);
    min-height: 100vh;
    padding: 20px 0 60px;
}

/* Back Link */
.back-link[b-snqv3w8dop] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.back-link span[b-snqv3w8dop] {
    font-size: 1.5rem;
}

.back-link:hover[b-snqv3w8dop] {
    text-decoration: underline;
}

/* Section Card */
.section-card[b-snqv3w8dop] {
    background: white;
    border-radius: 12px;
    padding: 24px 32px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-card h2[b-snqv3w8dop] {
    color: var(--primary-blue);
    font-size: 1.25rem;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

/* Delivery Info */
.delivery-info[b-snqv3w8dop] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.info-row[b-snqv3w8dop] {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 24px;
    align-items: start;
    padding-bottom: 20px;
    border-bottom: 1px solid #f3f4f6;
}

.info-row:last-child[b-snqv3w8dop] {
    border-bottom: none;
    padding-bottom: 0;
}

.info-label[b-snqv3w8dop] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label strong[b-snqv3w8dop] {
    color: #374151;
    font-size: 0.95rem;
}

.info-hint[b-snqv3w8dop] {
    color: #9ca3af;
    font-size: 0.8rem;
}

.info-content[b-snqv3w8dop] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-content .recipient[b-snqv3w8dop] {
    font-weight: 600;
    color: #1a365d;
}

.info-content .phone[b-snqv3w8dop] {
    color: #374151;
}

.info-content .address[b-snqv3w8dop] {
    color: #6b7280;
    margin: 0;
    font-size: 0.9rem;
}

.info-content .courier[b-snqv3w8dop] {
    color: #374151;
}

.tracking-link[b-snqv3w8dop] {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
}

.tracking-link:hover[b-snqv3w8dop] {
    text-decoration: underline;
}

.edit-link[b-snqv3w8dop] {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 0.9rem;
}

.edit-link:hover[b-snqv3w8dop] {
    text-decoration: underline;
}

/* Delivery Methods */
.delivery-methods[b-snqv3w8dop] {
    display: flex;
    gap: 12px;
}

.delivery-option[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    min-width: 120px;
}

.delivery-option.selected[b-snqv3w8dop] {
    border-color: var(--primary-blue);
    background: #f0f7ff;
}

.option-icon[b-snqv3w8dop] {
    color: #9ca3af;
    font-size: 1rem;
}

.delivery-option.selected .option-icon[b-snqv3w8dop] {
    color: var(--primary-blue);
}

.option-details[b-snqv3w8dop] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.option-name[b-snqv3w8dop] {
    font-size: 0.85rem;
    color: #374151;
}

.option-price[b-snqv3w8dop] {
    font-size: 0.8rem;
    color: var(--primary-blue);
    font-weight: 600;
}

/* Delivery Method Text Display */
.delivery-method-text[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #374151;
}

.delivery-method-text i[b-snqv3w8dop] {
    color: var(--primary-blue, #0145b2);
}

.delivery-fee[b-snqv3w8dop] {
    font-size: 0.9rem;
    color: #6b7280;
}

/* Drive Thru Pickup Styles */
.pickup-info[b-snqv3w8dop] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #86efac;
}

.pickup-store-name[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1a365d;
    font-size: 1rem;
}

.pickup-store-name i[b-snqv3w8dop] {
    color: #22c55e;
}

.pickup-hours[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #22c55e;
    font-size: 0.9rem;
}

.pickup-instructions-box[b-snqv3w8dop] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    border: 1px solid #fbbf24;
    margin-top: 12px;
}

.pickup-instructions-box>i[b-snqv3w8dop] {
    color: #d97706;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.pickup-instructions-box strong[b-snqv3w8dop] {
    display: block;
    color: #92400e;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.pickup-instructions-box p[b-snqv3w8dop] {
    margin: 0;
    color: #a16207;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Scheduled Delivery Row */
.scheduled-delivery-row[b-snqv3w8dop] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 12px;
    border: 1px solid #93c5fd;
    margin-top: 16px;
}

.scheduled-delivery-row>i[b-snqv3w8dop] {
    color: #2563eb;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.scheduled-delivery-row .scheduled-info[b-snqv3w8dop] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scheduled-delivery-row .scheduled-info strong[b-snqv3w8dop] {
    color: #1e40af;
    font-size: 0.9rem;
}

.scheduled-delivery-row .scheduled-info span[b-snqv3w8dop] {
    color: #1d4ed8;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Products Header */
.products-header[b-snqv3w8dop] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.products-header h2[b-snqv3w8dop] {
    margin: 0;
    padding: 0;
    border: none;
}

.order-meta[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.order-number[b-snqv3w8dop] {
    color: #6b7280;
    font-size: 0.9rem;
}

.order-status[b-snqv3w8dop] {
    font-weight: 600;
    font-size: 0.9rem;
}

.status-pending[b-snqv3w8dop] {
    color: #f59e0b;
}

.status-processing[b-snqv3w8dop] {
    color: #3b82f6;
}

.status-shipped[b-snqv3w8dop] {
    color: #3b82f6;
}

.status-delivered[b-snqv3w8dop] {
    color: #22c55e;
}

.status-cancelled[b-snqv3w8dop] {
    color: #ef4444;
}

/* Products List */
.products-list[b-snqv3w8dop] {
    margin-bottom: 24px;
}

.product-item[b-snqv3w8dop] {
    display: grid;
    grid-template-columns: 80px 1fr 110px 120px;
    gap: 20px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}

.product-item:last-child[b-snqv3w8dop] {
    border-bottom: none;
}

.product-image[b-snqv3w8dop] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
}

.product-image img[b-snqv3w8dop] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image .no-image[b-snqv3w8dop] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #9ca3af;
}

.product-details h4[b-snqv3w8dop] {
    margin: 0 0 4px;
    font-size: 1rem;
    color: #1a365d;
    font-weight: 600;
}

.product-details .variant[b-snqv3w8dop] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

.product-quantity[b-snqv3w8dop],
.product-price[b-snqv3w8dop] {
    text-align: center;
}

.product-quantity .label[b-snqv3w8dop],
.product-price .label[b-snqv3w8dop] {
    display: block;
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 4px;
}

.product-quantity .value[b-snqv3w8dop] {
    font-weight: 500;
    color: #374151;
}

.product-price .value[b-snqv3w8dop] {
    font-weight: 700;
    color: #1a365d;
}

.product-price .value.free-text[b-snqv3w8dop] {
    color: #10b981;
}

/* Tracking Pending */
.tracking-pending[b-snqv3w8dop] {
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
}

/* Tracking Banner & Header */
.tracking-banner[b-snqv3w8dop] {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    border: 1px solid #93c5fd !important;
}

.tracking-header .status-badge[b-snqv3w8dop] {
    padding: 6px 14px;
    border-radius: 50rem;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tracking-banner-content[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0;
}

.tracking-banner-icon[b-snqv3w8dop] {
    font-size: 1.8rem;
    color: #2563eb;
    flex-shrink: 0;
}

.tracking-banner-info[b-snqv3w8dop] {
    flex: 1;
    min-width: 0;
}

.tracking-banner-title[b-snqv3w8dop] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e40af;
}

.tracking-banner-number[b-snqv3w8dop] {
    font-size: 0.85rem;
    color: #374151;
    margin-top: 2px;
}

.tracking-banner-number strong[b-snqv3w8dop] {
    color: #1e40af;
    letter-spacing: 0.5px;
}

.tracking-banner-btn[b-snqv3w8dop] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #2563eb;
    color: white;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}

.tracking-banner-btn:hover[b-snqv3w8dop] {
    background: #1d4ed8;
}

@media (max-width: 480px) {
    .tracking-banner-content[b-snqv3w8dop] {
        flex-wrap: wrap;
    }

    .tracking-banner-btn[b-snqv3w8dop] {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }
}

/* Free Item Tag */
.free-item-tag[b-snqv3w8dop] {
    display: inline-block;
    padding: 2px 10px;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}

/* Discount Code Badge */
.discount-code-badge[b-snqv3w8dop] {
    display: inline-block;
    padding: 2px 8px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 6px;
}

/* Order Summary */
.order-summary[b-snqv3w8dop] {
    background: #f9fafb;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-row[b-snqv3w8dop] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-row .label[b-snqv3w8dop] {
    color: #6b7280;
    font-size: 0.95rem;
}

.summary-row .value[b-snqv3w8dop] {
    color: #374151;
    font-weight: 500;
}

.summary-row.discount .value[b-snqv3w8dop] {
    color: #22c55e;
}

.summary-row.points-used .label[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f59e0b;
}

.summary-row.points-used .label i[b-snqv3w8dop] {
    color: #f59e0b;
}

.summary-row.points-used .value[b-snqv3w8dop] {
    color: #f59e0b;
}

.summary-row.points-earned[b-snqv3w8dop] {
    border-top: 1px dashed #e5e7eb;
    padding-top: 12px;
    margin-top: 4px;
}

.summary-row.points-earned .label[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #374151;
}

.summary-row.points-earned .label i[b-snqv3w8dop] {
    color: #f59e0b;
}

.summary-row.points-earned .value.points-value[b-snqv3w8dop] {
    color: #22c55e;
    font-weight: 600;
}

.summary-row.total[b-snqv3w8dop] {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    margin-top: 4px;
}

.summary-row.total .label[b-snqv3w8dop] {
    font-weight: 600;
    color: #374151;
}

.summary-row.total .value[b-snqv3w8dop] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ef4444;
}

/* Pet Section */
.pet-section h2[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pet-section h2 i[b-snqv3w8dop] {
    color: var(--primary-orange, #ffa819);
}

.pet-list[b-snqv3w8dop] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.pet-item[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fff8f0 0%, #fff5e6 100%);
    border-radius: 12px;
    border: 1px solid #ffe4cc;
    min-width: 180px;
}

.pet-avatar[b-snqv3w8dop] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-orange, #ffa819) 0%, #ff8c00 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.pet-avatar img[b-snqv3w8dop] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-avatar i[b-snqv3w8dop] {
    font-size: 1.25rem;
    color: white;
}

.pet-info[b-snqv3w8dop] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pet-name[b-snqv3w8dop] {
    font-weight: 600;
    color: #1a365d;
    font-size: 0.95rem;
}

.pet-type[b-snqv3w8dop] {
    font-size: 0.8rem;
    color: #888;
}

/* Payment Info Section */
.payment-info[b-snqv3w8dop] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-row[b-snqv3w8dop] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.payment-row:last-child[b-snqv3w8dop] {
    border-bottom: none;
}

.payment-row .label[b-snqv3w8dop] {
    color: #6b7280;
    font-size: 0.95rem;
}

.payment-row .value[b-snqv3w8dop] {
    font-weight: 600;
    color: #374151;
}

.payment-row .ref-code[b-snqv3w8dop] {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.9rem;
    color: var(--primary-blue, #0145b2);
    background: #f0f7ff;
    padding: 4px 10px;
    border-radius: 6px;
}

.payment-row .status-badge[b-snqv3w8dop] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge.status-success[b-snqv3w8dop] {
    background: #d1fae5;
    color: #059669;
}

.status-badge.status-warning[b-snqv3w8dop] {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.status-info[b-snqv3w8dop] {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge.status-error[b-snqv3w8dop] {
    background: #fee2e2;
    color: #dc2626;
}

/* Action Bar */
.action-bar[b-snqv3w8dop] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: 12px;
    padding: 16px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.action-right[b-snqv3w8dop] {
    display: flex;
    gap: 12px;
}

.btn-secondary[b-snqv3w8dop] {
    padding: 12px 24px;
    background: white;
    border: 1px solid #1a365d;
    border-radius: 8px;
    color: #1a365d;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover[b-snqv3w8dop] {
    background: #f0f7ff;
}

.btn-outline[b-snqv3w8dop] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #374151;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline:hover[b-snqv3w8dop] {
    border-color: #1a365d;
    color: #1a365d;
}

.btn-primary[b-snqv3w8dop] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--primary-blue, #0145b2) 0%, #0156d4 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(1, 69, 178, 0.25);
}

.btn-primary:hover[b-snqv3w8dop] {
    background: linear-gradient(135deg, #0156d4 0%, var(--primary-blue, #0145b2) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(1, 69, 178, 0.35);
}

/* Loading & Not Found */
.loading-state[b-snqv3w8dop],
.not-found[b-snqv3w8dop] {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
}

.spinner[b-snqv3w8dop] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary-blue, #0145b2);
    border-radius: 50%;
    animation: spin-b-snqv3w8dop 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

.not-found h2[b-snqv3w8dop] {
    color: #1a365d;
    margin: 0 0 8px;
}

.not-found p[b-snqv3w8dop] {
    color: #6b7280;
    margin: 0 0 24px;
}

/* Track Button Style */
.btn-track[b-snqv3w8dop] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Modal Overlay */
.modal-overlay[b-snqv3w8dop] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-snqv3w8dop 0.2s ease;
}

@keyframes fadeIn-b-snqv3w8dop {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Content */
.modal-content[b-snqv3w8dop] {
    background: white;
    border-radius: 16px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-snqv3w8dop 0.3s ease;
}

@keyframes slideUp-b-snqv3w8dop {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.modal-header[b-snqv3w8dop] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3[b-snqv3w8dop] {
    margin: 0;
    font-size: 1.25rem;
    color: #1a365d;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header h3 i[b-snqv3w8dop] {
    color: var(--primary-blue, #0145b2);
}

.modal-close[b-snqv3w8dop] {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s;
}

.modal-close:hover[b-snqv3w8dop] {
    background: #e5e7eb;
    color: #374151;
}

.modal-body[b-snqv3w8dop] {
    padding: 24px;
}

/* Tracking Modal Specific */
.tracking-modal .tracking-details[b-snqv3w8dop] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tracking-row[b-snqv3w8dop] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.tracking-row:last-child[b-snqv3w8dop] {
    border-bottom: none;
}

.tracking-label[b-snqv3w8dop] {
    color: #6b7280;
    font-size: 0.95rem;
}

.tracking-value[b-snqv3w8dop] {
    font-weight: 600;
    color: #374151;
}

.tracking-value.tracking-number[b-snqv3w8dop] {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    color: var(--primary-blue, #0145b2);
    background: #f0f7ff;
    padding: 4px 10px;
    border-radius: 6px;
}

.tracking-value.status-badge[b-snqv3w8dop] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
}

.status-badge.status-pending[b-snqv3w8dop] {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.status-processing[b-snqv3w8dop] {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge.status-shipped[b-snqv3w8dop] {
    background: #e0e7ff;
    color: #4f46e5;
}

.status-badge.status-delivered[b-snqv3w8dop] {
    background: #d1fae5;
    color: #059669;
}

.btn-track-external[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    margin-top: 12px;
    background: linear-gradient(135deg, var(--primary-blue, #0145b2) 0%, #0156d4 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-track-external:hover[b-snqv3w8dop] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(1, 69, 178, 0.35);
}

.no-tracking[b-snqv3w8dop] {
    text-align: center;
    color: #9ca3af;
    font-size: 0.9rem;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    margin-top: 8px;
}

/* Responsive */
@media (max-width: 900px) {
    .info-row[b-snqv3w8dop] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .delivery-methods[b-snqv3w8dop] {
        flex-wrap: wrap;
    }

    .product-item[b-snqv3w8dop] {
        grid-template-columns: 80px 1fr; /* Match the 80px image width perfectly */
        gap: 16px;
    }

    .product-image[b-snqv3w8dop] {
        grid-row: 1 / span 3; /* Span image down the left column so text stacks properly on the right */
        align-self: start;
    }

    .product-details[b-snqv3w8dop] {
        grid-column: 2;
        margin-bottom: 4px;
    }

    .product-quantity[b-snqv3w8dop],
    .product-price[b-snqv3w8dop] {
        grid-column: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .product-price[b-snqv3w8dop] {
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px dashed #e5e7eb;
    }

    .action-right[b-snqv3w8dop] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Item-Level Pet Tags */
.item-pet-tags[b-snqv3w8dop] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.item-pet-tags>i[b-snqv3w8dop] {
    color: #ec4899;
    font-size: 0.7rem;
}

.pet-tag-chip[b-snqv3w8dop] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    background: linear-gradient(135deg, #fdf2f8, #fce7f3);
    border: 1px solid #f9a8d4;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #be185d;
    font-weight: 500;
}

/* Order Tabs Styling (Top Menu) */
.tab-btn[b-snqv3w8dop] {
    background-color: transparent;
    color: #6b7280;
    transition: all 0.3s;
    font-size: 0.95rem;
}

.tab-btn:hover[b-snqv3w8dop] {
    background-color: #f8fafc;
}

.tab-btn.active[b-snqv3w8dop] {
    background-color: var(--primary-blue, #0145b2) !important;
    color: white !important;
}

/* Vertical Tracking Timeline */
.tracking-timeline[b-snqv3w8dop] {
    position: relative;
    padding-left: 30px;
    margin-top: 24px;
}

.tracking-timeline[b-snqv3w8dop]::before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 11px;
    width: 2px;
    background: #e2e8f0;
}

.timeline-item[b-snqv3w8dop] {
    position: relative;
    margin-bottom: 28px;
}

.timeline-item:last-child[b-snqv3w8dop] {
    margin-bottom: 0;
}

.timeline-marker[b-snqv3w8dop] {
    position: absolute;
    left: -30px;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    z-index: 1;
    border: 2px solid #e2e8f0;
}

.timeline-item.active .timeline-marker[b-snqv3w8dop] {
    background: var(--primary-blue, #0145b2);
    border-color: var(--primary-blue, #0145b2);
    color: white;
    box-shadow: 0 0 0 3px rgba(1, 69, 178, 0.2);
}

.timeline-item.completed .timeline-marker[b-snqv3w8dop] {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.timeline-content[b-snqv3w8dop] {
    padding-top: 2px;
}

.timeline-content h4[b-snqv3w8dop] {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
}

.timeline-content p[b-snqv3w8dop] {
    margin: 0;
    font-size: 0.85rem;
    color: #94a3b8;
}

.timeline-item.active .timeline-content h4[b-snqv3w8dop] {
    color: var(--primary-blue, #0145b2);
    font-weight: 700;
}

.timeline-item.completed .timeline-content h4[b-snqv3w8dop] {
    color: #10b981;
}

.timeline-item.active .timeline-content p[b-snqv3w8dop],
.timeline-item.completed .timeline-content p[b-snqv3w8dop] {
    color: #475569;
}
/* /Components/Pages/Account/Orders.razor.rz.scp.css */
/* Account Orders Page Styles */

.account-page[b-i4cztutobs] {
    background: linear-gradient(135deg, var(--gray-50, #f9fafb) 0%, var(--primary-blue-light, #eaf3ff) 100%);
    min-height: 100vh;
    padding: 20px 0 60px;
}

/* Breadcrumb */
.breadcrumb[b-i4cztutobs] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.breadcrumb a[b-i4cztutobs] {
    color: var(--primary-blue);
    text-decoration: none;
}

.breadcrumb a:hover[b-i4cztutobs] {
    text-decoration: underline;
}

.breadcrumb span[b-i4cztutobs] {
    color: var(--gray-400);
}

.breadcrumb .current[b-i4cztutobs] {
    color: var(--gray-600);
}

/* Layout */
.account-layout[b-i4cztutobs] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

/* Sidebar */
.account-sidebar[b-i4cztutobs] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    height: fit-content;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.user-info[b-i4cztutobs] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 20px;
}

.user-avatar[b-i4cztutobs] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    overflow: hidden;
}

.user-avatar img[b-i4cztutobs] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-details h3[b-i4cztutobs] {
    font-size: 1rem;
    color: var(--gray-800);
    margin: 0;
}

.user-details p[b-i4cztutobs] {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin: 4px 0 0;
}

/* Navigation */
.account-nav[b-i4cztutobs] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-section[b-i4cztutobs] {
    margin-bottom: 4px;
}

.nav-toggle[b-i4cztutobs] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-700);
    transition: all 0.2s;
}

.nav-toggle:hover[b-i4cztutobs] {
    background: var(--gray-100);
}

.nav-toggle .icon[b-i4cztutobs] {
    font-size: 1.1rem;
}

.nav-toggle .arrow[b-i4cztutobs] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--gray-400);
}

.nav-submenu[b-i4cztutobs] {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 32px;
}

.nav-submenu li[b-i4cztutobs] {
    margin: 4px 0;
}

.nav-submenu li a[b-i4cztutobs] {
    display: block;
    padding: 8px 12px;
    color: var(--gray-600);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.nav-submenu li a:hover[b-i4cztutobs] {
    background: var(--gray-100);
    color: var(--primary-blue);
}

.nav-submenu li.active a[b-i4cztutobs] {
    background: #e8f4ff;
    color: var(--primary-blue);
    font-weight: 500;
}

.nav-link[b-i4cztutobs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: var(--gray-700);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.nav-link:hover[b-i4cztutobs] {
    background: var(--gray-100);
}

.nav-link.active[b-i4cztutobs] {
    background: #e8f4ff;
    color: var(--primary-blue);
    font-weight: 500;
}

.nav-link .icon[b-i4cztutobs] {
    font-size: 1.1rem;
}

/* Main Content */
.account-content[b-i4cztutobs] {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.content-header[b-i4cztutobs] {
    margin-bottom: 24px;
}

.content-header h1[b-i4cztutobs] {
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin: 0;
}

/* Order Tabs */
.order-tabs[b-i4cztutobs] {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.order-tabs .tab[b-i4cztutobs] {
    flex: 1;
    background: white;
    border: none;
    border-right: 1px solid #e5e7eb;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.order-tabs .tab:last-child[b-i4cztutobs] {
    border-right: none;
}

.order-tabs .tab:hover[b-i4cztutobs] {
    background: #f9fafb;
}

.order-tabs .tab.active[b-i4cztutobs] {
    color: white;
    background: var(--primary-blue, #0145b2);
}

.order-tabs .tab .count[b-i4cztutobs] {
    background: #e5e7eb;
    color: #6b7280;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.order-tabs .tab.active .count[b-i4cztutobs] {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Orders List */
.orders-list[b-i4cztutobs] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Order Card */
.order-card[b-i4cztutobs] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.order-card-link[b-i4cztutobs] {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.order-card-link:hover[b-i4cztutobs] {
    background: #f8fafc;
}

.order-header[b-i4cztutobs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.order-date[b-i4cztutobs] {
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
}

.order-status[b-i4cztutobs] {
    font-size: 0.9rem;
}

.order-status a[b-i4cztutobs] {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.status-pending[b-i4cztutobs] {
    color: var(--primary-orange, #ffa819);
}

.status-processing[b-i4cztutobs] {
    color: var(--primary-blue, #0145b2);
}

.status-shipped[b-i4cztutobs] {
    color: var(--primary-blue, #0145b2);
}

.status-delivered[b-i4cztutobs] {
    color: var(--success, #10B981);
}

.status-cancelled[b-i4cztutobs] {
    color: #ef4444;
}

/* Order Items */
.order-items[b-i4cztutobs] {
    padding: 0;
}

.order-item[b-i4cztutobs] {
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.order-item:last-child[b-i4cztutobs] {
    border-bottom: none;
}

.item-image[b-i4cztutobs] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    flex-shrink: 0;
}

.item-image img[b-i4cztutobs] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-image .no-image[b-i4cztutobs] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #9ca3af;
    background: #f3f4f6;
}

.item-details[b-i4cztutobs] {
    min-width: 0;
}

.item-details h4[b-i4cztutobs] {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: #1a365d;
    font-weight: 600;
}

.item-details .variant-name[b-i4cztutobs] {
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0;
}

.item-quantity[b-i4cztutobs],
.item-price[b-i4cztutobs] {
    text-align: center;
    min-width: 70px;
}

.item-quantity .label[b-i4cztutobs],
.item-price .label[b-i4cztutobs] {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 4px;
}

.item-quantity .value[b-i4cztutobs] {
    font-weight: 500;
    color: #374151;
}

.item-price .value[b-i4cztutobs] {
    font-weight: 700;
    color: #1a365d;
}

/* Order Footer */
.order-footer[b-i4cztutobs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
}

.order-total[b-i4cztutobs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #374151;
    font-size: 0.95rem;
}

.order-total .total-row[b-i4cztutobs] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-total .total-amount[b-i4cztutobs] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a365d;
}

/* Promotion Tags */
.order-promo-tags[b-i4cztutobs] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.promo-tag[b-i4cztutobs] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

.discount-tag[b-i4cztutobs] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #fce7f3;
    color: #be185d;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

.points-tag[b-i4cztutobs] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #ede9fe;
    color: #6d28d9;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Free Item Badge */
.item-image[b-i4cztutobs] {
    position: relative;
}

.free-badge[b-i4cztutobs] {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background: #10b981;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

.free-price[b-i4cztutobs] {
    color: #10b981 !important;
    font-weight: 700;
}

.order-actions[b-i4cztutobs] {
    display: flex;
    gap: 12px;
}

.btn-outline[b-i4cztutobs] {
    padding: 10px 20px;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 8px;
    color: #374151;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline:hover[b-i4cztutobs] {
    border-color: #1a365d;
    color: #1a365d;
}

.order-actions .btn-primary[b-i4cztutobs] {
    padding: 10px 20px;
    background: var(--primary-blue, #0145b2);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(1, 69, 178, 0.25);
}

.order-actions .btn-primary:hover[b-i4cztutobs] {
    background: #013d9e;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(1, 69, 178, 0.35);
}

/* Empty State */
.empty-state[b-i4cztutobs] {
    text-align: center;
    padding: 60px 20px;
    background: #f9fafb;
    border-radius: 12px;
}

.empty-state .empty-icon[b-i4cztutobs] {
    font-size: 4rem;
    display: block;
    margin-bottom: 16px;
}

.empty-state h3[b-i4cztutobs] {
    color: #1a365d;
    margin: 0 0 8px;
}

.empty-state p[b-i4cztutobs] {
    color: #6b7280;
    margin: 0 0 24px;
}

.btn-shop[b-i4cztutobs] {
    display: inline-block;
    padding: 12px 24px;
    background: var(--primary-blue, #0145b2);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(1, 69, 178, 0.25);
}

.btn-shop:hover[b-i4cztutobs] {
    background: #013d9e;
    transform: translateY(-1px);
}

/* Loading */
.loading-state[b-i4cztutobs] {
    text-align: center;
    padding: 60px 20px;
}

.spinner[b-i4cztutobs] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary-blue, #0145b2);
    border-radius: 50%;
    animation: spin-b-i4cztutobs 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

/* Responsive — Mobile Redesign */
@media (max-width: 900px) {
    .account-page[b-i4cztutobs] {
        padding: 0 0 100px;
        background: #f2f2f7;
    }

    .account-page > .container[b-i4cztutobs] {
        padding: 0;
    }

    .breadcrumb[b-i4cztutobs] {
        display: none;
    }

    .account-layout[b-i4cztutobs] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .account-sidebar[b-i4cztutobs] {
        display: none;
    }

    .account-content[b-i4cztutobs] {
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
        max-width: 100vw;
        overflow: hidden;
    }

    .content-header[b-i4cztutobs] {
        padding: 20px 16px 8px;
    }

    .content-header h1[b-i4cztutobs] {
        font-size: 1.2rem;
        color: #1c1c1e;
    }

    .order-tabs[b-i4cztutobs] {
        margin: 12px 16px 12px;
        border-radius: 12px;
        border: 1px solid #e8e8ed;
    }

    .order-card[b-i4cztutobs] {
        margin: 0 16px 12px;
        border-radius: 12px;
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
        border: 1px solid #e8e8ed;
    }

    .empty-state[b-i4cztutobs] {
        margin: 8px 16px;
        border-radius: 12px;
    }
}

@media (max-width: 768px) {
    .order-tabs[b-i4cztutobs] {
        flex-wrap: wrap;
        gap: 8px;
        border: none;
        border-radius: 0;
        background: transparent;
        overflow: visible;
        margin-bottom: 20px;
    }

    .order-tabs[b-i4cztutobs]::-webkit-scrollbar {
        display: none;
    }

    .order-tabs .tab[b-i4cztutobs] {
        flex: 1 1 calc(50% - 4px);
        border: 1px solid #e5e7eb;
        border-radius: 8px !important;
        white-space: nowrap;
        padding: 10px 8px;
        font-size: 0.82rem;
        background: white;
    }

    .order-tabs .tab.active[b-i4cztutobs] {
        background: var(--primary-blue);
        border-color: var(--primary-blue);
        color: white;
    }

    .order-item[b-i4cztutobs] {
        grid-template-columns: 50px 1fr;
        gap: 12px;
    }

    .item-quantity[b-i4cztutobs],
    .item-price[b-i4cztutobs] {
        grid-column: 2;
        display: flex;
        justify-content: space-between;
        text-align: left;
    }

    .item-quantity .label[b-i4cztutobs],
    .item-price .label[b-i4cztutobs] {
        display: inline;
        margin-right: 8px;
    }

    .order-footer[b-i4cztutobs] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .order-actions[b-i4cztutobs] {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    .order-actions a[b-i4cztutobs],
    .order-actions button[b-i4cztutobs] {
        flex: 1;
        min-width: 120px;
        text-align: center;
        justify-content: center;
        padding: 10px 12px; /* Reduce padding for mobile */
        font-size: 0.85rem; /* Slightly smaller text for fit */
    }
}

@media (max-width: 480px) {
    .order-card[b-i4cztutobs] {
        margin: 0 12px 10px;
        padding: 14px;
    }

    .order-header[b-i4cztutobs] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .order-item-image[b-i4cztutobs] {
        width: 45px;
        height: 45px;
    }

    .order-tabs[b-i4cztutobs] {
        margin: 10px 12px;
    }

    .order-tabs .tab[b-i4cztutobs] {
        padding: 10px 14px;
        font-size: 0.8rem;
    }
}
/* /Components/Pages/Account/Pets.razor.rz.scp.css */
/* =====================================================
   PET PROFILE PAGE STYLES
   ===================================================== */

/* Account Page Base */
.account-page[b-qimfuh0t6z] {
    background: #f5f7fa;
    min-height: 100vh;
    padding: 20px 0 60px;
}

/* Breadcrumb */
.breadcrumb[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.breadcrumb a[b-qimfuh0t6z] {
    color: var(--primary-blue);
    text-decoration: none;
}

.breadcrumb a:hover[b-qimfuh0t6z] {
    text-decoration: underline;
}

.breadcrumb span[b-qimfuh0t6z] {
    color: #999;
}

.breadcrumb .current[b-qimfuh0t6z] {
    color: #666;
}

/* Layout */
.account-layout[b-qimfuh0t6z] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

/* Sidebar */
.account-sidebar[b-qimfuh0t6z] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    height: fit-content;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.user-info[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.user-avatar[b-qimfuh0t6z] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

.user-details h3[b-qimfuh0t6z] {
    font-size: 1rem;
    color: #333;
    margin: 0;
}

.user-details p[b-qimfuh0t6z] {
    font-size: 0.85rem;
    color: #888;
    margin: 4px 0 0;
}

/* Navigation */
.account-nav[b-qimfuh0t6z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-section[b-qimfuh0t6z] {
    margin-bottom: 4px;
}

.nav-toggle[b-qimfuh0t6z] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-600, #555);
    transition: all 0.2s;
}

.nav-toggle:hover[b-qimfuh0t6z] {
    background: #f5f5f5;
}

.nav-toggle .icon[b-qimfuh0t6z] {
    font-size: 1.1rem;
}

.nav-toggle .arrow[b-qimfuh0t6z] {
    margin-left: auto;
    font-size: 0.7rem;
    color: #999;
}

.nav-submenu[b-qimfuh0t6z] {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 32px;
}

.nav-submenu li[b-qimfuh0t6z] {
    margin: 4px 0;
}

.nav-submenu li a[b-qimfuh0t6z] {
    display: block;
    padding: 8px 12px;
    color: #666;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.nav-submenu li a:hover[b-qimfuh0t6z] {
    background: #f5f5f5;
    color: var(--primary-blue);
}

.nav-link[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.nav-link:hover[b-qimfuh0t6z] {
    background: #f5f5f5;
}

.nav-link.active[b-qimfuh0t6z] {
    background: var(--primary-blue-light, #eaf3ff);
    color: var(--primary-blue);
    font-weight: 500;
}

.nav-link .icon[b-qimfuh0t6z] {
    font-size: 1.1rem;
}

/* Main Content */
.account-content[b-qimfuh0t6z] {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pets-content .content-header[b-qimfuh0t6z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.pets-content .content-header h1[b-qimfuh0t6z] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--primary-blue);
}

.pets-content .subtitle[b-qimfuh0t6z] {
    color: #666;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.btn-add-pet[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary-blue, #0145b2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-add-pet:hover[b-qimfuh0t6z] {
    background: #013d9e;
    box-shadow: 0 4px 16px rgba(1, 69, 178, 0.3);
    transform: translateY(-1px);
}

/* Empty State */
.empty-state[b-qimfuh0t6z] {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #f0f3ff, #f8f9fa);
    border-radius: 16px;
    border: 2px dashed #d0d8f0;
}

.empty-state .empty-icon[b-qimfuh0t6z] {
    display: block;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-state h3[b-qimfuh0t6z] {
    margin: 0 0 0.5rem;
    color: #1a1a2e;
    font-size: 1.15rem;
}

.empty-state p[b-qimfuh0t6z] {
    color: #888;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.empty-state .btn-add[b-qimfuh0t6z] {
    padding: 0.75rem 2rem;
    background: var(--primary-blue, #0145b2);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.empty-state .btn-add:hover[b-qimfuh0t6z] {
    background: #013d9e;
    box-shadow: 0 4px 16px rgba(1, 69, 178, 0.3);
}

/* Pet Grid */
.pets-grid[b-qimfuh0t6z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.pet-card[b-qimfuh0t6z] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.pet-card:hover[b-qimfuh0t6z] {
    box-shadow: 0 12px 32px rgba(1, 69, 178, 0.15);
    transform: translateY(-4px);
    border-color: rgba(1, 69, 178, 0.1);
}

.pet-card .pet-photo[b-qimfuh0t6z] {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, #e8ecf5, #f5f7fa);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.pet-card .pet-photo>img[b-qimfuh0t6z] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pet-card:hover .pet-photo>img[b-qimfuh0t6z] {
    transform: scale(1.05);
}

.pet-card .pet-photo .placeholder[b-qimfuh0t6z] {
    opacity: 0.4;
}

.pet-photo-overlay[b-qimfuh0t6z] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 50%);
    pointer-events: none;
}

.pet-type-badge[b-qimfuh0t6z] {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(1, 69, 178, 0.85);
    backdrop-filter: blur(8px);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    z-index: 2;
}

.pet-card .pet-info[b-qimfuh0t6z] {
    padding: 16px 18px 12px;
    flex: 1;
}

.pet-card .pet-info h3[b-qimfuh0t6z] {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a1a2e;
    letter-spacing: -0.2px;
}

.pet-details[b-qimfuh0t6z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pet-detail[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #777;
}

.pet-detail img[b-qimfuh0t6z] {
    flex-shrink: 0;
    opacity: 0.7;
}

.pet-card .pet-actions[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    padding: 0 14px 14px;
    gap: 8px;
}

.pet-card .pet-actions .btn-edit[b-qimfuh0t6z] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border: none;
    background: var(--primary-blue, #0145b2);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pet-card .pet-actions .btn-edit img[b-qimfuh0t6z] {
    filter: brightness(0) invert(1);
}

.pet-card .pet-actions .btn-edit:hover[b-qimfuh0t6z] {
    background: #013d9e;
    box-shadow: 0 4px 12px rgba(1, 69, 178, 0.3);
}

.pet-card .pet-actions .btn-delete[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #eee;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pet-card .pet-actions .btn-delete:hover[b-qimfuh0t6z] {
    background: #fef2f2;
    border-color: #fca5a5;
}

.pet-card .pet-actions .btn-delete:hover img[b-qimfuh0t6z] {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(5057%) hue-rotate(346deg) brightness(91%) contrast(97%);
}

/* Pet Form */
.pet-form[b-qimfuh0t6z] {
    max-width: 640px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 8px 28px 28px;
}

.form-section[b-qimfuh0t6z] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: start;
}

.form-section:last-of-type[b-qimfuh0t6z] {
    border-bottom: none;
}

.form-label[b-qimfuh0t6z] {
    font-weight: 600;
    color: #1a1a2e;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    padding-top: 8px;
}

.form-label small[b-qimfuh0t6z] {
    display: block;
    font-weight: 400;
    color: #999;
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

.form-field label[b-qimfuh0t6z] {
    display: block;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-field input[b-qimfuh0t6z],
.form-field select[b-qimfuh0t6z] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid #e2e5ec;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    background: #fafbfc;
}

.form-field input:focus[b-qimfuh0t6z],
.form-field select:focus[b-qimfuh0t6z] {
    outline: none;
    border-color: var(--primary-blue, #0145b2);
    box-shadow: 0 0 0 3px rgba(1, 69, 178, 0.1);
    background: white;
}

.form-field input[b-qimfuh0t6z]::placeholder {
    color: #bbb;
}

.form-row[b-qimfuh0t6z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Form Actions */
.form-actions[b-qimfuh0t6z] {
    padding: 1.5rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-actions-buttons[b-qimfuh0t6z] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.error-message[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-cancel[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    padding: 10px 22px;
    border: 1.5px solid #e2e5ec;
    background: white;
    color: #555;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-qimfuh0t6z] {
    border-color: #c0c5d0;
    background: #f8f9fa;
    color: #333;
}

.btn-save[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border: none;
    background: var(--primary-blue, #0145b2);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 140px;
}

.btn-save:hover:not(:disabled)[b-qimfuh0t6z] {
    background: #013d9e;
    box-shadow: 0 4px 16px rgba(1, 69, 178, 0.3);
    transform: translateY(-1px);
}

.btn-save:disabled[b-qimfuh0t6z] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Custom Searchable Dropdown */
.dropdown-backdrop[b-qimfuh0t6z] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.custom-select[b-qimfuh0t6z] {
    position: relative;
    width: 100%;
}

.custom-select.disabled[b-qimfuh0t6z] {
    opacity: 0.55;
    pointer-events: none;
}

.custom-select-trigger[b-qimfuh0t6z] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #fafbfc;
    border: 1.5px solid #e2e5ec;
    border-radius: 10px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    color: #333;
}

.custom-select-trigger:hover[b-qimfuh0t6z] {
    border-color: #bbb;
}

.custom-select.open .custom-select-trigger[b-qimfuh0t6z] {
    border-color: var(--primary-blue, #0145b2);
    box-shadow: 0 0 0 3px rgba(1, 69, 178, 0.1);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: white;
}

.custom-select-trigger:disabled[b-qimfuh0t6z] {
    cursor: not-allowed;
    background: #f9f9f9;
}

.select-value.placeholder[b-qimfuh0t6z] {
    color: #999;
}

.select-arrow[b-qimfuh0t6z] {
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}

.custom-select.open .select-arrow[b-qimfuh0t6z] {
    transform: rotate(180deg);
}

.custom-select-dropdown[b-qimfuh0t6z] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1.5px solid var(--primary-blue, #0145b2);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 50;
    animation: dropdownSlide-b-qimfuh0t6z 0.2s ease;
    overflow: hidden;
}

@keyframes dropdownSlide-b-qimfuh0t6z {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

.select-search[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    background: #fafbfc;
}

.select-search img[b-qimfuh0t6z] {
    flex-shrink: 0;
}

.select-search input[b-qimfuh0t6z] {
    width: 100%;
    border: none;
    outline: none;
    font-size: 0.9rem;
    background: transparent;
    color: #333;
    padding: 4px 0;
}

.select-search input[b-qimfuh0t6z]::placeholder {
    color: #bbb;
}

.select-options[b-qimfuh0t6z] {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.select-options[b-qimfuh0t6z]::-webkit-scrollbar {
    width: 6px;
}

.select-options[b-qimfuh0t6z]::-webkit-scrollbar-track {
    background: transparent;
}

.select-options[b-qimfuh0t6z]::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.select-option[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #444;
    transition: all 0.15s ease;
}

.select-option:hover[b-qimfuh0t6z] {
    background: #f0f4ff;
    color: var(--primary-blue);
}

.select-option.selected[b-qimfuh0t6z] {
    background: var(--primary-blue-light, #eaf3ff);
    color: var(--primary-blue);
    font-weight: 500;
}

.select-option img[b-qimfuh0t6z] {
    flex-shrink: 0;
}

.select-no-results[b-qimfuh0t6z] {
    padding: 16px 14px;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
    font-style: italic;
}

/* Photo Upload */
.photo-upload[b-qimfuh0t6z] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.photo-upload-wrapper[b-qimfuh0t6z] {
    cursor: pointer;
    position: relative;
}

.photo-preview[b-qimfuh0t6z] {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0f3ff, #f8f9fa);
    border: 3px solid #e2e5ec;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.photo-upload-wrapper:hover .photo-preview[b-qimfuh0t6z] {
    transform: scale(1.02);
    border-color: var(--primary-blue, #0145b2);
    box-shadow: 0 4px 16px rgba(1, 69, 178, 0.15);
}

.photo-preview img[b-qimfuh0t6z] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview .placeholder[b-qimfuh0t6z] {
    font-size: 2.5rem;
    opacity: 0.7;
}

.photo-overlay[b-qimfuh0t6z] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 50%;
}

.photo-upload-wrapper:hover .photo-overlay[b-qimfuh0t6z] {
    opacity: 1;
}

.photo-overlay img[b-qimfuh0t6z] {
    display: block;
}

.photo-info[b-qimfuh0t6z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.photo-hint[b-qimfuh0t6z] {
    font-size: 0.88rem;
    color: #1a1a2e;
    font-weight: 600;
}

.photo-formats[b-qimfuh0t6z] {
    font-size: 0.78rem;
    color: #aaa;
}

.btn-remove-photo[b-qimfuh0t6z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 4px;
}

.btn-remove-photo:hover:not(:disabled)[b-qimfuh0t6z] {
    background: #fef2f2;
    border-color: #f87171;
}

.btn-remove-photo:disabled[b-qimfuh0t6z] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Legacy styles - keep for backward compatibility */
.photo-actions[b-qimfuh0t6z] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.btn-delete-photo[b-qimfuh0t6z] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
}

.btn-delete-photo:hover[b-qimfuh0t6z] {
    border-color: #dc3545;
    color: #dc3545;
}

.btn-upload[b-qimfuh0t6z] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--primary-blue, #0145b2);
    color: white;
    font-weight: 500;
}

.btn-upload:hover[b-qimfuh0t6z] {
    background: #013d9e;
}

.upload-status[b-qimfuh0t6z] {
    color: #666;
    font-size: 0.85rem;
    margin-left: 1rem;
}

/* Form Actions */
.form-actions[b-qimfuh0t6z] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;
    margin-top: 1rem;
}

.form-actions .error-message[b-qimfuh0t6z] {
    color: #dc3545;
    font-size: 0.85rem;
    margin-right: auto;
}

.form-actions .btn-cancel[b-qimfuh0t6z] {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-actions .btn-cancel:hover[b-qimfuh0t6z] {
    border-color: #999;
    color: #333;
}

.form-actions .btn-save[b-qimfuh0t6z] {
    padding: 0.75rem 2rem;
    background: var(--primary-blue, #0145b2);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-actions .btn-save:hover:not(:disabled)[b-qimfuh0t6z] {
    background: #013d9e;
}

.form-actions .btn-save:disabled[b-qimfuh0t6z] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading */
.loading[b-qimfuh0t6z] {
    text-align: center;
    padding: 4rem 2rem;
}

.loading .spinner[b-qimfuh0t6z] {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-qimfuh0t6z 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-qimfuh0t6z {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Delete Confirmation Modal */
.modal-overlay[b-qimfuh0t6z] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-qimfuh0t6z 0.2s ease;
    backdrop-filter: blur(4px);
}

.modal-dialog[b-qimfuh0t6z] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: scaleIn-b-qimfuh0t6z 0.25s ease;
}

.modal-icon[b-qimfuh0t6z] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff3cd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.modal-icon img[b-qimfuh0t6z] {
    display: block;
}

.modal-dialog h3[b-qimfuh0t6z] {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    color: #333;
}

.modal-dialog p[b-qimfuh0t6z] {
    margin: 0 0 1.5rem;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-actions[b-qimfuh0t6z] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.btn-modal-cancel[b-qimfuh0t6z] {
    padding: 0.7rem 1.5rem;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #666;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-cancel:hover[b-qimfuh0t6z] {
    border-color: #999;
    color: #333;
}

.btn-modal-confirm[b-qimfuh0t6z] {
    padding: 0.7rem 1.5rem;
    background: #dc3545;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-modal-confirm:hover[b-qimfuh0t6z] {
    background: #c82333;
}

@keyframes fadeIn-b-qimfuh0t6z {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn-b-qimfuh0t6z {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Allergen Tags Cloud */
.allergen-tags-cloud[b-qimfuh0t6z] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.allergen-tag[b-qimfuh0t6z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f0f3ff;
    color: #555;
    border: 1px solid #d0d8f0;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.allergen-tag.selected[b-qimfuh0t6z] {
    background: var(--primary-blue, #0145b2);
    color: white;
    border-color: var(--primary-blue, #0145b2);
    box-shadow: 0 4px 8px rgba(1, 69, 178, 0.2);
}

.allergen-tag:hover:not(.selected)[b-qimfuh0t6z] {
    background: #e4e9f9;
    color: #333;
    border-color: #b5c2ea;
    transform: translateY(-1px);
}

.allergen-name[b-qimfuh0t6z] {
    line-height: 1;
}

/* Responsive — Mobile Redesign */
@media (max-width: 900px) {
    .account-page[b-qimfuh0t6z] {
        padding: 0 0 100px;
        background: #f2f2f7;
    }

    .account-page > .container[b-qimfuh0t6z] {
        padding: 0;
    }

    .breadcrumb[b-qimfuh0t6z] {
        display: none;
    }

    .account-layout[b-qimfuh0t6z] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .account-sidebar[b-qimfuh0t6z] {
        display: none;
    }

    .account-content[b-qimfuh0t6z] {
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .pets-content .content-header[b-qimfuh0t6z] {
        padding: 20px 16px 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pets-content .content-header h1[b-qimfuh0t6z] {
        font-size: 1.2rem;
        color: #1c1c1e;
    }

    .pets-grid[b-qimfuh0t6z] {
        padding: 8px 16px 0;
        grid-template-columns: 1fr;
    }

    .pet-card[b-qimfuh0t6z] {
        border-radius: 12px;
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
        border: 1px solid #e8e8ed;
    }

    .form-section[b-qimfuh0t6z] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .form-row[b-qimfuh0t6z] {
        grid-template-columns: 1fr;
    }

    .photo-upload[b-qimfuh0t6z] {
        flex-direction: column;
        align-items: flex-start;
    }

    .empty-state[b-qimfuh0t6z] {
        margin: 8px 16px;
        border-radius: 12px;
    }
}
/* /Components/Pages/Account/Profile.razor.rz.scp.css */
/* Profile Page Styles */
a[b-gju9yls3k4],
button[b-gju9yls3k4] {
    text-decoration: none;
}

.account-page[b-gju9yls3k4] {
    background: #f5f7fa;
    min-height: 100vh;
    padding: 20px 0 60px;
}

.breadcrumb[b-gju9yls3k4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.breadcrumb a[b-gju9yls3k4] {
    color: var(--primary-blue);
    text-decoration: none;
}

.breadcrumb a:hover[b-gju9yls3k4] {
    text-decoration: underline;
}

.breadcrumb span[b-gju9yls3k4] {
    color: var(--gray-400);
}

.breadcrumb .current[b-gju9yls3k4] {
    color: var(--gray-600);
}

.account-layout[b-gju9yls3k4] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

.account-content[b-gju9yls3k4] {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.content-header[b-gju9yls3k4] {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-100);
}

.content-header h1[b-gju9yls3k4] {
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin: 0 0 8px;
}

.content-header p[b-gju9yls3k4] {
    color: var(--gray-500);
    margin: 0;
}

/* Alerts */
.success-alert[b-gju9yls3k4] {
    background: #d4edda;
    color: #155724;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-alert[b-gju9yls3k4] {
    background: #f8d7da;
    color: #721c24;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Form */
.profile-form[b-gju9yls3k4] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-row[b-gju9yls3k4] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 20px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--gray-100);
}

.form-row:last-of-type[b-gju9yls3k4] {
    border-bottom: none;
}

.form-row label[b-gju9yls3k4] {
    font-weight: 500;
    color: var(--gray-700);
    padding-top: 10px;
}

.label-hint[b-gju9yls3k4] {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--gray-500);
}

/* Avatar Section */
.avatar-section[b-gju9yls3k4] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.avatar-upload-wrapper[b-gju9yls3k4] {
    cursor: pointer;
    padding: 0;
    font-weight: normal;
}

.avatar-preview[b-gju9yls3k4] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    border: 3px solid white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.avatar-upload-wrapper:hover .avatar-preview[b-gju9yls3k4] {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.avatar-preview img[b-gju9yls3k4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-preview .initials[b-gju9yls3k4] {
    color: #7c3aed;
    font-weight: 600;
    font-size: 1.5rem;
}

.avatar-overlay[b-gju9yls3k4] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 50%;
}

.avatar-overlay i[b-gju9yls3k4] {
    color: white;
    font-size: 1.25rem;
}

.avatar-upload-wrapper:hover .avatar-overlay[b-gju9yls3k4] {
    opacity: 1;
}

/* Show overlay when uploading */
.avatar-upload-wrapper:has(input:disabled) .avatar-overlay[b-gju9yls3k4] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.6);
}

.avatar-info[b-gju9yls3k4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.avatar-hint[b-gju9yls3k4] {
    color: var(--gray-700);
    font-size: 0.95rem;
    font-weight: 500;
}

.avatar-formats[b-gju9yls3k4] {
    color: var(--gray-500);
    font-size: 0.85rem;
}

.btn-remove-avatar[b-gju9yls3k4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 6px 0;
    margin-top: 4px;
    transition: color 0.2s;
}

.btn-remove-avatar:hover[b-gju9yls3k4] {
    color: #b02a37;
    text-decoration: underline;
}

.btn-remove-avatar:disabled[b-gju9yls3k4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.upload-status[b-gju9yls3k4] {
    color: var(--gray-500);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Input Fields */
.input-group[b-gju9yls3k4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.input-field[b-gju9yls3k4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-gju9yls3k4] {
    font-size: 0.85rem;
    color: var(--gray-500);
}

.profile-form input[type="text"][b-gju9yls3k4],
.profile-form input[type="email"][b-gju9yls3k4],
.profile-form input[type="tel"][b-gju9yls3k4],
.profile-form .form-control[b-gju9yls3k4] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--gray-800);
    transition: all 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

.profile-form input:focus[b-gju9yls3k4],
.profile-form .form-control:focus[b-gju9yls3k4] {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.profile-form input[b-gju9yls3k4]::placeholder,
.profile-form .form-control[b-gju9yls3k4]::placeholder {
    color: var(--gray-400);
}

/* Email with icon */
.input-with-icon[b-gju9yls3k4] {
    position: relative;
}

.input-with-icon i[b-gju9yls3k4] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 1rem;
}

.input-with-icon input[b-gju9yls3k4] {
    padding-left: 42px;
}

/* Social Connections List */
.social-connections-list[b-gju9yls3k4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
    width: 100%;
}

.social-connection-card[b-gju9yls3k4] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    background: white;
    transition: all 0.2s;
    cursor: pointer;
}

.social-connection-card:hover[b-gju9yls3k4] {
    border-color: var(--primary-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.social-connection-card.connected[b-gju9yls3k4] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.social-connection-card.disconnected[b-gju9yls3k4] {
    background: #fafafa;
}

.social-connection-card.linking[b-gju9yls3k4] {
    opacity: 0.7;
    pointer-events: none;
}

.social-connection-card .social-icon[b-gju9yls3k4] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    margin-right: 16px;
}

.social-connection-card .social-connection-info[b-gju9yls3k4] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.social-connection-info .social-name[b-gju9yls3k4] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
}

.social-connection-info .social-status[b-gju9yls3k4] {
    font-size: 0.85rem;
    color: var(--gray-500);
}

.social-connection-info .social-status.status-connected[b-gju9yls3k4] {
    color: #15803d;
    font-weight: 500;
}

.social-connection-action[b-gju9yls3k4] {
    flex-shrink: 0;
}

.btn-connect[b-gju9yls3k4] {
    padding: 6px 14px;
    border-radius: 20px;
    background: white;
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-disconnect[b-gju9yls3k4] {
    padding: 6px 14px;
    border-radius: 20px;
    background: transparent;
    border: 1px solid #fecaca;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-disconnect:hover[b-gju9yls3k4] {
    background: #fef2f2;
}

.social-icon svg[b-gju9yls3k4] {
    width: 20px;
    height: 20px;
}

/* Form Actions */
.form-actions[b-gju9yls3k4] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
    margin-top: 8px;
}

.btn-cancel[b-gju9yls3k4] {
    padding: 12px 24px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-600);
    transition: all 0.2s;
}

.btn-cancel:hover[b-gju9yls3k4] {
    background: var(--gray-100);
}

.btn-save[b-gju9yls3k4] {
    padding: 12px 32px;
    border: none;
    background: var(--primary-blue);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-save:hover[b-gju9yls3k4] {
    background: #0055aa;
}

.btn-save:disabled[b-gju9yls3k4] {
    background: var(--gray-400);
    cursor: not-allowed;
}

/* Responsive — Mobile Redesign */
@media (max-width: 900px) {
    .account-page[b-gju9yls3k4] {
        padding: 0 0 100px;
        background: #f2f2f7;
    }

    .account-page > .container[b-gju9yls3k4] {
        padding: 0;
    }

    .breadcrumb[b-gju9yls3k4] {
        display: none;
    }

    .account-layout[b-gju9yls3k4] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .account-content[b-gju9yls3k4] {
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    /* Page header */
    .content-header[b-gju9yls3k4] {
        padding: 20px 16px 8px;
    }

    .content-header h1[b-gju9yls3k4] {
        font-size: 1.2rem;
        color: #1c1c1e;
    }

    .content-header p[b-gju9yls3k4] {
        font-size: 0.82rem;
        color: #8e8e93;
    }

    /* Avatar section — white card */
    .avatar-section[b-gju9yls3k4] {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        background: white;
        border-radius: 12px;
        margin: 8px 16px 0;
        padding: 20px;
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
    }

    /* Form — white card wrapping all rows */
    .profile-form[b-gju9yls3k4] {
        padding: 0;
        background: white;
        border-radius: 12px;
        margin: 8px 16px 0;
        overflow: hidden;
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
    }

    .form-row[b-gju9yls3k4] {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px 16px;
        border-bottom: 1px solid #f0f0f5;
    }

    .form-row:last-of-type[b-gju9yls3k4] {
        border-bottom: none;
    }

    .form-row label[b-gju9yls3k4] {
        padding-top: 0;
        font-size: 0.82rem;
        font-weight: 600;
        color: #86868b;
    }

    .input-group[b-gju9yls3k4] {
        grid-template-columns: 1fr;
    }

    .form-control[b-gju9yls3k4] {
        font-size: 16px;
        padding: 10px 14px;
        border-radius: 8px;
        border: 1px solid #e5e5ea;
    }

    /* Social connections — in their own card */
    .social-connections-title[b-gju9yls3k4] {
        padding: 20px 16px 0;
        margin: 0 0 4px;
    }

    .social-connections-list[b-gju9yls3k4] {
        background: white;
        border-radius: 12px;
        margin: 8px 16px 0;
        overflow: hidden;
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
        gap: 0;
    }

    .social-connection-item[b-gju9yls3k4] {
        border-bottom: 1px solid #f0f0f5;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        padding: 12px 16px;
    }

    .social-connection-item:last-child[b-gju9yls3k4] {
        border-bottom: none;
    }

    /* Form actions */
    .form-actions[b-gju9yls3k4] {
        flex-direction: column;
        padding: 20px 16px;
        gap: 10px;
    }

    .btn-cancel[b-gju9yls3k4],
    .btn-save[b-gju9yls3k4] {
        width: 100%;
        justify-content: center;
    }

    .btn-save[b-gju9yls3k4] {
        padding: 14px 24px;
        font-size: 1rem;
        min-height: 48px;
        border-radius: 12px;
    }

    .btn-cancel[b-gju9yls3k4] {
        border-radius: 12px;
    }
}

@media (max-width: 768px) {
    .social-connections-list[b-gju9yls3k4] {
        margin: 0;
    }
}
/* /Components/Pages/Account/ReportOrderIssue.razor.rz.scp.css */
/* Order Report Page - Premium Styles */

.report-page[b-s3m019o406] {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem 0 4rem;
}

.report-page .container[b-s3m019o406] {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Breadcrumb */
.breadcrumb[b-s3m019o406] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.breadcrumb a[b-s3m019o406] {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover[b-s3m019o406] {
    color: var(--primary-blue, #0145b2);
}

.breadcrumb .current[b-s3m019o406] {
    color: #495057;
    font-weight: 500;
}

/* Back Link */
.back-link[b-s3m019o406] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}

.back-link:hover[b-s3m019o406] {
    color: var(--primary-blue, #0145b2);
}

.back-link span[b-s3m019o406] {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Loading State */
.loading-state[b-s3m019o406] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: #6c757d;
}

.spinner[b-s3m019o406] {
    width: 48px;
    height: 48px;
    border: 4px solid #e9ecef;
    border-top-color: var(--primary-blue, #0145b2);
    border-radius: 50%;
    animation: spin-b-s3m019o406 1s linear infinite;
    margin-bottom: 1rem;
}

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

/* Not Found State */
.not-found[b-s3m019o406] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.not-found-icon[b-s3m019o406] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.not-found h2[b-s3m019o406] {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.not-found p[b-s3m019o406] {
    color: #6c757d;
    margin-bottom: 1.5rem;
}

/* Success State */
.success-state[b-s3m019o406] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.success-icon[b-s3m019o406] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    margin: 0 auto 1.5rem;
    animation: scaleIn-b-s3m019o406 0.5s ease-out;
    box-shadow: 0 8px 24px rgba(40, 167, 69, 0.3);
}

@keyframes scaleIn-b-s3m019o406 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-state h2[b-s3m019o406] {
    font-size: 1.5rem;
    color: #28a745;
    margin-bottom: 0.5rem;
}

.success-state p[b-s3m019o406] {
    color: #6c757d;
    margin-bottom: 2rem;
}

.success-actions[b-s3m019o406] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Report Container */
.report-container[b-s3m019o406] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}

/* Report Header */
.report-header[b-s3m019o406] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    flex-wrap: wrap;
}

.report-header h1[b-s3m019o406] {
    font-size: 1.35rem;
    color: #333;
    margin: 0;
}

.order-badge[b-s3m019o406] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.order-badge .order-number[b-s3m019o406] {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 0.85rem;
    color: var(--primary-blue, #0145b2);
    font-weight: 600;
}

.order-badge .order-date[b-s3m019o406] {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Order Summary Card */
.order-summary-card[b-s3m019o406] {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 2rem;
}

.summary-header[b-s3m019o406] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.summary-header .label[b-s3m019o406] {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-header .total[b-s3m019o406] {
    font-weight: 700;
    color: var(--primary-blue, #0145b2);
    font-size: 1.1rem;
}

.order-items-row[b-s3m019o406] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.item-thumb[b-s3m019o406] {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e9ecef;
    flex-shrink: 0;
}

.item-thumb img[b-s3m019o406] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-thumb .qty-badge[b-s3m019o406] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--primary-blue, #0145b2);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
}

.more-badge[b-s3m019o406] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
}

/* Form Sections */
.form-section[b-s3m019o406] {
    margin-bottom: 2rem;
}

.section-label[b-s3m019o406] {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.required[b-s3m019o406] {
    color: #dc3545;
}

.optional[b-s3m019o406] {
    color: #6c757d;
    font-weight: 400;
    font-size: 0.85rem;
}

/* Problem Types Grid */
.problem-types[b-s3m019o406] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.problem-type-btn[b-s3m019o406] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.problem-type-btn:hover[b-s3m019o406] {
    background: #fff;
    border-color: #dee2e6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.problem-type-btn.selected[b-s3m019o406] {
    background: linear-gradient(135deg, var(--primary-blue-light, #eaf3ff) 0%, #fff 100%);
    border-color: var(--primary-blue, #0145b2);
    box-shadow: 0 4px 16px rgba(1, 69, 178, 0.2);
}

.problem-type-btn .icon[b-s3m019o406] {
    font-size: 1.5rem;
}

.problem-type-btn .label[b-s3m019o406] {
    font-size: 0.8rem;
    color: #333;
    text-align: center;
    line-height: 1.2;
}

/* Form Groups */
.form-group[b-s3m019o406] {
    margin-bottom: 1.5rem;
}

.form-group>label[b-s3m019o406] {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.form-group input[type="text"][b-s3m019o406],
.form-group textarea[b-s3m019o406] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
    background: #fff;
}

.form-group input[type="text"]:focus[b-s3m019o406],
.form-group textarea:focus[b-s3m019o406] {
    outline: none;
    border-color: var(--primary-blue, #0145b2);
    box-shadow: 0 0 0 4px rgba(1, 69, 178, 0.1);
}

.form-group input[b-s3m019o406]::placeholder,
.form-group textarea[b-s3m019o406]::placeholder {
    color: #adb5bd;
}

.form-group textarea[b-s3m019o406] {
    resize: vertical;
    min-height: 120px;
}

.error-text[b-s3m019o406] {
    display: block;
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Image Upload Area */
.image-upload-area[b-s3m019o406] {
    display: block;
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafafa;
}

.image-upload-area:hover[b-s3m019o406] {
    border-color: var(--primary-blue, #0145b2);
    background: var(--primary-blue-light, #eaf3ff);
}

/* Hide the native file input completely */
.file-input-hidden[b-s3m019o406],
.image-upload-area[b-s3m019o406]  input[type="file"],
.video-upload-area[b-s3m019o406]  input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.upload-placeholder[b-s3m019o406] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #6b7280;
    pointer-events: none;
}

.upload-icon-large[b-s3m019o406] {
    font-size: 2.5rem;
}

/* Uploaded Images Grid */
.uploaded-images[b-s3m019o406] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
    padding: 12px;
    background: #f8fafc;
    border-radius: 12px;
}

.uploaded-image[b-s3m019o406] {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    background: #fff;
    /* Ensure white background */
}

.uploaded-image:hover[b-s3m019o406] {
    transform: scale(1.05);
}

.uploaded-image img[b-s3m019o406] {
    position: absolute;
    /* Force it to fill */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.remove-image[b-s3m019o406] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    z-index: 2;
    /* Ensure above image */
}

.remove-image:hover[b-s3m019o406] {
    transform: scale(1.1);
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* Video Upload Area */
.video-upload-area[b-s3m019o406] {
    display: block;
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafafa;
}

.video-upload-area:hover[b-s3m019o406] {
    border-color: #6366f1;
    background: #f0f1ff;
}

.upload-hint[b-s3m019o406] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 4px;
}

/* Uploaded Videos List */
.uploaded-videos[b-s3m019o406] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 12px;
}

.uploaded-video[b-s3m019o406] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

.video-info[b-s3m019o406] {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.video-icon[b-s3m019o406] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.video-name[b-s3m019o406] {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-size[b-s3m019o406] {
    font-size: 0.8rem;
    color: #6b7280;
    flex-shrink: 0;
}

.remove-video[b-s3m019o406] {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.remove-video:hover[b-s3m019o406] {
    transform: scale(1.1);
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* Uploading Indicator */
.uploading-indicator[b-s3m019o406] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f0f9ff;
    border-radius: 10px;
    margin-top: 12px;
    color: #0369a1;
    font-size: 0.9rem;
}

.spinner-small[b-s3m019o406] {
    width: 16px;
    height: 16px;
    border: 2px solid #bae6fd;
    border-top-color: #0369a1;
    border-radius: 50%;
    animation: spin-b-s3m019o406 0.8s linear infinite;
}

/* Form Actions */
.form-actions[b-s3m019o406] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
    margin-top: 0.5rem;
}

/* Buttons */
.btn-primary[b-s3m019o406] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--primary-blue, #0145b2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(1, 69, 178, 0.3);
}

.btn-primary:hover:not(:disabled)[b-s3m019o406] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(1, 69, 178, 0.4);
}

.btn-primary:disabled[b-s3m019o406] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-secondary[b-s3m019o406] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: white;
    color: #495057;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover[b-s3m019o406] {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.btn-spinner[b-s3m019o406] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-s3m019o406 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 600px) {
    .report-container[b-s3m019o406] {
        padding: 1.5rem;
    }

    .report-header[b-s3m019o406] {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-badge[b-s3m019o406] {
        align-items: flex-start;
    }

    .problem-types[b-s3m019o406] {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-actions[b-s3m019o406] {
        flex-direction: column-reverse;
    }

    .form-actions .btn-primary[b-s3m019o406],
    .form-actions .btn-secondary[b-s3m019o406] {
        width: 100%;
    }

    .success-actions[b-s3m019o406] {
        flex-direction: column;
    }

    .success-actions a[b-s3m019o406] {
        width: 100%;
    }
}

/* ============================================
   Report Status View Styles
   ============================================ */

/* Status Section */
.status-section[b-s3m019o406] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-radius: 16px;
    text-align: center;
}

.status-badge-large[b-s3m019o406] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
}

.status-badge-large.status-pending[b-s3m019o406] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.status-badge-large.status-progress[b-s3m019o406] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
}

.status-badge-large.status-resolved[b-s3m019o406] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}

.status-badge-large.status-closed[b-s3m019o406] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #374151;
}

.status-badge-large.status-rejected[b-s3m019o406] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
}

.status-icon[b-s3m019o406] {
    font-size: 1.25rem;
}

.report-date[b-s3m019o406] {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Report Details Card */
.report-details-card[b-s3m019o406] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-row[b-s3m019o406] {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.detail-row:last-child[b-s3m019o406] {
    border-bottom: none;
}

.detail-row.detail-description[b-s3m019o406] {
    flex-direction: column;
    gap: 8px;
}

.detail-label[b-s3m019o406] {
    min-width: 120px;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.detail-value[b-s3m019o406] {
    flex: 1;
    color: #1f2937;
    font-weight: 500;
}

.detail-description .detail-value[b-s3m019o406] {
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* Attachments Section */
.attachments-section[b-s3m019o406] {
    margin-bottom: 1.5rem;
}

.attachments-section h3[b-s3m019o406] {
    font-size: 1rem;
    color: #374151;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.attachments-grid[b-s3m019o406] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.attachment-item[b-s3m019o406] {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.attachment-item:hover[b-s3m019o406] {
    transform: scale(1.05);
}

.attachment-item img[b-s3m019o406] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.videos-list[b-s3m019o406] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.video-attachment[b-s3m019o406] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 10px;
    color: #0369a1;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.video-attachment:hover[b-s3m019o406] {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    transform: translateX(4px);
}

.video-attachment i[b-s3m019o406] {
    font-size: 1.5rem;
}

/* Admin Response Card */
.admin-response-card[b-s3m019o406] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.admin-response-card h3[b-s3m019o406] {
    font-size: 1rem;
    color: #065f46;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-response-card p[b-s3m019o406] {
    color: #047857;
    line-height: 1.6;
    margin: 0 0 12px;
}

.response-date[b-s3m019o406] {
    font-size: 0.8rem;
    color: #10b981;
}

/* Waiting Response */
.waiting-response[b-s3m019o406] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem 1.5rem;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    color: #6b7280;
}

.waiting-response i[b-s3m019o406] {
    font-size: 1.5rem;
    color: #9ca3af;
}

.waiting-response p[b-s3m019o406] {
    margin: 0;
    font-size: 0.95rem;
}

/* Refund Info */
.refund-info[b-s3m019o406] {
    background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.refund-info h3[b-s3m019o406] {
    font-size: 1rem;
    color: #7c3aed;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.refund-details[b-s3m019o406] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.refund-amount[b-s3m019o406] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #7c3aed;
}

.refund-status[b-s3m019o406] {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.refund-status.completed[b-s3m019o406] {
    background: #d1fae5;
    color: #059669;
}

.refund-status.pending[b-s3m019o406] {
    background: #fef3c7;
    color: #d97706;
}

/* Report Status Actions */
.report-status-actions[b-s3m019o406] {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 1rem;
}

/* Mobile Responsive for Status View */
@media (max-width: 600px) {
    .detail-row[b-s3m019o406] {
        flex-direction: column;
        gap: 6px;
    }

    .detail-label[b-s3m019o406] {
        min-width: auto;
    }

    .report-status-actions[b-s3m019o406] {
        flex-direction: column;
    }

    .report-status-actions .btn-secondary[b-s3m019o406],
    .report-status-actions .btn-outline[b-s3m019o406] {
        width: 100%;
    }

    .refund-details[b-s3m019o406] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}
/* /Components/Pages/Account/Review.razor.rz.scp.css */
/* Review Page Styles */
.review-page[b-ys2pi8u3mg] {
    background: #f5f7fa;
    min-height: 100vh;
    padding: 40px 0;
}

.page-title[b-ys2pi8u3mg] {
    font-size: 1.75rem;
    color: var(--primary-blue, #0145b2);
    margin-bottom: 32px;
}

.review-content[b-ys2pi8u3mg] {
    max-width: 800px;
    margin: 0 auto;
}

/* Breadcrumb */
.breadcrumb[b-ys2pi8u3mg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.breadcrumb a[b-ys2pi8u3mg] {
    color: #6b7280;
    text-decoration: none;
}

.breadcrumb a:hover[b-ys2pi8u3mg] {
    color: var(--primary-blue, #0145b2);
}

.breadcrumb .current[b-ys2pi8u3mg] {
    color: #1a365d;
    font-weight: 500;
}

/* Loading & Empty States */
.loading-state[b-ys2pi8u3mg],
.empty-state[b-ys2pi8u3mg] {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.spinner[b-ys2pi8u3mg] {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: var(--primary-blue, #0145b2);
    border-radius: 50%;
    animation: spin-b-ys2pi8u3mg 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

.empty-icon[b-ys2pi8u3mg] {
    font-size: 4rem;
    display: block;
    margin-bottom: 16px;
}

.empty-state h3[b-ys2pi8u3mg] {
    color: var(--primary-blue, #0145b2);
    margin-bottom: 8px;
}

.empty-state p[b-ys2pi8u3mg] {
    color: #6b7280;
    margin-bottom: 24px;
}

.btn-back[b-ys2pi8u3mg] {
    display: inline-block;
    padding: 12px 24px;
    background: var(--primary-blue, #0145b2);
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
}

.btn-back:hover[b-ys2pi8u3mg] {
    background: #0156d4;
}

/* Review Items */
.review-items[b-ys2pi8u3mg] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-item-card[b-ys2pi8u3mg] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.review-item-card.already-reviewed[b-ys2pi8u3mg] {
    opacity: 0.7;
}

.item-info[b-ys2pi8u3mg] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.item-image[b-ys2pi8u3mg] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}

.item-image img[b-ys2pi8u3mg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-details h3[b-ys2pi8u3mg] {
    font-size: 1.1rem;
    color: var(--primary-blue, #0145b2);
    margin: 0 0 4px;
}

.item-details .variant-name[b-ys2pi8u3mg] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

/* Reviewed Badge */
.reviewed-badge[b-ys2pi8u3mg] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #16a34a;
    font-weight: 600;
    padding: 12px 20px;
    background: #ecfdf5;
    border-radius: 10px;
    width: fit-content;
}

.reviewed-badge i[b-ys2pi8u3mg] {
    font-size: 1.2rem;
}

/* Write Review Button */
.btn-write-review[b-ys2pi8u3mg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-blue, #0145b2);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-write-review:hover[b-ys2pi8u3mg] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 69, 178, 0.3);
}

/* Review Form */
.review-form[b-ys2pi8u3mg] {
    border-top: 1px solid #e5e7eb;
    padding-top: 24px;
    margin-top: 20px;
}

/* Star Rating Input */
.rating-input[b-ys2pi8u3mg] {
    margin-bottom: 24px;
}

.rating-input label[b-ys2pi8u3mg] {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

.star-input[b-ys2pi8u3mg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.star-btn[b-ys2pi8u3mg] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 2rem;
    color: #d1d5db;
    transition: all 0.2s ease;
}

.star-btn:hover[b-ys2pi8u3mg],
.star-btn.filled[b-ys2pi8u3mg] {
    color: #fbbf24;
    transform: scale(1.1);
}

.rating-text[b-ys2pi8u3mg] {
    margin-left: 12px;
    color: #6b7280;
    font-weight: 500;
}

/* Form Groups */
.form-group[b-ys2pi8u3mg] {
    margin-bottom: 20px;
}

.form-group label[b-ys2pi8u3mg] {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.form-group input[b-ys2pi8u3mg],
.form-group textarea[b-ys2pi8u3mg] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-group input:focus[b-ys2pi8u3mg],
.form-group textarea:focus[b-ys2pi8u3mg] {
    outline: none;
    border-color: var(--primary-blue, #0145b2);
    box-shadow: 0 0 0 4px rgba(1, 69, 178, 0.1);
}

.form-group textarea[b-ys2pi8u3mg] {
    resize: vertical;
    min-height: 120px;
}

/* Image Upload */
.image-upload-area[b-ys2pi8u3mg] {
    display: block;
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafafa;
}

.image-upload-area:hover[b-ys2pi8u3mg] {
    border-color: var(--primary-blue, #0145b2);
    background: var(--primary-blue-light, #eaf3ff);
}

/* Hide the native file input completely */
.file-input-hidden[b-ys2pi8u3mg],
.image-upload-area[b-ys2pi8u3mg]  input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.upload-placeholder[b-ys2pi8u3mg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #6b7280;
    pointer-events: none;
}

.upload-placeholder i[b-ys2pi8u3mg] {
    font-size: 2.5rem;
    color: var(--primary-blue, #0145b2);
}

/* Uploaded Images */
.uploaded-images[b-ys2pi8u3mg] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
    padding: 12px;
    background: #f8fafc;
    border-radius: 12px;
}

.uploaded-image[b-ys2pi8u3mg] {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.uploaded-image:hover[b-ys2pi8u3mg] {
    transform: scale(1.05);
}

.uploaded-image img[b-ys2pi8u3mg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-image[b-ys2pi8u3mg] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.remove-image:hover[b-ys2pi8u3mg] {
    transform: scale(1.1);
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* Error Message */
.error-message[b-ys2pi8u3mg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    color: #dc2626;
    margin-bottom: 20px;
}

/* Form Actions */
.form-actions[b-ys2pi8u3mg] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-cancel[b-ys2pi8u3mg] {
    padding: 12px 24px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    color: #6b7280;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-ys2pi8u3mg] {
    border-color: #d1d5db;
    background: #f9fafb;
}

.btn-submit[b-ys2pi8u3mg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--primary-blue, #0145b2);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover:not(:disabled)[b-ys2pi8u3mg] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 69, 178, 0.4);
}

.btn-submit:disabled[b-ys2pi8u3mg] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-small[b-ys2pi8u3mg] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-ys2pi8u3mg 0.8s linear infinite;
}

/* Success Toast */
.success-toast[b-ys2pi8u3mg] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    color: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.4);
    font-weight: 600;
    animation: slideUp-b-ys2pi8u3mg 0.3s ease;
    z-index: 1000;
}

@keyframes slideUp-b-ys2pi8u3mg {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Responsive — Mobile Redesign */
@media (max-width: 900px) {
    .review-page[b-ys2pi8u3mg] {
        padding: 0 0 100px;
        background: #f2f2f7;
    }

    .review-page > .container[b-ys2pi8u3mg] {
        padding: 0;
    }

    .breadcrumb[b-ys2pi8u3mg] {
        display: none;
    }

    .review-content[b-ys2pi8u3mg] {
        max-width: 100%;
        padding: 0;
    }

    .page-title[b-ys2pi8u3mg] {
        padding: 20px 16px 8px;
        font-size: 1.2rem;
        color: #1c1c1e;
    }

    .review-item-card[b-ys2pi8u3mg] {
        margin: 0 16px 12px;
        padding: 16px;
        border-radius: 12px;
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
        border: 1px solid #e8e8ed;
    }

    .item-image[b-ys2pi8u3mg] {
        width: 60px;
        height: 60px;
    }

    .star-btn[b-ys2pi8u3mg] {
        font-size: 1.5rem;
    }

    .form-actions[b-ys2pi8u3mg] {
        flex-direction: column;
        padding: 8px 16px 16px;
    }

    .btn-cancel[b-ys2pi8u3mg],
    .btn-submit[b-ys2pi8u3mg] {
        width: 100%;
        justify-content: center;
        border-radius: 12px;
    }
}
/* /Components/Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* Forgot Password Page Styles */

.auth-page[b-ba34hnsdza] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 20px;
}

.auth-container[b-ba34hnsdza] {
    width: 100%;
    max-width: 420px;
}

.auth-card[b-ba34hnsdza] {
    background: white;
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
}

.auth-icon[b-ba34hnsdza] {
    width: 80px;
    height: 80px;
    margin: 0 auto 28px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 2rem;
}

.auth-card h1[b-ba34hnsdza] {
    font-size: 2rem;
    color: #0a3b7a;
    margin: 0 0 12px;
    font-weight: 700;
}

.subtitle[b-ba34hnsdza] {
    color: #333;
    margin: 0 0 32px;
    font-size: 1rem;
    line-height: 1.5;
}

.error-alert[b-ba34hnsdza] {
    background: #fee2e2;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group[b-ba34hnsdza] {
    margin-bottom: 24px;
    text-align: left;
}

.form-group label[b-ba34hnsdza] {
    display: block;
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 8px;
}

.form-group input[b-ba34hnsdza] {
    width: 100%;
    padding: 16px 18px;
    border: 2px solid #0066cc;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s;
    box-sizing: border-box;
}

.form-group input:focus[b-ba34hnsdza] {
    outline: none;
    border-color: #0052a3;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-group input[b-ba34hnsdza]::placeholder {
    color: #999;
}

.btn-primary[b-ba34hnsdza] {
    width: 100%;
    padding: 18px 24px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary:hover:not(:disabled)[b-ba34hnsdza] {
    background: #5a7bc0;
}

.btn-primary:disabled[b-ba34hnsdza] {
    background: #a8b8d8;
    cursor: not-allowed;
}

.spinner-small[b-ba34hnsdza] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-ba34hnsdza 0.8s linear infinite;
}

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

.back-link[b-ba34hnsdza] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.2s;
}

.back-link i[b-ba34hnsdza] {
    font-size: 0.9rem;
}

.back-link:hover[b-ba34hnsdza] {
    color: #0066cc;
}

@media (max-width: 480px) {
    .auth-card[b-ba34hnsdza] {
        padding: 32px 24px;
    }

    .auth-card h1[b-ba34hnsdza] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* Auth Page Styles */

.auth-page[b-lz7120dodb] {
    min-height: 100vh;
    background: #f5f7fa;
}

.auth-container[b-lz7120dodb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/* Form Section */
.auth-form-section[b-lz7120dodb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: white;
}

.auth-form-content[b-lz7120dodb] {
    width: 100%;
    max-width: 400px;
}

.auth-logo[b-lz7120dodb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
}

.auth-logo .logo-image[b-lz7120dodb] {
    max-width: 140px;
    height: auto;
}

.auth-logo .paw[b-lz7120dodb] {
    font-size: 2.5rem;
}

.auth-logo .logo-text[b-lz7120dodb] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0066cc;
}

.auth-title[b-lz7120dodb] {
    font-size: 2rem;
    font-weight: 700;
    color: #0a3b7a;
    text-align: center;
    margin-bottom: 8px;
}

.auth-subtitle[b-lz7120dodb] {
    color: #555;
    text-align: center;
    margin-bottom: 28px;
    font-size: 1rem;
}

/* Form Styles */
.auth-form[b-lz7120dodb] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.form-group label[b-lz7120dodb] {
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
}

.form-group input[b-lz7120dodb] {
    padding: 16px 18px;
    border: 2px solid #0066cc;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s;
    background: white;
}

.form-group input:focus[b-lz7120dodb] {
    outline: none;
    border-color: #0052a3;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-group input[b-lz7120dodb]::placeholder {
    color: #999;
}

/* Password Input */
.password-input[b-lz7120dodb] {
    position: relative;
}

.password-input input[b-lz7120dodb] {
    width: 100%;
    padding-right: 50px;
}

.toggle-password[b-lz7120dodb] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.6;
}

.toggle-password:hover[b-lz7120dodb] {
    opacity: 1;
}

/* Form Options */
.form-options[b-lz7120dodb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -5px;
}

.checkbox-label[b-lz7120dodb] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #333;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-lz7120dodb] {
    width: 20px;
    height: 20px;
    accent-color: #0066cc;
    border-radius: 4px;
}

.forgot-link[b-lz7120dodb] {
    color: #0066cc;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.forgot-link:hover[b-lz7120dodb] {
    text-decoration: underline;
}

/* Error Message */
.error-message[b-lz7120dodb] {
    padding: 12px 16px;
    background: #ffebee;
    color: #c62828;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Primary Button */
.btn-primary[b-lz7120dodb] {
    padding: 18px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
}

.btn-primary:hover:not(:disabled)[b-lz7120dodb] {
    background: #082d5e;
}

.btn-primary:disabled[b-lz7120dodb] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-small[b-lz7120dodb] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-lz7120dodb 0.8s linear infinite;
}

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

/* Divider */
.auth-divider[b-lz7120dodb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #333;
    font-size: 0.95rem;
}

.register-link[b-lz7120dodb] {
    color: #0066cc;
    font-weight: 700;
    text-decoration: none;
}

.register-link:hover[b-lz7120dodb] {
    text-decoration: underline;
}

/* Social Login */
.social-login[b-lz7120dodb] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.social-btn[b-lz7120dodb] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.social-btn:hover[b-lz7120dodb] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.social-btn svg[b-lz7120dodb] {
    width: 28px;
    height: 28px;
}

.social-btn.google[b-lz7120dodb] {
    background: white;
    border: 2px solid #e0e0e0;
}

.social-btn.facebook[b-lz7120dodb] {
    background: #1877f2;
    color: white;
    font-size: 1.6rem;
    border: none;
}

.social-btn.facebook i[b-lz7120dodb] {
    color: white;
}

.social-btn.line[b-lz7120dodb] {
    background: #00C300;
    color: white;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: -0.5px;
    border: none;
}

/* Right Side - Image Section */
.auth-image-section[b-lz7120dodb] {
    background: linear-gradient(135deg, #0052a3 0%, #0066cc 50%, #3399ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.auth-image-content[b-lz7120dodb] {
    text-align: center;
    color: white;
    z-index: 1;
}

.promo-title[b-lz7120dodb] {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 20px;
}

.promo-title .highlight[b-lz7120dodb] {
    color: #FFD93D;
}

.promo-subtitle[b-lz7120dodb] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 30px;
}

.promo-subtitle .highlight-orange[b-lz7120dodb] {
    color: #FF6B35;
}

.mascot-image[b-lz7120dodb] {
    margin-top: 30px;
}

.mascot-placeholder[b-lz7120dodb] {
    font-size: 6rem;
    opacity: 0.9;
}

/* Password Validation */
.password-hint[b-lz7120dodb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #666;
}

.password-hint.valid[b-lz7120dodb] {
    color: #2e7d32;
}

.password-hint .icon[b-lz7120dodb] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.password-hint .icon.check[b-lz7120dodb] {
    background: #2e7d32;
    color: white;
}

/* Name Fields */
.name-fields[b-lz7120dodb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Terms */
.terms-text[b-lz7120dodb] {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
}

.terms-text a[b-lz7120dodb] {
    color: #0066cc;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .auth-container[b-lz7120dodb] {
        grid-template-columns: 1fr;
    }

    .auth-image-section[b-lz7120dodb] {
        display: none;
    }
}

@media (max-width: 480px) {
    .auth-form-section[b-lz7120dodb] {
        padding: 20px;
    }

    .auth-title[b-lz7120dodb] {
        font-size: 1.5rem;
    }

    .name-fields[b-lz7120dodb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Auth/Register.razor.rz.scp.css */
/* Auth Page Styles - Register Page */

.auth-page[b-5bj7fuz8t9] {
    min-height: 100vh;
    background: #f5f7fa;
}

.auth-container[b-5bj7fuz8t9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/* Register Layout - Form on right, Image on left */
.auth-image-section[b-5bj7fuz8t9] {
    order: 1;
}

.auth-form-section[b-5bj7fuz8t9] {
    order: 2;
}

/* Form Section */
.auth-form-section[b-5bj7fuz8t9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: white;
}

.auth-form-content[b-5bj7fuz8t9] {
    width: 100%;
    max-width: 420px;
}

.auth-logo[b-5bj7fuz8t9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.auth-logo .logo-image[b-5bj7fuz8t9] {
    max-width: 120px;
    height: auto;
}

.auth-logo .paw[b-5bj7fuz8t9] {
    font-size: 2.5rem;
}

.auth-logo .logo-text[b-5bj7fuz8t9] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0066cc;
}

.auth-title[b-5bj7fuz8t9] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0a3b7a;
    text-align: center;
    margin-bottom: 8px;
}

.auth-subtitle[b-5bj7fuz8t9] {
    color: #555;
    text-align: center;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.auth-subtitle a[b-5bj7fuz8t9] {
    color: #0066cc;
    font-weight: 700;
    text-decoration: none;
}

.auth-subtitle a:hover[b-5bj7fuz8t9] {
    text-decoration: underline;
}

/* Form Styles */
.auth-form[b-5bj7fuz8t9] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group[b-5bj7fuz8t9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-5bj7fuz8t9] {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
}

.form-group input[b-5bj7fuz8t9] {
    padding: 14px 16px;
    border: 2px solid #0066cc;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: white;
    width: 100%;
    box-sizing: border-box;
}

.form-group input:focus[b-5bj7fuz8t9] {
    outline: none;
    border-color: #0052a3;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-group input[b-5bj7fuz8t9]::placeholder {
    color: #999;
}

/* Password Input */
.password-input[b-5bj7fuz8t9] {
    position: relative;
}

.password-input input[b-5bj7fuz8t9] {
    width: 100%;
    padding-right: 50px;
}

.toggle-password[b-5bj7fuz8t9] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.6;
}

.toggle-password:hover[b-5bj7fuz8t9] {
    opacity: 1;
}

/* Password Validation */
.password-hint[b-5bj7fuz8t9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #666;
    margin-top: 6px;
}

.password-hint .hint-icon[b-5bj7fuz8t9] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #ccc;
}

.password-hint.valid[b-5bj7fuz8t9] {
    color: #0066cc;
}

.password-hint.valid .hint-icon[b-5bj7fuz8t9] {
    color: #0066cc;
}

/* Name Fields */
.name-fields[b-5bj7fuz8t9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
}

.name-fields .form-group[b-5bj7fuz8t9] {
    min-width: 0;
}

.name-fields .form-group input[b-5bj7fuz8t9] {
    width: 100%;
    box-sizing: border-box;
}

.checkbox-label[b-5bj7fuz8t9] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-5bj7fuz8t9] {
    width: 20px;
    height: 20px;
    accent-color: #0066cc;
    border-radius: 4px;
}

/* Terms Checkbox */
.terms-checkbox-wrapper[b-5bj7fuz8t9] {
    margin-top: 4px;
}

.terms-checkbox[b-5bj7fuz8t9] {
    padding: 14px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s;
}

.terms-checkbox:hover[b-5bj7fuz8t9] {
    border-color: #cbd5e1;
}

.terms-checkbox.accepted[b-5bj7fuz8t9] {
    background: #eff6ff;
    border-color: #0066cc;
}

.terms-checkbox span[b-5bj7fuz8t9] {
    font-size: 0.88rem;
    line-height: 1.5;
}

.terms-checkbox a[b-5bj7fuz8t9] {
    color: #0066cc;
    font-weight: 600;
    text-decoration: none;
}

.terms-checkbox a:hover[b-5bj7fuz8t9] {
    text-decoration: underline;
}

.terms-error[b-5bj7fuz8t9] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 14px;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 8px;
    font-size: 0.85rem;
    border: 1px solid #fecaca;
}

.terms-error i[b-5bj7fuz8t9] {
    font-size: 0.9rem;
}

/* Error Message */
.error-message[b-5bj7fuz8t9] {
    padding: 10px 14px;
    background: #ffebee;
    color: #c62828;
    border-radius: 8px;
    font-size: 0.85rem;
}

/* Primary Button */
.btn-primary[b-5bj7fuz8t9] {
    padding: 16px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
}

.btn-primary:hover:not(:disabled)[b-5bj7fuz8t9] {
    background: #082d5e;
}

.btn-primary:disabled[b-5bj7fuz8t9] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-small[b-5bj7fuz8t9] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-5bj7fuz8t9 0.8s linear infinite;
}

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

/* Terms */
.terms-text[b-5bj7fuz8t9] {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    line-height: 1.5;
}

.terms-text a[b-5bj7fuz8t9] {
    color: #0066cc;
    font-weight: 600;
    text-decoration: none;
}

.terms-text a:hover[b-5bj7fuz8t9] {
    text-decoration: underline;
}

/* Right Side - Image Section */
.auth-image-section[b-5bj7fuz8t9] {
    background: linear-gradient(135deg, #0052a3 0%, #0066cc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.auth-image-content[b-5bj7fuz8t9] {
    text-align: center;
    color: white;
    z-index: 1;
}

.promo-title[b-5bj7fuz8t9] {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 15px;
}

.promo-subtitle[b-5bj7fuz8t9] {
    font-size: 1.8rem;
    font-weight: 600;
    color: #FFD93D;
    margin-bottom: 20px;
}

.mascot-image[b-5bj7fuz8t9] {
    margin-top: 20px;
}

.mascot-placeholder[b-5bj7fuz8t9] {
    font-size: 12rem;
    opacity: 0.95;
}

/* Responsive */
@media (max-width: 1024px) {
    .auth-container[b-5bj7fuz8t9] {
        grid-template-columns: 1fr;
    }

    .auth-image-section[b-5bj7fuz8t9] {
        display: none;
    }
}

@media (max-width: 480px) {
    .auth-form-section[b-5bj7fuz8t9] {
        padding: 20px;
    }

    .auth-title[b-5bj7fuz8t9] {
        font-size: 1.4rem;
    }

    .name-fields[b-5bj7fuz8t9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Auth/ResetPassword.razor.rz.scp.css */
/* Reset Password Page Styles */

.auth-page[b-89ykkoiqjf] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 20px;
}

.auth-container[b-89ykkoiqjf] {
    width: 100%;
    max-width: 420px;
}

.auth-card[b-89ykkoiqjf] {
    background: white;
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
}

.auth-icon[b-89ykkoiqjf] {
    width: 80px;
    height: 80px;
    margin: 0 auto 28px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 2rem;
}

.auth-card h1[b-89ykkoiqjf] {
    font-size: 2rem;
    color: #0a3b7a;
    margin: 0 0 12px;
    font-weight: 700;
}

.subtitle[b-89ykkoiqjf] {
    color: #333;
    margin: 0 0 32px;
    font-size: 1rem;
    line-height: 1.5;
}

.error-alert[b-89ykkoiqjf] {
    background: #fee2e2;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.success-alert[b-89ykkoiqjf] {
    background: #d1fae5;
    color: #047857;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group[b-89ykkoiqjf] {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label[b-89ykkoiqjf] {
    display: block;
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 8px;
}

.password-input[b-89ykkoiqjf] {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input input[b-89ykkoiqjf] {
    width: 100%;
    padding: 16px 48px 16px 18px;
    border: 2px solid #0066cc;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s;
    box-sizing: border-box;
}

.password-input input:focus[b-89ykkoiqjf] {
    outline: none;
    border-color: #0052a3;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.password-input input[b-89ykkoiqjf]::placeholder {
    color: #999;
}

.toggle-password[b-89ykkoiqjf] {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 1.1rem;
    color: #666;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.toggle-password:hover[b-89ykkoiqjf] {
    opacity: 1;
}

/* Password Requirements */
.password-requirements[b-89ykkoiqjf] {
    margin-bottom: 24px;
    text-align: left;
}

.requirement[b-89ykkoiqjf] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #666;
    padding: 4px 0;
}

.requirement .check[b-89ykkoiqjf] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #ccc;
}

.requirement.met .check[b-89ykkoiqjf] {
    color: #0066cc;
}

.requirement.met[b-89ykkoiqjf] {
    color: #0066cc;
}

/* Primary Button */
.btn-primary[b-89ykkoiqjf] {
    width: 100%;
    padding: 18px 24px;
    background: #0a3b7a;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary:hover:not(:disabled)[b-89ykkoiqjf] {
    background: #082d5e;
}

.btn-primary:disabled[b-89ykkoiqjf] {
    background: #a8b8d8;
    cursor: not-allowed;
}

.spinner-small[b-89ykkoiqjf] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-89ykkoiqjf 0.8s linear infinite;
}

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

/* Back Link */
.back-link[b-89ykkoiqjf] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.2s;
}

.back-link i[b-89ykkoiqjf] {
    font-size: 0.9rem;
}

.back-link:hover[b-89ykkoiqjf] {
    color: #0066cc;
}

@media (max-width: 480px) {
    .auth-card[b-89ykkoiqjf] {
        padding: 32px 24px;
    }

    .auth-card h1[b-89ykkoiqjf] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Auth/Terms.razor.rz.scp.css */
/* Terms and Conditions Page Styles */

.terms-page[b-hgxqwszm5r] {
    min-height: 60vh;
    padding: 20px 0 60px;
    background: #f8fafc;
    position: relative;
}

/* Scroll to Bottom Button */
.scroll-to-bottom[b-hgxqwszm5r] {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: #0a3b7a;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(10, 59, 122, 0.35);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    animation: bounce-b-hgxqwszm5r 2s ease-in-out infinite;
}

.scroll-to-bottom:hover[b-hgxqwszm5r] {
    background: #082d5e;
    transform: scale(1.1);
    animation: none;
}

.scroll-to-bottom.hidden[b-hgxqwszm5r] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

@keyframes bounce-b-hgxqwszm5r {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Breadcrumb */
.breadcrumb-nav[b-hgxqwszm5r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    font-size: 0.9rem;
    color: #666;
}

.breadcrumb-nav a[b-hgxqwszm5r] {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-nav a:hover[b-hgxqwszm5r] {
    color: #0066cc;
}

.breadcrumb-nav i.fa-chevron-right[b-hgxqwszm5r] {
    font-size: 0.7rem;
    color: #ccc;
}

.breadcrumb-nav span[b-hgxqwszm5r] {
    color: #0a3b7a;
    font-weight: 500;
}

.terms-card[b-hgxqwszm5r] {
    background: white;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.06);
    overflow: hidden;
}

/* Header */
.terms-header[b-hgxqwszm5r] {
    background: linear-gradient(135deg, #0a3b7a 0%, #1a5fb4 100%);
    padding: 40px;
    text-align: center;
    color: white;
}

.header-icon[b-hgxqwszm5r] {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    backdrop-filter: blur(10px);
}

.terms-header h1[b-hgxqwszm5r] {
    font-size: 1.8rem;
    margin: 0 0 10px;
    font-weight: 700;
}

.header-subtitle[b-hgxqwszm5r] {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

/* Content */
.terms-content[b-hgxqwszm5r] {
    padding: 40px;
}

/* Section Cards */
.terms-section[b-hgxqwszm5r] {
    background: white;
    border-radius: 12px;
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.terms-section:last-child[b-hgxqwszm5r] {
    margin-bottom: 0;
}

.section-header[b-hgxqwszm5r] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.section-number[b-hgxqwszm5r] {
    width: 32px;
    height: 32px;
    background: #0066cc;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.section-header h2[b-hgxqwszm5r] {
    font-size: 1.05rem;
    color: #0a3b7a;
    margin: 0;
    font-weight: 600;
}

.section-body[b-hgxqwszm5r] {
    padding: 24px;
}

.section-body p[b-hgxqwszm5r] {
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #374151;
    text-align: justify;
}

.section-body p:last-child[b-hgxqwszm5r] {
    margin-bottom: 0;
}

.section-body strong[b-hgxqwszm5r] {
    color: #0a3b7a;
    font-weight: 600;
}

/* Info Box */
.info-box[b-hgxqwszm5r] {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    background: #eff6ff;
    border-radius: 10px;
    margin: 20px 0;
    border-left: 4px solid #0066cc;
    align-items: flex-start;
}

.info-box i[b-hgxqwszm5r] {
    color: #0066cc;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.info-box p[b-hgxqwszm5r] {
    margin: 0 !important;
    font-size: 0.92rem !important;
    color: #1e40af !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

/* Warning Box */
.warning-box[b-hgxqwszm5r] {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    background: #fef3c7;
    border-radius: 10px;
    margin: 20px 0;
    border-left: 4px solid #f59e0b;
    align-items: flex-start;
}

.warning-box i[b-hgxqwszm5r] {
    color: #d97706;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.warning-box p[b-hgxqwszm5r] {
    margin: 0 !important;
    font-size: 0.92rem !important;
    color: #92400e !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

/* Terms List */
.terms-list[b-hgxqwszm5r] {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    background: #f8fafc;
    border-radius: 10px;
    overflow: hidden;
}

.terms-list li[b-hgxqwszm5r] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    font-size: 0.92rem;
    color: #374151;
    border-bottom: 1px solid #e2e8f0;
}

.terms-list li:last-child[b-hgxqwszm5r] {
    border-bottom: none;
}

.terms-list li i[b-hgxqwszm5r] {
    color: #10b981;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Footer */
.terms-footer[b-hgxqwszm5r] {
    padding: 32px 40px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-note[b-hgxqwszm5r] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0 0 8px;
}

.footer-note i[b-hgxqwszm5r] {
    color: #9ca3af;
}

.btn-primary[b-hgxqwszm5r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 48px;
    background: #0a3b7a;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-primary:hover[b-hgxqwszm5r] {
    background: #082d5e;
    color: white;
}

.btn-primary i[b-hgxqwszm5r] {
    font-size: 0.9rem;
}

.btn-secondary[b-hgxqwszm5r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    color: #6b7280;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-secondary:hover[b-hgxqwszm5r] {
    color: #0066cc;
}

.btn-secondary i[b-hgxqwszm5r] {
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 768px) {
    .terms-page[b-hgxqwszm5r] {
        padding: 16px 0 40px;
    }

    .breadcrumb-nav[b-hgxqwszm5r] {
        padding: 12px 0;
        font-size: 0.85rem;
    }

    .terms-header[b-hgxqwszm5r] {
        padding: 32px 24px;
    }

    .header-icon[b-hgxqwszm5r] {
        width: 64px;
        height: 64px;
        font-size: 1.8rem;
    }

    .terms-header h1[b-hgxqwszm5r] {
        font-size: 1.4rem;
    }

    .terms-content[b-hgxqwszm5r] {
        padding: 20px;
    }

    .section-header[b-hgxqwszm5r] {
        padding: 16px 18px;
    }

    .section-header h2[b-hgxqwszm5r] {
        font-size: 1rem;
    }

    .section-body[b-hgxqwszm5r] {
        padding: 16px 18px;
    }

    .terms-footer[b-hgxqwszm5r] {
        padding: 24px 20px;
    }

    .btn-primary[b-hgxqwszm5r] {
        width: 100%;
        padding: 16px 24px;
    }

    .scroll-to-bottom[b-hgxqwszm5r] {
        bottom: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }
}
/* /Components/Pages/Auth/VerifyOtp.razor.rz.scp.css */
/* Verify OTP Page Styles */

.auth-page[b-z7qvzz9nm1] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 20px;
}

.auth-container[b-z7qvzz9nm1] {
    width: 100%;
    max-width: 480px;
}

.auth-card[b-z7qvzz9nm1] {
    background: white;
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
}

.auth-icon[b-z7qvzz9nm1] {
    width: 80px;
    height: 80px;
    margin: 0 auto 28px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 2rem;
}

.auth-card h1[b-z7qvzz9nm1] {
    font-size: 2rem;
    color: #0a3b7a;
    margin: 0 0 12px;
    font-weight: 700;
}

.subtitle[b-z7qvzz9nm1] {
    color: #333;
    margin: 0 0 32px;
    font-size: 1rem;
    line-height: 1.5;
}

.phone-masked[b-z7qvzz9nm1] {
    color: #0a3b7a;
    font-weight: 700;
}

.error-alert[b-z7qvzz9nm1] {
    background: #fee2e2;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* OTP Input Container */
.otp-container[b-z7qvzz9nm1] {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 24px;
}

.otp-input[b-z7qvzz9nm1] {
    width: 56px;
    height: 72px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    color: #0a3b7a;
    transition: all 0.2s;
    background: white;
}

.otp-input:focus[b-z7qvzz9nm1] {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

.otp-input.filled[b-z7qvzz9nm1] {
    border-color: #e0e0e0;
    background: white;
}

.otp-input[b-z7qvzz9nm1]::placeholder {
    color: #ccc;
}

/* Remove spinner from number input */
.otp-input[b-z7qvzz9nm1]::-webkit-outer-spin-button,
.otp-input[b-z7qvzz9nm1]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-input[type=number][b-z7qvzz9nm1] {
    -moz-appearance: textfield;
}

/* Resend Section */
.resend-section[b-z7qvzz9nm1] {
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.timer-text[b-z7qvzz9nm1] {
    color: #333;
}

.timer-countdown[b-z7qvzz9nm1] {
    color: #666;
    margin-left: 4px;
}

.btn-resend[b-z7qvzz9nm1] {
    background: none;
    border: none;
    color: #0066cc;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0;
    margin-left: 4px;
    text-decoration: underline;
}

.btn-resend:hover[b-z7qvzz9nm1] {
    color: #0052a3;
}

/* Primary Button */
.btn-primary[b-z7qvzz9nm1] {
    width: 100%;
    padding: 18px 24px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary:hover:not(:disabled)[b-z7qvzz9nm1] {
    background: #082d5e;
}

.btn-primary:disabled[b-z7qvzz9nm1] {
    background: #a8b8d8;
    cursor: not-allowed;
}

.spinner-small[b-z7qvzz9nm1] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-z7qvzz9nm1 0.8s linear infinite;
}

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

/* Back Link */
.back-link[b-z7qvzz9nm1] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.2s;
}

.back-link i[b-z7qvzz9nm1] {
    font-size: 0.9rem;
}

.back-link:hover[b-z7qvzz9nm1] {
    color: #0066cc;
}

@media (max-width: 480px) {
    .auth-card[b-z7qvzz9nm1] {
        padding: 32px 24px;
    }

    .auth-card h1[b-z7qvzz9nm1] {
        font-size: 1.5rem;
    }

    .otp-container[b-z7qvzz9nm1] {
        gap: 10px;
    }

    .otp-input[b-z7qvzz9nm1] {
        width: 46px;
        height: 60px;
        font-size: 1.4rem;
        border-radius: 10px;
    }
}
/* /Components/Pages/Blog/BlogDetail.razor.rz.scp.css */
/* Blog Detail Page Styles */

.blog-detail-page[b-62sm4u1nv0] {
    background: #f5f7fa;
    min-height: 100vh;
}

/* Loading State */
.loading-state[b-62sm4u1nv0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.spinner[b-62sm4u1nv0] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-62sm4u1nv0 0.8s linear infinite;
    margin-bottom: 16px;
}

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

/* Not Found */
.not-found[b-62sm4u1nv0] {
    text-align: center;
    padding: 100px 20px;
}

.not-found h2[b-62sm4u1nv0] {
    color: var(--gray-800);
    margin-bottom: 12px;
}

.not-found p[b-62sm4u1nv0] {
    color: var(--gray-500);
    margin-bottom: 24px;
}

.btn-back[b-62sm4u1nv0] {
    display: inline-block;
    padding: 12px 24px;
    background: var(--primary-blue);
    color: white;
    text-decoration: none;
    border-radius: 8px;
}

/* Article Header */
.article-header[b-62sm4u1nv0] {
    background: white;
    padding: 40px 0 48px;
    text-align: center;
}

.breadcrumb[b-62sm4u1nv0] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.breadcrumb a[b-62sm4u1nv0] {
    color: var(--primary-blue);
    text-decoration: none;
}

.breadcrumb .current[b-62sm4u1nv0] {
    color: var(--gray-500);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-badge[b-62sm4u1nv0] {
    display: inline-block;
    background: #e8f4ff;
    color: var(--primary-blue);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.article-header h1[b-62sm4u1nv0] {
    font-size: 2.5rem;
    color: #1a365d;
    margin: 0 0 20px;
    font-weight: 700;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
}

.excerpt[b-62sm4u1nv0] {
    color: var(--gray-500);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.meta-info[b-62sm4u1nv0] {
    display: flex;
    justify-content: center;
}

.author[b-62sm4u1nv0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar[b-62sm4u1nv0] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue), #4a90d9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
}

.author-avatar img[b-62sm4u1nv0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-details[b-62sm4u1nv0] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.author-name[b-62sm4u1nv0] {
    font-weight: 600;
    color: var(--gray-800);
}

.post-date[b-62sm4u1nv0] {
    font-size: 0.85rem;
    color: var(--gray-500);
}

/* Featured Image */
.featured-image-wrapper[b-62sm4u1nv0] {
    background: white;
    padding-bottom: 40px;
}

.featured-image[b-62sm4u1nv0] {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.featured-image img[b-62sm4u1nv0] {
    width: 100%;
    height: auto;
    display: block;
}

/* Article Content */
.article-content[b-62sm4u1nv0] {
    padding: 60px 0;
}

.content-wrapper[b-62sm4u1nv0] {
    max-width: 750px;
    margin: 0 auto;
    background: white;
    padding: 48px 64px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    line-height: 1.8;
    color: var(--gray-700);
    font-size: 1.05rem;
}

.content-wrapper h2[b-62sm4u1nv0] {
    font-size: 1.5rem;
    color: #1a365d;
    margin: 32px 0 16px;
    font-weight: 700;
}

.content-wrapper h3[b-62sm4u1nv0] {
    font-size: 1.25rem;
    color: #1a365d;
    margin: 24px 0 12px;
    font-weight: 600;
}

.content-wrapper p[b-62sm4u1nv0] {
    margin: 0 0 20px;
}

.content-wrapper ul[b-62sm4u1nv0],
.content-wrapper ol[b-62sm4u1nv0] {
    margin: 0 0 20px;
    padding-left: 24px;
}

.content-wrapper li[b-62sm4u1nv0] {
    margin-bottom: 8px;
}

.content-wrapper img[b-62sm4u1nv0] {
    max-width: 100%;
    border-radius: 8px;
    margin: 24px 0;
}

.content-wrapper blockquote[b-62sm4u1nv0] {
    border-left: 4px solid var(--primary-blue);
    padding-left: 20px;
    margin: 24px 0;
    font-style: italic;
    color: var(--gray-600);
}

/* Related Articles */
/* ── Related Articles Section ── */
.related-articles[b-62sm4u1nv0] {
    padding: 80px 0;
    background: linear-gradient(180deg, #EAF3FF 0%, #f0f6ff 100%);
    position: relative;
}

.section-header[b-62sm4u1nv0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 48px;
}

.header-left[b-62sm4u1nv0] {
    max-width: 600px;
}

.section-tag[b-62sm4u1nv0] {
    display: inline-block;
    color: var(--primary-blue);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.section-header h2[b-62sm4u1nv0] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1a365d;
    margin: 0 0 0;
    line-height: 1.2;
}

.heading-accent[b-62sm4u1nv0] {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-blue), #60a5fa);
    border-radius: 2px;
    margin: 14px 0;
}

.section-subtitle[b-62sm4u1nv0] {
    color: #64748B;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.header-right[b-62sm4u1nv0] {
    flex-shrink: 0;
    padding-top: 24px;
}

.btn-view-all[b-62sm4u1nv0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--primary-blue);
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 2px solid var(--primary-blue);
}

.btn-view-all i[b-62sm4u1nv0] {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.btn-view-all:hover[b-62sm4u1nv0] {
    background: var(--primary-blue);
    color: white;
}

.btn-view-all:hover i[b-62sm4u1nv0] {
    transform: translateX(3px);
}

/* Card Grid */
.related-grid[b-62sm4u1nv0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.related-card[b-62sm4u1nv0] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.related-card:hover[b-62sm4u1nv0] {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(26, 54, 93, 0.14);
    border-color: rgba(26, 54, 93, 0.08);
}

.related-card-link[b-62sm4u1nv0] {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.related-card .card-image[b-62sm4u1nv0] {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.related-card .card-image img[b-62sm4u1nv0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.related-card:hover .card-image img[b-62sm4u1nv0] {
    transform: scale(1.08);
}

/* Card Content */
.related-card .card-content[b-62sm4u1nv0] {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.related-card .card-meta-row[b-62sm4u1nv0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.related-card .category-badge[b-62sm4u1nv0] {
    display: inline-block;
    color: var(--primary-blue);
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(37, 99, 235, 0.08);
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.related-card .read-time[b-62sm4u1nv0] {
    font-size: 0.78rem;
    color: #94A3B8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.related-card .read-time i[b-62sm4u1nv0] {
    font-size: 0.72rem;
}

.related-card h3[b-62sm4u1nv0] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a365d;
    line-height: 1.45;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.related-card:hover h3[b-62sm4u1nv0] {
    color: var(--primary-blue);
}

.related-card .card-title-row[b-62sm4u1nv0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.related-card .card-arrow[b-62sm4u1nv0] {
    color: #CBD5E1;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 4px;
    transition: all 0.3s ease;
}

.related-card:hover .card-arrow[b-62sm4u1nv0] {
    color: var(--primary-blue);
    transform: translateX(2px);
}

.related-card .card-excerpt[b-62sm4u1nv0] {
    color: #64748B;
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0 0 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Author */
.related-card .card-author[b-62sm4u1nv0] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.related-card .card-author .author-avatar[b-62sm4u1nv0] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue), #60a5fa);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
}

.related-card .card-author .author-avatar img[b-62sm4u1nv0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-card .card-author .author-info[b-62sm4u1nv0] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.related-card .card-author .author-name[b-62sm4u1nv0] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}

.related-card .card-author .author-date[b-62sm4u1nv0] {
    font-size: 0.75rem;
    color: #94A3B8;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .related-grid[b-62sm4u1nv0] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .article-header h1[b-62sm4u1nv0] {
        font-size: 1.75rem;
    }

    .content-wrapper[b-62sm4u1nv0] {
        padding: 32px 24px;
    }

    .related-articles[b-62sm4u1nv0] {
        padding: 56px 0;
    }

    .related-grid[b-62sm4u1nv0] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .featured-image[b-62sm4u1nv0] {
        border-radius: 0;
    }

    .section-header[b-62sm4u1nv0] {
        flex-direction: column;
        gap: 16px;
    }

    .section-header h2[b-62sm4u1nv0] {
        font-size: 1.75rem;
    }

    .header-right[b-62sm4u1nv0] {
        padding-top: 0;
    }
}
/* /Components/Pages/Blog/BlogList.razor.rz.scp.css */
/* Blog List Page Styles */

.blog-page[b-y2xawi3ayv] {
    background: #f5f7fa;
    min-height: 100vh;
    padding: 40px 0 80px;
}

/* Page Header */
.page-header[b-y2xawi3ayv] {
    text-align: center;
    margin-bottom: 40px;
}

.section-tag[b-y2xawi3ayv] {
    display: inline-block;
    color: var(--primary-blue);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.page-header h1[b-y2xawi3ayv] {
    font-size: 2.5rem;
    color: #1a365d;
    margin: 0 0 16px;
    font-weight: 700;
}

.subtitle[b-y2xawi3ayv] {
    color: var(--gray-500);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Category Tabs */
.category-tabs[b-y2xawi3ayv] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.tab[b-y2xawi3ayv] {
    padding: 10px 24px;
    border: none;
    background: transparent;
    color: var(--gray-600);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.2s;
}

.tab:hover[b-y2xawi3ayv] {
    background: var(--gray-100);
}

.tab.active[b-y2xawi3ayv] {
    background: #1a365d;
    color: white;
}

/* Blog Grid */
.blog-grid[b-y2xawi3ayv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Blog Card */
.blog-card[b-y2xawi3ayv] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.blog-card:hover[b-y2xawi3ayv] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-image[b-y2xawi3ayv] {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(135deg, #1a365d, #2d5aa0);
}

.card-image img[b-y2xawi3ayv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.blog-card:hover .card-image img[b-y2xawi3ayv] {
    transform: scale(1.05);
}

.card-content[b-y2xawi3ayv] {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.category-badge[b-y2xawi3ayv] {
    display: inline-block;
    background: #e8f4ff;
    color: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    width: fit-content;
    margin-bottom: 12px;
}

.card-title[b-y2xawi3ayv] {
    font-size: 1.1rem;
    color: #1a365d;
    margin: 0 0 12px;
    line-height: 1.4;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.card-title .arrow[b-y2xawi3ayv] {
    color: var(--primary-blue);
    font-size: 1rem;
    flex-shrink: 0;
}

.card-excerpt[b-y2xawi3ayv] {
    color: var(--gray-500);
    font-size: 0.9rem;
    margin: 0 0 16px;
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-footer[b-y2xawi3ayv] {
    border-top: 1px solid var(--gray-100);
    padding-top: 16px;
    margin-top: auto;
}

.author[b-y2xawi3ayv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar[b-y2xawi3ayv] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue), #4a90d9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
}

.author-avatar img[b-y2xawi3ayv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-info[b-y2xawi3ayv] {
    display: flex;
    flex-direction: column;
}

.author-name[b-y2xawi3ayv] {
    font-size: 0.85rem;
    color: var(--gray-800);
    font-weight: 500;
}

.post-date[b-y2xawi3ayv] {
    font-size: 0.8rem;
    color: var(--gray-400);
}

/* Loading State */
.loading-state[b-y2xawi3ayv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0;
}

.spinner[b-y2xawi3ayv] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-y2xawi3ayv 0.8s linear infinite;
    margin-bottom: 16px;
}

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

/* Empty State */
.empty-state[b-y2xawi3ayv] {
    text-align: center;
    padding: 80px 20px;
}

.empty-icon[b-y2xawi3ayv] {
    font-size: 4rem;
    display: block;
    margin-bottom: 16px;
}

.empty-state h3[b-y2xawi3ayv] {
    color: var(--gray-700);
    margin: 0 0 8px;
}

.empty-state p[b-y2xawi3ayv] {
    color: var(--gray-500);
    margin: 0;
}

/* Pagination */
.pagination[b-y2xawi3ayv] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 48px;
}

.page-btn[b-y2xawi3ayv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    color: var(--gray-700);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled)[b-y2xawi3ayv] {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.page-btn:disabled[b-y2xawi3ayv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-numbers[b-y2xawi3ayv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-num[b-y2xawi3ayv] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    color: var(--gray-700);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-num:hover[b-y2xawi3ayv] {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.page-num.active[b-y2xawi3ayv] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.page-dots[b-y2xawi3ayv] {
    color: var(--gray-400);
    padding: 0 4px;
}

/* Responsive */
@media (max-width: 1024px) {
    .blog-grid[b-y2xawi3ayv] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-page[b-y2xawi3ayv] {
        padding-bottom: 100px; /* Space for bottom nav */
    }
    
    .page-header h1[b-y2xawi3ayv] {
        font-size: 1.5rem;
    }
    
    .page-header p[b-y2xawi3ayv] {
        font-size: 0.9rem;
    }

    .blog-grid[b-y2xawi3ayv] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .blog-card[b-y2xawi3ayv] {
        border-radius: 10px;
    }
    
    .blog-card-image[b-y2xawi3ayv] {
        aspect-ratio: 16/9;
    }
    
    .blog-card-content[b-y2xawi3ayv] {
        padding: 16px;
    }
    
    .blog-card-title[b-y2xawi3ayv] {
        font-size: 1rem;
        line-height: 1.4;
    }

    .pagination[b-y2xawi3ayv] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-numbers[b-y2xawi3ayv] {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 8px;
    }
    
    .page-btn[b-y2xawi3ayv] {
        min-width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .blog-page[b-y2xawi3ayv] {
        padding-bottom: 110px;
    }
    
    .page-header h1[b-y2xawi3ayv] {
        font-size: 1.25rem;
    }
    
    .blog-card-content[b-y2xawi3ayv] {
        padding: 14px;
    }
    
    .blog-card-title[b-y2xawi3ayv] {
        font-size: 0.95rem;
    }
    
    .blog-card-excerpt[b-y2xawi3ayv] {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
    }
}
/* /Components/Pages/Brands.razor.rz.scp.css */
/* Brands Page Styles - Matching Products page design */

.brands-page[b-dpxd4dju7d] {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 40px;
}

/* Page Header Section */
.page-header-section[b-dpxd4dju7d] {
    padding: 24px 0 16px;
}

.search-indicator[b-dpxd4dju7d] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.search-indicator .indicator-bar[b-dpxd4dju7d] {
    width: 4px;
    height: 20px;
    background: #FFD700;
    border-radius: 2px;
}

.search-indicator .indicator-text[b-dpxd4dju7d] {
    font-size: 0.875rem;
    color: #666;
}

/* Page Title */
.page-title[b-dpxd4dju7d] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0066CC;
    margin: 0;
}

/* Layout */
.brands-layout[b-dpxd4dju7d] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
}

/* Filters Sidebar */
.filters-sidebar[b-dpxd4dju7d] {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 130px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
    min-width: 240px;
    contain: layout style;
}

.filters-sidebar:hover[b-dpxd4dju7d] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.filter-section[b-dpxd4dju7d] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
    transition: all 0.2s ease;
}

.filter-section:last-child[b-dpxd4dju7d] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.filter-section h3[b-dpxd4dju7d] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
}

/* Filters Header */
.filters-header[b-dpxd4dju7d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
}

.filters-header h3[b-dpxd4dju7d] {
    margin: 0;
}

.clear-filter-link[b-dpxd4dju7d] {
    background: none;
    border: none;
    color: #0066CC;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
}

.clear-filter-link:hover[b-dpxd4dju7d] {
    text-decoration: underline;
}

/* Search Box */
.search-box[b-dpxd4dju7d] {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.search-box input[b-dpxd4dju7d] {
    flex: 1;
    padding: 10px 12px;
    border: none;
    font-size: 0.875rem;
    outline: none;
}

.search-box input[b-dpxd4dju7d]::placeholder {
    color: #999;
}

.search-btn[b-dpxd4dju7d] {
    padding: 10px 14px;
    background: #f5f5f5;
    border: none;
    border-left: 1px solid #ddd;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.search-btn:hover[b-dpxd4dju7d] {
    background: #eee;
    color: #0066CC;
}

/* Collapsible Filter Sections */
.filter-header-row[b-dpxd4dju7d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-header-row h3[b-dpxd4dju7d] {
    margin: 0;
}

.collapse-btn[b-dpxd4dju7d] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    font-size: 0.75rem;
}

.collapse-btn:hover[b-dpxd4dju7d] {
    color: #0066CC;
}

/* Filter Checkboxes */
.filter-options[b-dpxd4dju7d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.filter-checkbox[b-dpxd4dju7d] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #333;
    padding: 4px 0;
    transition: all 0.2s ease;
    position: relative;
}

.filter-checkbox:hover[b-dpxd4dju7d] {
    color: #0066CC;
}

/* Hide native checkbox */
.filter-checkbox input[type="checkbox"][b-dpxd4dju7d] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom checkbox box */
.filter-checkbox[b-dpxd4dju7d]::before {
    content: '';
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid #d0d0d0;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Checkmark icon (using CSS) */
.filter-checkbox[b-dpxd4dju7d]::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: translateY(-55%) rotate(45deg);
    opacity: 0;
    transition: all 0.2s ease;
}

/* Checked state */
.filter-checkbox:has(input:checked)[b-dpxd4dju7d]::before {
    background: #0066CC;
    border-color: #0066CC;
}

.filter-checkbox:has(input:checked)[b-dpxd4dju7d]::after {
    opacity: 1;
}

/* Hover effect on checkbox */
.filter-checkbox:hover[b-dpxd4dju7d]::before {
    border-color: #0066CC;
}

/* Focus state for accessibility */
.filter-checkbox:has(input:focus-visible)[b-dpxd4dju7d]::before {
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
}

.filter-checkbox span[b-dpxd4dju7d] {
    transition: color 0.2s ease;
    line-height: 1.4;
}

/* Show More Button */
.show-more-btn[b-dpxd4dju7d] {
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    background: transparent;
    color: #0066CC;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    transition: all 0.25s ease;
}

.show-more-btn:hover[b-dpxd4dju7d] {
    color: #0055aa;
    transform: translateX(4px);
}

.show-more-btn:active[b-dpxd4dju7d] {
    transform: translateX(2px) scale(0.98);
}

.show-more-btn i[b-dpxd4dju7d] {
    font-size: 0.7rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Initial load animation */
.filters-sidebar.initial-load .filter-options .filter-checkbox[b-dpxd4dju7d] {
    animation: slideIn-b-dpxd4dju7d 0.3s ease forwards;
    opacity: 0;
    transform: translateX(-10px);
}

.filters-sidebar.initial-load .filter-options .filter-checkbox:nth-child(1)[b-dpxd4dju7d] {
    animation-delay: 0.05s;
}

.filters-sidebar.initial-load .filter-options .filter-checkbox:nth-child(2)[b-dpxd4dju7d] {
    animation-delay: 0.1s;
}

.filters-sidebar.initial-load .filter-options .filter-checkbox:nth-child(3)[b-dpxd4dju7d] {
    animation-delay: 0.15s;
}

.filters-sidebar.initial-load .filter-options .filter-checkbox:nth-child(4)[b-dpxd4dju7d] {
    animation-delay: 0.2s;
}

.filters-sidebar.initial-load .filter-options .filter-checkbox:nth-child(5)[b-dpxd4dju7d] {
    animation-delay: 0.25s;
}

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

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

/* Brand Grid */
.brands-content[b-dpxd4dju7d] {
    min-height: 400px;
}

.brands-grid[b-dpxd4dju7d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.brand-card[b-dpxd4dju7d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.brand-card:hover[b-dpxd4dju7d] {
    border-color: #0066CC;
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.12);
    transform: translateY(-4px);
}

.brand-logo[b-dpxd4dju7d] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo img[b-dpxd4dju7d] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-placeholder[b-dpxd4dju7d] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066CC, #0055aa);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

.brand-name[b-dpxd4dju7d] {
    color: #333;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
}

/* Loading & Empty States */
.loading-state[b-dpxd4dju7d],
.empty-state[b-dpxd4dju7d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
}

.spinner[b-dpxd4dju7d] {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e5e5;
    border-top-color: #0066CC;
    border-radius: 50%;
    animation: spin-b-dpxd4dju7d 0.8s linear infinite;
}

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

.empty-icon[b-dpxd4dju7d] {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #ccc;
}

.empty-icon i[b-dpxd4dju7d] {
    font-size: inherit;
}

.empty-state h3[b-dpxd4dju7d] {
    margin: 0 0 0.5rem 0;
    color: #333;
    font-size: 1.25rem;
}

.empty-state p[b-dpxd4dju7d] {
    color: #666;
    margin-bottom: 1.5rem;
}

.btn-primary[b-dpxd4dju7d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #0066CC;
    color: #fff;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-dpxd4dju7d] {
    background: #0055aa;
    transform: translateY(-2px);
}

/* Pagination */
.pagination[b-dpxd4dju7d] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
}

.page-btn[b-dpxd4dju7d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #333;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled):not(.active)[b-dpxd4dju7d] {
    border-color: #0066CC;
    color: #0066CC;
    background: #f0f7ff;
}

.page-btn:disabled[b-dpxd4dju7d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-btn.active[b-dpxd4dju7d] {
    background: #0066CC;
    border-color: #0066CC;
    color: #fff;
}

.page-btn i[b-dpxd4dju7d] {
    font-size: 0.75rem;
}

.page-btn.prev[b-dpxd4dju7d],
.page-btn.next[b-dpxd4dju7d] {
    padding: 8px 16px;
}

.page-ellipsis[b-dpxd4dju7d] {
    color: #999;
    padding: 0 4px;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .brands-grid[b-dpxd4dju7d] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 1024px) {
    .brands-layout[b-dpxd4dju7d] {
        grid-template-columns: 220px 1fr;
        gap: 20px;
    }

    .brands-grid[b-dpxd4dju7d] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (max-width: 768px) {
    .brands-page[b-dpxd4dju7d] {
        padding-bottom: 100px;
        /* Space for bottom nav */
    }

    .brands-layout[b-dpxd4dju7d] {
        grid-template-columns: 1fr;
    }

    .filters-sidebar[b-dpxd4dju7d] {
        position: static;
        order: -1;
    }

    .brands-grid[b-dpxd4dju7d] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .page-header-section[b-dpxd4dju7d] {
        padding: 16px 0 12px;
    }

    .page-title[b-dpxd4dju7d] {
        font-size: 1.5rem;
    }

    .brand-card[b-dpxd4dju7d] {
        padding: 18px 14px;
    }
}

@media (max-width: 480px) {
    .brands-page[b-dpxd4dju7d] {
        padding-bottom: 110px;
    }

    .brands-grid[b-dpxd4dju7d] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .brand-card[b-dpxd4dju7d] {
        padding: 14px 10px;
    }

    .brand-logo[b-dpxd4dju7d] {
        width: 65px;
        height: 65px;
    }

    .brand-placeholder[b-dpxd4dju7d] {
        width: 55px;
        height: 55px;
        font-size: 1.15rem;
    }

    .brand-name[b-dpxd4dju7d] {
        font-size: 0.85rem;
    }

    .page-title[b-dpxd4dju7d] {
        font-size: 1.25rem;
    }

    .pagination[b-dpxd4dju7d] {
        flex-wrap: wrap;
        gap: 4px;
        padding: 16px;
    }

    .page-btn[b-dpxd4dju7d] {
        min-width: 36px;
        height: 36px;
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .page-btn.prev[b-dpxd4dju7d],
    .page-btn.next[b-dpxd4dju7d] {
        padding: 6px 12px;
    }
}
/* /Components/Pages/Cart.razor.rz.scp.css */
/* Cart Page Styles */

.cart-page[b-m7569m477k] {
    background: linear-gradient(180deg, #f8f9fa 0%, #f0f2f5 100%);
    min-height: 100vh;
    padding: 20px 0 120px;
}

.cart-header[b-m7569m477k] {
    margin-bottom: 20px;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cart-header-left[b-m7569m477k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-store-name[b-m7569m477k] {
    font-size: 0.72rem;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.cart-edit-link[b-m7569m477k] {
    font-size: 0.82rem;
    color: #0066cc;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cart-edit-link:hover[b-m7569m477k] {
    text-decoration: underline;
}

.cart-header-icon[b-m7569m477k] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e6f2ff 0%, #f0f7ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-header-icon i[b-m7569m477k] {
    font-size: 1.2rem;
    color: #0066cc;
}

.cart-header h1[b-m7569m477k] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

/* Loading & Empty States */
.loading-state[b-m7569m477k],
.empty-cart[b-m7569m477k] {
    background: white;
    border-radius: 16px;
    padding: 60px 30px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.loading-state .spinner[b-m7569m477k] {
    width: 40px;
    height: 40px;
    border: 3px solid #e8e8e8;
    border-top-color: #0066cc;
    border-radius: 50%;
    animation: spin-b-m7569m477k 0.8s linear infinite;
    margin: 0 auto 20px;
}

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

/* Skeleton Loading Animation */
.skeleton[b-m7569m477k] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-m7569m477k 1.5s infinite ease-in-out;
}

@keyframes skeleton-loading-b-m7569m477k {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.empty-cart .empty-icon[b-m7569m477k] {
    font-size: 4rem;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-cart .empty-icon i[b-m7569m477k] {
    opacity: 0.9;
}

.empty-cart h2[b-m7569m477k] {
    font-size: 1.25rem;
    color: #1a1a2e;
    margin-bottom: 10px;
    font-weight: 700;
}

.empty-cart p[b-m7569m477k] {
    color: #666;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.btn-primary[b-m7569m477k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-primary:hover[b-m7569m477k] {
    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.4);
}

/* Cart Content Layout */
.cart-content[b-m7569m477k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
    /* Space for fixed bottom bar */
}

/* Cart Items Section */
.cart-items-section[b-m7569m477k] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Table Header - hidden since layout changed to row-based */
.cart-table-header[b-m7569m477k] {
    display: none;
}

/* Cart Item hover/state styles moved to line ~1337 grid layout section */

/* Select Column - hidden, checkbox moved to cart-item-row1 */
.col-select[b-m7569m477k] {
    display: none;
}

.col-select input[type="checkbox"][b-m7569m477k] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0066cc;
}

/* Product Column */
.col-product[b-m7569m477k] {
    display: flex;
    gap: 15px;
    align-items: center;
}

.col-product .product-image[b-m7569m477k] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
}

.col-product .product-image img[b-m7569m477k] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.col-product .no-image[b-m7569m477k] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #ccc;
    background: #f8f9fa;
}

.col-product .no-image i[b-m7569m477k] {
    opacity: 0.5;
}

.col-product .product-info[b-m7569m477k] {
    flex: 1;
}

.col-product .product-name[b-m7569m477k] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0066cc;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
    line-height: 1.4;
}

.col-product .product-name:hover[b-m7569m477k] {
    text-decoration: underline;
}

.out-of-stock-badge[b-m7569m477k] {
    display: inline-block;
    padding: 3px 8px;
    background: #ff4d4f;
    color: white;
    font-size: 0.7rem;
    border-radius: 4px;
}

.stock-warning[b-m7569m477k] {
    display: inline-block;
    padding: 3px 0;
    color: #fd7e14;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 4px;
}

.stock-warning i[b-m7569m477k] {
    margin-right: 2px;
}

/* Promotion Tag in Cart */
.cart-promo-tag[b-m7569m477k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #fff7e6;
    color: #d46b08;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid #ffd591;
    margin-top: 4px;
    width: fit-content;
}

/* Variant Column - hidden, variant shown as tag */
.col-variant[b-m7569m477k] {
    display: none;
}

.variant-default[b-m7569m477k] {
    color: #999;
}

.variant-name[b-m7569m477k] {
    display: inline-block;
    background: #f0f0f0;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #666;
}

/* Variant tag shown under product name */
.variant-tag[b-m7569m477k] {
    display: inline-block;
    font-size: 0.75rem;
    color: #666;
    background: #f5f5f5;
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 4px;
    width: fit-content;
}

/* Quantity Column - hidden on desktop, handled by cart-item-price-qty */
.col-quantity[b-m7569m477k] {
    display: none;
}

.quantity-selector[b-m7569m477k] {
    display: flex;
    align-items: center;
    border: 1px solid #e8e8e8;
    border-radius: 25px;
    overflow: hidden;
    background: #fafafa;
}

.quantity-selector .qty-btn[b-m7569m477k] {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #333;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-selector .qty-btn:hover:not(:disabled)[b-m7569m477k] {
    background: #e8e8e8;
    color: #0066cc;
}

.quantity-selector .qty-btn:disabled[b-m7569m477k] {
    color: #ccc;
    cursor: not-allowed;
}

.quantity-selector .qty-value[b-m7569m477k] {
    width: 40px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a2e;
}

.quantity-selector input.qty-value[b-m7569m477k] {
    border: none;
    background: transparent;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
    cursor: text;
    transition: all 0.2s;
    border-radius: 4px;
}

.quantity-selector input.qty-value:hover[b-m7569m477k],
.quantity-selector input.qty-value:focus[b-m7569m477k] {
    background: #ffffff;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08);
}

.quantity-selector input.qty-value[b-m7569m477k]::-webkit-outer-spin-button,
.quantity-selector input.qty-value[b-m7569m477k]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-selector.stock-exceeded[b-m7569m477k] {
    border-color: #ff4d4f;
    background: #fff1f0;
}

.quantity-selector.stock-exceeded .qty-value[b-m7569m477k] {
    color: #dc3545;
}

.col-quantity .stock-info[b-m7569m477k] {
    font-size: 0.72rem;
    color: #999;
    text-align: center;
}

.col-quantity .stock-info.exceeded[b-m7569m477k] {
    color: #dc3545;
    font-weight: 500;
}

/* Price Column - hidden on desktop, handled by cart-item-price-qty */
.col-price[b-m7569m477k] {
    display: none;
}

.price-info[b-m7569m477k] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.item-label[b-m7569m477k] {
    font-size: 0.72rem;
    color: #999;
}

.item-price[b-m7569m477k] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0066cc;
}

.original-price[b-m7569m477k] {
    font-size: 0.78rem;
    color: #999;
    text-decoration: line-through;
}

/* Action Column - hidden, minus at qty=1 removes items */
.col-action[b-m7569m477k] {
    display: none;
}

.delete-btn[b-m7569m477k] {
    width: 38px;
    height: 38px;
    border: none;
    background: #f5f5f5;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-btn:hover[b-m7569m477k] {
    background: #ff4d4f;
    color: white;
    transform: scale(1.05);
}

/* Promo Banner */
.promo-banner[b-m7569m477k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #e6f7ff;
    color: #0066cc;
    font-size: 0.85rem;
    border-bottom: 1px solid #b3e0ff;
}

.promo-icon[b-m7569m477k] {
    font-size: 1rem;
    color: #0066cc;
}

/* Free Item Row Styles */
.cart-item.free-item[b-m7569m477k] {
    background: linear-gradient(135deg, #e8ffe8 0%, #f0fff0 100%);
    border-left: 4px solid #52c41a;
    position: relative;
}

.cart-item.free-item:hover[b-m7569m477k] {
    background: linear-gradient(135deg, #dcffdc 0%, #e8ffe8 100%);
}

.cart-item.free-item[b-m7569m477k]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(82, 196, 26, 0.03) 10px,
            rgba(82, 196, 26, 0.03) 20px);
    pointer-events: none;
}

.free-gift-icon[b-m7569m477k] {
    font-size: 1.5rem;
    animation: pulse-gift-b-m7569m477k 2s infinite;
    color: #52c41a;
}

.free-gift-icon i[b-m7569m477k] {
    display: inline-block;
}

@keyframes pulse-gift-b-m7569m477k {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.free-badge[b-m7569m477k] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
}

.free-badge i[b-m7569m477k] {
    font-size: 0.65rem;
}

.quantity-display[b-m7569m477k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.quantity-display .qty-label[b-m7569m477k] {
    font-size: 0.75rem;
    color: #999;
}

.quantity-display .qty-value[b-m7569m477k] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #52c41a;
}

.free-price[b-m7569m477k] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #52c41a;
}

/* Bottom Actions Bar — Fixed to viewport bottom */
.cart-bottom-actions[b-m7569m477k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 18px 40px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    z-index: 100;
    border-top: 2px solid #f0f2f5;
    gap: 24px;
}

.select-all-section[b-m7569m477k] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.95rem;
    color: #333;
}

.select-all-section label[b-m7569m477k] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s;
}

.select-all-section label:hover[b-m7569m477k] {
    background: #f5f7fa;
}

.select-all-section input[type="checkbox"][b-m7569m477k] {
    width: 20px;
    height: 20px;
    accent-color: #0066cc;
    cursor: pointer;
}

.btn-delete-selected[b-m7569m477k] {
    color: #ff4d4f;
    background: none;
    border: 1px solid #ffccc7;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.2s;
}

.btn-delete-selected:hover:not(:disabled)[b-m7569m477k] {
    background: #fff1f0;
    border-color: #ff4d4f;
}

.btn-delete-selected:disabled[b-m7569m477k] {
    color: #ccc;
    border-color: #f0f0f0;
    cursor: not-allowed;
}

.btn-delete-selected:hover:not(:disabled)[b-m7569m477k] {
    color: #ff4d4f;
}

.btn-delete-selected:disabled[b-m7569m477k] {
    color: #ccc;
    cursor: not-allowed;
}

.total-section[b-m7569m477k] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: flex-end;
}

.total-info[b-m7569m477k] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.total-label[b-m7569m477k] {
    font-size: 0.85rem;
    color: #666;
}

.total-section .total-price[b-m7569m477k] {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.savings-text[b-m7569m477k] {
    font-size: 0.78rem;
    color: #16a34a;
    font-weight: 600;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #bbf7d0;
    white-space: nowrap;
}

.btn-checkout[b-m7569m477k] {
    padding: 14px 48px;
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-checkout:hover:not(:disabled)[b-m7569m477k] {
    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.4);
}

.btn-checkout:disabled[b-m7569m477k] {
    background: #d9d9d9;
    cursor: not-allowed;
    box-shadow: none;
}

/* ===== Shopee-Inspired Promotion Voucher Cards ===== */
.cart-promo-selector[b-m7569m477k] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 0;
    border: 1px solid #f0f0f0;
}

.promo-selector-header[b-m7569m477k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, #e6f2ff 0%, #f0f7ff 100%);
    border-bottom: 1px solid #b3d9ff;
}

.promo-selector-header h3[b-m7569m477k] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0066cc;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.promo-selector-header h3 i[b-m7569m477k] {
    color: #0066cc;
}

.promo-selector-header .promo-hint[b-m7569m477k] {
    font-size: 0.76rem;
    color: #0066cc;
    font-weight: 500;
    opacity: 0.7;
}

.promo-selector-list[b-m7569m477k] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* === Voucher Card — Shopee Style === */
.promo-select-card[b-m7569m477k] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1.5px solid #e8e8e8;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.22s ease;
    background: white;
    position: relative;
    overflow: visible;
    border-bottom: none;
}

.promo-select-card:first-child[b-m7569m477k] {
    border-radius: 10px 10px 0 0;
}

.promo-select-card:last-child[b-m7569m477k] {
    border-radius: 0 0 10px 10px;
    border-bottom: 1.5px solid #e8e8e8;
}

.promo-select-card:only-child[b-m7569m477k] {
    border-radius: 10px;
    border-bottom: 1.5px solid #e8e8e8;
}

.promo-select-card:hover:not(.disabled)[b-m7569m477k] {
    background: #fafffe;
    z-index: 1;
}

.promo-select-card.active[b-m7569m477k] {
    border-color: #52c41a;
    background: linear-gradient(to right, #f0fff0 0%, #fafffe 30%, white 100%);
    z-index: 2;
    border-bottom: 1.5px solid #52c41a;
}

.promo-select-card.active+.promo-select-card[b-m7569m477k] {
    border-top-color: transparent;
}

.promo-select-card.disabled[b-m7569m477k] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #fafafa;
}

/* Ticket Body (left side) */
.promo-ticket-body[b-m7569m477k] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    min-width: 0;
}

/* Ticket Divider — scalloped edge with circle punches */
.promo-ticket-divider[b-m7569m477k] {
    width: 0;
    border-left: 1.5px dashed #d9d9d9;
    position: relative;
    flex-shrink: 0;
    align-self: stretch;
}

.promo-select-card.active .promo-ticket-divider[b-m7569m477k] {
    border-left-color: #95de64;
}

/* Semicircle notch cutouts */
.promo-ticket-divider[b-m7569m477k]::before,
.promo-ticket-divider[b-m7569m477k]::after {
    content: '';
    position: absolute;
    left: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: 2;
}

.promo-ticket-divider[b-m7569m477k]::before {
    top: -9px;
    background: white;
    border: 1.5px solid #e8e8e8;
    border-top: none;
    clip-path: inset(50% 0 0 0);
}

.promo-ticket-divider[b-m7569m477k]::after {
    bottom: -9px;
    background: white;
    border: 1.5px solid #e8e8e8;
    border-bottom: none;
    clip-path: inset(0 0 50% 0);
}

.promo-select-card.active .promo-ticket-divider[b-m7569m477k]::before,
.promo-select-card.active .promo-ticket-divider[b-m7569m477k]::after {
    border-color: #52c41a;
}

/* Ticket Stub (right side — discount value) */
.promo-select-value[b-m7569m477k] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 22px;
    min-width: 120px;
}

/* Checkbox indicator — Shopee-style circle checkbox */
.promo-select-indicator[b-m7569m477k] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.promo-checkbox[b-m7569m477k] {
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.65rem;
    color: white;
    background: white;
}

.promo-checkbox.checked[b-m7569m477k] {
    border-color: #52c41a;
    background: #52c41a;
    box-shadow: 0 2px 6px rgba(82, 196, 26, 0.35);
    animation: checkbox-pop-b-m7569m477k 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes checkbox-pop-b-m7569m477k {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* Info section */
.promo-select-info[b-m7569m477k] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.promo-select-name[b-m7569m477k] {
    font-size: 0.92rem;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
}

.promo-select-desc[b-m7569m477k] {
    font-size: 0.78rem;
    color: #888;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promo-select-disabled[b-m7569m477k] {
    font-size: 0.72rem;
    color: #ff4d4f;
    font-weight: 500;
    margin-top: 2px;
}

/* Meta row — badges inline */
.promo-select-meta[b-m7569m477k] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.promo-select-time[b-m7569m477k] {
    font-size: 0.72rem;
    color: #999;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Discount amount — prominent on the ticket stub */
.promo-save-amount[b-m7569m477k] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #cf1322;
    white-space: nowrap;
    letter-spacing: -0.5px;
    line-height: 1;
}

.promo-select-card.active .promo-save-amount[b-m7569m477k] {
    color: #389e0d;
}

/* Free item / shipping tags */
.promo-free-tag[b-m7569m477k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #52c41a;
    background: #f6ffed;
    padding: 3px 10px;
    border-radius: 10px;
    border: 1px solid #b7eb8f;
    white-space: nowrap;
}

/* Badges — inline in meta row */
.promo-select-badges[b-m7569m477k] {
    display: contents;
}

.promo-badge[b-m7569m477k] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.promo-badge.applied[b-m7569m477k] {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.promo-badge.stackable[b-m7569m477k] {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

/* Summary bar — Shopee-style bottom summary */
.promo-selector-summary[b-m7569m477k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border-top: 1px solid #c8e6c9;
}

.promo-summary-label[b-m7569m477k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0066cc;
}

.promo-summary-label i[b-m7569m477k] {
    color: #0066cc;
}

.promo-summary-value[b-m7569m477k] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #cf1322;
}

/* ===== Feature 1: Voucher Hub — Claimable (Orange) & Applied (Green) ===== */
.voucher-hub-header h3[b-m7569m477k] {
    color: #0066cc;
}

/* Claimable coupon list background */
.voucher-claimable-list[b-m7569m477k] {
    background: linear-gradient(to bottom, #fff8f0 0%, #ffffff 100%);
    border-bottom: 1px solid #ffe0b2;
}

/* Claimable card — orange theme */
.promo-select-card.voucher-claimable[b-m7569m477k] {
    border-color: #ffb74d;
    background: linear-gradient(to right, #fff3e0 0%, #ffffff 40%);
    animation: voucher-pulse-b-m7569m477k 2.5s ease-in-out infinite;
}

.promo-select-card.voucher-claimable:hover[b-m7569m477k] {
    background: linear-gradient(to right, #ffe0b2 0%, #fff8f0 40%);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255, 152, 0, 0.15);
}

.promo-select-card.voucher-claimable .promo-ticket-divider[b-m7569m477k] {
    border-left-color: #ffb74d;
}

.promo-select-card.voucher-claimable .promo-ticket-divider[b-m7569m477k]::before,
.promo-select-card.voucher-claimable .promo-ticket-divider[b-m7569m477k]::after {
    border-color: #ffb74d;
}

.promo-select-card.voucher-claimable.collecting[b-m7569m477k] {
    animation: none;
    opacity: 0.7;
}

@keyframes voucher-pulse-b-m7569m477k {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.12);
    }
}

/* Voucher icon circle */
.voucher-icon-circle[b-m7569m477k] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.voucher-icon-circle.claimable[b-m7569m477k] {
    background: linear-gradient(135deg, #ff9800, #ff6d00);
    color: white;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.35);
}

/* Claimable discount amount — orange */
.claimable-amount[b-m7569m477k] {
    color: #e65100 !important;
    font-size: 1.1rem !important;
}

/* Collect button — orange CTA */
.btn-collect-coupon[b-m7569m477k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    white-space: nowrap;
    margin-top: 6px;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
}

.btn-collect-coupon:hover[b-m7569m477k] {
    background: linear-gradient(135deg, #f57c00, #e65100);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255, 152, 0, 0.4);
    color: white;
}

.btn-collect-coupon:disabled[b-m7569m477k] {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ===== Feature 2: Smart Tags — per-item applied badge ===== */
.cart-applied-tag[b-m7569m477k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    color: #2e7d32;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 20px;
    border: 1px solid #a5d6a7;
    margin-top: 4px;
    width: fit-content;
    letter-spacing: 0.2px;
    animation: tag-appear-b-m7569m477k 0.3s ease;
}

.cart-applied-tag i[b-m7569m477k] {
    font-size: 0.6rem;
}

@keyframes tag-appear-b-m7569m477k {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Feature 3: Contextual Upsell Banner ===== */
.upsell-banner[b-m7569m477k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #fffde7 0%, #fff8e1 100%);
    color: #e65100;
    font-size: 0.82rem;
    font-weight: 500;
    border-bottom: 1px solid #ffe0b2;
    border-left: 3px solid #ff9800;
}

.upsell-icon[b-m7569m477k] {
    font-size: 0.9rem;
    color: #ff9800;
    flex-shrink: 0;
}

/* ===== Feature 4: Enhanced Savings Footer ===== */
.savings-breakdown[b-m7569m477k] {
    font-size: 0.68rem;
    color: #689f38;
    font-weight: 400;
    margin-top: 1px;
    line-height: 1.3;
}

/* ===== Free Shipping Progress Bar ===== */
.free-ship-bar[b-m7569m477k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.75rem;
    color: #333;
}

.free-ship-bar.achieved[b-m7569m477k] {
    background: #f0faf0;
    border-bottom-color: #c8e6c9;
}

.free-ship-bar.achieved .free-ship-text[b-m7569m477k] {
    color: #2e7d32;
}

.free-ship-text[b-m7569m477k] {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.free-ship-text i[b-m7569m477k] {
    margin-right: 4px;
    color: #009688;
}

.free-ship-progress[b-m7569m477k] {
    width: 80px;
    height: 5px;
    background: #e8e8e8;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.free-ship-fill[b-m7569m477k] {
    height: 100%;
    background: linear-gradient(90deg, #009688, #4caf50);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.free-ship-pct[b-m7569m477k] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #666;
    flex-shrink: 0;
}

/* ===== Full-Width Checkout Button ===== */
.btn-checkout-full[b-m7569m477k] {
    padding: 16px 48px;
    background: linear-gradient(135deg, #1a365d 0%, #2d5aa0 100%);
    color: white !important;
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.3px;
    transition: all 0.25s;
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.25);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-checkout-full:hover:not(:disabled)[b-m7569m477k] {
    background: linear-gradient(135deg, #2d5aa0 0%, #1a365d 100%);
    box-shadow: 0 6px 20px rgba(26, 54, 93, 0.35);
    transform: translateY(-2px);
}

.btn-checkout-full:disabled[b-m7569m477k] {
    background: #ccc !important;
    color: #888 !important;
    cursor: not-allowed;
}

.total-price-row[b-m7569m477k] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===== Cart Item Layout (desktop base) ===== */

/* Desktop: compact row using CSS Grid
   Column layout: [checkbox 18px] [image 68px] [details+price+qty 1fr]
   cart-item-row1 and cart-item-body melt into parent via display:contents.
   Details column uses internal flex to position tags left + price/qty right.
*/
.cart-item[b-m7569m477k] {
    display: grid;
    grid-template-columns: 18px 68px 1fr;
    gap: 0 14px;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s;
}

.cart-item:hover[b-m7569m477k] {
    background: #fafcff;
}

.cart-item.out-of-stock[b-m7569m477k] {
    opacity: 0.6;
    background: #fafafa;
}

.cart-item.selected[b-m7569m477k] {
    background: #f0f7ff;
    border-left: 3px solid #0066cc;
}

.cart-item:last-child[b-m7569m477k] {
    border-bottom: none;
}

/* Flatten row1 and body children into the grid */
.cart-item-row1[b-m7569m477k] {
    display: contents;
}

.cart-item-body[b-m7569m477k] {
    display: contents;
}

/* Checkbox → col 1, centered */
.cart-item-check[b-m7569m477k] {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 18px;
    height: 18px;
    accent-color: #0066cc;
    cursor: pointer;
    align-self: center;
}

/* Product name → col 3 row 1 */
.cart-item-row1 .product-name[b-m7569m477k] {
    grid-column: 3;
    grid-row: 1;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a2e;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
    display: block;
}

.cart-item-row1 .product-name:hover[b-m7569m477k] {
    color: #0066cc;
}

/* Image → col 2, spans all rows */
.cart-item-body .product-image[b-m7569m477k] {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 68px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid #f0f0f0;
    align-self: center;
}

.cart-item-body .product-image img[b-m7569m477k] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Details container → col 3 row 2 — contains tags + price-qty */
.cart-item-details[b-m7569m477k] {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

/* Price + Qty inside details — pushed to right */
.cart-item-price-qty[b-m7569m477k] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    margin-top: 0;
    flex-shrink: 0;
}

.cart-item-price-qty .price-info[b-m7569m477k] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 80px;
}

.cart-item-price-qty .item-price[b-m7569m477k] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0066cc;
    white-space: nowrap;
}

.cart-item-price-qty .original-price[b-m7569m477k] {
    font-size: 0.75rem;
    color: #999;
    text-decoration: line-through;
    white-space: nowrap;
}

/* ===== Checkout Coins Display ===== */
.checkout-coins[b-m7569m477k] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #666;
}

.coins-icon[b-m7569m477k] {
    font-size: 0.9rem;
}

.coins-value[b-m7569m477k] {
    font-weight: 700;
    color: #1a237e;
}

.coins-note[b-m7569m477k] {
    color: #999;
    font-size: 0.62rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .cart-bottom-actions[b-m7569m477k] {
        padding: 12px 20px;
        padding-bottom: max(12px, env(safe-area-inset-bottom) + 12px);
    }

    .btn-checkout[b-m7569m477k] {
        padding: 12px 32px;
    }
}

@media (max-width: 768px) {
    /* === CORE: White flat background, no gradients === */
    .cart-page[b-m7569m477k] {
        background: #f5f5f5;
        padding: 0;
    }

    .cart-page > .container[b-m7569m477k] {
        padding: 0 !important;
        max-width: 100% !important;
    }
    /* === VOUCHER HUB: Remove spacing === */
    .cart-voucher-hub[b-m7569m477k] {
        margin: 0;
        padding: 10px 12px;
        border-radius: 0;
        box-shadow: none;
        background: white;
        border-top: 6px solid #f5f5f5;
    }

    .voucher-hub-header[b-m7569m477k] {
        margin-bottom: 8px;
    }

    .voucher-hub-header h3[b-m7569m477k] {
        font-size: 0.75rem;
    }

    .voucher-hub-header a[b-m7569m477k] {
        font-size: 0.72rem;
    }

    /* === VOUCHER CARDS: tighter === */
    .voucher-card[b-m7569m477k] {
        padding: 8px 10px;
        margin-bottom: 6px;
        border-radius: 10px;
    }

    .voucher-icon[b-m7569m477k] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 0.9rem;
    }

    .voucher-info[b-m7569m477k] {
        gap: 1px;
    }

    .voucher-title[b-m7569m477k] {
        font-size: 0.78rem;
    }

    .voucher-desc[b-m7569m477k] {
        font-size: 0.62rem;
    }

    .voucher-btn[b-m7569m477k] {
        font-size: 0.65rem;
        padding: 4px 10px;
        border-radius: 6px;
    }

    .cart-header h1[b-m7569m477k] {
        font-size: 1rem;
        margin: 0;
    }

    .cart-store-name[b-m7569m477k] {
        font-size: 0.65rem;
    }

    .cart-edit-link[b-m7569m477k] {
        font-size: 0.78rem;
    }

    .cart-header-icon[b-m7569m477k] {
        display: none;
    }

    .cart-table-header[b-m7569m477k] {
        display: none;
    }

    /* === CART ITEMS SECTION: no gap, edge-to-edge === */
    .cart-items-section[b-m7569m477k] {
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white;
    }

    .cart-content[b-m7569m477k] {
        gap: 0 !important;
        padding-bottom: 0px !important;
    }

    /* === CART ITEM: Grid Layout === */
    .cart-item[b-m7569m477k] {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 10px 12px;
        border-left: 3px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
    }

    .cart-item:last-child[b-m7569m477k] {
        border-bottom: none;
    }

    /* Row 1: Checkbox + Product Name */
    .cart-item-row1[b-m7569m477k] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 6px;
    }

    .cart-item-check[b-m7569m477k] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        margin-top: 1px;
        accent-color: #1a73e8;
    }

    .cart-item-row1 .product-name[b-m7569m477k] {
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.3;
        color: #333;
        text-decoration: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Rows 2-4: Thumbnail + Details */
    .cart-item-body[b-m7569m477k] {
        display: flex;
        gap: 10px;
        padding-left: 0px;
        width: 100%;
    }

    .cart-item-body .product-image[b-m7569m477k] {
        width: 72px;
        height: 72px;
        border-radius: 8px;
        flex-shrink: 0;
        overflow: hidden;
        margin: 0;
    }

    .cart-item-body .product-image img[b-m7569m477k] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

    .cart-item-details[b-m7569m477k] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .variant-tag[b-m7569m477k] {
        font-size: 0.72rem;
        color: #666;
    }

    /* Price + Qty row (last row of details) */
    .cart-item-price-qty[b-m7569m477k] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 4px;
        width: 100%;
    }

    .cart-item-price-qty .price-info[b-m7569m477k] {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }

    .cart-item-price-qty .item-price[b-m7569m477k] {
        font-size: 1.05rem;
        font-weight: 700;
        color: #333;
    }

    .cart-item-price-qty .original-price[b-m7569m477k] {
        font-size: 0.68rem;
        color: #999;
        text-decoration: line-through;
    }

    /* Quantity controls */
    .quantity-selector[b-m7569m477k] {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        display: inline-flex;
        flex-shrink: 0;
    }

    .quantity-selector .qty-btn[b-m7569m477k] {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
        border: none;
    }

    .quantity-selector .qty-value[b-m7569m477k] {
        width: 32px;
        font-size: 0.85rem;
        border-left: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
    }

    /* Hide old layout elements */
    .col-select[b-m7569m477k], .col-variant[b-m7569m477k], .col-action[b-m7569m477k], .delete-btn[b-m7569m477k] {
        display: none;
    }

    .col-quantity .stock-info[b-m7569m477k] {
        display: none;
    }

    /* === PROMOTION BANNERS: Compact inline === */
    .promo-banner[b-m7569m477k] {
        padding: 8px 14px;
        margin: 0;
        border-radius: 0;
        font-size: 0.78rem;
    }

    .upsell-banner[b-m7569m477k] {
        padding: 8px 14px;
        font-size: 0.78rem;
    }

    /* === VOUCHER HUB SECTION: Flat, no card === */
    .cart-promo-selector[b-m7569m477k] {
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white;
        border-bottom: 6px solid #f0f0f0;
    }

    .promo-selector-header[b-m7569m477k] {
        padding: 12px 16px 8px;
    }

    .promo-selector-header h3[b-m7569m477k] {
        font-size: 0.82rem;
        letter-spacing: 0.5px;
    }

    .promo-hint[b-m7569m477k] {
        font-size: 0.7rem;
    }

    .promo-selector-list[b-m7569m477k] {
        padding: 6px 12px 10px;
    }

    .voucher-claimable-list[b-m7569m477k] {
        padding: 6px 12px 10px;
    }

    .promo-select-card[b-m7569m477k] {
        border-radius: 10px;
        margin-bottom: 8px;
    }

    .promo-ticket-body[b-m7569m477k] {
        padding: 10px;
        gap: 8px;
    }

    .promo-select-value[b-m7569m477k] {
        padding: 10px 12px;
        min-width: 80px;
    }

    .promo-save-amount[b-m7569m477k] {
        font-size: 0.95rem;
    }

    .promo-select-name[b-m7569m477k] {
        font-size: 0.82rem;
    }

    .promo-select-desc[b-m7569m477k] {
        font-size: 0.7rem;
    }

    .promo-selector-summary[b-m7569m477k] {
        padding: 8px 14px;
    }

    .promo-summary-value[b-m7569m477k] {
        font-size: 0.95rem;
    }

    /* === VOUCHER HUB MOBILE SPECIFICS === */
    .voucher-icon-circle[b-m7569m477k] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .btn-collect-coupon[b-m7569m477k] {
        padding: 5px 14px;
        font-size: 0.72rem;
    }

    .claimable-amount[b-m7569m477k] {
        font-size: 0.85rem !important;
    }

    .cart-applied-tag[b-m7569m477k] {
        font-size: 0.65rem;
        padding: 2px 8px;
    }

    .savings-breakdown[b-m7569m477k] {
        font-size: 0.6rem;
    }

    /* === BOTTOM ACTIONS BAR: Compact, modern === */
    .cart-bottom-actions[b-m7569m477k] {
        position: fixed;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 6px;
        padding: 10px 14px;
        padding-bottom: max(10px, env(safe-area-inset-bottom) + 10px);
        bottom: 0;
        background: white;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
        border-top: none;
    }

    .select-all-section[b-m7569m477k] {
        width: 100%;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 6px;
    }

    .select-all-section label[b-m7569m477k] {
        font-size: 0.8rem;
        padding: 2px 4px;
    }

    .btn-delete-selected[b-m7569m477k] {
        font-size: 0.72rem;
        padding: 3px 8px;
    }

    .total-section[b-m7569m477k] {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .total-info[b-m7569m477k] {
        flex: 1;
        align-items: flex-start;
    }

    .total-label[b-m7569m477k] {
        font-size: 0.68rem;
        color: #666;
    }

    .total-section .total-price[b-m7569m477k] {
        font-size: 1.4rem;
        font-weight: 800;
    }

    .savings-text[b-m7569m477k] {
        font-size: 0.62rem;
        padding: 2px 6px;
    }

    .checkout-coins[b-m7569m477k] {
        gap: 4px;
        font-size: 0.65rem;
        justify-content: flex-end;
    }

    .coins-icon[b-m7569m477k] {
        font-size: 0.8rem;
    }

    .coins-value[b-m7569m477k] {
        font-size: 0.68rem;
    }

    .coins-note[b-m7569m477k] {
        font-size: 0.55rem;
    }

    .btn-checkout[b-m7569m477k] {
        display: none;
    }

    .btn-checkout-full[b-m7569m477k] {
        padding: 14px 20px;
        font-size: 0.92rem;
        border-radius: 25px;
    }

    /* === PROMO BADGES === */
    .promo-badge[b-m7569m477k] {
        font-size: 0.62rem;
        padding: 2px 6px;
    }

    /* === PROMO TAGS (orange tags on items) === */
    .cart-promo-tag[b-m7569m477k] {
        font-size: 0.65rem;
        padding: 2px 6px;
        margin-top: 2px;
        gap: 2px;
    }

    /* === STOCK INFO === */
    .col-quantity .stock-info[b-m7569m477k] {
        font-size: 0.65rem;
        margin-top: 2px;
    }

    /* === EMPTY CART === */
    .empty-cart[b-m7569m477k] {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 40px 20px;
    }

    /* === PRODUCT IMAGE CLEAN BORDER === */
    .col-product .product-image img[b-m7569m477k] {
        border-radius: 8px;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* === FREE ITEMS SECTION === */
    .free-items-section[b-m7569m477k] {
        margin: 0;
        border-radius: 0;
    }

    /* === Applied tags === */
    .cart-applied-tag[b-m7569m477k] {
        font-size: 0.62rem;
        padding: 1px 6px;
        margin-top: 1px;
    }
}

/* =========================================================
   Desktop Smart Cart UX Mockup Adjustments (Logic 1-6)
   ========================================================= */

/* Logic 3: Contextual Upsell - Blue Gradient Banner (Base Mobile + Desktop) */
.upsell-banner[b-m7569m477k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0369a1;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid #bae6fd;
}
.upsell-icon[b-m7569m477k] {
    font-size: 1rem;
}

/* Utility visibility classes */
@media (max-width: 991px) {
    .desktop-only[b-m7569m477k] {
        display: none !important;
    }
}
@media (min-width: 992px) {
    .mobile-only[b-m7569m477k] {
        display: none !important;
    }
}

/* Animation Pulse for Logic 5 (Uncollected Coupons) */
@keyframes pulse-border-shadow-b-m7569m477k {
    0% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
        border-color: #fb923c;
    }
    70% {
        box-shadow: 0 0 0 6px rgba(249, 115, 22, 0);
        border-color: #f97316;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
        border-color: #ea580c;
    }
}

.animation-pulse[b-m7569m477k] {
    animation: pulse-border-shadow-b-m7569m477k 2.5s infinite ease-in-out;
}

@media (min-width: 992px) {
    /* Logic 1 & 5 & 6: Layout (2-Column) */
    .cart-layout[b-m7569m477k] {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 24px;
        align-items: start;
    }
    
    .cart-left-column[b-m7569m477k] {
        display: flex;
        flex-direction: column;
        gap: 20px;
        min-width: 0;
    }
    
    .cart-right-column[b-m7569m477k] {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: sticky;
        top: 20px;
    }
    
    .cart-page[b-m7569m477k] {
        padding-bottom: 80px !important; /* Less padding needed since summary is not bottom-fixed */
    }

    .cart-content[b-m7569m477k] {
        padding-bottom: 0px !important; /* Reset bottom padding internally */
    }

    /* Logic 1: Global Progress Bar Desktop Specific Styling */
    .free-ship-bar[b-m7569m477k] {
        font-size: 1rem;
        padding: 18px 24px;
        margin-bottom: 0;
    }
    
    .desktop-upsell-text[b-m7569m477k] {
        color: #059669;
        font-weight: 600;
        margin-left: 8px;
    }

    /* Logic 2: Smart Tags - Green Badges overlay instead of clutter */
    .smart-tags-container[b-m7569m477k] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 6px;
    }
    
    .smart-badge-green.cart-promo-tag[b-m7569m477k],
    .smart-badge-green.cart-applied-tag[b-m7569m477k] {
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        color: #059669;
        padding: 4px 10px;
        font-weight: 600;
        border-radius: 6px;
        font-size: 0.75rem;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 0; /* Reset margins from old styles */
    }
    
    /* Logic 3: Contextual Upsell - Blue Gradient Banner (Desktop Enhancements) */
    .upsell-banner[b-m7569m477k] {
        background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
        border: 1px solid #7dd3fc;
        border-top: none;
        border-radius: 0 0 12px 12px;
        margin-top: -12px; /* Pull banner up slightly to attach visually if bottom rounded */
        padding: 10px 20px;
    }
    .upsell-icon[b-m7569m477k] {
        background: white;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #0284c7;
        font-size: 0.85rem;
    }

    /* Logic 4: Smart Voucher Hub in Sidebar Desktop Styling */
    .cart-promo-selector[b-m7569m477k] {
        margin-top: 0;
    }

    /* Add distinct styling for Voucher Header when in Sidebar */
    .promo-selector-header.voucher-hub-header[b-m7569m477k] {
        background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
        border-bottom: 1px solid #99f6e4;
    }
    
    .promo-selector-header.voucher-hub-header h3 i[b-m7569m477k],
    .promo-selector-header.voucher-hub-header h3[b-m7569m477k] {
        color: #0f766e;
    }

    .promo-selector-header.voucher-hub-header .promo-hint[b-m7569m477k] {
        color: #0f766e;
    }

    /* Desktop Summary Box styling */
    .desktop-summary-box[b-m7569m477k] {
        background: white;
        border-radius: 12px;
        padding: 24px;
        border: 1px solid #e5e7eb;
    }
    
    .desktop-summary-box h3[b-m7569m477k] {
        font-size: 1.1rem;
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 16px;
        color: #1a1a2e;
    }
    
    .summary-line[b-m7569m477k] {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        font-size: 0.95rem;
        color: #4b5563;
    }
    
    .summary-line.savings span:last-child[b-m7569m477k] {
        color: #16a34a;
        font-weight: 600;
    }
    
    .summary-total-line[b-m7569m477k] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #e5e7eb;
        margin-top: 16px;
        padding-top: 16px;
        margin-bottom: 16px;
    }
    
    .summary-total-line span:first-child[b-m7569m477k] {
        font-weight: 600;
        color: #1f2937;
        font-size: 1rem;
    }
    
    .summary-total-line .total-price[b-m7569m477k] {
        font-size: 1.6rem;
        font-weight: 800;
        background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .btn-checkout-full[b-m7569m477k] {
        padding: 16px;
        font-size: 1.05rem;
        background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
        color: white;
        border: none;
        border-radius: 30px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
        margin-top: 4px;
    }
    
    .btn-checkout-full:hover:not(:disabled)[b-m7569m477k] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 102, 204, 0.4);
    }

    .btn-checkout-full:disabled[b-m7569m477k] {
        background: #d1d5db;
        box-shadow: none;
        cursor: not-allowed;
    }
}
/* /Components/Pages/Checkout.razor.rz.scp.css */
/* Checkout Page Styles */
a[b-e2ncxo9jhm],
button[b-e2ncxo9jhm] {
    text-decoration: none !important;
    color: inherit;
}

.checkout-page[b-e2ncxo9jhm] {
    background: #f5f7fa;
    min-height: 100vh;
    padding: 40px 0;
}

.page-title[b-e2ncxo9jhm] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a365d;
    text-align: center;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Loading & Empty States */
.loading-state[b-e2ncxo9jhm],
.empty-cart[b-e2ncxo9jhm],
.login-required[b-e2ncxo9jhm] {
    text-align: center;
    padding: 80px 32px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

.spinner[b-e2ncxo9jhm] {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: #1a365d;
    border-radius: 50%;
    animation: spin-b-e2ncxo9jhm 0.8s linear infinite;
    margin: 0 auto 16px;
}

.spinner-small[b-e2ncxo9jhm] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-e2ncxo9jhm 0.8s linear infinite;
}

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

.empty-icon[b-e2ncxo9jhm] {
    font-size: 4rem;
    display: block;
    margin-bottom: 20px;
    color: var(--primary-blue);
}

.empty-icon i[b-e2ncxo9jhm] {
    opacity: 0.7;
}

.empty-cart h2[b-e2ncxo9jhm] {
    color: #1a365d;
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.empty-cart p[b-e2ncxo9jhm] {
    color: #6b7280;
    margin-bottom: 25px;
}

/* Checkout Content */
.checkout-content[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.checkout-section[b-e2ncxo9jhm] {
    background: white;
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

.checkout-section h2[b-e2ncxo9jhm] {
    font-size: 1.25rem;
    color: #1a365d;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* New Delivery Section Layout */
.delivery-section .delivery-row[b-e2ncxo9jhm] {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}

.delivery-section .delivery-row:last-child[b-e2ncxo9jhm] {
    border-bottom: none;
    padding-bottom: 8px;
}

@media (max-width: 768px) {
    .delivery-section .delivery-row[b-e2ncxo9jhm] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .delivery-section .delivery-action[b-e2ncxo9jhm] {
        justify-self: start;
    }
}

.delivery-section .delivery-label[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.delivery-section .delivery-label strong[b-e2ncxo9jhm] {
    color: #1a365d;
    font-size: 1rem;
    font-weight: 600;
}

.delivery-section .delivery-hint[b-e2ncxo9jhm] {
    color: #9ca3af;
    font-size: 0.85rem;
    line-height: 1.4;
}

.delivery-section .delivery-content[b-e2ncxo9jhm] {
    flex: 1;
    min-width: 0;
    /* Prevent overflow */
}

/* Address Card Styling */
.delivery-section .address-card[b-e2ncxo9jhm] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
}

.delivery-section .address-card:hover[b-e2ncxo9jhm] {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.delivery-section .address-display[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.delivery-section .address-display .contact-name[b-e2ncxo9jhm] {
    font-weight: 700;
    color: #1a365d;
    font-size: 1rem;
}

.delivery-section .address-display .contact-phone[b-e2ncxo9jhm] {
    color: #6b7280;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.delivery-section .address-display .contact-phone[b-e2ncxo9jhm]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 50%;
}

.delivery-section .address-text[b-e2ncxo9jhm] {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.delivery-section .no-address-text[b-e2ncxo9jhm] {
    color: #9ca3af;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Action Button */
.delivery-action[b-e2ncxo9jhm] {
    display: flex;
    align-items: flex-start;
}

.btn-edit-address[b-e2ncxo9jhm] {
    background: white;
    border: 1px solid #e2e8f0;
    color: #2563eb;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-edit-address:hover[b-e2ncxo9jhm] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Shipping Method Row */
.shipping-method-row[b-e2ncxo9jhm] {
    display: flex !important;
    align-items: flex-start;
    gap: 24px;
}

.shipping-method-row .delivery-label[b-e2ncxo9jhm] {
    min-width: 200px;
    flex-shrink: 0;
}

.method-options-horizontal[b-e2ncxo9jhm] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.method-card[b-e2ncxo9jhm] {
    display: flex;
    align-items: start;
    gap: 12px;
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    min-width: 150px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.method-card:hover[b-e2ncxo9jhm] {
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.method-card.selected[b-e2ncxo9jhm] {
    border-color: #2563eb;
    background: var(--primary-blue-light);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.method-card input[type="radio"][b-e2ncxo9jhm] {
    display: none;
}

.method-card .radio-circle[b-e2ncxo9jhm] {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.method-card .radio-circle i[b-e2ncxo9jhm] {
    font-size: 10px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
    aspect-ratio: 1/1;
    line-height: 12px;
}

.method-card.selected .radio-circle[b-e2ncxo9jhm] {
    border-color: #2563eb;
    background: #2563eb;
}

.method-card.selected .radio-circle i[b-e2ncxo9jhm] {
    opacity: 1;
}

.method-card .method-info[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.method-card .method-name[b-e2ncxo9jhm] {
    font-weight: 500;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.2;
}

.method-card .method-price[b-e2ncxo9jhm] {
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Method Icon Box (replaces radio-circle on mobile) */
.method-icon-box[b-e2ncxo9jhm] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f0f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
    font-size: 1.1rem;
    color: #6b7280;
}

.method-card.selected .method-icon-box[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #1a365d 0%, #2d5aa0 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.3);
}

.method-card.disabled .method-icon-box[b-e2ncxo9jhm] {
    background: #f3f4f6;
    color: #9ca3af;
}

/* Mobile Header - hidden on desktop */
.checkout-mobile-header[b-e2ncxo9jhm] {
    display: none;
}

/* Desktop title - shown on desktop, hidden on mobile */
.desktop-title[b-e2ncxo9jhm] {
    display: flex;
}

/* Product list toggle arrow */
.toggle-arrow[b-e2ncxo9jhm] {
    font-size: 0.9rem;
    color: #9ca3af;
    transition: transform 0.3s ease;
    margin-left: auto;
}

.toggle-arrow.expanded[b-e2ncxo9jhm] {
    transform: rotate(180deg);
}

/* Product list collapse */
.product-list.collapsed[b-e2ncxo9jhm] {
    display: none;
}

/* Products toggle cursor */
.products-toggle[b-e2ncxo9jhm] {
    cursor: pointer;
}

.products-toggle:hover[b-e2ncxo9jhm] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 8px 12px;
    margin: -8px -12px 12px;
}

/* ===============================================
   DELIVERY METHOD TABS (Premium Segmented Control)
   =============================================== */
.delivery-method-tabs[b-e2ncxo9jhm] {
    display: flex;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 16px;
    gap: 6px;
    margin-bottom: 24px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    width: 100%;
    max-width: 480px;
}

.method-tab[b-e2ncxo9jhm] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
}

.method-tab input[type="radio"][b-e2ncxo9jhm] {
    display: none;
}

.method-tab i[b-e2ncxo9jhm] {
    font-size: 1.15rem;
    transition: color 0.3s ease;
}

.method-tab:not(.selected):hover[b-e2ncxo9jhm] {
    color: #334155;
    background: rgba(255, 255, 255, 0.6);
}

.method-tab.selected[b-e2ncxo9jhm] {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}

.method-tab.selected i[b-e2ncxo9jhm] {
    color: #2563eb;
}

/* ===============================================
   ADDRESS CARD CONTAINER (desktop base)
   =============================================== */
.address-card-container[b-e2ncxo9jhm] {
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px 24px;
    background: white;
    transition: border-color 0.2s;
}

.address-card-container:hover[b-e2ncxo9jhm] {
    border-color: #cbd5e1;
}

.address-header-row[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.address-header-left[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.address-pin[b-e2ncxo9jhm] {
    color: #2563eb;
    font-size: 1.1rem;
}

.address-title[b-e2ncxo9jhm] {
    font-weight: 700;
    font-size: 1rem;
    color: #1a365d;
}

.address-default-badge[b-e2ncxo9jhm] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.address-body[b-e2ncxo9jhm] {
    padding-left: 28px;
}

.address-name-line[b-e2ncxo9jhm] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a365d;
    margin: 0 0 4px 0;
}

.address-detail-line[b-e2ncxo9jhm] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.6;
}

.btn-change-address[b-e2ncxo9jhm] {
    width: auto;
    margin-top: 16px;
    padding: 10px 20px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    color: #2563eb;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-change-address:hover[b-e2ncxo9jhm] {
    background: #eff6ff;
    border-color: #bfdbfe;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.btn-change-address i[b-e2ncxo9jhm] {
    font-size: 0.85rem;
}

/* ===============================================
   PRODUCT ITEM V2 (desktop base)
   =============================================== */
.product-item-v2[b-e2ncxo9jhm] {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid #f0f2f5;
    align-items: flex-start;
    transition: background 0.2s;
}

.product-item-v2:last-child[b-e2ncxo9jhm] {
    border-bottom: none;
}

.product-item-v2:hover[b-e2ncxo9jhm] {
    background: #fafcff;
    border-radius: 10px;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

.item-image-v2[b-e2ncxo9jhm] {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8f9fa;
    border: 1px solid #f0f0f0;
}

.item-image-v2 img[b-e2ncxo9jhm] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.item-info-v2[b-e2ncxo9jhm] {
    flex: 1;
    min-width: 0;
}

.item-name-v2[b-e2ncxo9jhm] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a365d;
    margin: 0 0 8px 0;
    line-height: 1.35;
}

.item-meta-row[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.item-discount-badge[b-e2ncxo9jhm] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #16a34a;
    background: #ecfdf5;
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.item-discount-badge i[b-e2ncxo9jhm] {
    font-size: 0.7rem;
    margin-right: 3px;
}

.item-price-row[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.item-qty-text[b-e2ncxo9jhm] {
    font-size: 0.85rem;
    color: #9ca3af;
    font-weight: 500;
}

.item-price-right[b-e2ncxo9jhm] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.item-original-price[b-e2ncxo9jhm] {
    font-size: 0.85rem;
    color: #9ca3af;
    text-decoration: line-through;
}

.item-final-price[b-e2ncxo9jhm] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a365d;
}

.modal-overlay[b-e2ncxo9jhm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-e2ncxo9jhm] {
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.address-modal[b-e2ncxo9jhm] {
    max-width: 640px;
    position: relative;
}

.modal-header[b-e2ncxo9jhm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    flex-shrink: 0;
}

.modal-header h3[b-e2ncxo9jhm] {
    margin: 0;
    color: #1a365d;
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-close[b-e2ncxo9jhm] {
    background: white;
    border: 1px solid #e5e7eb;
    font-size: 1rem;
    color: #6b7280;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 10px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.modal-close:hover[b-e2ncxo9jhm] {
    background: #f3f4f6;
    color: #1a365d;
    border-color: #d1d5db;
    transform: scale(1.05);
}

.modal-body[b-e2ncxo9jhm] {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.modal-body[b-e2ncxo9jhm]::-webkit-scrollbar {
    width: 6px;
}

.modal-body[b-e2ncxo9jhm]::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body[b-e2ncxo9jhm]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.modal-body[b-e2ncxo9jhm]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.address-form-modal[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 80px;
    /* Space for fixed footer */
}

.address-form-modal h4[b-e2ncxo9jhm] {
    margin: 0 0 8px;
    color: #1a365d;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.address-form-modal h4[b-e2ncxo9jhm]::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 2px;
}

/* Modal Footer - Fixed at Bottom */
.modal-footer-fixed[b-e2ncxo9jhm] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 28px;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.modal-footer-fixed .btn-cancel[b-e2ncxo9jhm] {
    padding: 12px 24px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    color: #6b7280;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.modal-footer-fixed .btn-cancel:hover[b-e2ncxo9jhm] {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

.modal-footer-fixed .btn-save[b-e2ncxo9jhm] {
    padding: 12px 24px;
    background: var(--primary-blue);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.3);
}

.modal-footer-fixed .btn-save:hover[b-e2ncxo9jhm] {
    background: var(--primary-blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(26, 54, 93, 0.4);
}

.modal-footer-fixed .btn-full[b-e2ncxo9jhm] {
    flex: 1;
}

/* Form Validation Styles */
.validation-summary[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
    border-radius: 12px;
    color: #dc2626;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.validation-summary i[b-e2ncxo9jhm] {
    font-size: 1.1rem;
}

/* Field error styles - high specificity to override form styles */
.address-form-modal .form-group.field-error input[b-e2ncxo9jhm],
.address-form-modal .form-group.field-error select[b-e2ncxo9jhm],
.form-group.field-error input[b-e2ncxo9jhm],
.form-group.field-error select[b-e2ncxo9jhm] {
    border: 2px solid #dc2626 !important;
    background: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.address-form-modal .form-group.field-error input:focus[b-e2ncxo9jhm],
.address-form-modal .form-group.field-error select:focus[b-e2ncxo9jhm],
.form-group.field-error input:focus[b-e2ncxo9jhm],
.form-group.field-error select:focus[b-e2ncxo9jhm] {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2) !important;
}

.address-form-modal .form-group.field-error label[b-e2ncxo9jhm],
.form-group.field-error label[b-e2ncxo9jhm] {
    color: #dc2626 !important;
}

/* Field valid styles */
.address-form-modal .form-group.field-valid input[b-e2ncxo9jhm],
.address-form-modal .form-group.field-valid select[b-e2ncxo9jhm],
.form-group.field-valid input[b-e2ncxo9jhm],
.form-group.field-valid select[b-e2ncxo9jhm] {
    border: 2px solid #22c55e !important;
}

.address-form-modal .form-group.field-valid input:focus[b-e2ncxo9jhm],
.address-form-modal .form-group.field-valid select:focus[b-e2ncxo9jhm],
.form-group.field-valid input:focus[b-e2ncxo9jhm],
.form-group.field-valid select:focus[b-e2ncxo9jhm] {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15) !important;
}

.field-error-message[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #dc2626;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 6px;
    animation: shake-b-e2ncxo9jhm 0.4s ease-in-out;
}

.field-error-message i[b-e2ncxo9jhm] {
    font-size: 0.85rem;
}

@keyframes shake-b-e2ncxo9jhm {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-4px);
    }

    40%,
    80% {
        transform: translateX(4px);
    }
}

/* Postal code lookup with error */
.postal-code-lookup.field-error[b-e2ncxo9jhm] {
    border-color: #dc2626 !important;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
}

.postal-code-lookup.field-error label[b-e2ncxo9jhm] {
    color: #dc2626 !important;
}

.postal-code-lookup.field-error .form-hint[b-e2ncxo9jhm] {
    color: #dc2626;
}

.postal-code-lookup.field-error input[b-e2ncxo9jhm] {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
}

/* Postal Code Lookup */
.postal-code-lookup[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border: 2px solid #22d3ee;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.postal-code-lookup[b-e2ncxo9jhm]::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-radius: 50%;
    opacity: 0.1;
}

.postal-code-lookup label[b-e2ncxo9jhm] {
    color: #0e7490 !important;
    font-weight: 700;
    font-size: 0.95rem;
}

.postal-input-wrapper[b-e2ncxo9jhm] {
    position: relative;
    display: flex;
    align-items: center;
}

.postal-input-wrapper input[b-e2ncxo9jhm] {
    padding-right: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    border: 2px solid #06b6d4 !important;
    background: white;
}

.postal-input-wrapper input:focus[b-e2ncxo9jhm] {
    border-color: #0891b2 !important;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.2) !important;
}

.postal-lookup-spinner[b-e2ncxo9jhm],
.postal-lookup-success[b-e2ncxo9jhm] {
    position: absolute;
    right: 16px;
    font-size: 1.1rem;
}

.postal-lookup-spinner[b-e2ncxo9jhm] {
    color: #0891b2;
}

.postal-lookup-success[b-e2ncxo9jhm] {
    color: #22c55e;
    background: white;
    padding: 4px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}

.postal-code-lookup .form-hint[b-e2ncxo9jhm] {
    color: #0e7490;
    font-weight: 500;
    margin-top: 10px;
}

/* Postal Code Error State */
.postal-code-lookup.field-error .postal-input-wrapper input[b-e2ncxo9jhm] {
    border: 2px solid #dc2626 !important;
    background: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.postal-code-lookup.field-error .postal-input-wrapper input:focus[b-e2ncxo9jhm] {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2) !important;
}

.address-list-modal[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
}

.address-list-modal .address-option[b-e2ncxo9jhm] {
    display: flex;
    gap: 16px;
    padding: 18px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.address-list-modal .address-option:hover[b-e2ncxo9jhm] {
    border-color: #93c5fd;
    background: linear-gradient(135deg, #f0f7ff 0%, #eff6ff 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.address-list-modal .address-option.selected[b-e2ncxo9jhm] {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.address-list-modal .address-radio[b-e2ncxo9jhm] {
    padding-top: 2px;
}

.address-list-modal .address-radio input[type="radio"][b-e2ncxo9jhm] {
    width: 20px;
    height: 20px;
    accent-color: #2563eb;
}

.address-list-modal .address-content[b-e2ncxo9jhm] {
    flex: 1;
}

.address-list-modal .address-top[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.address-list-modal .recipient-name[b-e2ncxo9jhm] {
    font-weight: 600;
    color: #1a365d;
    font-size: 1rem;
}

.address-list-modal .recipient-phone[b-e2ncxo9jhm] {
    color: #6b7280;
    font-size: 0.9rem;
}

.address-list-modal .default-badge[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.address-list-modal .address-text[b-e2ncxo9jhm] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.no-address-message[b-e2ncxo9jhm] {
    padding: 40px 20px;
    color: #6b7280;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-radius: 14px;
    border: 2px dashed #d1d5db;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.no-address-message i[b-e2ncxo9jhm] {
    font-size: 3rem;
    color: #9ca3af;
    margin-bottom: 16px;
    display: block;
}

.no-address-message p[b-e2ncxo9jhm] {
    margin: 0;
    font-size: 0.95rem;
}

.btn-add-address[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed #94a3b8;
    padding: 16px 24px;
    border-radius: 12px;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.25s ease;
    margin-top: 8px;
}

.btn-add-address:hover[b-e2ncxo9jhm] {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    transform: translateY(-2px);
}

.btn-add-address i[b-e2ncxo9jhm] {
    font-size: 1rem;
}

.btn-full[b-e2ncxo9jhm] {
    width: 100%;
}

/* Modern Form Styling */
.address-form-modal .form-group[b-e2ncxo9jhm] {
    margin-bottom: 0;
}

.address-form-modal .form-group label[b-e2ncxo9jhm] {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.address-form-modal .form-group input[b-e2ncxo9jhm],
.address-form-modal .form-group select[b-e2ncxo9jhm] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: white;
}

.address-form-modal .form-group input:focus[b-e2ncxo9jhm],
.address-form-modal .form-group select:focus[b-e2ncxo9jhm] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.address-form-modal .form-group input[b-e2ncxo9jhm]::placeholder {
    color: #9ca3af;
}

.address-form-modal .form-group select:disabled[b-e2ncxo9jhm] {
    background: #f3f4f6;
    cursor: not-allowed;
    color: #9ca3af;
}

.address-form-modal .form-hint[b-e2ncxo9jhm] {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 6px;
}

/* Delivery Address */
.delivery-address[b-e2ncxo9jhm] {
    margin-bottom: 24px;
}

.address-header[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.address-header strong[b-e2ncxo9jhm] {
    color: #1a365d;
}

.address-subtitle[b-e2ncxo9jhm] {
    color: #9ca3af;
    font-size: 0.9rem;
}

.address-info[b-e2ncxo9jhm] {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.contact-name[b-e2ncxo9jhm] {
    font-weight: 600;
    color: #374151;
}

.contact-phone[b-e2ncxo9jhm] {
    color: #6b7280;
}

.address-detail[b-e2ncxo9jhm] {
    color: #6b7280;
    margin: 8px 0;
}

.btn-link[b-e2ncxo9jhm] {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
}

.btn-link:hover[b-e2ncxo9jhm] {
    text-decoration: underline;
}

/* Address Form */
.address-form[b-e2ncxo9jhm] {
    margin-top: 20px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
}

.address-form h4[b-e2ncxo9jhm] {
    margin: 0 0 16px;
    color: #1a365d;
    font-size: 1rem;
}

/* Address Selector */
.address-selector[b-e2ncxo9jhm] {
    margin-top: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
}

.address-list[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.address-option[b-e2ncxo9jhm] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.address-option:hover[b-e2ncxo9jhm] {
    border-color: #93c5fd;
}

.address-option.selected[b-e2ncxo9jhm] {
    border-color: #1a365d;
    background: #f0f7ff;
}

.address-radio[b-e2ncxo9jhm] {
    padding-top: 2px;
}

.address-radio input[type="radio"][b-e2ncxo9jhm] {
    width: 20px;
    height: 20px;
    accent-color: #1a365d;
}

.address-content[b-e2ncxo9jhm] {
    flex: 1;
}

.address-top[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.recipient-name[b-e2ncxo9jhm] {
    font-weight: 600;
    color: #1a365d;
}

.recipient-phone[b-e2ncxo9jhm] {
    color: #6b7280;
}

.default-badge[b-e2ncxo9jhm] {
    background: #22c55e;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.address-text[b-e2ncxo9jhm] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

.no-address[b-e2ncxo9jhm] {
    color: #6b7280;
    text-align: center;
    padding: 24px;
}

.address-actions[b-e2ncxo9jhm] {
    margin-bottom: 16px;
}

.btn-add-address[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 2px dashed #d1d5db;
    padding: 12px 20px;
    border-radius: 8px;
    color: #1a365d;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: all 0.2s;
}

.btn-add-address:hover[b-e2ncxo9jhm] {
    border-color: #1a365d;
    background: #f0f7ff;
}

.btn-add-address span[b-e2ncxo9jhm] {
    font-size: 1.2rem;
    font-weight: 700;
}

.form-buttons[b-e2ncxo9jhm] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
}

.btn-cancel[b-e2ncxo9jhm] {
    padding: 10px 20px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    font-weight: 500;
}

.btn-cancel:hover[b-e2ncxo9jhm] {
    background: #f9fafb;
}

.btn-save[b-e2ncxo9jhm] {
    padding: 10px 20px;
    background: var(--primary-blue);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-weight: 500;
}

.btn-save:hover[b-e2ncxo9jhm] {
    background: #2d5aa0;
}

.selected-address[b-e2ncxo9jhm] {
    margin-top: 8px;
}

.form-row[b-e2ncxo9jhm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

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

.form-group input[b-e2ncxo9jhm],
.form-group select[b-e2ncxo9jhm] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
}

.form-group input:focus[b-e2ncxo9jhm],
.form-group select:focus[b-e2ncxo9jhm] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Delivery Methods */
.delivery-methods[b-e2ncxo9jhm] {
    margin-top: 24px;
}

.method-header[b-e2ncxo9jhm] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.method-header strong[b-e2ncxo9jhm] {
    color: #1a365d;
}

.method-link[b-e2ncxo9jhm] {
    color: #3b82f6;
    font-size: 0.9rem;
}

.method-options[b-e2ncxo9jhm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.method-option[b-e2ncxo9jhm] {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.method-option:hover[b-e2ncxo9jhm] {
    border-color: #93c5fd;
}

.method-option.selected[b-e2ncxo9jhm] {
    border-color: #1a365d;
    background: #f0f7ff;
}

.method-option input[b-e2ncxo9jhm] {
    display: none;
}

.method-content[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.method-icon[b-e2ncxo9jhm] {
    font-size: 1.5rem;
}

.method-name[b-e2ncxo9jhm] {
    font-weight: 500;
    color: #374151;
}

.method-price[b-e2ncxo9jhm] {
    color: var(--primary-blue);
    font-size: 0.85rem;
}

/* Section Header with Icon */
.section-header-row[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.section-header-icon[b-e2ncxo9jhm] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e6f2ff 0%, #f0f7ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-header-icon i[b-e2ncxo9jhm] {
    font-size: 1.1rem;
    color: #0066cc;
}

.section-header-row h2[b-e2ncxo9jhm] {
    flex: 1;
    margin: 0;
}

.item-count-badge[b-e2ncxo9jhm] {
    background: #f0f0f0;
    color: #666;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Product List - Modern Card Style */
.product-list[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-item[b-e2ncxo9jhm] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    background: linear-gradient(to right, #fafcff, #fff);
    border-radius: 14px;
    border: 1px solid #e8f0f8;
    transition: all 0.2s ease;
    position: relative;
}

.product-item:hover[b-e2ncxo9jhm] {
    border-color: #cce0f5;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.06);
}

.product-checkbox[b-e2ncxo9jhm] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
}

.product-checkbox i[b-e2ncxo9jhm] {
    color: white;
    font-size: 0.7rem;
}

.product-checkbox.free-check[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.product-image[b-e2ncxo9jhm] {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: #f5f5f5;
}

.product-image img[b-e2ncxo9jhm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qty-badge[b-e2ncxo9jhm] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    border: 2px solid white;
}

.qty-badge.free-qty[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.product-details[b-e2ncxo9jhm] {
    flex: 1;
    min-width: 0;
}

.product-details h3[b-e2ncxo9jhm] {
    font-size: 0.95rem;
    color: #1a365d;
    margin: 0 0 6px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.variant-tag[b-e2ncxo9jhm] {
    display: inline-block;
    font-size: 0.75rem;
    color: #666;
    background: #f0f0f0;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.promo-tags-row[b-e2ncxo9jhm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.checkout-promo-tag[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
    color: #be123c;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid #fecdd3;
    white-space: nowrap;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-promo-tag i[b-e2ncxo9jhm] {
    font-size: 0.6rem;
    color: #e11d48;
    flex-shrink: 0;
}

.product-price-row[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.item-price[b-e2ncxo9jhm] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0066cc;
}

.original-price[b-e2ncxo9jhm] {
    font-size: 0.8rem;
    color: #999;
    text-decoration: line-through;
}

/* Free Items Divider */
.free-items-divider[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    margin-top: 8px;
}

.free-items-divider[b-e2ncxo9jhm]::before,
.free-items-divider[b-e2ncxo9jhm]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #22c55e, transparent);
}

.free-items-divider span[b-e2ncxo9jhm] {
    color: #22c55e;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Free Item Styling */
.product-item.free-item[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
}

.product-item.free-item:hover[b-e2ncxo9jhm] {
    border-color: #86efac;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1);
}

.product-item.free-item .product-details h3[b-e2ncxo9jhm] {
    color: #166534;
}

.free-price-tag[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Note Section */
.note-section[b-e2ncxo9jhm] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.note-section label[b-e2ncxo9jhm] {
    color: #6b7280;
    white-space: nowrap;
    font-weight: 500;
}

.note-section input[b-e2ncxo9jhm] {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.note-section input:focus[b-e2ncxo9jhm] {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Payment Section */
.discount-section[b-e2ncxo9jhm] {
    margin-bottom: 24px;
}

.discount-section label[b-e2ncxo9jhm] {
    display: block;
    font-weight: 500;
    color: #1a365d;
    margin-bottom: 12px;
}

.discount-applied[b-e2ncxo9jhm] {
    background: #f9fafb;
    padding: 16px;
    border-radius: 12px;
}

.discount-badge[b-e2ncxo9jhm] {
    background: #1a365d;
    color: white;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.discount-tag[b-e2ncxo9jhm] {
    background: #22c55e;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 600;
}

.discount-expiry[b-e2ncxo9jhm] {
    margin-left: auto;
    opacity: 0.8;
    font-size: 0.85rem;
}

.discount-input[b-e2ncxo9jhm] {
    display: flex;
    gap: 12px;
}

.discount-input input[b-e2ncxo9jhm] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}

.btn-apply[b-e2ncxo9jhm] {
    background: #1a365d;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
}

.discount-error[b-e2ncxo9jhm] {
    color: #dc2626;
    font-size: 0.85rem;
    display: block;
    margin-top: 8px;
}

/* Promotion Enhancements */
.discount-badge[b-e2ncxo9jhm] {
    flex-wrap: wrap;
}

.discount-value[b-e2ncxo9jhm] {
    background: #22c55e;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
}

.btn-remove[b-e2ncxo9jhm] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-remove:hover[b-e2ncxo9jhm] {
    background: rgba(255, 255, 255, 0.3);
}

.free-items-notice[b-e2ncxo9jhm],
.bonus-points-notice[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 8px;
    color: white;
    font-weight: 500;
}

.free-icon[b-e2ncxo9jhm],
.points-icon[b-e2ncxo9jhm] {
    font-size: 1.2rem;
}

.bonus-points-notice[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Try Different Code */
.try-different-code[b-e2ncxo9jhm] {
    margin-top: 12px;
    text-align: center;
}

.try-different-code .btn-link[b-e2ncxo9jhm] {
    padding: 8px 16px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.try-different-code .btn-link:hover[b-e2ncxo9jhm] {
    background: rgba(255, 255, 255, 0.2);
}

/* Promotions List Section */
.promotions-list-section[b-e2ncxo9jhm] {
    margin-bottom: 24px;
}

.promotions-list-section>label[b-e2ncxo9jhm] {
    display: block;
    font-weight: 500;
    color: #1a365d;
    margin-bottom: 12px;
}

.promo-hint[b-e2ncxo9jhm] {
    font-size: 0.8rem;
    font-weight: 400;
    color: #9ca3af;
}

.promotions-list[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkout-promo-card[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.checkout-promo-card:hover[b-e2ncxo9jhm] {
    background: #f0f7ff;
    border-color: #93c5fd;
}

.checkout-promo-card.selected[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #e0f7fa 0%, #e3f2fd 100%);
    border-color: #1a365d;
}

.checkout-promo-card .promo-radio[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
}

.checkout-promo-card .promo-radio input[type="radio"][b-e2ncxo9jhm] {
    width: 18px;
    height: 18px;
    accent-color: #1a365d;
    cursor: pointer;
}

.checkout-promo-card .promo-details[b-e2ncxo9jhm] {
    flex: 1;
    min-width: 0;
}

.checkout-promo-card .promo-code[b-e2ncxo9jhm] {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1a365d;
}

.checkout-promo-card .promo-name[b-e2ncxo9jhm] {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-promo-card .promo-discount-value[b-e2ncxo9jhm] {
    font-weight: 700;
    font-size: 1rem;
    color: #22c55e;
}

/* Stackable Promo Styles */
.checkout-promo-card .promo-checkbox[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
}

.checkout-promo-card .promo-checkbox input[type="checkbox"][b-e2ncxo9jhm],
.checkout-promo-card .promo-checkbox input[type="radio"][b-e2ncxo9jhm] {
    width: 18px;
    height: 18px;
    accent-color: #1a365d;
    cursor: pointer;
}

.checkout-promo-card.stackable[b-e2ncxo9jhm] {
    border-left: 3px solid #22c55e;
}

.checkout-promo-card.stackable.selected[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #22c55e;
}

.stackable-badge[b-e2ncxo9jhm] {
    margin-left: 5px;
    font-size: 0.7rem;
    color: #22c55e;
}

.stacking-summary[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

.stacking-icon[b-e2ncxo9jhm] {
    font-size: 1.1rem;
}

.summary-row.free-items[b-e2ncxo9jhm] {
    color: #22c55e;
    font-weight: 500;
}

.summary-row.free-items .free-value-text[b-e2ncxo9jhm] {
    color: #22c55e;
    font-weight: 600;
}

/* Payment Methods */
.payment-methods[b-e2ncxo9jhm] {
    margin-bottom: 24px;
}

.payment-header[b-e2ncxo9jhm] {
    margin-bottom: 16px;
}

.payment-header strong[b-e2ncxo9jhm] {
    display: block;
    color: #1a365d;
    margin-bottom: 4px;
}

.payment-note[b-e2ncxo9jhm] {
    color: #9ca3af;
    font-size: 0.85rem;
}

.payment-options[b-e2ncxo9jhm] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.payment-option[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d1d5db;
    padding: 12px 20px;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-option:hover[b-e2ncxo9jhm] {
    border-color: #93c5fd;
}

.payment-option.selected[b-e2ncxo9jhm] {
    background: #1a365d;
    border-color: #1a365d;
    color: white;
}

.payment-option input[b-e2ncxo9jhm] {
    accent-color: white;
}

/* Order Summary */
.order-summary[b-e2ncxo9jhm] {
    border-top: 1px solid #e5e7eb;
    padding-top: 24px;
    margin-bottom: 24px;
}

.summary-row[b-e2ncxo9jhm] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #6b7280;
}

.summary-row.discount[b-e2ncxo9jhm] {
    color: #22c55e;
}

.summary-row.total[b-e2ncxo9jhm] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a365d;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.total-amount[b-e2ncxo9jhm] {
    color: #dc2626;
    font-size: 1.5rem;
}

/* Buttons */
.btn-primary[b-e2ncxo9jhm] {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #2d5aa0 100%);
    color: white;
    padding: 14px 36px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.2);
}

.btn-primary:hover[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #2d5aa0 0%, #1a365d 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(26, 54, 93, 0.3);
}

.btn-checkout[b-e2ncxo9jhm] {
    width: auto;
    margin-left: auto;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #2d5aa0 100%);
    color: white;
    border: none;
    padding: 18px 72px;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(26, 54, 93, 0.25);
}

.btn-checkout.desktop-only[b-e2ncxo9jhm] {
    display: flex;
}

.btn-checkout:hover:not(:disabled)[b-e2ncxo9jhm] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(26, 54, 93, 0.35);
    background: linear-gradient(135deg, #2d5aa0 0%, #1a365d 100%);
}

.btn-checkout:disabled[b-e2ncxo9jhm] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ===============================================
   MOBILE STICKY BOTTOM BAR
   =============================================== */

.checkout-bottom-bar[b-e2ncxo9jhm] {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 14px 16px;
    padding-bottom: max(14px, env(safe-area-inset-bottom) + 14px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    border-radius: 20px 20px 0 0;
    flex-direction: column;
    gap: 12px;
}

.bottom-bar-summary[b-e2ncxo9jhm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.bottom-total-label[b-e2ncxo9jhm] {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.bottom-total-price[b-e2ncxo9jhm] {
    font-size: 1.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1a365d 0%, #2d5aa0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bottom-bar-actions[b-e2ncxo9jhm] {
    display: flex;
    gap: 10px;
}

.btn-edit-address-mobile[b-e2ncxo9jhm] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: #f5f5f5;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    color: #333;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit-address-mobile:hover[b-e2ncxo9jhm] {
    background: #eee;
    border-color: #ddd;
}

.btn-edit-address-mobile i[b-e2ncxo9jhm] {
    font-size: 1rem;
    color: #0066cc;
}

.btn-checkout-mobile[b-e2ncxo9jhm] {
    flex: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #1a365d 0%, #2d5aa0 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.3);
}

.btn-checkout-mobile:hover:not(:disabled)[b-e2ncxo9jhm] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(26, 54, 93, 0.4);
}

.btn-checkout-mobile:disabled[b-e2ncxo9jhm] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-checkout-mobile i[b-e2ncxo9jhm] {
    font-size: 1rem;
}

/* Checkout Button Container - adds proper spacing */
.order-summary-section+.error-message[b-e2ncxo9jhm],
.order-summary-section~.btn-checkout[b-e2ncxo9jhm] {
    margin-top: 24px;
}

.error-message[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    padding: 14px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    border: 2px solid #fca5a5;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .checkout-page[b-e2ncxo9jhm] {
        padding-bottom: 150px;
        /* Space for sticky bottom bar */
    }

    .checkout-section[b-e2ncxo9jhm] {
        padding: 20px;
    }

    /* Show mobile bottom bar, hide desktop button */
    .checkout-bottom-bar[b-e2ncxo9jhm] {
        display: flex;
    }

    .btn-checkout.desktop-only[b-e2ncxo9jhm] {
        display: none;
    }

    /* Delivery Section Responsive */
    .delivery-section .delivery-row[b-e2ncxo9jhm] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .delivery-section .delivery-row .btn-edit-address[b-e2ncxo9jhm] {
        justify-self: flex-start;
    }

    .shipping-method-row[b-e2ncxo9jhm] {
        flex-direction: column !important;
        gap: 16px;
    }

    .shipping-method-row .delivery-label[b-e2ncxo9jhm] {
        min-width: unset;
    }

    .method-options-horizontal[b-e2ncxo9jhm] {
        flex-direction: column;
        width: 100%;
    }

    .method-card[b-e2ncxo9jhm] {
        width: 100%;
        min-width: unset;
        justify-content: flex-start;
    }

    .modal-content[b-e2ncxo9jhm] {
        margin: 10px;
        max-height: 90vh;
    }

    .method-options[b-e2ncxo9jhm] {
        grid-template-columns: 1fr;
    }

    /* Products Section Mobile */
    .section-header-row[b-e2ncxo9jhm] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .section-header-icon[b-e2ncxo9jhm] {
        width: 36px;
        height: 36px;
    }

    .section-header-icon i[b-e2ncxo9jhm] {
        font-size: 1rem;
    }

    .section-header-row h2[b-e2ncxo9jhm] {
        font-size: 1.1rem;
    }

    .item-count-badge[b-e2ncxo9jhm] {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .product-item[b-e2ncxo9jhm] {
        padding: 14px;
        gap: 12px;
    }

    .product-checkbox[b-e2ncxo9jhm] {
        width: 22px;
        height: 22px;
    }

    .product-checkbox i[b-e2ncxo9jhm] {
        font-size: 0.6rem;
    }

    .product-image[b-e2ncxo9jhm] {
        width: 64px;
        height: 64px;
    }

    .qty-badge[b-e2ncxo9jhm] {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .product-details h3[b-e2ncxo9jhm] {
        font-size: 0.88rem;
    }

    .variant-tag[b-e2ncxo9jhm] {
        font-size: 0.7rem;
        padding: 2px 8px;
    }

    .item-price[b-e2ncxo9jhm] {
        font-size: 0.95rem;
    }

    .free-items-divider[b-e2ncxo9jhm] {
        padding: 10px 0;
    }

    .free-items-divider span[b-e2ncxo9jhm] {
        font-size: 0.8rem;
    }

    .form-row[b-e2ncxo9jhm] {
        grid-template-columns: 1fr;
    }

    .payment-options[b-e2ncxo9jhm] {
        flex-direction: column;
    }
}

/* Guest Checkout Form */
.guest-checkout-form[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #f0f7ff 0%, #f5f3ff 100%);
    border: 2px solid #e0e7ff;
    border-radius: 16px;
    padding: 24px;
    margin-top: 16px;
}

.guest-checkout-form .form-group label[b-e2ncxo9jhm] {
    color: #1a365d;
    font-weight: 600;
}

.guest-checkout-form .form-group input[b-e2ncxo9jhm],
.guest-checkout-form .form-group select[b-e2ncxo9jhm] {
    border: 2px solid #d1d5db;
    transition: all 0.2s;
}

.guest-checkout-form .form-group input:focus[b-e2ncxo9jhm],
.guest-checkout-form .form-group select:focus[b-e2ncxo9jhm] {
    border-color: #1a365d;
    box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);
}

.form-hint[b-e2ncxo9jhm] {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 4px;
}

.guest-checkout-form .form-group select:disabled[b-e2ncxo9jhm] {
    background: #f3f4f6;
    cursor: not-allowed;
}

/* =====================================================
   NEW PAYMENT SECTION STYLES
   ===================================================== */

.payment-section h2[b-e2ncxo9jhm] {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Payment Row Layout */
.payment-row[b-e2ncxo9jhm] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}

.payment-row:last-of-type[b-e2ncxo9jhm] {
    border-bottom: none;
    padding-bottom: 8px;
}

.payment-row-label[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payment-row-label strong[b-e2ncxo9jhm] {
    color: #1a365d;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-row-label .label-hint[b-e2ncxo9jhm] {
    color: #9ca3af;
    font-size: 0.8rem;
    line-height: 1.4;
}

.payment-row-content[b-e2ncxo9jhm] {
    flex: 1;
}

/* Promo Card Applied */
.promo-card-applied[b-e2ncxo9jhm] {
    position: relative;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #93c5fd;
    border-radius: 12px;
    padding: 14px 44px 14px 18px;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.promo-card-title[b-e2ncxo9jhm] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1d4ed8;
}

.promo-card-description[b-e2ncxo9jhm] {
    font-size: 0.8rem;
    color: #2563eb;
}

.promo-card-expiry[b-e2ncxo9jhm] {
    font-size: 0.75rem;
    color: #6b7280;
}

.promo-card-remove[b-e2ncxo9jhm] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    cursor: pointer;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 0.75rem;
}

.promo-card-remove:hover[b-e2ncxo9jhm] {
    background: rgba(59, 130, 246, 0.2);
}

/* Promo Bonus Notices */
.promo-bonus-notice[b-e2ncxo9jhm] {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-radius: 6px;
    color: #166534;
    font-weight: 500;
    font-size: 0.8rem;
}

.promo-bonus-notice.points[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    margin-left: 6px;
}

.promo-bonus-notice i[b-e2ncxo9jhm] {
    font-size: 0.8rem;
}

/* Try Another Code */
.promo-try-another[b-e2ncxo9jhm] {
    margin-top: 8px;
}

.btn-link-text[b-e2ncxo9jhm] {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-link-text:hover[b-e2ncxo9jhm] {
    text-decoration: underline;
}

/* Promo Input Row */
.promo-input-row[b-e2ncxo9jhm] {
    display: flex;
    gap: 10px;
    margin-top: 0;
}

.promo-input-row input[b-e2ncxo9jhm] {
    flex: 1;
    max-width: 260px;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.promo-input-row input:focus[b-e2ncxo9jhm] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.btn-apply-code[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #1a365d 0%, #2d5aa0 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(26, 54, 93, 0.2);
}

.btn-apply-code:hover[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #2d5aa0 0%, #1a365d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.25);
}

.promo-error[b-e2ncxo9jhm] {
    display: block;
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 8px;
}

/* Promotions Grid */
.promotions-grid[b-e2ncxo9jhm] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.promo-select-card[b-e2ncxo9jhm] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    min-width: 200px;
    max-width: 240px;
}

.promo-select-card:hover[b-e2ncxo9jhm] {
    border-color: #93c5fd;
    background: var(--primary-blue-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.promo-select-card.selected[b-e2ncxo9jhm] {
    border-color: #2563eb;
    background: var(--primary-blue-light);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.promo-select-check[b-e2ncxo9jhm] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.promo-select-check i[b-e2ncxo9jhm] {
    font-size: 18px;
    color: #d1d5db;
    transition: all 0.15s;
}

/* Selected state for checkbox */
.promo-select-card.selected .promo-select-check.checkbox i[b-e2ncxo9jhm] {
    color: #2563eb;
}

/* Selected state for radio */
.promo-select-card.selected .promo-select-check.radio i[b-e2ncxo9jhm] {
    color: #2563eb;
}

.promo-select-info[b-e2ncxo9jhm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.promo-select-code[b-e2ncxo9jhm] {
    font-size: 0.65rem;
    color: #9ca3af;
    font-weight: 400;
}

.promo-select-name[b-e2ncxo9jhm] {
    font-weight: 600;
    color: #1a365d;
    font-size: 0.8rem;
    line-height: 1.2;
}

.promo-select-header[b-e2ncxo9jhm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.promo-select-value[b-e2ncxo9jhm] {
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.promo-select-value span[b-e2ncxo9jhm] {
    color: #059669;
}

.promo-select-value .gift-badge[b-e2ncxo9jhm] {
    background: #fef3c7;
    color: #d97706;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid #fcd34d;
}

.promo-select-value .promo-badge[b-e2ncxo9jhm] {
    background: #e0f2fe;
    color: #0284c7;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid #7dd3fc;
}

/* Stackable coupon styles */
.promo-select-card.stackable[b-e2ncxo9jhm] {
    border-style: dashed;
}

.promo-select-card.stackable.selected[b-e2ncxo9jhm] {
    border-style: solid;
}

.promo-stackable-badge[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: #8b5cf6;
    background: #f3e8ff;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    margin-top: 2px;
}

.promo-stackable-badge i[b-e2ncxo9jhm] {
    font-size: 0.6rem;
}

.promo-stacking-total[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-radius: 6px;
    color: #166534;
    font-weight: 600;
    font-size: 0.8rem;
}

.promo-coupon-meta[b-e2ncxo9jhm] {
    font-size: 0.6rem;
    color: #9ca3af;
    font-weight: 400;
    display: block;
    margin-top: 2px;
}

.promo-coupon-meta.not-met[b-e2ncxo9jhm] {
    color: #ef4444;
    font-weight: 500;
}

/* Payment Method Options */
.payment-method-options[b-e2ncxo9jhm] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.payment-method-card[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid #e5e7eb;
    padding: 14px 22px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.payment-method-card:hover[b-e2ncxo9jhm] {
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.payment-method-card.selected[b-e2ncxo9jhm] {
    border-color: #2563eb;
    background: var(--primary-blue-light);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.payment-method-card input[type="radio"][b-e2ncxo9jhm] {
    display: none;
}

.payment-method-check[b-e2ncxo9jhm] {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.payment-method-card.selected .payment-method-check[b-e2ncxo9jhm] {
    background: #2563eb;
    border-color: #2563eb;
}

.payment-method-check i[b-e2ncxo9jhm] {
    font-size: 10px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
}

.payment-method-card.selected .payment-method-check i[b-e2ncxo9jhm] {
    opacity: 1;
}

.payment-method-name[b-e2ncxo9jhm] {
    font-weight: 500;
    color: #374151;
    font-size: 0.95rem;
}

.payment-method-card.selected .payment-method-name[b-e2ncxo9jhm] {
    color: #1d4ed8;
}

/* Order Summary Section */
.order-summary-section[b-e2ncxo9jhm] {
    border-top: 2px solid #e5e7eb;
    padding-top: 24px;
    margin-top: 16px;
}

.summary-line[b-e2ncxo9jhm] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 32px;
    margin-bottom: 12px;
    padding: 0;
}

.summary-line .summary-label[b-e2ncxo9jhm] {
    color: #6b7280;
    font-size: 0.95rem;
    width: 160px;
    text-align: right;
    flex-shrink: 0;
}

.summary-line .summary-value[b-e2ncxo9jhm] {
    color: #1a365d;
    font-size: 0.95rem;
    width: 140px;
    text-align: right;
    font-weight: 600;
    flex-shrink: 0;
}

.summary-line.discount .summary-label[b-e2ncxo9jhm],
.summary-line.discount .summary-value[b-e2ncxo9jhm] {
    color: #16a34a;
    font-weight: 600;
}

.summary-line.discount-detail[b-e2ncxo9jhm] {
    margin-bottom: 6px;
}

.summary-line.discount-detail .summary-label[b-e2ncxo9jhm] {
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.summary-line.discount-detail .summary-label i[b-e2ncxo9jhm] {
    color: #f59e0b;
    font-size: 0.75rem;
}

.summary-line.discount-detail .summary-value[b-e2ncxo9jhm] {
    color: #16a34a;
    font-size: 0.85rem;
    font-weight: 500;
}

.summary-line.free-items .summary-label[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: #16a34a;
}

.summary-line.free-items .summary-label i[b-e2ncxo9jhm] {
    color: #16a34a;
}

.summary-line.free-items .summary-value.free[b-e2ncxo9jhm] {
    color: #16a34a;
}

.summary-line.total[b-e2ncxo9jhm] {
    padding-top: 16px;
    border-top: 2px dashed #e5e7eb;
    margin-top: 16px;
    margin-bottom: 8px;
}

.summary-line.total .summary-label[b-e2ncxo9jhm] {
    font-weight: 700;
    color: #1a365d;
    font-size: 1.1rem;
}

.summary-line.total .summary-value.total-amount[b-e2ncxo9jhm] {
    font-weight: 800;
    font-size: 1.75rem;
    color: #dc2626;
}

/* Responsive for Payment Section */
@media (max-width: 768px) {
    .payment-row[b-e2ncxo9jhm] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .payment-method-options[b-e2ncxo9jhm] {
        flex-direction: column;
    }

    .payment-method-card[b-e2ncxo9jhm] {
        width: 100%;
        justify-content: flex-start;
    }

    .promo-input-row[b-e2ncxo9jhm] {
        flex-direction: column;
    }

    .promo-input-row input[b-e2ncxo9jhm] {
        max-width: unset;
    }

    .summary-line[b-e2ncxo9jhm] {
        justify-content: space-between;
        gap: 16px;
    }

    .summary-line .summary-label[b-e2ncxo9jhm] {
        min-width: unset;
        text-align: left;
    }

    .summary-line .summary-value[b-e2ncxo9jhm] {
        min-width: unset;
    }
}

/* Free Shipping Styles */
.method-price.free-shipping-price[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.method-price.free-shipping-price .original-price[b-e2ncxo9jhm] {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 0.8rem;
}

.method-price.free-shipping-price .free-label[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #16a34a;
    font-weight: 700;
    font-size: 0.9rem;
}

.method-price.free-shipping-price .free-label i[b-e2ncxo9jhm] {
    font-size: 0.85rem;
}

/* Order Summary Free Shipping */
/* Order Summary Free Shipping */

.summary-line.free-shipping .summary-label[b-e2ncxo9jhm] {
    color: #16a34a;
    font-weight: 600;
}

.summary-value.free-shipping-value[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.summary-value.free-shipping-value .original-shipping[b-e2ncxo9jhm] {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 0.85rem;
}

.summary-value.free-shipping-value .free-shipping-label[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #16a34a;
    font-weight: 700;
    font-size: 0.95rem;
}

.summary-value.free-shipping-value .free-shipping-label i[b-e2ncxo9jhm] {
    font-size: 0.9rem;
}

/* Free shipping promotion card highlight */
.promo-select-card.free-shipping[b-e2ncxo9jhm] {
    border-color: #16a34a;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.promo-select-card.free-shipping.selected[b-e2ncxo9jhm] {
    border-color: #16a34a;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.free-ship-badge[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
}

.free-ship-badge i[b-e2ncxo9jhm] {
    font-size: 0.85rem;
}

/* Disabled Method Card (Smart Locker) */
.method-card.disabled[b-e2ncxo9jhm] {
    background: #f9fafb;
    border-color: #e5e7eb;
    cursor: not-allowed;
    opacity: 0.7;
}

.method-card.disabled:hover[b-e2ncxo9jhm] {
    border-color: #e5e7eb;
    transform: none;
}

.method-card.disabled .radio-circle[b-e2ncxo9jhm] {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.method-card.disabled .method-name[b-e2ncxo9jhm] {
    color: #9ca3af;
}

.method-card.disabled .method-price.unavailable[b-e2ncxo9jhm] {
    color: #9ca3af;
    font-style: italic;
    font-weight: 400;
}

/* Time Slot Selection Row */
.time-slot-row[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #f0f7ff 0%, #eff6ff 100%);
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 16px 0 0;
    border: 2px solid #bfdbfe;
}

.time-slot-content[b-e2ncxo9jhm] {
    padding-top: 12px;
}

.loading-slots[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #2563eb;
    padding: 20px;
    justify-content: center;
}

.loading-slots i[b-e2ncxo9jhm] {
    font-size: 1.2rem;
}

.no-slots-message[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #6b7280;
    padding: 20px;
    justify-content: center;
    background: #f9fafb;
    border-radius: 10px;
}

.no-slots-message i[b-e2ncxo9jhm] {
    font-size: 1.5rem;
    color: #9ca3af;
}

/* Date Selector */
.date-selector[b-e2ncxo9jhm] {
    margin-bottom: 20px;
}

.date-selector>label[b-e2ncxo9jhm] {
    display: block;
    font-weight: 600;
    color: #1a365d;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.date-options[b-e2ncxo9jhm] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.date-option[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 70px;
}

.date-option:hover[b-e2ncxo9jhm] {
    border-color: #93c5fd;
    background: #f8fafc;
}

.date-option.selected[b-e2ncxo9jhm] {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.date-option .date-day[b-e2ncxo9jhm] {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 500;
}

.date-option .date-num[b-e2ncxo9jhm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a365d;
    line-height: 1.2;
}

.date-option .date-month[b-e2ncxo9jhm] {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.date-option.selected .date-day[b-e2ncxo9jhm],
.date-option.selected .date-month[b-e2ncxo9jhm] {
    color: #2563eb;
}

.date-option.selected .date-num[b-e2ncxo9jhm] {
    color: #1a365d;
}

/* Time Slot Selector */
.time-slot-selector>label[b-e2ncxo9jhm] {
    display: block;
    font-weight: 600;
    color: #1a365d;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.time-slot-options[b-e2ncxo9jhm] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.time-slot-option[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 130px;
    position: relative;
}

.time-slot-option:hover:not(.full)[b-e2ncxo9jhm] {
    border-color: #93c5fd;
    background: #f8fafc;
}

.time-slot-option.selected[b-e2ncxo9jhm] {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.time-slot-option.full[b-e2ncxo9jhm] {
    background: #f9fafb;
    border-color: #e5e7eb;
    cursor: not-allowed;
    opacity: 0.6;
}

.time-slot-option .slot-time[b-e2ncxo9jhm] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a365d;
    margin-bottom: 4px;
}

.time-slot-option .slot-name[b-e2ncxo9jhm] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 8px;
}

.time-slot-option .slot-status[b-e2ncxo9jhm] {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.time-slot-option .slot-status.available[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #16a34a;
}

.time-slot-option .slot-status.full[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
}

.time-slot-option.selected .slot-time[b-e2ncxo9jhm] {
    color: #1a365d;
}

.time-slot-option.selected .slot-name[b-e2ncxo9jhm] {
    color: #2563eb;
}

/* Out of Service Area Notice — Vibrant Gradient Border Card */
.service-area-notice[b-e2ncxo9jhm] {
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #0066cc 0%, #3b82f6 100%) border-box !important;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 16px 0 0;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.08);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    grid-template-columns: 1fr !important;
}

.service-area-notice:hover[b-e2ncxo9jhm] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.15);
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #0052a3 0%, #2563eb 100%) border-box !important;
}

.service-area-card[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
}

.service-area-title[b-e2ncxo9jhm] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a365d;
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-area-title i[b-e2ncxo9jhm] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e6f2ff 0%, #dbeafe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #0066cc;
    flex-shrink: 0;
}

.service-area-desc[b-e2ncxo9jhm] {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.5;
    padding-left: 38px;
}

.service-area-calculating[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    margin-left: 38px;
    padding: 4px 12px;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #2563eb;
    width: fit-content;
}

.service-area-calculating i[b-e2ncxo9jhm] {
    font-size: 0.8rem;
    color: #3b82f6;
}

/* Mobile Responsive for Time Slots */
@media (max-width: 640px) {
    .date-options[b-e2ncxo9jhm] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .date-option[b-e2ncxo9jhm] {
        padding: 10px 8px;
        min-width: unset;
    }

    .date-option .date-num[b-e2ncxo9jhm] {
        font-size: 1.2rem;
    }

    .time-slot-options[b-e2ncxo9jhm] {
        flex-direction: column;
    }

    .time-slot-option[b-e2ncxo9jhm] {
        min-width: unset;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        padding: 14px 16px;
    }

    .time-slot-option .slot-time[b-e2ncxo9jhm] {
        margin-bottom: 0;
    }

    .time-slot-option .slot-name[b-e2ncxo9jhm] {
        margin-bottom: 0;
    }

    .time-slot-row[b-e2ncxo9jhm] {
        margin: 12px -16px 0;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .service-area-notice[b-e2ncxo9jhm] {
        margin: 12px -16px 0;
        border-radius: 0 !important;
        border: 2px solid transparent !important;
    }
}

/* ===============================================
   LOYALTY POINTS SECTION - Enhanced UI
   =============================================== */

.points-info-grid[b-e2ncxo9jhm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.points-earn-card[b-e2ncxo9jhm],
.points-balance-card[b-e2ncxo9jhm] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    border-radius: 18px;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.points-earn-card[b-e2ncxo9jhm] {
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #10b981 0%, #6ee7b7 100%) border-box;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.08);
}

.points-earn-card:hover[b-e2ncxo9jhm] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.15);
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #059669 0%, #34d399 100%) border-box;
}

.points-balance-card[b-e2ncxo9jhm] {
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #f59e0b 0%, #fcd34d 100%) border-box;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.08);
}

.points-balance-card:hover[b-e2ncxo9jhm] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 40px rgba(245, 158, 11, 0.15);
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #d97706 0%, #fbbf24 100%) border-box;
}

.points-icon[b-e2ncxo9jhm] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.points-icon.earn[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.points-icon.balance[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.points-details[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.points-number[b-e2ncxo9jhm] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a365d;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.points-earn-card .points-number[b-e2ncxo9jhm] {
    color: #059669;
}

.points-balance-card .points-number[b-e2ncxo9jhm] {
    color: #d97706;
}

.points-label[b-e2ncxo9jhm] {
    font-size: 0.82rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.points-hint[b-e2ncxo9jhm],
.points-value[b-e2ncxo9jhm] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
}

.points-value[b-e2ncxo9jhm] {
    color: #d97706;
    font-weight: 600;
    background: rgba(251, 191, 36, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
}

/* Campaign Active State */
.points-earn-card.campaign-active[b-e2ncxo9jhm] {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.25);
    animation: campaign-pulse-b-e2ncxo9jhm 2s ease-in-out infinite;
}

@keyframes campaign-pulse-b-e2ncxo9jhm {

    0%,
    100% {
        box-shadow: 0 4px 16px rgba(251, 191, 36, 0.25);
    }

    50% {
        box-shadow: 0 6px 24px rgba(251, 191, 36, 0.35);
    }
}

.campaign-badge[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.campaign-badge i[b-e2ncxo9jhm] {
    font-size: 0.65rem;
}

.campaign-hint[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 20px;
    border: 1px dashed #d1d5db;
}

.campaign-hint i[b-e2ncxo9jhm] {
    color: #f59e0b;
    font-size: 0.7rem;
}

/* Points Breakdown (base + bonus) */
.points-breakdown[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    font-size: 0.75rem;
}

.points-breakdown .base-points[b-e2ncxo9jhm] {
    color: #6b7280;
}

.points-breakdown .bonus-points[b-e2ncxo9jhm] {
    color: #059669;
    font-weight: 600;
}

/* Enhanced Campaign Badge */
.campaign-badge-enhanced[b-e2ncxo9jhm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35);
}

.campaign-multiplier[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.campaign-multiplier i[b-e2ncxo9jhm] {
    font-size: 0.9rem;
    animation: fire-flicker-b-e2ncxo9jhm 0.8s ease-in-out infinite alternate;
}

@keyframes fire-flicker-b-e2ncxo9jhm {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.campaign-name[b-e2ncxo9jhm] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.75rem;
    font-weight: 600;
}

.campaign-timer[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    color: white;
    font-size: 0.7rem;
    font-weight: 500;
}

.campaign-timer i[b-e2ncxo9jhm] {
    font-size: 0.65rem;
}

/* Campaign Upsell Box */
.campaign-upsell[b-e2ncxo9jhm] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px dashed #f59e0b;
    border-radius: 10px;
}

.campaign-upsell>i[b-e2ncxo9jhm] {
    color: #f59e0b;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.upsell-content[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.upsell-title[b-e2ncxo9jhm] {
    color: #92400e;
    font-size: 0.85rem;
    font-weight: 700;
}

.upsell-benefit[b-e2ncxo9jhm] {
    color: #78350f;
    font-size: 0.75rem;
    font-weight: 500;
}

.upsell-urgency[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 8px;
    background: #dc2626;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
    width: fit-content;
    animation: urgency-pulse-b-e2ncxo9jhm 1.5s ease-in-out infinite;
}

@keyframes urgency-pulse-b-e2ncxo9jhm {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.upsell-urgency i[b-e2ncxo9jhm] {
    font-size: 0.65rem;
}

/* Redeem Section */
.points-redeem-section[b-e2ncxo9jhm] {
    background: #f9fafb;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.points-toggle[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.points-toggle input[b-e2ncxo9jhm] {
    display: none;
}

.toggle-slider[b-e2ncxo9jhm] {
    width: 48px;
    height: 26px;
    background: #d1d5db;
    border-radius: 13px;
    position: relative;
    transition: all 0.3s ease;
}

.toggle-slider[b-e2ncxo9jhm]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.points-toggle input:checked+.toggle-slider[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.points-toggle input:checked+.toggle-slider[b-e2ncxo9jhm]::after {
    left: 25px;
}

.toggle-label[b-e2ncxo9jhm] {
    font-weight: 600;
    color: #1a365d;
}

.points-input-row[b-e2ncxo9jhm] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.points-slider-container[b-e2ncxo9jhm] {
    width: 100%;
}

.points-slider[b-e2ncxo9jhm] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 4px;
    outline: none;
}

.points-slider[b-e2ncxo9jhm]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.points-slider[b-e2ncxo9jhm]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.points-slider-labels[b-e2ncxo9jhm] {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.75rem;
    color: #9ca3af;
}

.points-use-summary[b-e2ncxo9jhm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.points-using[b-e2ncxo9jhm] {
    color: #374151;
    font-size: 0.9rem;
}

.points-using strong[b-e2ncxo9jhm] {
    color: #d97706;
}

.points-discount-value[b-e2ncxo9jhm] {
    color: #059669;
    font-size: 0.95rem;
    font-weight: 600;
}

.points-discount-value strong[b-e2ncxo9jhm] {
    font-size: 1.1rem;
}

.points-min-notice[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.9rem;
}

.points-min-notice i[b-e2ncxo9jhm] {
    color: #9ca3af;
}

/* Guest Points Notice */
.points-guest-notice .guest-points-message[b-e2ncxo9jhm] {
    grid-column: 2;
    width: fit-content;
}

.guest-points-message[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #93c5fd;
    border-radius: 12px;
}

.guest-points-message>i[b-e2ncxo9jhm] {
    font-size: 1.75rem;
    color: #f59e0b;
}

.guest-points-message strong[b-e2ncxo9jhm] {
    color: #1a365d;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 2px;
}

.guest-points-message p[b-e2ncxo9jhm] {
    margin: 0;
    color: #6b7280;
    font-size: 0.85rem;
}

/* Summary - Points Lines */
.summary-line.points-used .summary-label[b-e2ncxo9jhm] {
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.summary-line.points-used .summary-label i[b-e2ncxo9jhm] {
    color: #f59e0b;
}

.summary-line.points-used .summary-value[b-e2ncxo9jhm] {
    color: #16a34a;
    font-weight: 600;
}

.summary-line.points-earn[b-e2ncxo9jhm] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #d1d5db;
}

.summary-line.points-earn .summary-label[b-e2ncxo9jhm] {
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.summary-line.points-earn .summary-label i[b-e2ncxo9jhm] {
    color: #f59e0b;
}

.summary-line.points-earn .summary-value.points-value[b-e2ncxo9jhm] {
    color: #f59e0b;
    font-weight: 700;
}

/* Mobile Responsive for Points */
@media (max-width: 640px) {
    .points-info-grid[b-e2ncxo9jhm] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .points-earn-card[b-e2ncxo9jhm],
    .points-balance-card[b-e2ncxo9jhm] {
        padding: 16px;
    }

    .points-icon[b-e2ncxo9jhm] {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .points-number[b-e2ncxo9jhm] {
        font-size: 1.35rem;
    }

    .points-label[b-e2ncxo9jhm] {
        font-size: 0.78rem;
    }

    .points-use-summary[b-e2ncxo9jhm] {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* ===============================================
   ORDER WITH MY PET SECTION
   =============================================== */

.pet-section[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #fef3f2 0%, #fce7f3 100%);
    border: 2px solid #f9a8d4;
}

.pet-section h2 i[b-e2ncxo9jhm] {
    color: #ec4899;
    margin-right: 8px;
}

.pet-section-hint[b-e2ncxo9jhm] {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.pet-selection-grid[b-e2ncxo9jhm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.pet-card[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pet-card:hover[b-e2ncxo9jhm] {
    border-color: #f9a8d4;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.15);
}

.pet-card.selected[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    border-color: #ec4899;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
}

.pet-card-check[b-e2ncxo9jhm] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: white;
    transition: all 0.2s ease;
}

.pet-card.selected .pet-card-check[b-e2ncxo9jhm] {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.pet-card-avatar[b-e2ncxo9jhm] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f9a8d4 0%, #fbcfe8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
}

.pet-card-avatar img[b-e2ncxo9jhm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-card-avatar i[b-e2ncxo9jhm] {
    font-size: 1.8rem;
    color: white;
}

.pet-card-avatar .fallback-icon[b-e2ncxo9jhm] {
    font-size: 1.8rem;
    color: white;
    align-items: center;
    justify-content: center;
}

.pet-card-info[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.pet-name[b-e2ncxo9jhm] {
    font-weight: 700;
    color: #1a365d;
    font-size: 1rem;
}

.pet-breed[b-e2ncxo9jhm] {
    font-size: 0.8rem;
    color: #9ca3af;
}

.no-pets-notice[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    text-align: center;
}

.no-pets-notice i[b-e2ncxo9jhm] {
    font-size: 2.5rem;
    color: #d1d5db;
}

.no-pets-notice span[b-e2ncxo9jhm] {
    color: #6b7280;
}

.no-pets-notice a[b-e2ncxo9jhm] {
    color: #ec4899;
    font-weight: 600;
    text-decoration: none;
}

.no-pets-notice a:hover[b-e2ncxo9jhm] {
    text-decoration: underline;
}

/* Mobile Responsive for Pets */
@media (max-width: 640px) {
    .pet-selection-grid[b-e2ncxo9jhm] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .pet-card[b-e2ncxo9jhm] {
        padding: 12px 8px;
    }

    .pet-card-avatar[b-e2ncxo9jhm] {
        width: 52px;
        height: 52px;
    }

    .pet-card-avatar i[b-e2ncxo9jhm] {
        font-size: 1.4rem;
    }

    .pet-name[b-e2ncxo9jhm] {
        font-size: 0.9rem;
    }
}

/* Item-Level Pet Chips (inline per product) */
.item-pet-selector[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.item-pet-selector .pet-label[b-e2ncxo9jhm] {
    color: #ec4899;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.pet-chip[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 6px;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    background: white;
    cursor: pointer;
    font-size: 0.75rem;
    color: #6b7280;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pet-chip:hover[b-e2ncxo9jhm] {
    border-color: #f9a8d4;
    background: #fdf2f8;
}

.pet-chip.selected[b-e2ncxo9jhm] {
    border-color: #ec4899;
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    color: #be185d;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(236, 72, 153, 0.2);
}

.pet-chip img[b-e2ncxo9jhm] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.pet-chip i[b-e2ncxo9jhm] {
    font-size: 0.75rem;
    color: #d1d5db;
}

.pet-chip.selected i[b-e2ncxo9jhm] {
    color: #ec4899;
}

@media (max-width: 640px) {
    .item-pet-selector[b-e2ncxo9jhm] {
        gap: 4px;
    }

    .pet-chip[b-e2ncxo9jhm] {
        padding: 2px 8px 2px 4px;
        font-size: 0.7rem;
    }

    .pet-chip img[b-e2ncxo9jhm] {
        width: 16px;
        height: 16px;
    }
}

/* ================================ */
/* Drive Thru Pickup Location Styles */
/* ================================ */

/* Override delivery-row grid to be full width stacked */
.delivery-section .delivery-row.pickup-location-row[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}

.pickup-location-row .delivery-label[b-e2ncxo9jhm] {
    margin-bottom: 4px;
    width: 100%;
}

.pickup-locations[b-e2ncxo9jhm] {
    width: 100%;
}

/* Grid Layout for Cards */
.pickup-location-list.pickup-grid[b-e2ncxo9jhm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.pickup-location-card[b-e2ncxo9jhm] {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: white;
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 0 0 1.5px #e5e7eb, 0 2px 6px rgba(0, 0, 0, 0.02);
    height: 100%;
    position: relative;
    overflow: hidden;
    align-items: flex-start;
}

.pickup-location-card:hover[b-e2ncxo9jhm] {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1.5px #cbd5e1, 0 8px 16px rgba(0, 0, 0, 0.04);
}

.pickup-location-card.selected[b-e2ncxo9jhm] {
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #2563eb 0%, #60a5fa 100%) border-box;
    transform: translateY(-2px) scale(1.01);
}

/* Shipping Options Grid (Tier-style) */
.shipping-options-grid[b-e2ncxo9jhm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.shipping-option-card[b-e2ncxo9jhm] {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: white;
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 0 0 1.5px #e5e7eb, 0 4px 12px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.shipping-option-card:hover[b-e2ncxo9jhm] {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1.5px #cbd5e1, 0 12px 24px rgba(0, 0, 0, 0.06);
}

.shipping-option-card.selected[b-e2ncxo9jhm] {
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.15);
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #10b981 0%, #059669 100%) border-box;
    transform: translateY(-4px);
}

.shipping-card-header[b-e2ncxo9jhm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 16px;
}

.shipping-icon-box[b-e2ncxo9jhm] {
    width: 44px;
    height: 44px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.shipping-option-card.selected .shipping-icon-box[b-e2ncxo9jhm] {
    background: #ecfdf5;
    color: #10b981;
}

/* Shared Custom Radio for Pickup and Shipping */
.pickup-radio[b-e2ncxo9jhm],
.shipping-option-radio[b-e2ncxo9jhm] {
    flex-shrink: 0;
}

.pickup-radio[b-e2ncxo9jhm] {
    padding-top: 2px;
}

.pickup-radio .radio-circle[b-e2ncxo9jhm],
.shipping-option-radio .custom-radio[b-e2ncxo9jhm] {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: white;
}

.pickup-location-card:hover .pickup-radio .radio-circle[b-e2ncxo9jhm],
.shipping-option-card:hover .shipping-option-radio .custom-radio[b-e2ncxo9jhm] {
    border-color: #94a3b8;
}

.pickup-location-card.selected .pickup-radio .radio-circle[b-e2ncxo9jhm] {
    border-color: #2563eb;
    background: #2563eb;
}

.shipping-option-card.selected .shipping-option-radio .custom-radio[b-e2ncxo9jhm] {
    border-color: #10b981;
    background: #10b981;
}

.pickup-radio .radio-circle i[b-e2ncxo9jhm],
.shipping-option-radio .custom-radio i[b-e2ncxo9jhm] {
    font-size: 10px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pickup-location-card.selected .pickup-radio .radio-circle i[b-e2ncxo9jhm],
.shipping-option-card.selected .shipping-option-radio .custom-radio i[b-e2ncxo9jhm] {
    opacity: 1;
    transform: scale(1);
}

/* Shipping Option specific details */
.shipping-option-details[b-e2ncxo9jhm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
}

.shipping-option-name[b-e2ncxo9jhm] {
    font-weight: 700;
    color: #1e293b;
    font-size: 1.1rem;
    line-height: 1.3;
}

.shipping-option-packages[b-e2ncxo9jhm] {
    font-size: 0.85rem;
    color: #64748b;
}

.shipping-card-footer[b-e2ncxo9jhm] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
}

.shipping-option-card.selected .shipping-card-footer[b-e2ncxo9jhm] {
    border-top-color: rgba(16, 185, 129, 0.2);
}

.shipping-option-price[b-e2ncxo9jhm] {
    font-weight: 800;
    color: #0f172a;
    font-size: 1.25rem;
}

.pickup-info[b-e2ncxo9jhm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pickup-name[b-e2ncxo9jhm] {
    font-weight: 700;
    color: #1a365d;
    font-size: 1.05rem;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}

.pickup-name i[b-e2ncxo9jhm] {
    color: #2563eb;
    font-size: 0.9rem;
    opacity: 0.8;
}

.pickup-location-card.selected .pickup-name i[b-e2ncxo9jhm] {
    opacity: 1;
}

.pickup-address[b-e2ncxo9jhm] {
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 4px;
}

/* Layout for badges/hours */
.pickup-hours[b-e2ncxo9jhm] {
    color: #059669;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    padding: 6px 10px;
    border-radius: 8px;
    width: fit-content;
    font-weight: 500;
}

.pickup-hours i[b-e2ncxo9jhm] {
    color: #10b981;
}

.pickup-badge[b-e2ncxo9jhm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    width: fit-content;
    margin-top: 4px;
}

.pickup-badge i[b-e2ncxo9jhm] {
    font-size: 0.9rem;
}

.pickup-instructions-box[b-e2ncxo9jhm] {
    display: flex;
    gap: 16px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid #fcd34d;
    border-radius: 12px;
    padding: 20px;
    margin-top: 24px;
    align-items: flex-start;
}

.pickup-instructions-box>i[b-e2ncxo9jhm] {
    color: #d97706;
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
    background: white;
    padding: 8px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.1);
}

.pickup-instructions-box div[b-e2ncxo9jhm] {
    flex: 1;
}

.pickup-instructions-box strong[b-e2ncxo9jhm] {
    color: #92400e;
    font-size: 1rem;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
}

.pickup-instructions-box p[b-e2ncxo9jhm] {
    color: #78350f;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

/* Mobile Responsive for Pickup Locations */
@media (max-width: 800px) {
    .pickup-location-list.pickup-grid[b-e2ncxo9jhm] {
        grid-template-columns: 1fr;
    }

    .pickup-location-card[b-e2ncxo9jhm] {
        padding: 16px;
    }

    .pickup-name[b-e2ncxo9jhm] {
        font-size: 1rem;
    }

    .pickup-instructions-box[b-e2ncxo9jhm] {
        flex-direction: column;
        gap: 12px;
    }
}

/* Promo Card Coupon Extensions (Min Order, Expiry, Disabled) */
.promo-select-card.disabled[b-e2ncxo9jhm] {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
    user-select: none;
}

.promo-select-card.disabled:hover[b-e2ncxo9jhm] {
    transform: none;
    box-shadow: none;
    border-color: #e5e7eb;
    background: #f9fafb;
}

/* Compact meta info (min order, expiry) */
.promo-coupon-meta[b-e2ncxo9jhm] {
    font-size: 0.6rem;
    color: #9ca3af;
    white-space: nowrap;
}

.promo-coupon-meta.not-met[b-e2ncxo9jhm] {
    color: #dc2626;
    font-weight: 500;
}

.btn-remove-promo[b-e2ncxo9jhm] {
    margin-left: 12px;
    background: transparent;
    border: none;
    color: #dc2626;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.btn-remove-promo:hover[b-e2ncxo9jhm] {
    background: #fef2f2;
}

/* ==========================================
   ENHANCED MOBILE RESPONSIVE STYLES
   ========================================== */

@media (max-width: 992px) {
    .checkout-page[b-e2ncxo9jhm] {
        padding: 20px 0 120px;
        /* Space for bottom nav */
    }

    .page-title[b-e2ncxo9jhm] {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .checkout-section[b-e2ncxo9jhm] {
        padding: 20px 16px;
        border-radius: 12px;
    }

    .checkout-section h2[b-e2ncxo9jhm] {
        font-size: 1.1rem;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }
}

@media (max-width: 768px) {
    .checkout-page[b-e2ncxo9jhm] {
        padding: 16px 0 130px;
    }

    .page-title[b-e2ncxo9jhm] {
        font-size: 1.25rem;
        margin-bottom: 16px;
    }

    .checkout-content[b-e2ncxo9jhm] {
        gap: 16px;
    }

    .checkout-section[b-e2ncxo9jhm] {
        padding: 16px 14px;
        border-radius: 10px;
    }

    /* Order items mobile */
    .order-item[b-e2ncxo9jhm] {
        gap: 10px;
    }

    .order-item-image[b-e2ncxo9jhm] {
        width: 60px;
        height: 60px;
    }

    .order-item-name[b-e2ncxo9jhm] {
        font-size: 0.85rem;
        line-height: 1.3;
    }

    /* Summary section mobile */
    .summary-row[b-e2ncxo9jhm] {
        font-size: 0.9rem;
    }

    .summary-total[b-e2ncxo9jhm] {
        font-size: 1.1rem;
    }

    /* Payment methods mobile */
    .payment-methods-grid[b-e2ncxo9jhm] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .payment-method-card[b-e2ncxo9jhm] {
        padding: 14px;
    }

    /* Place order button mobile */
    .btn-place-order[b-e2ncxo9jhm] {
        padding: 16px 24px;
        font-size: 1rem;
        border-radius: 25px;
        min-height: 52px;
    }
}

@media (max-width: 480px) {
    .checkout-page[b-e2ncxo9jhm] {
        padding: 12px 0 140px;
    }

    .page-title[b-e2ncxo9jhm] {
        font-size: 1.1rem;
    }

    .checkout-section[b-e2ncxo9jhm] {
        padding: 14px 12px;
    }

    .checkout-section h2[b-e2ncxo9jhm] {
        font-size: 1rem;
        gap: 8px;
    }

    .checkout-section h2 i[b-e2ncxo9jhm] {
        font-size: 0.9rem;
    }

    /* Address display mobile */
    .delivery-value[b-e2ncxo9jhm] {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .btn-change[b-e2ncxo9jhm] {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
}

/* ===============================================
   MAP SECTION IN CHECKOUT ADDRESS MODAL
   =============================================== */

.map-section-checkout[b-e2ncxo9jhm] {
    margin-top: 8px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.map-section-checkout .map-section-header[b-e2ncxo9jhm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    border-bottom: 1px solid var(--gray-200);
}

.map-section-checkout .map-section-label[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 0.95rem;
}

.map-section-checkout .map-section-label i[b-e2ncxo9jhm] {
    font-size: 1.1rem;
}

.map-section-checkout .btn-current-location[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--primary-blue);
    background: white;
    color: var(--primary-blue);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

.map-section-checkout .btn-current-location:hover[b-e2ncxo9jhm] {
    background: var(--primary-blue);
    color: white;
    box-shadow: 0 2px 8px rgba(1, 69, 178, 0.25);
}

.map-section-checkout .btn-current-location:disabled[b-e2ncxo9jhm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.map-section-checkout .btn-current-location i[b-e2ncxo9jhm] {
    font-size: 0.9rem;
}

.map-section-checkout .map-hint[b-e2ncxo9jhm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fafbfc;
    border-top: 1px solid var(--gray-100);
    font-size: 0.82rem;
    color: var(--gray-500);
}

.map-section-checkout .map-hint i[b-e2ncxo9jhm] {
    color: var(--primary-blue);
    font-size: 0.9rem;
}

.map-section-checkout .map-coords[b-e2ncxo9jhm] {
    margin-left: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--gray-400);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 4px;
}

@media (max-width: 480px) {
    .map-section-checkout .map-section-header[b-e2ncxo9jhm] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .map-section-checkout .btn-current-location[b-e2ncxo9jhm] {
        width: 100%;
        justify-content: center;
    }
}

/* ===============================================
   MOBILE CHECKOUT REDESIGN
   =============================================== */

@media (max-width: 768px) {
    /* Mobile Header */
    .checkout-mobile-header[b-e2ncxo9jhm] {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 4px;
        margin-bottom: 8px;
    }

    .checkout-mobile-header .back-arrow[b-e2ncxo9jhm] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        color: #1a365d;
        font-size: 1rem;
        transition: all 0.2s;
        text-decoration: none;
        flex-shrink: 0;
    }

    .checkout-mobile-header .back-arrow:hover[b-e2ncxo9jhm] {
        background: #f0f4ff;
        transform: translateX(-2px);
    }

    .checkout-mobile-header h1[b-e2ncxo9jhm] {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 700;
        color: #1a365d;
    }

    /* Hide desktop title on mobile */
    .desktop-title[b-e2ncxo9jhm],
    .page-title.desktop-title[b-e2ncxo9jhm] {
        display: none !important;
    }

    /* Page Background - edge to edge */
    .checkout-page[b-e2ncxo9jhm] {
        padding: 0;
        padding-bottom: 150px;
        background: #f5f7fa;
    }

    .checkout-page .container[b-e2ncxo9jhm] {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    /* Sections - flat, no card UI, save space */
    .checkout-section[b-e2ncxo9jhm] {
        border-radius: 0;
        padding: 16px 16px;
        margin-bottom: 8px;
        box-shadow: none;
        border: none;
        border-bottom: 6px solid #f0f2f5;
        background: white;
    }

    /* Delivery Section h2 with icon */
    .delivery-section h2[b-e2ncxo9jhm] {
        font-size: 1.05rem;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #1a365d;
        margin-bottom: 16px;
    }

    .delivery-section h2 i[b-e2ncxo9jhm] {
        font-size: 1rem;
        color: #2563eb;
    }

    /* ==========================================
       DELIVERY METHOD TABS - Mobile Segmented Control
       ========================================== */
    .delivery-method-tabs[b-e2ncxo9jhm] {
        max-width: 100%;
        padding: 5px;
        gap: 4px;
        margin-bottom: 20px;
        border-radius: 14px;
    }

    .method-tab[b-e2ncxo9jhm] {
        padding: 10px 12px;
        font-size: 0.9rem;
        gap: 6px;
        border-radius: 10px;
    }

    .method-tab i[b-e2ncxo9jhm] {
        font-size: 1.05rem;
    }

    .method-tab.selected[b-e2ncxo9jhm] {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    }

    /* Hide old method-card based layout on mobile */
    .shipping-method-row[b-e2ncxo9jhm],
    .method-options-horizontal[b-e2ncxo9jhm] {
        display: none !important;
    }

    /* ==========================================
       ADDRESS CARD - Bordered Container
       ========================================== */
    .address-card-container[b-e2ncxo9jhm] {
        border: 1.5px solid #e5e7eb;
        border-radius: 14px;
        padding: 16px;
        background: white;
    }

    .address-header-row[b-e2ncxo9jhm] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .address-header-left[b-e2ncxo9jhm] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .address-pin[b-e2ncxo9jhm] {
        color: #2563eb;
        font-size: 1rem;
    }

    .address-title[b-e2ncxo9jhm] {
        font-weight: 700;
        font-size: 0.95rem;
        color: #1a365d;
    }

    .address-default-badge[b-e2ncxo9jhm] {
        font-size: 0.72rem;
        font-weight: 600;
        color: #2563eb;
        background: #ebf2ff;
        padding: 3px 10px;
        border-radius: 20px;
        white-space: nowrap;
    }

    .address-body[b-e2ncxo9jhm] {
        padding-left: 24px;
    }

    .address-name-line[b-e2ncxo9jhm] {
        font-weight: 600;
        font-size: 0.92rem;
        color: #1a365d;
        margin: 0 0 4px 0;
    }

    .address-detail-line[b-e2ncxo9jhm] {
        font-size: 0.82rem;
        color: #6b7280;
        margin: 0;
        line-height: 1.5;
    }

    .btn-change-address[b-e2ncxo9jhm] {
        width: 100%;
        margin-top: 14px;
        padding: 10px 16px;
        background: white;
        border: 1.5px solid #d1d5db;
        border-radius: 10px;
        color: #1a365d;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .btn-change-address:hover[b-e2ncxo9jhm] {
        background: #f8fafc;
        border-color: #9ca3af;
    }

    .btn-change-address i[b-e2ncxo9jhm] {
        font-size: 0.8rem;
        color: #6b7280;
    }

    /* Hide old address elements */
    .delivery-action .btn-edit-address[b-e2ncxo9jhm] {
        display: none;
    }

    /* Time Slot Row - Mobile Polish */
    .time-slot-row[b-e2ncxo9jhm] {
        border-radius: 14px !important;
        padding: 16px !important;
        margin: 12px 0 0 !important;
        border: 1px solid #e0e7f5 !important;
        background: #fafbff !important;
    }

    .date-options[b-e2ncxo9jhm] {
        display: flex !important;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .date-options[b-e2ncxo9jhm]::-webkit-scrollbar {
        display: none;
    }

    .date-option[b-e2ncxo9jhm] {
        min-width: 64px;
        padding: 10px 12px;
        border-radius: 12px;
        flex-shrink: 0;
    }

    .date-option.selected[b-e2ncxo9jhm] {
        background: linear-gradient(135deg, #1a365d 0%, #2d5aa0 100%);
        border-color: transparent;
    }

    .date-option.selected .date-day[b-e2ncxo9jhm],
    .date-option.selected .date-month[b-e2ncxo9jhm] {
        color: rgba(255, 255, 255, 0.85);
    }

    .date-option.selected .date-num[b-e2ncxo9jhm] {
        color: white;
    }

    .time-slot-option[b-e2ncxo9jhm] {
        border-radius: 12px;
        padding: 14px 16px;
    }

    .time-slot-option.selected[b-e2ncxo9jhm] {
        background: linear-gradient(135deg, #1a365d 0%, #2d5aa0 100%);
        border-color: transparent;
    }

    .time-slot-option.selected .slot-time[b-e2ncxo9jhm] {
        color: white;
    }

    .time-slot-option.selected .slot-name[b-e2ncxo9jhm] {
        color: rgba(255, 255, 255, 0.85);
    }

    .time-slot-option.selected .slot-status.available[b-e2ncxo9jhm] {
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

    /* Products Section - Collapsible */
    .products-section[b-e2ncxo9jhm] {
        padding-bottom: 16px !important;
    }

    .products-toggle[b-e2ncxo9jhm] {
        margin-bottom: 0;
    }

    .section-header-row[b-e2ncxo9jhm] {
        gap: 10px;
        padding: 4px 0;
    }

    .product-list.collapsed + .note-section[b-e2ncxo9jhm] {
        display: none;
    }

    /* Product Items - V2 Redesign */
    .product-item-v2[b-e2ncxo9jhm] {
        display: flex;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid #f0f2f5;
        align-items: flex-start;
    }

    .product-item-v2:last-child[b-e2ncxo9jhm] {
        border-bottom: none;
    }

    .item-image-v2[b-e2ncxo9jhm] {
        width: 70px;
        height: 70px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        background: #f8f9fa;
    }

    .item-image-v2 img[b-e2ncxo9jhm] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .item-info-v2[b-e2ncxo9jhm] {
        flex: 1;
        min-width: 0;
    }

    .item-name-v2[b-e2ncxo9jhm] {
        font-size: 0.9rem;
        font-weight: 700;
        color: #1a365d;
        margin: 0 0 6px 0;
        line-height: 1.3;
    }

    .item-meta-row[b-e2ncxo9jhm] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .item-discount-badge[b-e2ncxo9jhm] {
        font-size: 0.72rem;
        font-weight: 600;
        color: #16a34a;
        background: #ecfdf5;
        padding: 2px 8px;
        border-radius: 6px;
        white-space: nowrap;
    }

    .item-discount-badge i[b-e2ncxo9jhm] {
        font-size: 0.65rem;
        margin-right: 2px;
    }

    .item-qty-text[b-e2ncxo9jhm] {
        font-size: 0.78rem;
        color: #9ca3af;
        font-weight: 500;
    }

    .item-original-price[b-e2ncxo9jhm] {
        font-size: 0.78rem;
        color: #9ca3af;
        text-decoration: line-through;
        margin-right: 6px;
    }

    .item-final-price[b-e2ncxo9jhm] {
        font-size: 1.15rem;
        font-weight: 800;
        color: #1a365d;
    }

    .item-price-row[b-e2ncxo9jhm] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 4px;
    }

    .item-price-right[b-e2ncxo9jhm] {
        display: flex;
        align-items: baseline;
        gap: 4px;
    }

    /* Hide old product items on mobile */
    .product-item[b-e2ncxo9jhm] {
        display: none;
    }

    /* Payment Section - Mobile */
    .payment-section[b-e2ncxo9jhm] {
        padding: 20px 16px !important;
    }

    .payment-section h2[b-e2ncxo9jhm] {
        font-size: 1.05rem;
        margin-bottom: 12px;
    }

    .payment-row[b-e2ncxo9jhm] {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 0;
    }

    .payment-row-label strong[b-e2ncxo9jhm] {
        font-size: 0.9rem;
    }

    /* Order Summary - Mobile */
    .order-summary-section[b-e2ncxo9jhm] {
        padding-top: 16px;
        margin-top: 12px;
    }

    .summary-line .summary-label[b-e2ncxo9jhm] {
        font-size: 0.88rem;
        width: auto;
    }

    .summary-line .summary-value[b-e2ncxo9jhm] {
        font-size: 0.88rem;
        width: auto;
    }

    .summary-line.total .summary-value.total-amount[b-e2ncxo9jhm] {
        font-size: 1.4rem;
    }

    /* ==========================================
       REDESIGNED BOTTOM BAR
       ========================================== */
    .checkout-bottom-bar[b-e2ncxo9jhm] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 14px 16px;
        padding-bottom: max(14px, env(safe-area-inset-bottom) + 14px);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
        z-index: 1000;
        border-radius: 20px 20px 0 0;
        flex-direction: column;
        gap: 12px;
    }

    .bottom-bar-summary[b-e2ncxo9jhm] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-bottom: 0;
        border-bottom: none;
    }

    .bottom-summary-left[b-e2ncxo9jhm] {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .bottom-total-label[b-e2ncxo9jhm] {
        font-size: 0.72rem;
        color: #9ca3af;
        font-weight: 500;
    }

    .bottom-total-price[b-e2ncxo9jhm] {
        font-size: 1.5rem;
        font-weight: 800;
        color: #1a365d;
        background: none;
        -webkit-text-fill-color: #1a365d;
    }

    .bottom-summary-right[b-e2ncxo9jhm] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        justify-content: center;
    }

    .bottom-savings[b-e2ncxo9jhm] {
        font-size: 0.75rem;
        color: #16a34a;
        font-weight: 600;
    }

    .bottom-points-earn[b-e2ncxo9jhm] {
        font-size: 0.75rem;
        color: #2563eb;
        font-weight: 600;
    }

    .bottom-bar-actions[b-e2ncxo9jhm] {
        display: flex;
        gap: 10px;
    }

    .btn-line-mobile[b-e2ncxo9jhm] {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: #06c755;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        flex-shrink: 0;
        color: white;
        text-decoration: none;
    }

    .btn-line-mobile svg[b-e2ncxo9jhm] {
        width: 26px;
        height: 26px;
    }

    .btn-line-mobile:hover[b-e2ncxo9jhm] {
        background: #05b34b;
        transform: scale(1.05);
    }

    .btn-checkout-mobile[b-e2ncxo9jhm] {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 24px;
        background: linear-gradient(135deg, #1a365d 0%, #2d5aa0 100%);
        border: none;
        border-radius: 14px;
        color: white;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.25s;
        box-shadow: 0 4px 16px rgba(26, 54, 93, 0.35);
    }

    .btn-checkout-mobile:hover:not(:disabled)[b-e2ncxo9jhm] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(26, 54, 93, 0.45);
    }

    .btn-checkout-mobile:disabled[b-e2ncxo9jhm] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    .btn-checkout-mobile i[b-e2ncxo9jhm] {
        font-size: 0.85rem;
        opacity: 0.8;
    }

    /* Hide old mobile edit address button */
    .btn-edit-address-mobile[b-e2ncxo9jhm] {
        display: none;
    }

    /* Hide desktop checkout button */
    .btn-checkout.desktop-only[b-e2ncxo9jhm] {
        display: none;
    }

    /* Promotions Grid - Mobile Scroll */
    .promotions-grid[b-e2ncxo9jhm] {
        max-height: 160px;
    }

    .promo-select-card[b-e2ncxo9jhm] {
        min-width: 180px;
        max-width: 220px;
    }

    /* Coupon Section Header */
    .payment-row-label strong i[b-e2ncxo9jhm] {
        font-size: 0.9rem;
    }
}

/* Small mobile fine-tuning */
@media (max-width: 480px) {
    .checkout-mobile-header h1[b-e2ncxo9jhm] {
        font-size: 1.05rem;
    }

    .method-tab[b-e2ncxo9jhm] {
        padding: 10px 12px;
        font-size: 0.82rem;
    }

    .btn-checkout-mobile[b-e2ncxo9jhm] {
        font-size: 0.92rem;
        padding: 12px 20px;
    }

    .btn-line-mobile[b-e2ncxo9jhm] {
        width: 48px;
        height: 48px;
    }
}
/* /Components/Pages/ClickCollect.razor.rz.scp.css */
/* Click & Collect Page Styles */

.click-collect-page[b-gkq1dykx68] {
    background: #f5f7fa;
    min-height: 100vh;
}

/* Hero Section */
.hero-section[b-gkq1dykx68] {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(to bottom, var(--primary-blue) 0%, #0062ff4b 100%), url('/images/click-and-collect-header-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
    color: white;
    text-align: center;
}

/* Floating Bone Animations */
.floating-bone[b-gkq1dykx68] {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.bone-1[b-gkq1dykx68] {
    top: 12%;
    left: 8%;
    width: 70px;
    animation: float1-b-gkq1dykx68 4s ease-in-out infinite;
}

.bone-2[b-gkq1dykx68] {
    bottom: 18%;
    right: 10%;
    width: 90px;
    animation: float2-b-gkq1dykx68 5s ease-in-out infinite;
}

.bone-3[b-gkq1dykx68] {
    top: 60%;
    left: 15%;
    width: 55px;
    opacity: 0.8;
    animation: float3-b-gkq1dykx68 4.5s ease-in-out infinite 0.5s;
}

.bone-4[b-gkq1dykx68] {
    top: 25%;
    right: 18%;
    width: 65px;
    opacity: 0.75;
    animation: float4-b-gkq1dykx68 5.5s ease-in-out infinite 1s;
}

@keyframes float1-b-gkq1dykx68 {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-12px) translateX(5px) rotate(5deg);
    }
    50% {
        transform: translateY(-20px) translateX(0) rotate(10deg);
    }
    75% {
        transform: translateY(-8px) translateX(-5px) rotate(3deg);
    }
}

@keyframes float2-b-gkq1dykx68 {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    33% {
        transform: translateY(-18px) translateX(-8px) rotate(-8deg);
    }
    66% {
        transform: translateY(-25px) translateX(5px) rotate(-12deg);
    }
}

@keyframes float3-b-gkq1dykx68 {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(-5deg);
    }
    40% {
        transform: translateY(-15px) translateX(10px) rotate(8deg);
    }
    80% {
        transform: translateY(-22px) translateX(-5px) rotate(0deg);
    }
}

@keyframes float4-b-gkq1dykx68 {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(10deg);
    }
    30% {
        transform: translateY(-10px) translateX(-10px) rotate(-5deg);
    }
    60% {
        transform: translateY(-28px) translateX(8px) rotate(15deg);
    }
    85% {
        transform: translateY(-12px) translateX(-3px) rotate(5deg);
    }
}

.hero-section .container[b-gkq1dykx68] {
    position: relative;
    z-index: 2;
}

.section-tag[b-gkq1dykx68] {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.hero-section h1[b-gkq1dykx68] {
    font-size: 2.75rem;
    margin: 0 0 16px;
    font-weight: 700;
    color: #fde272;
}

.hero-subtitle[b-gkq1dykx68] {
    font-size: 1.5rem;
    margin: 0 0 24px;
    opacity: 0.95;
}

.hero-description[b-gkq1dykx68] {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.9;
}

/* Services Overview Section */
.services-overview[b-gkq1dykx68] {
    background: white;
    padding: 0;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 70px;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.services-tabs[b-gkq1dykx68] {
    display: flex;
    justify-content: center;
    gap: 80px;
}

.service-tab[b-gkq1dykx68] {
    display: block;
    text-decoration: none;
    color: #4a5568;
    font-size: 1rem;
    font-weight: 500;
    padding: 20px 40px;
    position: relative;
    transition: color 0.3s;
    background: none;
    border: none;
    cursor: pointer;
}

.service-tab:hover[b-gkq1dykx68] {
    color: var(--primary-blue);
}

.service-tab.active[b-gkq1dykx68] {
    color: var(--primary-blue);
    font-weight: 600;
}

.service-tab.active[b-gkq1dykx68]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #f8b500;
    border-radius: 2px 2px 0 0;
}

/* Service Detail Sections */
.service-detail-section[b-gkq1dykx68] {
    padding: 60px 0;
    background: white;
    scroll-margin-top: 135px;
}

.service-detail-section.alt-bg[b-gkq1dykx68] {
    background: #f8fafc;
}

.service-label[b-gkq1dykx68] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-blue);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.service-label i[b-gkq1dykx68] {
    font-size: 0.85rem;
}

.section-header[b-gkq1dykx68] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.section-header h2[b-gkq1dykx68] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 0;
    border-left: 5px solid #ffd700;
    padding: 0.5rem 1rem;
}

.service-badge[b-gkq1dykx68] {
    background: #e8f4fd;
    color: var(--primary-blue);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.service-badge i[b-gkq1dykx68] {
    font-size: 0.8rem;
}

.service-detail-content h2[b-gkq1dykx68] {
    font-size: 2rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin: 0 0 12px;
}

.service-detail-content .section-header h2[b-gkq1dykx68] {
    font-size: 1.75rem;
    margin: 0;
    border-left: 5px solid #ffd700;
    padding: 0.5rem 1rem;
}

.service-subtitle[b-gkq1dykx68] {
    color: #4a5568;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.service-desc[b-gkq1dykx68] {
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 20px;
}

.service-info-box[b-gkq1dykx68] {
    background: #f0f7ff;
    border-left: 4px solid var(--primary-blue);
    padding: 16px 20px;
    margin: 20px 0;
}

.service-info-box p[b-gkq1dykx68] {
    margin: 0;
    color: var(--primary-blue);
}

.service-note[b-gkq1dykx68] {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.7;
}

.service-detail-image img[b-gkq1dykx68] {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Delivery Steps Section */
.delivery-steps-section[b-gkq1dykx68],
.locker-steps-section[b-gkq1dykx68] {
    padding: 60px 0;
    background: white;
}

.steps-image img[b-gkq1dykx68] {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.steps-content h3[b-gkq1dykx68] {
    font-size: 1.75rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin: 0 0 8px;
}

.steps-subtitle[b-gkq1dykx68] {
    color: var(--primary-blue);
    font-size: 1rem;
    margin-bottom: 30px;
}

.step-item[b-gkq1dykx68] {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.step-number[b-gkq1dykx68] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--primary-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.step-text h4[b-gkq1dykx68] {
    font-size: 1.1rem;
    color: var(--primary-blue);
    font-weight: 600;
    margin: 0 0 8px;
}

.step-text p[b-gkq1dykx68] {
    color: #4a5568;
    line-height: 1.7;
    margin: 0 0 10px;
}

.step-text ul[b-gkq1dykx68] {
    margin: 10px 0;
    padding-left: 20px;
}

.step-text ul li[b-gkq1dykx68] {
    color: #4a5568;
    margin-bottom: 4px;
}

.step-text .note[b-gkq1dykx68] {
    font-size: 0.85rem;
    color: #64748b;
    font-style: italic;
}

/* Delivery Area Section */
.delivery-area-section[b-gkq1dykx68] {
    padding: 60px 0;
    background: white;
}

.delivery-area-section h3[b-gkq1dykx68] {
    font-size: 1.75rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin: 0 0 8px;
}

.area-subtitle[b-gkq1dykx68] {
    color: #f59e0b;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 40px;
}

.area-steps[b-gkq1dykx68] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.area-step-card[b-gkq1dykx68] {
    background: #f0f7ff;
    padding: 20px 24px;
    border-radius: 10px;
}

.area-step-card h4[b-gkq1dykx68] {
    font-size: 1.1rem;
    color: var(--primary-blue);
    font-weight: 600;
    margin: 0 0 12px;
}

.area-step-card p[b-gkq1dykx68] {
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
    font-size: 0.95rem;
}

.area-step-card ul[b-gkq1dykx68] {
    list-style: disc;
    margin: 12px 0 0;
    padding-left: 20px;
}

.area-step-card ul li[b-gkq1dykx68] {
    color: #4a5568;
    margin-bottom: 6px;
    font-size: 0.95rem;
    font-weight: 600;
}

.area-map-image[b-gkq1dykx68] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
}

.area-map-image img[b-gkq1dykx68] {
    max-width: 100%;
    height: auto;
}

.delivery-note[b-gkq1dykx68] {
    margin-top: 40px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: #dc2626;
    font-size: 0.9rem;
    line-height: 1.8;
    text-align: center;
}

.delivery-note strong[b-gkq1dykx68] {
    color: #dc2626;
}

/* Service Banners */
.service-banner[b-gkq1dykx68] {
    padding: 60px 0;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.delivery-banner[b-gkq1dykx68] {
    background: url('/images/delivery-cta-bg.svg') center center / cover no-repeat;
    background-color: var(--primary-blue);
}

.delivery-banner .banner-bone-1[b-gkq1dykx68] {
    position: absolute;
    left: 3%;
    top: 50%;
    transform: translateY(-50%) rotate(-15deg);
    width: 80px;
    height: auto;
    animation: floatBoneLeft-b-gkq1dykx68 4s ease-in-out infinite;
}

.delivery-banner .banner-bone-2[b-gkq1dykx68] {
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%) rotate(15deg);
    width: 80px;
    height: auto;
    animation: floatBoneRight-b-gkq1dykx68 4s ease-in-out infinite;
}

@keyframes floatBoneLeft-b-gkq1dykx68 {
    0%, 100% {
        transform: translateY(-50%) rotate(-15deg) translateX(0);
    }
    50% {
        transform: translateY(-50%) rotate(-25deg) translateX(-10px);
    }
}

@keyframes floatBoneRight-b-gkq1dykx68 {
    0%, 100% {
        transform: translateY(-50%) rotate(15deg) translateX(0);
    }
    50% {
        transform: translateY(-50%) rotate(25deg) translateX(10px);
    }
}

.delivery-banner .banner-text[b-gkq1dykx68] {
    color: #fcd34d;
}

.locker-banner[b-gkq1dykx68] {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #3b82f6 100%);
}

.drive-banner[b-gkq1dykx68] {
    background: url('/images/delivery-cta-2.svg') center center / cover no-repeat;
    background-color: var(--primary-blue);
}

.drive-banner .banner-bone-1[b-gkq1dykx68] {
    position: absolute;
    left: 3%;
    top: 50%;
    transform: translateY(-50%) rotate(-15deg);
    width: 80px;
    height: auto;
    animation: floatBoneLeft-b-gkq1dykx68 4s ease-in-out infinite;
}

.drive-banner .banner-bone-2[b-gkq1dykx68] {
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%) rotate(15deg);
    width: 80px;
    height: auto;
    animation: floatBoneRight-b-gkq1dykx68 4s ease-in-out infinite;
}

.drive-banner .banner-text[b-gkq1dykx68] {
    color: #fcd34d;
}

/* Drive Thru Section Bones */
.drive-thru-section[b-gkq1dykx68] {
    position: relative;
    overflow: hidden;
}

.drive-thru-section .drive-bone-1[b-gkq1dykx68] {
    position: absolute;
    right: 5%;
    top: 15%;
    width: 80px;
    height: auto;
    opacity: 0.9;
    animation: floatDriveBone1-b-gkq1dykx68 5s ease-in-out infinite;
    z-index: 1;
}

.drive-thru-section .drive-bone-2[b-gkq1dykx68] {
    position: absolute;
    right: 2%;
    bottom: 10%;
    width: 100px;
    height: auto;
    opacity: 0.9;
    animation: floatDriveBone2-b-gkq1dykx68 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes floatDriveBone1-b-gkq1dykx68 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

@keyframes floatDriveBone2-b-gkq1dykx68 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(-5deg);
    }
}

.banner-text[b-gkq1dykx68] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px;
}

.banner-subtext[b-gkq1dykx68] {
    font-size: 1.25rem;
    font-weight: 600;
    opacity: 1;
    margin: 0;
}

.banner-highlight[b-gkq1dykx68] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fde272;
    margin: 16px 0 0;
}

/* Smart Locker Specific */
.locker-locations[b-gkq1dykx68] {
    background: #f0f7ff;
    padding: 16px 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.locker-locations p[b-gkq1dykx68] {
    margin: 4px 0;
    color: var(--primary-blue);
}

.locker-note[b-gkq1dykx68] {
    color: var(--primary-blue);
    font-weight: 500;
    margin: 16px 0;
}

/* Drive Thru Specific */
.drive-steps[b-gkq1dykx68] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
}

.drive-step[b-gkq1dykx68] {
    display: flex;
    gap: 16px;
}

.drive-step .step-content h4[b-gkq1dykx68] {
    font-size: 1.1rem;
    color: var(--primary-blue);
    font-weight: 600;
    margin: 0 0 8px;
}

.drive-step .step-content p[b-gkq1dykx68] {
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .service-detail-section .row[b-gkq1dykx68] {
        flex-direction: column-reverse;
    }
    
    .service-detail-image[b-gkq1dykx68] {
        margin-bottom: 30px;
    }
    
    .delivery-steps-section .row[b-gkq1dykx68],
    .locker-steps-section .row[b-gkq1dykx68] {
        flex-direction: column;
    }
    
    .steps-image[b-gkq1dykx68] {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .hero-section h1[b-gkq1dykx68] {
        font-size: 2rem;
    }
    
    .hero-subtitle[b-gkq1dykx68] {
        font-size: 1.2rem;
    }
    
    .services-tabs[b-gkq1dykx68] {
        gap: 30px;
        flex-wrap: wrap;
    }
    
    .service-tab[b-gkq1dykx68] {
        font-size: 0.9rem;
        padding: 16px 0;
    }
    
    .service-detail-content h2[b-gkq1dykx68] {
        font-size: 1.5rem;
    }
    
    .steps-content h3[b-gkq1dykx68],
    .delivery-area-section h3[b-gkq1dykx68] {
        font-size: 1.25rem;
    }
    
    .area-map-image[b-gkq1dykx68] {
        margin-top: 30px;
    }
    
    .banner-text[b-gkq1dykx68] {
        font-size: 1.1rem;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* Contact Page Styles */

.contact-page[b-art3vdio66] {
    min-height: 100vh;
}

/* Hero Section */
.hero-section[b-art3vdio66] {
    padding: 60px 0 80px;
    text-align: center;
}

.section-tag[b-art3vdio66] {
    display: inline-block;
    color: var(--primary-blue);
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.hero-section h1[b-art3vdio66] {
    font-size: 2.25rem;
    margin: 0 0 12px;
    font-weight: 700;
}

.subtitle[b-art3vdio66] {
    opacity: 0.9;
    font-size: 1.1rem;
    margin-bottom: 0;
}

.logo-circle[b-art3vdio66] {
    background: white;
    border-radius: 50%;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.logo-circle .paw[b-art3vdio66] {
    font-size: 2rem;
}

.logo-circle span:last-child[b-art3vdio66] {
    color: #1a365d;
    font-weight: 700;
    font-size: 1.25rem;
}

/* Stats Row */
.stats-section[b-art3vdio66] {
    padding: 40px 0 60px;
}

.stats-row[b-art3vdio66] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.stat-item[b-art3vdio66] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.stat-icon-box[b-art3vdio66] {
    width: 56px;
    height: 56px;
    background: var(--primary-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.stat-info[b-art3vdio66] {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 8px;
}

.stat-info strong[b-art3vdio66] {
    font-size: 1.25rem;
    color: #1a365d;
    font-weight: 700;
}

.stat-info span[b-art3vdio66] {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.5;
}

.stat-link[b-art3vdio66] {
    font-size: 1rem;
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
}

.stat-link:hover[b-art3vdio66] {
    text-decoration: underline;
}

/* Stores Section */
.stores-section[b-art3vdio66] {
    padding: 60px 0;
    background-color: #FFE7A7;
}

.stores-header[b-art3vdio66] {
    text-align: center;
    margin-bottom: 48px;
}

.stores-tag[b-art3vdio66] {
    display: inline-block;
    color: var(--primary-blue);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.stores-title[b-art3vdio66] {
    font-size: 2rem;
    color: white;
    font-weight: 700;
    margin: 0;
    -webkit-text-stroke: 2px var(--primary-blue);
    text-shadow: 
        -2px -2px 0 var(--primary-blue),
        2px -2px 0 var(--primary-blue),
        -2px 2px 0 var(--primary-blue),
        2px 2px 0 var(--primary-blue);
    paint-order: stroke fill;
}

.stores-list[b-art3vdio66] {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Store Card */
.store-card[b-art3vdio66] {
    background: #FFE7A7;
}

.store-header[b-art3vdio66] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.store-icon[b-art3vdio66] {
    width: 40px;
    height: 40px;
    background: var(--primary-blue);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.store-title-info[b-art3vdio66] {
    flex: 1;
}

.store-name[b-art3vdio66] {
    font-size: 1.25rem;
    color: white;
    font-weight: 700;
    margin: 0 0 4px;
    -webkit-text-stroke: 2px var(--primary-blue);
    text-shadow: 
        -2px -2px 0 var(--primary-blue),
        2px -2px 0 var(--primary-blue),
        -2px 2px 0 var(--primary-blue),
        2px 2px 0 var(--primary-blue);
    paint-order: stroke fill;
}

.store-address[b-art3vdio66] {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.store-content[b-art3vdio66] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.store-image[b-art3vdio66] {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.store-image img[b-art3vdio66] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-map[b-art3vdio66] {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/10;
    background-color: #f3f4f6; /* Added background for empty state */
}

.store-map iframe[b-art3vdio66] {
    border-radius: 12px;
    width: 100%;
    height: 100%;
    border: none; /* Ensure no border */
}

/* Map Placeholder for Missing Coordinates */
.map-placeholder[b-art3vdio66] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #e5e7eb;
    color: var(--primary-blue);
    text-decoration: none;
    gap: 12px;
    transition: all 0.2s;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
}

.map-placeholder:hover[b-art3vdio66] {
    background-color: #d1d5db;
    transform: scale(0.98);
}

.map-placeholder i[b-art3vdio66] {
    font-size: 2.5rem;
}

.map-placeholder span[b-art3vdio66] {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Contact Section */
.contact-section[b-art3vdio66] {
    padding: 60px 0;
}

.contact-wrapper[b-art3vdio66] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
}

.contact-image[b-art3vdio66] {
    text-align: center;
    color: white;
    margin: auto;
}

.contact-image img[b-art3vdio66] {
    max-width: 100%;
}

.contact-tagline h3[b-art3vdio66] {
    font-size: 1.5rem;
    margin: 0 0 8px;
}

.contact-tagline p[b-art3vdio66] {
    opacity: 0.9;
    margin: 0;
}

/* Contact Form */
.contact-form[b-art3vdio66] {
    background: white;
    border-radius: 16px;
    padding: 40px;
    border: 2px solid #1a4fd8;
}

.contact-form h3[b-art3vdio66] {
    font-size: 2rem;
    color: #1a4fd8;
    margin: 0 0 12px;
    text-align: center;
    font-weight: 700;
}

.form-subtitle[b-art3vdio66] {
    text-align: center;
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0 0 32px;
    line-height: 1.5;
}

.form-group[b-art3vdio66] {
    margin-bottom: 20px;
}

.form-group label[b-art3vdio66] {
    display: block;
    font-weight: 600;
    color: #1a365d;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-group input[b-art3vdio66],
.form-group select[b-art3vdio66],
.form-group textarea[b-art3vdio66] {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    background: #f3f4f6;
    color: #374151;
    transition: all 0.2s;
}

.form-group input[b-art3vdio66]::placeholder,
.form-group textarea[b-art3vdio66]::placeholder {
    color: #9ca3af;
}

.form-group input:focus[b-art3vdio66],
.form-group select:focus[b-art3vdio66],
.form-group textarea:focus[b-art3vdio66] {
    outline: none;
    background: #e5e7eb;
}

.form-group textarea[b-art3vdio66] {
    resize: vertical;
    min-height: 120px;
}

.form-row[b-art3vdio66] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.btn-submit[b-art3vdio66] {
    width: 100%;
    padding: 16px;
    background: #1a4fd8;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    margin-top: 8px;
}

.btn-submit:hover:not(:disabled)[b-art3vdio66] {
    background: #1540b8;
    transform: translateY(-2px);
}

.btn-submit:disabled[b-art3vdio66] {
    opacity: 0.7;
    cursor: not-allowed;
}

.success-alert[b-art3vdio66] {
    background: #e6f7e6;
    color: #2e7d32;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}

.error-alert[b-art3vdio66] {
    background: #ffebee;
    color: #c62828;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}

/* Loading State */
.loading-state[b-art3vdio66] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
}

.spinner[b-art3vdio66] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-art3vdio66 0.8s linear infinite;
    margin-bottom: 16px;
}

.spinner-small[b-art3vdio66] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-art3vdio66 0.8s linear infinite;
}

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

/* Empty State */
.empty-state[b-art3vdio66] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-art3vdio66] {
    font-size: 4rem;
    display: block;
    margin-bottom: 16px;
}

.empty-state h3[b-art3vdio66] {
    color: var(--gray-600);
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-page[b-art3vdio66] {
        padding-bottom: 100px; /* Space for bottom nav */
    }
    
    .store-content[b-art3vdio66] {
        grid-template-columns: 1fr;
    }

    .store-image[b-art3vdio66] {
        aspect-ratio: 16/9;
    }

    .store-map[b-art3vdio66] {
        aspect-ratio: 16/9;
    }

    .contact-wrapper[b-art3vdio66] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-image[b-art3vdio66] {
        order: 2;
    }
}

@media (max-width: 768px) {
    .contact-page[b-art3vdio66] {
        padding-bottom: 110px;
    }
    
    .hero-section h1[b-art3vdio66] {
        font-size: 1.35rem;
    }
    
    .hero-section p[b-art3vdio66] {
        font-size: 0.9rem;
    }

    .stats-row[b-art3vdio66] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .stat-card[b-art3vdio66] {
        padding: 16px;
    }
    
    .stat-number[b-art3vdio66] {
        font-size: 1.5rem;
    }

    .stores-title[b-art3vdio66] {
        font-size: 1.35rem;
    }

    .store-name[b-art3vdio66] {
        font-size: 1rem;
    }
    
    .store-card[b-art3vdio66] {
        padding: 16px;
    }

    .form-row[b-art3vdio66] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .contact-section[b-art3vdio66] {
        padding: 20px;
    }
    
    .contact-form .form-group input[b-art3vdio66],
    .contact-form .form-group textarea[b-art3vdio66] {
        padding: 14px;
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    .btn-submit[b-art3vdio66] {
        padding: 14px 28px;
        font-size: 1rem;
        min-height: 48px;
    }
}

@media (max-width: 480px) {
    .hero-section h1[b-art3vdio66] {
        font-size: 1.2rem;
    }
    
    .stats-row[b-art3vdio66] {
        grid-template-columns: 1fr;
    }
    
    .store-info-item[b-art3vdio66] {
        font-size: 0.85rem;
    }
    
    .contact-section h2[b-art3vdio66] {
        font-size: 1.15rem;
    }
}
/* /Components/Pages/CookiePolicy.razor.rz.scp.css */
/* Cookie Policy Page Styles */
.hero-section[b-yn323fn5a4] {
    position: relative; overflow: hidden;
    background-image: linear-gradient(to bottom, var(--primary-blue) 0%, #0062ff4b 100%);
    padding: 80px 0; color: white; text-align: center;
}
.floating-bone[b-yn323fn5a4] { position: absolute; pointer-events: none; z-index: 1; }
.bone-1[b-yn323fn5a4] { top: 12%; left: 8%; width: 70px; animation: float1-b-yn323fn5a4 4s ease-in-out infinite; }
.bone-2[b-yn323fn5a4] { bottom: 18%; right: 10%; width: 90px; animation: float2-b-yn323fn5a4 5s ease-in-out infinite; }
.bone-3[b-yn323fn5a4] { top: 60%; left: 15%; width: 55px; opacity: 0.8; animation: float3-b-yn323fn5a4 4.5s ease-in-out infinite 0.5s; }
.bone-4[b-yn323fn5a4] { top: 25%; right: 18%; width: 65px; opacity: 0.75; animation: float4-b-yn323fn5a4 5.5s ease-in-out infinite 1s; }
@keyframes float1-b-yn323fn5a4{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(10deg)}}
@keyframes float2-b-yn323fn5a4{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-25px) rotate(-12deg)}}
@keyframes float3-b-yn323fn5a4{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-15px) rotate(8deg)}}
@keyframes float4-b-yn323fn5a4{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-28px) rotate(15deg)}}
.hero-section .container[b-yn323fn5a4] { position: relative; z-index: 2; }
.section-tag[b-yn323fn5a4] { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; margin-bottom: 20px; background: rgba(255,255,255,0.15); }
.hero-section h1[b-yn323fn5a4] { font-size: 2.75rem; margin: 0 0 16px; font-weight: 700; color: #fde272; }
.hero-subtitle[b-yn323fn5a4] { font-size: 1.5rem; margin: 0 0 24px; opacity: 0.95; }
.hero-subtitle strong[b-yn323fn5a4] { color: #ffd700; }
.hero-description[b-yn323fn5a4] { max-width: 700px; margin: 0 auto; font-size: 1.1rem; line-height: 1.7; opacity: 0.9; }

/* TOC */
.toc-section[b-yn323fn5a4] { background: #f8f9fa; padding: 40px 0; }
.toc-section .container[b-yn323fn5a4] { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.toc-card[b-yn323fn5a4] { background: #fff; border-radius: 16px; padding: 32px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.toc-card h3[b-yn323fn5a4] { display: flex; align-items: center; gap: 12px; color: var(--primary-blue); font-size: 1.3rem; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #eee; }
.toc-list[b-yn323fn5a4] { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.toc-list li a[b-yn323fn5a4] { display: block; padding: 12px 16px; background: #f8f9fa; border-radius: 8px; color: #333; text-decoration: none; transition: all 0.2s; font-size: 0.95rem; }
.toc-list li a:hover[b-yn323fn5a4] { background: var(--primary-blue); color: #fff; transform: translateX(4px); }

/* Content */
.content-section[b-yn323fn5a4] { padding: 60px 0; background: #fff; }
.content-section .container[b-yn323fn5a4] { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.legal-content[b-yn323fn5a4] { display: flex; flex-direction: column; gap: 40px; }
.legal-section[b-yn323fn5a4] { background: #fff; border-radius: 16px; padding: 32px; box-shadow: 0 2px 15px rgba(0,0,0,0.06); border: 1px solid #eee; scroll-margin-top: 100px; }
.legal-section.highlight-section[b-yn323fn5a4] { background: linear-gradient(135deg, #fff9e6 0%, #fff 100%); border-color: var(--primary-yellow); }
.legal-section h2[b-yn323fn5a4] { display: flex; align-items: center; gap: 16px; color: var(--primary-blue); font-size: 1.5rem; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #eee; }
.section-number[b-yn323fn5a4] { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary-blue); color: #fff; border-radius: 50%; font-size: 1rem; font-weight: 700; flex-shrink: 0; }
.legal-section p[b-yn323fn5a4] { color: #555; line-height: 1.8; margin-bottom: 16px; }

/* Cookie Types */
.cookie-types[b-yn323fn5a4] { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.cookie-item[b-yn323fn5a4] { display: flex; align-items: flex-start; gap: 16px; padding: 20px; background: #f8f9fa; border-radius: 12px; }
.cookie-icon[b-yn323fn5a4] { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cookie-icon.essential[b-yn323fn5a4] { background: #d4edda; color: #155724; }
.cookie-icon.functional[b-yn323fn5a4] { background: #d1ecf1; color: #0c5460; }
.cookie-icon.analytics[b-yn323fn5a4] { background: #cce5ff; color: #004085; }
.cookie-icon.marketing[b-yn323fn5a4] { background: #fff3cd; color: #856404; }
.cookie-icon i[b-yn323fn5a4] { font-size: 1.2rem; }
.cookie-item strong[b-yn323fn5a4] { display: block; color: #333; margin-bottom: 4px; }
.cookie-item p[b-yn323fn5a4] { margin: 0 0 8px; font-size: 0.9rem; color: #666; line-height: 1.6; }
.cookie-badge[b-yn323fn5a4] { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.cookie-badge.required[b-yn323fn5a4] { background: #d4edda; color: #155724; }
.cookie-badge.optional[b-yn323fn5a4] { background: #e2e3e5; color: #383d41; }

/* Third Party Grid */
.third-party-grid[b-yn323fn5a4] { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 20px; }
.third-party-card[b-yn323fn5a4] { display: flex; align-items: center; gap: 16px; padding: 20px; background: #f8f9fa; border-radius: 12px; border: 1px solid #eee; }
.third-party-card > i[b-yn323fn5a4] { font-size: 1.5rem; color: var(--primary-blue); width: 24px; text-align: center; }
.third-party-card strong[b-yn323fn5a4] { display: block; color: #333; margin-bottom: 2px; }
.third-party-card p[b-yn323fn5a4] { margin: 0; font-size: 0.85rem; color: #666; }

/* Info & Warning Boxes */
.info-box[b-yn323fn5a4] { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 12px; margin-top: 20px; background: #e3f2fd; border: 1px solid #90caf9; }
.info-box i[b-yn323fn5a4] { color: #1976d2; font-size: 1.3rem; flex-shrink: 0; }
.info-box p[b-yn323fn5a4] { margin: 0; color: #0d47a1; line-height: 1.6; }
.warning-box[b-yn323fn5a4] { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 12px; margin-top: 20px; background: #fff3cd; border: 1px solid #ffc107; }
.warning-box i[b-yn323fn5a4] { color: #856404; font-size: 1.3rem; flex-shrink: 0; }
.warning-box p[b-yn323fn5a4] { margin: 0; color: #856404; line-height: 1.6; }

/* Contact Info */
.contact-info[b-yn323fn5a4] { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; }
.contact-item[b-yn323fn5a4] { display: flex; align-items: center; gap: 16px; padding: 20px; background: #f8f9fa; border-radius: 12px; }
.contact-item i[b-yn323fn5a4] { font-size: 1.5rem; color: var(--primary-blue); width: 24px; text-align: center; }
.contact-item strong[b-yn323fn5a4] { display: block; color: #666; font-size: 0.85rem; margin-bottom: 4px; }
.contact-item p[b-yn323fn5a4] { margin: 0; color: #333; font-weight: 500; }

/* Navigation */
.legal-nav[b-yn323fn5a4] { display: flex; justify-content: center; gap: 16px; margin-top: 40px; padding-top: 40px; border-top: 2px solid #eee; flex-wrap: wrap; }
.nav-link[b-yn323fn5a4] { display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; background: var(--primary-blue); color: #fff; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.2s; }
.nav-link:hover[b-yn323fn5a4] { background: #1a4a7a; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(29,78,137,0.3); color: #fff; }

/* Responsive */
@media (max-width: 768px) {
    .hero-section[b-yn323fn5a4] { padding: 80px 0 60px; }
    .hero-section h1[b-yn323fn5a4] { font-size: 2rem; }
    .floating-bone[b-yn323fn5a4] { opacity: 0.1; }
    .toc-list[b-yn323fn5a4] { grid-template-columns: 1fr; }
    .legal-section[b-yn323fn5a4] { padding: 24px; }
    .legal-section h2[b-yn323fn5a4] { font-size: 1.25rem; }
    .section-number[b-yn323fn5a4] { width: 32px; height: 32px; font-size: 0.85rem; }
    .third-party-grid[b-yn323fn5a4] { grid-template-columns: 1fr; }
    .contact-info[b-yn323fn5a4] { grid-template-columns: 1fr; }
    .legal-nav[b-yn323fn5a4] { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
    .hero-section h1[b-yn323fn5a4] { font-size: 1.75rem; }
    .nav-link[b-yn323fn5a4] { padding: 14px 24px; font-size: 0.95rem; }
}
/* /Components/Pages/Coupon.razor.rz.scp.css */
/* ==========================================
   PROMOTIONS PAGE - Shopee/Lazada Coupon Style
   ========================================== */

.promotions-wrapper[b-tzfwm3f9nc] {
    background-color: #2753b2;
    min-height: 100vh;
    font-family: inherit;
}

/* Header */
.site-header[b-tzfwm3f9nc] {
    background-color: #2753b2;
    color: white;
    padding: 40px 0 60px 0;
}

.header-content[b-tzfwm3f9nc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-text h1[b-tzfwm3f9nc] {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
}

.header-text p[b-tzfwm3f9nc] {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.9;
    font-weight: 400;
}

.header-icon-box[b-tzfwm3f9nc] {
    width: 52px;
    height: 52px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffda44;
    font-size: 1.6rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Main Content BG */
.content-bg[b-tzfwm3f9nc] {
    background-color: #f7f8fa;
    padding-top: 25px;
    position: relative;
    min-height: calc(100vh - 120px);
    z-index: 10;
}

.content-bg > .container:first-child[b-tzfwm3f9nc] {
    margin-top: 25px;
}

/* Points Banner */
.points-banner[b-tzfwm3f9nc] {
    background-color: #fff9f2;
    border: 1px solid #ffe4cc;
    border-radius: 20px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -30px 0 24px 0; /* Overlaps the header */
    position: relative;
    z-index: 20;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.points-left[b-tzfwm3f9nc] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.points-icon[b-tzfwm3f9nc] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #ff8c00, #ff5e00);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    box-shadow: 0 4px 10px rgba(255, 120, 0, 0.3);
}

.points-text[b-tzfwm3f9nc] {
    display: flex;
    flex-direction: column;
}

.points-label[b-tzfwm3f9nc] {
    font-size: 0.75rem;
    color: #e67300;
    font-weight: 700;
    margin-bottom: 2px;
}

.points-value[b-tzfwm3f9nc] {
    font-size: 1.3rem;
    color: #b34700;
    font-weight: 800;
    line-height: 1;
}

.points-value small[b-tzfwm3f9nc] {
    font-size: 0.85rem;
    font-weight: 600;
}

.points-btn[b-tzfwm3f9nc] {
    background: white;
    border: 1px solid #ffcc99;
    color: #e65c00;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.points-btn:hover[b-tzfwm3f9nc] {
    background: #fff0e0;
}

/* Search Bar */
.search-container[b-tzfwm3f9nc] {
    margin-bottom: 20px;
}

.search-input-wrapper[b-tzfwm3f9nc] {
    background: #f0f2f5;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    gap: 12px;
}

.search-input-wrapper i[b-tzfwm3f9nc] {
    color: #999;
    font-size: 1rem;
}

.search-input-wrapper input[b-tzfwm3f9nc] {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 0.9rem;
    outline: none;
    color: #333;
    font-weight: 500;
}

.search-input-wrapper input[b-tzfwm3f9nc]::placeholder {
    color: #999;
}

/* Filter Pills */
.filter-pills-container[b-tzfwm3f9nc] {
    border-bottom: 1px solid #ebecef;
    margin-bottom: 24px;
}

.filter-container[b-tzfwm3f9nc] {
    padding: 0 20px;
}

.filter-pills[b-tzfwm3f9nc] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 16px;
    scrollbar-width: none;
}

.filter-pills[b-tzfwm3f9nc]::-webkit-scrollbar {
    display: none;
}

.pill[b-tzfwm3f9nc] {
    white-space: nowrap;
    padding: 8px 18px;
    border-radius: 20px;
    border: none;
    background: #f0f2f5;
    color: #666;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pill.active[b-tzfwm3f9nc] {
    background: #2860e1;
    color: white;
}

/* Section Title */
.promos-section[b-tzfwm3f9nc] {
    padding-bottom: 40px;
}

.section-title-row[b-tzfwm3f9nc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title-row h2[b-tzfwm3f9nc] {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
    color: #222;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title-row h2 i[b-tzfwm3f9nc] {
    color: #2860e1;
    font-size: 1.2rem;
}

.btn-my-coupons[b-tzfwm3f9nc] {
    background: #eef4ff;
    color: #2860e1;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-my-coupons i[b-tzfwm3f9nc] {
    font-size: 0.7rem;
}

/* Loading / Empty State */
.skeleton-text[b-tzfwm3f9nc] {
    background: #e2e5e9;
    border-radius: 6px;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.6) 20%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: placeholderShimmer-b-tzfwm3f9nc 1.5s infinite linear;
}

@keyframes placeholderShimmer-b-tzfwm3f9nc {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

.empty-state[b-tzfwm3f9nc] {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}
.empty-state i[b-tzfwm3f9nc] {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Coupon Cards */
.coupons-grid[b-tzfwm3f9nc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 800px) {
    .coupons-grid[b-tzfwm3f9nc] {
        grid-template-columns: 1fr;
    }
}

.coupon-card[b-tzfwm3f9nc] {
    display: flex;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    position: relative;
    height: 130px;
}

/* Theme Colors */
.theme-orange[b-tzfwm3f9nc] { --coupon-color: #f27823; }
.theme-blue[b-tzfwm3f9nc] { --coupon-color: #2860e1; }
.theme-green[b-tzfwm3f9nc] { --coupon-color: #25c264; }

.coupon-left[b-tzfwm3f9nc] {
    background-color: var(--coupon-color);
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    padding: 0 12px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

/* Dashed separator with top/bottom cutouts */
.coupon-divider[b-tzfwm3f9nc] {
    position: relative;
    width: 0;
    border-left: 2px dashed #e8e8e8;
    z-index: 5;
    background: white; /* Behind dashes */
}

.divider-cutout[b-tzfwm3f9nc] {
    position: absolute;
    left: -9px;
    width: 16px;
    height: 16px;
    background-color: #f7f8fa;
    border-radius: 50%;
    z-index: 10;
}

.divider-cutout.top[b-tzfwm3f9nc] {
    top: -8px;
}

.divider-cutout.bottom[b-tzfwm3f9nc] {
    bottom: -8px;
}

/* Discount values */
.left-discount-label[b-tzfwm3f9nc] {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.left-discount-value[b-tzfwm3f9nc] {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

/* Right Section */
.coupon-right[b-tzfwm3f9nc] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    position: relative;
}

.coupon-info[b-tzfwm3f9nc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.coupon-tag-row[b-tzfwm3f9nc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.promo-tag[b-tzfwm3f9nc] {
    background: #eef4ff;
    color: #2860e1;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
}

.expire-warn-text[b-tzfwm3f9nc] {
    color: #e53935;
    font-size: 0.65rem;
    font-weight: 700;
}

.coupon-title[b-tzfwm3f9nc] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}

.coupon-expiry[b-tzfwm3f9nc] {
    font-size: 0.8rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: auto;
}

.btn-tc-link[b-tzfwm3f9nc] {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    color: #2860e1;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Action Section */
.coupon-action[b-tzfwm3f9nc] {
    display: flex;
    align-items: flex-end;
}

.btn-action[b-tzfwm3f9nc] {
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 800;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transition: transform 0.1s;
}

.btn-action:active[b-tzfwm3f9nc] {
    transform: scale(0.95);
}

.btn-auto[b-tzfwm3f9nc] {
    background: #f27823;
}

.btn-collect[b-tzfwm3f9nc] {
    background: #2860e1;
}

.btn-collected[b-tzfwm3f9nc] {
    background: #e0e0e0;
    color: #888;
    cursor: default;
}
.btn-collected:active[b-tzfwm3f9nc] {
    transform: none;
}

.is-collected[b-tzfwm3f9nc] {
    opacity: 0.6;
}

/* Toast */
.toast-notification[b-tzfwm3f9nc] {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 10000;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    animation: toastSlide-b-tzfwm3f9nc 0.3s ease;
}
.toast-notification.success i[b-tzfwm3f9nc] { color: #4caf50; }
.toast-notification.error[b-tzfwm3f9nc] { background: #d32f2f; }
@keyframes toastSlide-b-tzfwm3f9nc { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* Modals */
.promo-modal-overlay[b-tzfwm3f9nc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
}
.promo-modal-content[b-tzfwm3f9nc] {
    background: white;
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.promo-modal-header[b-tzfwm3f9nc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}
.promo-modal-header h3[b-tzfwm3f9nc] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}
.btn-close-modal[b-tzfwm3f9nc] {
    background: #f0f0f0;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
}
.promo-modal-body[b-tzfwm3f9nc] {
    padding: 20px;
    overflow-y: auto;
}
.promo-modal-body h4[b-tzfwm3f9nc] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px;
}
.promo-modal-desc[b-tzfwm3f9nc] {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 20px;
}
.promo-modal-rules[b-tzfwm3f9nc] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.promo-modal-rules li[b-tzfwm3f9nc] {
    display: flex;
    gap: 12px;
}
.promo-modal-rules li i[b-tzfwm3f9nc] {
    font-size: 1.2rem;
    color: #2860e1;
    margin-top: 2px;
}
.promo-modal-rules li strong[b-tzfwm3f9nc] {
    display: block;
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 2px;
}
.promo-modal-rules li p[b-tzfwm3f9nc] {
    margin: 0;
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
}

/* ==========================================
   MOBILE RESPONSIVENESS
   ========================================== */
@media (max-width: 640px) {
    .coupon-card[b-tzfwm3f9nc] {
        height: auto;
        min-height: 105px;
    }
    
    .coupon-left[b-tzfwm3f9nc] {
        width: 85px;
        padding: 0 4px;
    }

    .left-discount-label[b-tzfwm3f9nc] {
        font-size: 0.65rem;
    }

    .left-discount-value[b-tzfwm3f9nc] {
        font-size: 1.25rem;
    }

    .coupon-right[b-tzfwm3f9nc] {
        padding: 10px 12px;
    }

    .coupon-tag-row[b-tzfwm3f9nc] {
        margin-bottom: 4px;
        flex-wrap: wrap;
    }

    .promo-tag[b-tzfwm3f9nc] {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .expire-warn-text[b-tzfwm3f9nc] {
        font-size: 0.6rem;
    }

    .coupon-title[b-tzfwm3f9nc] {
        font-size: 0.85rem;
        margin-bottom: 4px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .coupon-expiry[b-tzfwm3f9nc] {
        font-size: 0.65rem;
    }

    .btn-tc-link[b-tzfwm3f9nc] {
        font-size: 0.65rem;
    }

    .btn-action[b-tzfwm3f9nc] {
        font-size: 0.7rem;
        padding: 6px 12px;
    }
}
/* /Components/Pages/FacebookDataDeletion.razor.rz.scp.css */
/* Facebook Data Deletion Page Styles */

/* Hero Section */
.hero-section[b-6c04xt5gkx] {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(to bottom, #1877f2 0%, #1877f24b 100%), url('/images/privacy-policy-header-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
    color: white;
    text-align: center;
}

.facebook-icon[b-6c04xt5gkx] {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 40px;
    color: #1877f2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Floating Bone Animations */
.floating-bone[b-6c04xt5gkx] {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.bone-1[b-6c04xt5gkx] {
    top: 12%;
    left: 8%;
    width: 70px;
    animation: float1-b-6c04xt5gkx 4s ease-in-out infinite;
}

.bone-2[b-6c04xt5gkx] {
    bottom: 18%;
    right: 10%;
    width: 90px;
    animation: float2-b-6c04xt5gkx 5s ease-in-out infinite;
}

.bone-3[b-6c04xt5gkx] {
    top: 60%;
    left: 15%;
    width: 55px;
    opacity: 0.8;
    animation: float3-b-6c04xt5gkx 4.5s ease-in-out infinite 0.5s;
}

.bone-4[b-6c04xt5gkx] {
    top: 25%;
    right: 18%;
    width: 65px;
    opacity: 0.75;
    animation: float4-b-6c04xt5gkx 5.5s ease-in-out infinite 1s;
}

@keyframes float1-b-6c04xt5gkx {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    25% { transform: translateY(-12px) translateX(5px) rotate(5deg); }
    50% { transform: translateY(-20px) translateX(0) rotate(10deg); }
    75% { transform: translateY(-8px) translateX(-5px) rotate(3deg); }
}

@keyframes float2-b-6c04xt5gkx {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    33% { transform: translateY(-18px) translateX(-8px) rotate(-8deg); }
    66% { transform: translateY(-25px) translateX(5px) rotate(-12deg); }
}

@keyframes float3-b-6c04xt5gkx {
    0%, 100% { transform: translateY(0) translateX(0) rotate(-5deg); }
    40% { transform: translateY(-15px) translateX(10px) rotate(8deg); }
    80% { transform: translateY(-22px) translateX(-5px) rotate(0deg); }
}

@keyframes float4-b-6c04xt5gkx {
    0%, 100% { transform: translateY(0) translateX(0) rotate(10deg); }
    30% { transform: translateY(-10px) translateX(-10px) rotate(-5deg); }
    60% { transform: translateY(-28px) translateX(8px) rotate(15deg); }
}

.hero-section h1[b-6c04xt5gkx] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.hero-subtitle[b-6c04xt5gkx] {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.hero-description[b-6c04xt5gkx] {
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.85;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* Content Section */
.content-section[b-6c04xt5gkx] {
    padding: 60px 0;
    background: #f8f9fa;
}

.container[b-6c04xt5gkx] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.deletion-content[b-6c04xt5gkx] {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

/* Info Card */
.info-card[b-6c04xt5gkx] {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 40px;
}

.info-card .card-header[b-6c04xt5gkx] {
    background: #1877f2;
    color: white;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-card .card-header i[b-6c04xt5gkx] {
    font-size: 1.3rem;
}

.info-card .card-header h2[b-6c04xt5gkx] {
    margin: 0;
    font-size: 1.2rem;
}

.info-card .card-content[b-6c04xt5gkx] {
    padding: 25px;
}

.data-list[b-6c04xt5gkx] {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.data-list li[b-6c04xt5gkx] {
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.data-list li i[b-6c04xt5gkx] {
    color: #1877f2;
    font-size: 0.9rem;
}

.info-card .note[b-6c04xt5gkx] {
    background: rgba(24, 119, 242, 0.1);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 15px;
}

.info-card .note i[b-6c04xt5gkx] {
    color: #1877f2;
    font-size: 1.2rem;
    margin-top: 2px;
}

/* Deletion Options */
.deletion-options[b-6c04xt5gkx] {
    margin-bottom: 40px;
}

.deletion-options h2[b-6c04xt5gkx] {
    font-size: 1.5rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
}

.deletion-options h2 i[b-6c04xt5gkx] {
    color: #dc3545;
}

.section-intro[b-6c04xt5gkx] {
    color: #666;
    margin-bottom: 25px;
}

.option-card[b-6c04xt5gkx] {
    display: flex;
    gap: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    border-left: 4px solid #1877f2;
}

.option-number[b-6c04xt5gkx] {
    width: 40px;
    height: 40px;
    background: #1877f2;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
}

.option-content h3[b-6c04xt5gkx] {
    font-size: 1.1rem;
    margin: 0 0 10px;
    color: #333;
}

.option-content p[b-6c04xt5gkx] {
    color: #666;
    margin-bottom: 15px;
}

.steps-list[b-6c04xt5gkx] {
    padding-left: 20px;
    margin-bottom: 20px;
}

.steps-list li[b-6c04xt5gkx] {
    padding: 5px 0;
    color: #555;
}

.steps-list a[b-6c04xt5gkx] {
    color: #1877f2;
    text-decoration: none;
}

.steps-list a:hover[b-6c04xt5gkx] {
    text-decoration: underline;
}

.btn-action[b-6c04xt5gkx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #1877f2;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-action:hover[b-6c04xt5gkx] {
    background: #166fe5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
    color: white;
}

.btn-action.secondary[b-6c04xt5gkx] {
    background: white;
    color: #1877f2;
    border: 2px solid #1877f2;
}

.btn-action.secondary:hover[b-6c04xt5gkx] {
    background: #e7f3ff;
}

/* Deletion Form */
.deletion-form-section[b-6c04xt5gkx] {
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border-radius: 12px;
    border: 1px solid #ffe0e0;
}

.deletion-form-section h2[b-6c04xt5gkx] {
    font-size: 1.3rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
}

.deletion-form-section h2 i[b-6c04xt5gkx] {
    color: #dc3545;
}

.deletion-form[b-6c04xt5gkx] {
    margin-top: 25px;
}

.form-group[b-6c04xt5gkx] {
    margin-bottom: 20px;
}

.form-group label[b-6c04xt5gkx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
}

.form-group label i[b-6c04xt5gkx] {
    color: #1877f2;
}

.form-control[b-6c04xt5gkx] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus[b-6c04xt5gkx] {
    outline: none;
    border-color: #1877f2;
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.1);
}

.form-hint[b-6c04xt5gkx] {
    display: block;
    margin-top: 5px;
    font-size: 0.85rem;
    color: #888;
}

.checkbox-group[b-6c04xt5gkx] {
    margin-top: 25px;
}

.checkbox-label[b-6c04xt5gkx] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-6c04xt5gkx] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #dc3545;
}

.checkbox-label span[b-6c04xt5gkx] {
    font-weight: normal;
    color: #555;
}

.btn-submit[b-6c04xt5gkx] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover:not(:disabled)[b-6c04xt5gkx] {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-submit:disabled[b-6c04xt5gkx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.success-message[b-6c04xt5gkx] {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: #d4edda;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #c3e6cb;
}

.success-message i[b-6c04xt5gkx] {
    font-size: 1.5rem;
    color: #28a745;
}

.success-message strong[b-6c04xt5gkx] {
    color: #155724;
    display: block;
    margin-bottom: 5px;
}

.success-message p[b-6c04xt5gkx] {
    color: #155724;
    margin: 0;
    font-size: 0.95rem;
}

.confirmation-code[b-6c04xt5gkx] {
    margin-top: 10px !important;
    padding: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}

.error-message[b-6c04xt5gkx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #f8d7da;
    border-radius: 8px;
    margin-top: 20px;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.error-message i[b-6c04xt5gkx] {
    font-size: 1.2rem;
}

/* Deletion Details */
.deletion-details[b-6c04xt5gkx] {
    margin-bottom: 40px;
}

.deletion-details h2[b-6c04xt5gkx] {
    font-size: 1.3rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
}

.details-grid[b-6c04xt5gkx] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.detail-card[b-6c04xt5gkx] {
    padding: 25px;
    border-radius: 12px;
}

.detail-card.deleted[b-6c04xt5gkx] {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
    border: 1px solid #ffcccc;
}

.detail-card.retained[b-6c04xt5gkx] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e6f4ff 100%);
    border: 1px solid #b3d9ff;
}

.detail-card .card-icon[b-6c04xt5gkx] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.detail-card.deleted .card-icon[b-6c04xt5gkx] {
    background: #dc3545;
    color: white;
}

.detail-card.retained .card-icon[b-6c04xt5gkx] {
    background: #17a2b8;
    color: white;
}

.detail-card h4[b-6c04xt5gkx] {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: #333;
}

.detail-card ul[b-6c04xt5gkx] {
    padding-left: 20px;
    margin: 0;
}

.detail-card li[b-6c04xt5gkx] {
    padding: 5px 0;
    color: #555;
}

/* Processing Timeline */
.processing-info[b-6c04xt5gkx] {
    margin-bottom: 40px;
}

.timeline[b-6c04xt5gkx] {
    position: relative;
    padding-left: 40px;
}

.timeline[b-6c04xt5gkx]::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #1877f2, #28a745);
}

.timeline-item[b-6c04xt5gkx] {
    position: relative;
    padding-bottom: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.timeline-item:last-child[b-6c04xt5gkx] {
    padding-bottom: 0;
}

.timeline-icon[b-6c04xt5gkx] {
    position: absolute;
    left: -40px;
    width: 40px;
    height: 40px;
    background: white;
    border: 3px solid #1877f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1877f2;
    font-size: 1rem;
    z-index: 1;
}

.timeline-item:last-child .timeline-icon[b-6c04xt5gkx] {
    border-color: #28a745;
    color: #28a745;
}

.timeline-content h4[b-6c04xt5gkx] {
    margin: 0 0 5px;
    font-size: 1.05rem;
    color: #333;
}

.timeline-content p[b-6c04xt5gkx] {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
}

/* Contact Section */
.contact-section[b-6c04xt5gkx] {
    margin-bottom: 30px;
    text-align: center;
}

.contact-section h2[b-6c04xt5gkx] {
    font-size: 1.3rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #333;
}

.contact-grid[b-6c04xt5gkx] {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.contact-item[b-6c04xt5gkx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.contact-item:hover[b-6c04xt5gkx] {
    background: #1877f2;
    color: white;
    transform: translateY(-2px);
}

.contact-item i[b-6c04xt5gkx] {
    font-size: 1.2rem;
    color: #1877f2;
}

.contact-item:hover i[b-6c04xt5gkx] {
    color: white;
}

/* Navigation */
.legal-nav[b-6c04xt5gkx] {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.nav-link[b-6c04xt5gkx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.nav-link:hover[b-6c04xt5gkx] {
    background: var(--primary-blue, #0066ff);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section[b-6c04xt5gkx] {
        padding: 60px 0;
    }

    .hero-section h1[b-6c04xt5gkx] {
        font-size: 1.8rem;
    }

    .deletion-content[b-6c04xt5gkx] {
        padding: 25px;
    }

    .option-card[b-6c04xt5gkx] {
        flex-direction: column;
        padding: 20px;
    }

    .option-number[b-6c04xt5gkx] {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .details-grid[b-6c04xt5gkx] {
        grid-template-columns: 1fr;
    }

    .contact-grid[b-6c04xt5gkx] {
        flex-direction: column;
        align-items: center;
    }

    .contact-item[b-6c04xt5gkx] {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .floating-bone[b-6c04xt5gkx] {
        display: none;
    }
}
/* /Components/Pages/FlashSale.razor.rz.scp.css */
/* Flash Sale Page Styles */
.flash-sale-page[b-kn9bwum4gl] {
    min-height: 100vh;
    background: linear-gradient(135deg, #1a0b2e 0%, #3d144c 50%, #e52d27 100%);
    padding-bottom: 60px;
    position: relative;
    overflow: hidden;
}

/* Background animated elements */
.flash-sale-page[b-kn9bwum4gl]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M10 90 L50 10 L45 50 L90 10" stroke="rgba(255,255,255,0.05)" stroke-width="2" fill="none"/></svg>') repeat;
    opacity: 0.3;
    pointer-events: none;
    animation: flashBackgroundMove-b-kn9bwum4gl 20s linear infinite;
}

@keyframes flashBackgroundMove-b-kn9bwum4gl {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

/* Header Styles */
.flash-page-header[b-kn9bwum4gl] {
    padding: 60px 0 40px;
    position: relative;
    z-index: 2;
    text-align: center;
}

.flash-title[b-kn9bwum4gl] {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-shadow: 0 4px 15px rgba(229, 45, 39, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.flash-title i[b-kn9bwum4gl] {
    color: #FFD700;
    filter: drop-shadow(0 0 10px #FFD700);
    animation: pulseLightning-b-kn9bwum4gl 1.5s infinite;
}

@keyframes pulseLightning-b-kn9bwum4gl {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px #FFD700); }
    50% { transform: scale(1.2); filter: drop-shadow(0 0 25px #FFD700); }
}

.flash-subtitle[b-kn9bwum4gl] {
    color: #ffda75;
    font-size: 1.2rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    background: rgba(0,0,0,0.3);
    display: inline-block;
    padding: 8px 24px;
    border-radius: 30px;
    border: 1px solid rgba(255,215,0,0.3);
}

/* Products Grid */
.products-grid[b-kn9bwum4gl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    position: relative;
    z-index: 2;
}

/* Product Card - Specialized for Flash Sale */
.flash-item-card[b-kn9bwum4gl] {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
}

.flash-item-card:hover[b-kn9bwum4gl] {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(229, 45, 39, 0.4);
    border-color: #e52d27;
}

.flash-item-card:active[b-kn9bwum4gl] {
    transform: translateY(-2px);
}

/* Image Wrapper */
.image-wrapper[b-kn9bwum4gl] {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f8f8f8;
}

.image-wrapper img[b-kn9bwum4gl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.flash-item-card:hover .image-wrapper img[b-kn9bwum4gl] {
    transform: scale(1.08);
}

.discount-badge[b-kn9bwum4gl] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e52d27;
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 5px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(229, 45, 39, 0.4);
    z-index: 2;
    transform: rotate(5deg);
    animation: badgeShake-b-kn9bwum4gl 3s infinite;
}

@keyframes badgeShake-b-kn9bwum4gl {
    0%, 90%, 100% { transform: rotate(5deg); }
    92% { transform: rotate(-5deg) scale(1.1); }
    94% { transform: rotate(8deg) scale(1.1); }
    96% { transform: rotate(-3deg) scale(1.1); }
    98% { transform: rotate(5deg) scale(1.1); }
}

/* Info Section */
.card-info[b-kn9bwum4gl] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.brand-name[b-kn9bwum4gl] {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.product-name[b-kn9bwum4gl] {
    font-size: 1rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8rem;
    line-height: 1.4;
}

/* Price block */
.price-block[b-kn9bwum4gl] {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sale-price[b-kn9bwum4gl] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #e52d27;
    line-height: 1;
}

.sale-price span[b-kn9bwum4gl] {
    font-size: 0.9rem;
}

.old-price[b-kn9bwum4gl] {
    font-size: 0.9rem;
    color: #999;
    text-decoration: line-through;
}

/* Digital Countdown */
.digital-countdown[b-kn9bwum4gl] {
    background: #fdf0f0;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 15px;
    border: 1px solid #fbd5d5;
}

.digital-countdown i[b-kn9bwum4gl] {
    color: #e52d27;
    font-size: 1.1rem;
    margin-right: 4px;
    animation: flashIcon-b-kn9bwum4gl 1s infinite alternate;
}

@keyframes flashIcon-b-kn9bwum4gl {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

.time-box[b-kn9bwum4gl] {
    background: #e52d27;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 26px;
    text-align: center;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);
}

.time-sep[b-kn9bwum4gl] {
    color: #e52d27;
    font-weight: bold;
    animation: blink-b-kn9bwum4gl 1s infinite;
}

@keyframes blink-b-kn9bwum4gl {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Progress bar */
.sales-progress[b-kn9bwum4gl] {
    position: relative;
    height: 20px;
    background: #fdf0f0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: auto;
    margin-bottom: 15px;
    border: 1px solid #fbd5d5;
}

/* Base style for both text layers */
.progress-text[b-kn9bwum4gl] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* The text visible on the empty background */
.progress-text.text-empty[b-kn9bwum4gl] {
    color: #e52d27;
    z-index: 0;
}

.progress-fill[b-kn9bwum4gl] {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, #ff8a00, #e52d27);
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* The text visible ONLY over the fill */
.progress-text.text-filled[b-kn9bwum4gl] {
    color: #fff;
    z-index: 2;
    transition: clip-path 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Barber pole effect for almost sold out */
.progress-fill.almost-sold-out[b-kn9bwum4gl] {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    background-color: #e52d27;
    animation: progressStripes-b-kn9bwum4gl 1s linear infinite;
}

@keyframes progressStripes-b-kn9bwum4gl {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}

.progress-fill.sold-out[b-kn9bwum4gl] {
    background: #bdc3c7;
    animation: none;
}

/* Buy Button */
.buy-btn[b-kn9bwum4gl] {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(255, 75, 43, 0.3);
}

.flash-item-card:hover .buy-btn[b-kn9bwum4gl] {
    transform: scale(1.03);
    box-shadow: 0 6px 15px rgba(255, 75, 43, 0.5);
}

/* Empty State */
.empty-state[b-kn9bwum4gl] {
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
    padding: 60px 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.empty-state h3[b-kn9bwum4gl] {
    color: #2c3e50;
    font-weight: 800;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Flash Sale Styles */
@media (max-width: 767px) {
    .flash-sale-section .container[b-gwduyih6om] {
        padding: 0 !important;
        max-width: 100% !important;
    }
}

.flash-sale-section[b-gwduyih6om] {
    padding: 16px 0 30px 0;
}

.flash-sale-inner[b-gwduyih6om] {
    padding: 16px 0;
}

.flash-sale-header[b-gwduyih6om] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0 16px;
    align-items: stretch;
}

.flash-sale-header-top[b-gwduyih6om] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.flash-sale-header-top .scroll-nav-btn[b-gwduyih6om] {
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: white;
}

.flash-sale-countdown-row[b-gwduyih6om] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.flash-sale-nav-buttons[b-gwduyih6om] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.flash-sale-title[b-gwduyih6om] {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.flash-sale-title h2[b-gwduyih6om] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 900;
    font-style: italic;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0px;
}

.flash-icon[b-gwduyih6om] {
    color: #ffd43b;
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.flash-end-text[b-gwduyih6om] {
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 4px;
    color: white;
}

.countdown[b-gwduyih6om] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.countdown-box[b-gwduyih6om] {
    background: rgba(0, 0, 0, 0.25);
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 2px 4px;
    border-radius: 6px;
    min-width: 28px;
    text-align: center;
}

.countdown-separator[b-gwduyih6om] {
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
}

.btn-view-all-pill[b-gwduyih6om] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-view-all-pill:hover[b-gwduyih6om] {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    transform: translateY(-2px);
}

.flash-sale-scroll-container[b-gwduyih6om] {
    width: 100%;
}

.flash-sale-scroll[b-gwduyih6om] {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 0 16px 16px 16px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.flash-sale-scroll[b-gwduyih6om]::-webkit-scrollbar {
    display: none;
}

.flash-sale-scroll-item[b-gwduyih6om] {
    /* 2.5 items in a row on mobile (calc(100vw / 2.5) minus gaps) */
    flex: 0 0 calc(40% - 8px);
    min-width: 140px;
    scroll-snap-align: start;
}

.flash-product-card[b-gwduyih6om] {
    background: white;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.flash-product-card:hover[b-gwduyih6om] {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.flash-product-image-wrapper[b-gwduyih6om] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    aspect-ratio: 1;
    background: #f8f9fa;
}

.flash-product-image[b-gwduyih6om] {
    width: 100%;
    height: 100%;
}

.flash-product-image img[b-gwduyih6om] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flash-discount-badge[b-gwduyih6om] {
    position: absolute;
    top: 0;
    left: 0;
    background: #ffd43b;
    color: #000;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-bottom-right-radius: 12px;
    z-index: 2;
}

.flash-product-info[b-gwduyih6om] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.flash-product-name[b-gwduyih6om] {
    font-weight: 800;
    font-size: 0.85rem;
    color: #1f2937;
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 6px;
}

.flash-product-price[b-gwduyih6om] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: auto;
    padding-bottom: 10px;
}

.flash-price-current[b-gwduyih6om] {
    color: #ef4444;
    font-weight: 800;
    font-size: 1.2rem;
}

.flash-price-old[b-gwduyih6om] {
    color: #9ca3af;
    text-decoration: line-through;
    font-size: 0.75rem;
    font-weight: 500;
}

.flash-progress-bar[b-gwduyih6om] {
    margin-top: 8px;
}

.flash-progress-bg[b-gwduyih6om] {
    background: #fff7ed;
    border-radius: 12px;
    height: 18px;
    position: relative;
    overflow: hidden;
    border: 1px solid #fed7aa;
}

.flash-progress-text[b-gwduyih6om] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
}

.flash-progress-text.text-empty[b-gwduyih6om] {
    color: #9a3412;
    z-index: 0;
}

.flash-progress-fill[b-gwduyih6om] {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, #f97316, #ea580c);
    border-radius: 12px;
    z-index: 1;
}

.flash-progress-text.text-filled[b-gwduyih6om] {
    color: white;
    z-index: 2;
}

.flash-progress-bg.almost-sold-out[b-gwduyih6om] {
    background: #fef2f2;
}

.flash-progress-bg.almost-sold-out .flash-progress-fill[b-gwduyih6om] {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.flash-progress-bg.sold-out .flash-progress-fill[b-gwduyih6om] {
    background: #6b7280;
}

@media (min-width: 768px) {
    .flash-sale-section[b-gwduyih6om] {
        padding: 30px 0 50px 0;
    }

    .flash-sale-inner[b-gwduyih6om] {
        border-radius: 20px;
        padding: 24px;
    }

    .flash-sale-header[b-gwduyih6om] {
        padding: 0;
        margin-bottom: 24px;
    }

    .flash-sale-title h2[b-gwduyih6om] {
        font-size: 1.7rem;
    }

    .flash-icon[b-gwduyih6om] {
        font-size: 2rem;
    }

    .flash-end-text[b-gwduyih6om] {
        font-size: 1rem;
    }

    .countdown-box[b-gwduyih6om] {
        font-size: 1rem;
        padding: 6px 10px;
        min-width: 36px;
    }

    .countdown-separator[b-gwduyih6om] {
        font-size: 1.1rem;
    }

    .btn-view-all-pill[b-gwduyih6om] {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .flash-sale-scroll[b-gwduyih6om] {
        gap: 16px;
        padding: 0 0 12px 0;
    }

    .flash-sale-scroll-item[b-gwduyih6om] {
        flex: 0 0 240px;
    }

    .flash-product-card[b-gwduyih6om] {
        padding: 14px;
        border-radius: 16px;
    }

    .flash-product-image-wrapper[b-gwduyih6om] {
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .flash-discount-badge[b-gwduyih6om] {
        font-size: 0.85rem;
        padding: 6px 12px;
        border-bottom-right-radius: 16px;
    }

    .flash-product-name[b-gwduyih6om] {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .flash-price-current[b-gwduyih6om] {
        font-size: 1.4rem;
    }

    .flash-price-old[b-gwduyih6om] {
        font-size: 0.85rem;
    }

    .flash-progress-bg[b-gwduyih6om] {
        height: 20px;
    }

    .flash-progress-text[b-gwduyih6om] {
        font-size: 0.75rem;
    }
}

/* Coupon Ticket UI */
.coupon-scroll-section[b-gwduyih6om] {
    padding: 16px 0 30px 0;
}

.coupon-ticket-header[b-gwduyih6om] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 16px;
}

.coupon-ticket-title[b-gwduyih6om] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1f2937;
}

.coupon-ticket-title-icon[b-gwduyih6om] {
    color: #f97316;
}

.coupon-view-all[b-gwduyih6om] {
    color: #3b82f6;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.hp-coupon-scroll-container[b-gwduyih6om] {
    width: 100%;
}

.hp-coupon-scroll[b-gwduyih6om] {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 0 16px 16px 16px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.hp-coupon-scroll[b-gwduyih6om]::-webkit-scrollbar {
    display: none;
}

.hp-coupon-scroll-item[b-gwduyih6om] {
    flex: 0 0 200px;
    scroll-snap-align: start;
}

.hp-coupon-ticket[b-gwduyih6om] {
    display: flex;
    min-height: 75px;
    height: 100%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    border: 1px solid #f3f4f6;
}

.hp-coupon-left[b-gwduyih6om] {
    flex: 0 0 60px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 6px 4px;
    text-align: center;
}

.hp-coupon-ticket.discount .hp-coupon-left[b-gwduyih6om] {
    background: #f97316;
    /* orange */
}

.hp-coupon-ticket.free-shipping .hp-coupon-left[b-gwduyih6om] {
    background: #254baf;
    /* dark blue */
}

.hp-coupon-subtitle[b-gwduyih6om] {
    font-size: 0.6rem;
    font-weight: 700;
    opacity: 0.9;
    margin-bottom: 2px;
}

.hp-coupon-value[b-gwduyih6om] {
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
}

.hp-coupon-value .currency[b-gwduyih6om] {
    font-size: 0.75rem;
    margin-right: 2px;
}

.hp-coupon-value-text[b-gwduyih6om] {
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 4px;
    line-height: 1.1;
}

.hp-coupon-icon[b-gwduyih6om] {
    font-size: 1rem;
}

.hp-coupon-divider[b-gwduyih6om] {
    position: relative;
    width: 0;
    border-left: 1px dashed #e5e7eb;
    background: white;
}

/* The top and bottom semi-circles */
.hp-coupon-divider[b-gwduyih6om]::before,
.hp-coupon-divider[b-gwduyih6om]::after {
    content: '';
    position: absolute;
    left: -7px;
    width: 14px;
    height: 14px;
    background-color: #f6f7f9;
    /* matches default page background */
    border-radius: 50%;
    z-index: 10;
}

.hp-coupon-divider[b-gwduyih6om]::before {
    top: -1px;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.05);
}

.hp-coupon-divider[b-gwduyih6om]::after {
    bottom: -1px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hp-coupon-right[b-gwduyih6om] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 8px;
    background: white;
    position: relative;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.hp-coupon-title[b-gwduyih6om] {
    font-size: 0.7rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 2px;
    line-height: 1.1;
}

.hp-coupon-date[b-gwduyih6om] {
    font-size: 0.6rem;
    color: #9ca3af;
    font-weight: 500;
}

.hp-coupon-action[b-gwduyih6om] {
    margin-top: 6px;
    width: 100%;
}

.hp-coupon-btn[b-gwduyih6om] {
    width: 100%;
    background: #254baf;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 3px 0;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 4px;
}

.hp-coupon-btn:hover[b-gwduyih6om] {
    background: #1e3a8a;
}

.hp-coupon-btn.collected[b-gwduyih6om] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: default;
}

@media (min-width: 768px) {
    .hp-coupon-scroll-item[b-gwduyih6om] {
        flex: 0 0 220px;
    }

    .hp-coupon-ticket[b-gwduyih6om] {
        min-height: 90px;
    }

    .hp-coupon-left[b-gwduyih6om] {
        flex: 0 0 70px;
        padding: 8px 4px;
    }

    .hp-coupon-subtitle[b-gwduyih6om] {
        font-size: 0.65rem;
    }

    .hp-coupon-value[b-gwduyih6om] {
        font-size: 1.25rem;
    }

    .hp-coupon-value .currency[b-gwduyih6om] {
        font-size: 0.85rem;
    }

    .hp-coupon-value-text[b-gwduyih6om] {
        font-size: 0.85rem;
    }

    .hp-coupon-icon[b-gwduyih6om] {
        font-size: 1.2rem;
    }

    .hp-coupon-right[b-gwduyih6om] {
        padding: 8px 10px;
    }

    .hp-coupon-title[b-gwduyih6om] {
        font-size: 0.75rem;
    }

    .hp-coupon-date[b-gwduyih6om] {
        font-size: 0.65rem;
    }

    .hp-coupon-btn[b-gwduyih6om] {
        padding: 4px 0;
        font-size: 0.75rem;
    }
}

/* Compact Blog Section */
.hp-blog-section[b-gwduyih6om] {
    padding: 20px 0 30px 0;
}

.hp-blog-header[b-gwduyih6om] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 16px;
}

.hp-blog-title[b-gwduyih6om] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hp-blog-title h2[b-gwduyih6om] {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0;
}

.hp-blog-icon[b-gwduyih6om] {
    font-size: 1.2rem;
}

.hp-blog-view-all[b-gwduyih6om] {
    color: #3b82f6;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.hp-blog-list[b-gwduyih6om] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hp-blog-item[b-gwduyih6om] {
    display: flex;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    padding: 12px;
    gap: 12px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}

.hp-blog-item:hover[b-gwduyih6om] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.hp-blog-image[b-gwduyih6om] {
    flex: 0 0 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-blog-item:nth-child(3n+1) .hp-blog-image[b-gwduyih6om] {
    background: #e0f2fe;
}

.hp-blog-item:nth-child(3n+2) .hp-blog-image[b-gwduyih6om] {
    background: #eef2ff;
}

.hp-blog-item:nth-child(3n+3) .hp-blog-image[b-gwduyih6om] {
    background: #fef08a;
}

.hp-blog-image img[b-gwduyih6om] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-blog-content[b-gwduyih6om] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.hp-blog-category[b-gwduyih6om] {
    display: inline-block;
    align-self: flex-start;
    background: #eef2ff;
    color: #3b82f6;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-bottom: 6px;
}

.hp-blog-title-text[b-gwduyih6om] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp-blog-meta[b-gwduyih6om] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 500;
    margin-top: auto;
}

.hp-blog-meta-sep[b-gwduyih6om] {
    font-size: 0.5rem;
}

.skeleton-blog-item .skeleton[b-gwduyih6om] {
    background: #f3f4f6;
}

@media (min-width: 768px) {
    .hp-blog-list[b-gwduyih6om] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding: 0;
    }

    .hp-blog-header[b-gwduyih6om] {
        padding: 0;
    }

    .hp-blog-title h2[b-gwduyih6om] {
        font-size: 1.5rem;
    }

    .hp-blog-item[b-gwduyih6om] {
        padding: 16px;
        gap: 16px;
    }

    .hp-blog-image[b-gwduyih6om] {
        flex: 0 0 90px;
        height: 90px;
    }

    .hp-blog-title-text[b-gwduyih6om] {
        font-size: 1rem;
    }
}
/* /Components/Pages/HowToOrder.razor.rz.scp.css */
/* How to Order Page Styles - Matching About/Privacy Page Design */

/* Hero Section */
.hero-section[b-61p66n04lk] {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(to bottom, var(--primary-blue) 0%, #0062ff4b 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
    color: white;
    text-align: center;
}

/* Floating Bone Animations */
.floating-bone[b-61p66n04lk] {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.bone-1[b-61p66n04lk] {
    top: 12%;
    left: 8%;
    width: 70px;
    animation: float1-b-61p66n04lk 4s ease-in-out infinite;
}

.bone-2[b-61p66n04lk] {
    bottom: 18%;
    right: 10%;
    width: 90px;
    animation: float2-b-61p66n04lk 5s ease-in-out infinite;
}

.bone-3[b-61p66n04lk] {
    top: 60%;
    left: 15%;
    width: 55px;
    opacity: 0.8;
    animation: float3-b-61p66n04lk 4.5s ease-in-out infinite 0.5s;
}

.bone-4[b-61p66n04lk] {
    top: 25%;
    right: 18%;
    width: 65px;
    opacity: 0.75;
    animation: float4-b-61p66n04lk 5.5s ease-in-out infinite 1s;
}

@keyframes float1-b-61p66n04lk {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    25% { transform: translateY(-12px) translateX(5px) rotate(5deg); }
    50% { transform: translateY(-20px) translateX(0) rotate(10deg); }
    75% { transform: translateY(-8px) translateX(-5px) rotate(3deg); }
}

@keyframes float2-b-61p66n04lk {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    33% { transform: translateY(-18px) translateX(-8px) rotate(-8deg); }
    66% { transform: translateY(-25px) translateX(5px) rotate(-12deg); }
}

@keyframes float3-b-61p66n04lk {
    0%, 100% { transform: translateY(0) translateX(0) rotate(-5deg); }
    40% { transform: translateY(-15px) translateX(10px) rotate(8deg); }
    80% { transform: translateY(-22px) translateX(-5px) rotate(0deg); }
}

@keyframes float4-b-61p66n04lk {
    0%, 100% { transform: translateY(0) translateX(0) rotate(10deg); }
    30% { transform: translateY(-10px) translateX(-10px) rotate(-5deg); }
    60% { transform: translateY(-28px) translateX(8px) rotate(15deg); }
    85% { transform: translateY(-12px) translateX(-3px) rotate(5deg); }
}

.hero-section .container[b-61p66n04lk] {
    position: relative;
    z-index: 2;
}

.section-tag[b-61p66n04lk] {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.hero-section h1[b-61p66n04lk] {
    font-size: 2.75rem;
    margin: 0 0 16px;
    font-weight: 700;
    color: #fde272;
}

.hero-subtitle[b-61p66n04lk] {
    font-size: 1.5rem;
    margin: 0 0 24px;
    opacity: 0.95;
}

.hero-description[b-61p66n04lk] {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.9;
}

/* Content Section */
.content-section[b-61p66n04lk] {
    padding: 60px 0;
    background: #f8f9fa;
}

.content-section .container[b-61p66n04lk] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Steps Timeline */
.steps-timeline[b-61p66n04lk] {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.steps-timeline[b-61p66n04lk]::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 40px;
    bottom: 40px;
    width: 3px;
    background: linear-gradient(to bottom, var(--primary-blue), var(--primary-yellow));
    border-radius: 3px;
}

.step-card[b-61p66n04lk] {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    position: relative;
    padding: 20px 0;
}

.step-number[b-61p66n04lk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--primary-blue);
    color: #fff;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(1, 69, 178, 0.35);
    border: 4px solid #fff;
}

.step-content[b-61p66n04lk] {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
    flex: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step-content:hover[b-61p66n04lk] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.step-icon[b-61p66n04lk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #e8f4ff, #cce5ff);
    border-radius: 12px;
    margin-bottom: 16px;
}

.step-icon i[b-61p66n04lk] {
    font-size: 1.3rem;
    color: var(--primary-blue);
}

.step-content h2[b-61p66n04lk] {
    color: var(--primary-blue);
    font-size: 1.4rem;
    margin: 0 0 12px;
    font-weight: 700;
}

.step-content p[b-61p66n04lk] {
    color: #555;
    line-height: 1.8;
    margin-bottom: 16px;
}

/* Tips Box */
.step-tips[b-61p66n04lk] {
    background: #fff9e6;
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid #fde272;
    margin-top: 12px;
}

.step-tips h4[b-61p66n04lk] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #856404;
    font-size: 0.95rem;
    margin: 0 0 10px;
}

.step-tips h4 i[b-61p66n04lk] {
    color: #ffc107;
}

.step-tips ul[b-61p66n04lk] {
    padding-left: 18px;
    margin: 0;
}

.step-tips ul li[b-61p66n04lk] {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 4px;
}

/* Delivery Options Grid */
.delivery-options[b-61p66n04lk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.delivery-option[b-61p66n04lk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f0f7ff;
    border-radius: 12px;
    border: 1px solid #cce5ff;
    transition: transform 0.2s ease;
}

.delivery-option:hover[b-61p66n04lk] {
    transform: translateY(-2px);
}

.delivery-option i[b-61p66n04lk] {
    font-size: 1.3rem;
    color: var(--primary-blue);
    width: 24px;
    text-align: center;
}

.delivery-option strong[b-61p66n04lk] {
    display: block;
    color: #333;
    font-size: 0.95rem;
}

.delivery-option span[b-61p66n04lk] {
    font-size: 0.85rem;
    color: #666;
}

/* Payment Methods Grid */
.payment-methods[b-61p66n04lk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.payment-method[b-61p66n04lk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #eee;
}

.payment-method i[b-61p66n04lk] {
    font-size: 1.2rem;
    color: var(--primary-blue);
    width: 24px;
    text-align: center;
}

.payment-method span[b-61p66n04lk] {
    color: #333;
    font-size: 0.95rem;
}

/* Info Box */
.info-box[b-61p66n04lk] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    margin-top: 16px;
    background: #e3f2fd;
    border: 1px solid #90caf9;
}

.info-box i[b-61p66n04lk] {
    color: #1976d2;
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box p[b-61p66n04lk] {
    margin: 0;
    color: #0d47a1;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* CTA Section */
.cta-section[b-61p66n04lk] {
    padding: 60px 0;
    background: #fff;
}

.cta-section .container[b-61p66n04lk] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

.cta-card[b-61p66n04lk] {
    text-align: center;
    padding: 48px 32px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    border-radius: 20px;
    border: 1px solid #cce5ff;
}

.cta-card > i[b-61p66n04lk] {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 16px;
}

.cta-card h3[b-61p66n04lk] {
    color: var(--primary-blue);
    font-size: 1.5rem;
    margin: 0 0 12px;
}

.cta-card > p[b-61p66n04lk] {
    color: #555;
    margin: 0 0 28px;
    font-size: 1.05rem;
}

.cta-buttons[b-61p66n04lk] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn[b-61p66n04lk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.cta-btn.primary[b-61p66n04lk] {
    background: var(--primary-blue);
    color: #fff;
}

.cta-btn.primary:hover[b-61p66n04lk] {
    background: #1a4a7a;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(29, 78, 137, 0.3);
}

.cta-btn.line[b-61p66n04lk] {
    background: #00b900;
    color: #fff;
}

.cta-btn.line:hover[b-61p66n04lk] {
    background: #00a000;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 185, 0, 0.3);
}

.cta-btn.phone[b-61p66n04lk] {
    background: #fff;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.cta-btn.phone:hover[b-61p66n04lk] {
    background: var(--primary-blue);
    color: #fff;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section[b-61p66n04lk] {
        padding: 80px 0 60px;
    }

    .hero-section h1[b-61p66n04lk] {
        font-size: 2rem;
    }

    .hero-description[b-61p66n04lk] {
        font-size: 1rem;
    }

    .floating-bone[b-61p66n04lk] {
        opacity: 0.1;
    }

    .steps-timeline[b-61p66n04lk]::before {
        display: none;
    }

    .step-card[b-61p66n04lk] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .step-content[b-61p66n04lk] {
        padding: 24px;
    }

    .step-content h2[b-61p66n04lk] {
        font-size: 1.25rem;
    }

    .delivery-options[b-61p66n04lk],
    .payment-methods[b-61p66n04lk] {
        grid-template-columns: 1fr;
    }

    .delivery-option[b-61p66n04lk],
    .payment-method[b-61p66n04lk] {
        justify-content: flex-start;
    }

    .cta-buttons[b-61p66n04lk] {
        flex-direction: column;
        align-items: center;
    }

    .cta-btn[b-61p66n04lk] {
        width: 100%;
        max-width: 260px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-section h1[b-61p66n04lk] {
        font-size: 1.75rem;
    }

    .step-number[b-61p66n04lk] {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
}
/* /Components/Pages/Messages.razor.rz.scp.css */
.chat-container[b-7j3f5y8fe5] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* For mobile browsers */
    background-color: #f0f2f5;
    font-family: 'Prompt', 'Inter', sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050; /* Above normal navbars */
}

/* Header */
.chat-header[b-7j3f5y8fe5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 10;
}

.header-left[b-7j3f5y8fe5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-back[b-7j3f5y8fe5], .btn-icon[b-7j3f5y8fe5] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #4a5568;
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.btn-back:hover[b-7j3f5y8fe5], .btn-icon:hover[b-7j3f5y8fe5] {
    background-color: #f0f2f5;
}

.header-profile[b-7j3f5y8fe5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-img[b-7j3f5y8fe5] {
    position: relative;
    width: 40px;
    height: 40px;
}

.profile-img img[b-7j3f5y8fe5] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}

.online-indicator[b-7j3f5y8fe5] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: #38a169;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.profile-info h2[b-7j3f5y8fe5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
}

.profile-info span[b-7j3f5y8fe5] {
    font-size: 0.75rem;
    color: #38a169;
    display: block;
}

/* Chat Body (Messages) */
.chat-body[b-7j3f5y8fe5] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-date-divider[b-7j3f5y8fe5] {
    text-align: center;
    margin: 10px 0;
}

.chat-date-divider span[b-7j3f5y8fe5] {
    background-color: #e2e8f0;
    color: #4a5568;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 12px;
}

.chat-message[b-7j3f5y8fe5] {
    display: flex;
    gap: 10px;
    max-width: 85%;
}

.chat-message.user[b-7j3f5y8fe5] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-message.assistant[b-7j3f5y8fe5] {
    align-self: flex-start;
}

.message-avatar img[b-7j3f5y8fe5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 4px;
}

.message-content[b-7j3f5y8fe5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-message.user .message-content[b-7j3f5y8fe5] {
    align-items: flex-end;
}

.chat-message.assistant .message-content[b-7j3f5y8fe5] {
    align-items: flex-start;
}

.message-bubble[b-7j3f5y8fe5] {
    padding: 12px 16px;
    border-radius: 18px;
    font-family: 'Prompt', 'Noto Sans Thai', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    line-height: 1.75;
    letter-spacing: 0.01em;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.chat-message.user .message-bubble[b-7j3f5y8fe5] {
    background-color: #0056b3;
    color: #ffffff;
    border-top-right-radius: 4px;
}

.chat-message.assistant .message-bubble[b-7j3f5y8fe5] {
    background-color: #ffffff;
    color: #1e293b;
    border-top-left-radius: 4px;
}

.markdown-text strong[b-7j3f5y8fe5] {
    font-weight: 600;
}

.markdown-text em[b-7j3f5y8fe5] {
    font-style: italic;
}

.message-time[b-7j3f5y8fe5] {
    font-size: 0.7rem;
    color: #a0aec0;
    margin: 0 4px;
}

/* Typing Indicator Animation */
.typing-indicator[b-7j3f5y8fe5] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 4px;
}

.typing-indicator span[b-7j3f5y8fe5] {
    display: block;
    width: 6px;
    height: 6px;
    background-color: #a0aec0;
    border-radius: 50%;
    animation: typing-b-7j3f5y8fe5 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1)[b-7j3f5y8fe5] { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2)[b-7j3f5y8fe5] { animation-delay: -0.16s; }

@keyframes typing-b-7j3f5y8fe5 {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Footer / Input Area */
.chat-footer[b-7j3f5y8fe5] {
    background-color: #ffffff;
    padding: 12px 16px;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
    z-index: 10;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.chat-input-row[b-7j3f5y8fe5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-plus[b-7j3f5y8fe5] {
    background-color: #f0f2f5;
    color: #0056b3;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.input-wrapper[b-7j3f5y8fe5] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input[b-7j3f5y8fe5] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 10px 16px;
    font-size: 0.95rem;
    outline: none;
    background-color: #f8fafc;
    transition: border-color 0.2s, background-color 0.2s;
}

.input-wrapper input:focus[b-7j3f5y8fe5] {
    border-color: #0056b3;
    background-color: #ffffff;
}

.btn-send[b-7j3f5y8fe5] {
    background-color: #0056b3;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-send:hover:not(:disabled)[b-7j3f5y8fe5] {
    background-color: #004494;
}

.btn-send:active:not(:disabled)[b-7j3f5y8fe5] {
    transform: scale(0.95);
}

.btn-send:disabled[b-7j3f5y8fe5] {
    background-color: #cbd5e1;
    color: #f1f5f9;
    cursor: not-allowed;
}

/* Action Card (Profile Update) */
.profile-update-card[b-7j3f5y8fe5] {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    background: #ffffff;
    margin-top: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.profile-update-card h6[b-7j3f5y8fe5] {
    margin: 0 0 8px 0;
    color: #1a202c;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-update-card h6 i[b-7j3f5y8fe5] {
    color: #d69e2e;
}

.profile-update-card p[b-7j3f5y8fe5] {
    margin: 0 0 16px 0;
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.5;
}

.profile-update-card .btn[b-7j3f5y8fe5] {
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 16px;
}

/* Dropdown Menu */
.chat-dropdown[b-7j3f5y8fe5] {
    position: relative;
}

.chat-dropdown-menu[b-7j3f5y8fe5] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 180px;
    z-index: 1000;
    overflow: hidden;
}

.chat-dropdown-menu button[b-7j3f5y8fe5], .chat-dropdown-menu a[b-7j3f5y8fe5] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.95rem;
    color: #4a5568;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat-dropdown-menu button:hover[b-7j3f5y8fe5], .chat-dropdown-menu a:hover[b-7j3f5y8fe5] {
    background-color: #f8fafc;
}

.chat-dropdown-menu .text-danger[b-7j3f5y8fe5] {
    color: #e53e3e;
}

.chat-dropdown-menu .text-danger:hover[b-7j3f5y8fe5] {
    background-color: #fff5f5;
}

/* ─── Quick Reply Chips ─── */
.quick-replies[b-7j3f5y8fe5] {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: #f0f2f5;
    flex-shrink: 0;
}
.quick-replies[b-7j3f5y8fe5]::-webkit-scrollbar { display: none; }

.quick-reply-chip[b-7j3f5y8fe5] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid #0056b3;
    background: #fff;
    color: #0056b3;
    font-family: 'Prompt', 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,86,179,0.08);
}
.quick-reply-chip:hover[b-7j3f5y8fe5] {
    background: linear-gradient(135deg, #0056b3, #0078d4);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,86,179,0.2);
}
.quick-reply-chip:active[b-7j3f5y8fe5] {
    transform: scale(0.96);
}

/* ─── Product Carousel ─── */
.carousel-container[b-7j3f5y8fe5] {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 6px 2px 10px 2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.carousel-container[b-7j3f5y8fe5]::-webkit-scrollbar { display: none; }

.carousel-card[b-7j3f5y8fe5] {
    min-width: 200px;
    max-width: 200px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeef3;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s, transform 0.2s;
}
.carousel-card:hover[b-7j3f5y8fe5] {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.carousel-card-img[b-7j3f5y8fe5] {
    position: relative;
    width: 100%;
    height: 140px;
    background: #f8f9fb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.carousel-card-img img[b-7j3f5y8fe5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-sale-badge[b-7j3f5y8fe5] {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #e53935, #ff5252);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(229, 57, 53, 0.3);
}

.carousel-card-body[b-7j3f5y8fe5] {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.carousel-brand[b-7j3f5y8fe5] {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.carousel-name[b-7j3f5y8fe5] {
    font-family: 'Prompt', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carousel-rating[b-7j3f5y8fe5] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}
.carousel-stars[b-7j3f5y8fe5] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #f59e0b;
}
.carousel-reviews[b-7j3f5y8fe5] {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 400;
}

.carousel-price-row[b-7j3f5y8fe5] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 3px;
}
.carousel-price[b-7j3f5y8fe5] {
    color: #e53935;
    font-weight: 700;
    font-size: 0.95rem;
}
.carousel-old-price[b-7j3f5y8fe5] {
    color: #b0b8c1;
    font-size: 0.72rem;
    text-decoration: line-through;
}

.carousel-cta[b-7j3f5y8fe5] {
    margin-top: 6px;
}
.carousel-cta span[b-7j3f5y8fe5] {
    display: inline-block;
    background: linear-gradient(135deg, #0056b3, #0078d4);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    transition: opacity 0.2s;
}
.carousel-card:hover .carousel-cta span[b-7j3f5y8fe5] {
    opacity: 0.9;
}

/* ─── Markdown Table (Comparison Helper) ─── */
.markdown-text :deep(table)[b-7j3f5y8fe5] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    font-size: 0.82rem;
    margin: 8px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.markdown-text :deep(thead)[b-7j3f5y8fe5] {
    background: linear-gradient(135deg, #0056b3, #0078d4);
    color: #fff;
}
.markdown-text :deep(th)[b-7j3f5y8fe5] {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.78rem;
    text-align: left;
    border: none;
    white-space: nowrap;
}
.markdown-text :deep(td)[b-7j3f5y8fe5] {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f2f5;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #334155;
}
.markdown-text :deep(tr:last-child td)[b-7j3f5y8fe5] {
    border-bottom: none;
}
.markdown-text :deep(tbody tr:nth-child(even))[b-7j3f5y8fe5] {
    background: #f8fafc;
}
.markdown-text :deep(tbody tr:hover)[b-7j3f5y8fe5] {
    background: #eef4ff;
}

/* ─── Markdown lists inside bubbles ─── */
.markdown-text :deep(ul)[b-7j3f5y8fe5],
.markdown-text :deep(ol)[b-7j3f5y8fe5] {
    padding-left: 20px;
    margin: 6px 0;
}
.markdown-text :deep(li)[b-7j3f5y8fe5] {
    margin: 3px 0;
    line-height: 1.6;
}

/* ─── Markdown links ─── */
.markdown-text :deep(a)[b-7j3f5y8fe5] {
    color: #0056b3;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.markdown-text :deep(a:hover)[b-7j3f5y8fe5] {
    color: #003d80;
}
/* /Components/Pages/Notifications.razor.rz.scp.css */
/* Notifications List Page Styles */

.notifications-page[b-pqb7jbex82] {
    min-height: 100vh;
    background: #f5f5f5;
}

.page-header[b-pqb7jbex82] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left[b-pqb7jbex82] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-header h1[b-pqb7jbex82] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
}

.back-link[b-pqb7jbex82],
.settings-link[b-pqb7jbex82] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    color: #333;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.back-link:hover[b-pqb7jbex82],
.settings-link:hover[b-pqb7jbex82] {
    background: #ff6b35;
    color: white;
    transform: scale(1.05);
}

/* Auth Required State */
.auth-required[b-pqb7jbex82] {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.auth-icon[b-pqb7jbex82] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff6b35, #ff8c5a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.auth-icon i[b-pqb7jbex82] {
    font-size: 2rem;
    color: white;
}

.auth-required h2[b-pqb7jbex82] {
    font-size: 1.25rem;
    color: #333;
    margin: 0 0 10px;
}

.auth-required p[b-pqb7jbex82] {
    color: #666;
    margin: 0 0 20px;
}

/* Empty State */
.empty-state[b-pqb7jbex82] {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.empty-icon[b-pqb7jbex82] {
    width: 80px;
    height: 80px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.empty-icon i[b-pqb7jbex82] {
    font-size: 2rem;
    color: #999;
}

.empty-state h2[b-pqb7jbex82] {
    font-size: 1.25rem;
    color: #333;
    margin: 0 0 10px;
}

.empty-state p[b-pqb7jbex82] {
    color: #666;
    margin: 0 0 20px;
}

/* Loading State */
.loading-state[b-pqb7jbex82] {
    text-align: center;
    padding: 60px 20px;
}

.loading-state p[b-pqb7jbex82] {
    margin-top: 16px;
    color: #666;
}

/* Mark All Section */
.mark-all-section[b-pqb7jbex82] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.mark-all-section span[b-pqb7jbex82] {
    font-size: 0.9rem;
    color: #666;
}

.mark-all-section .btn-link[b-pqb7jbex82] {
    color: #ff6b35;
    text-decoration: none;
    font-size: 0.9rem;
}

/* Notifications List */
.notifications-list[b-pqb7jbex82] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-card[b-pqb7jbex82] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 16px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
}

.notification-card:hover[b-pqb7jbex82] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.notification-card.unread[b-pqb7jbex82] {
    background: #fff8f5;
    border-left: 4px solid #ff6b35;
}

.notification-icon-wrapper[b-pqb7jbex82] {
    flex-shrink: 0;
}

.notification-icon[b-pqb7jbex82] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon.default[b-pqb7jbex82] {
    background: #f0f0f0;
    color: #666;
}

.notification-icon.success[b-pqb7jbex82] {
    background: #e8f5e9;
    color: #4caf50;
}

.notification-icon.error[b-pqb7jbex82] {
    background: #ffeaea;
    color: #f44336;
}

.notification-icon.shipping[b-pqb7jbex82] {
    background: #e3f2fd;
    color: #2196f3;
}

.notification-icon.promo[b-pqb7jbex82] {
    background: #fff3e0;
    color: #ff9800;
}

.notification-icon i[b-pqb7jbex82] {
    font-size: 1.25rem;
}

.notification-content[b-pqb7jbex82] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-pqb7jbex82] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px;
    line-height: 1.3;
}

.notification-body[b-pqb7jbex82] {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time[b-pqb7jbex82] {
    font-size: 0.75rem;
    color: #999;
}

.unread-dot[b-pqb7jbex82] {
    width: 10px;
    height: 10px;
    background: #ff6b35;
    border-radius: 50%;
    flex-shrink: 0;
}

.notification-arrow[b-pqb7jbex82] {
    color: #ccc;
    flex-shrink: 0;
}

/* Load More */
.load-more[b-pqb7jbex82] {
    text-align: center;
    padding: 20px;
}

.load-more .btn[b-pqb7jbex82] {
    min-width: 150px;
}

/* Mobile */
@media (max-width: 576px) {
    .notification-card[b-pqb7jbex82] {
        padding: 12px;
    }
    
    .notification-icon[b-pqb7jbex82] {
        width: 40px;
        height: 40px;
    }
    
    .notification-icon i[b-pqb7jbex82] {
        font-size: 1rem;
    }
    
    .notification-title[b-pqb7jbex82] {
        font-size: 0.9rem;
    }
    
    .notification-body[b-pqb7jbex82] {
        font-size: 0.8rem;
    }
}
/* /Components/Pages/NotificationSettings.razor.rz.scp.css */
/* Notification Settings Page Styles */

.notification-settings-page[b-o6qynx3ecg] {
    min-height: 100vh;
    background: #f5f5f5;
}

.page-header[b-o6qynx3ecg] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-header h1[b-o6qynx3ecg] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
}

.back-link[b-o6qynx3ecg] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    color: #333;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.back-link:hover[b-o6qynx3ecg] {
    background: #ff6b35;
    color: white;
    transform: scale(1.05);
}

.settings-section[b-o6qynx3ecg] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.settings-section h2[b-o6qynx3ecg] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-section h2 i[b-o6qynx3ecg] {
    color: #ff6b35;
}

/* Permission Status */
.permission-status[b-o6qynx3ecg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #f9f9f9;
}

.permission-status.granted[b-o6qynx3ecg] {
    background: #e8f5e9;
}

.permission-status.denied[b-o6qynx3ecg] {
    background: #ffeaea;
}

.status-icon[b-o6qynx3ecg] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #4caf50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.status-icon.warning[b-o6qynx3ecg] {
    background: #f44336;
}

.status-icon.default[b-o6qynx3ecg] {
    background: #9e9e9e;
}

.status-content[b-o6qynx3ecg] {
    flex: 1;
}

.status-content strong[b-o6qynx3ecg] {
    display: block;
    font-size: 0.95rem;
    color: #333;
}

.status-content p[b-o6qynx3ecg] {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: #666;
}

/* Setting Items */
.setting-item[b-o6qynx3ecg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child[b-o6qynx3ecg] {
    border-bottom: none;
}

.setting-info[b-o6qynx3ecg] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.setting-info > i[b-o6qynx3ecg] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff3ef;
    color: #ff6b35;
    border-radius: 10px;
    font-size: 1rem;
    flex-shrink: 0;
}

.setting-info > div strong[b-o6qynx3ecg] {
    display: block;
    font-size: 0.9rem;
    color: #333;
}

.setting-info > div p[b-o6qynx3ecg] {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #999;
}

/* Toggle Switch */
.switch[b-o6qynx3ecg] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.switch input[b-o6qynx3ecg] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-o6qynx3ecg] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 28px;
}

.slider[b-o6qynx3ecg]:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider[b-o6qynx3ecg] {
    background: linear-gradient(135deg, #ff6b35, #ff8c5a);
}

input:checked + .slider[b-o6qynx3ecg]:before {
    transform: translateX(24px);
}

/* Quiet Hours */
.quiet-hours-settings[b-o6qynx3ecg] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 12px;
}

.time-picker[b-o6qynx3ecg] {
    flex: 1;
}

.time-picker label[b-o6qynx3ecg] {
    display: block;
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 4px;
}

.time-picker input[b-o6qynx3ecg] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
}

.time-picker input:focus[b-o6qynx3ecg] {
    outline: none;
    border-color: #ff6b35;
}

.time-divider[b-o6qynx3ecg] {
    color: #999;
    padding-top: 20px;
}

/* Save Toast */
.save-toast[b-o6qynx3ecg] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: toast-pop-b-o6qynx3ecg 0.3s ease;
    z-index: 1000;
}

.save-toast i[b-o6qynx3ecg] {
    color: #4caf50;
}

@keyframes toast-pop-b-o6qynx3ecg {
    from {
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Help Modal */
.modal-overlay[b-o6qynx3ecg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.modal-content[b-o6qynx3ecg] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header[b-o6qynx3ecg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.modal-header h3[b-o6qynx3ecg] {
    margin: 0;
    font-size: 1.1rem;
}

.modal-close[b-o6qynx3ecg] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #999;
    cursor: pointer;
    padding: 4px;
}

.modal-body[b-o6qynx3ecg] {
    padding: 20px;
    overflow-y: auto;
}

.help-section[b-o6qynx3ecg] {
    margin-bottom: 20px;
}

.help-section:last-child[b-o6qynx3ecg] {
    margin-bottom: 0;
}

.help-section h4[b-o6qynx3ecg] {
    font-size: 0.95rem;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-section h4 i[b-o6qynx3ecg] {
    color: #ff6b35;
}

.help-section ol[b-o6qynx3ecg] {
    margin: 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: #666;
}

.help-section ol li[b-o6qynx3ecg] {
    margin-bottom: 6px;
}

/* Mobile */
@media (max-width: 576px) {
    .permission-status[b-o6qynx3ecg] {
        flex-direction: column;
        text-align: center;
    }
    
    .permission-status button[b-o6qynx3ecg] {
        width: 100%;
    }
    
    .quiet-hours-settings[b-o6qynx3ecg] {
        flex-direction: column;
    }
    
    .time-divider[b-o6qynx3ecg] {
        transform: rotate(90deg);
        padding-top: 0;
    }
}
/* /Components/Pages/OrderConfirmation.razor.rz.scp.css */
.confirmation-page[b-q4svqclz7l] {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--gray-50, #f9fafb) 0%, var(--primary-blue-light, #eaf3ff) 100%);
    padding: 2rem 1rem;
}

.container[b-q4svqclz7l] {
    max-width: 600px;
    margin: 0 auto;
}

/* Loading State */
.loading-state[b-q4svqclz7l] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.spinner[b-q4svqclz7l] {
    width: 56px;
    height: 56px;
    border: 4px solid #f0f0f0;
    border-top-color: var(--primary-blue, #0145b2);
    border-radius: 50%;
    animation: spin-b-q4svqclz7l 1s linear infinite;
    margin: 0 auto 1.5rem;
}

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

/* Error Card */
.result-card.error[b-q4svqclz7l] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 3rem 2rem;
    text-align: center;
}

.result-card.error .result-icon[b-q4svqclz7l] {
    font-size: 4rem;
    color: #dc3545;
    margin-bottom: 1.5rem;
}

.result-card.error h1[b-q4svqclz7l] {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.result-card.error p[b-q4svqclz7l] {
    color: #666;
    margin-bottom: 2rem;
}

/* Success Header */
.success-header[b-q4svqclz7l] {
    text-align: center;
    padding: 2rem 0;
    animation: slideDown-b-q4svqclz7l 0.5s ease-out;
}

@keyframes slideDown-b-q4svqclz7l {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.success-icon[b-q4svqclz7l] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-blue, #0145b2) 0%, #0156d4 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: scaleIn-b-q4svqclz7l 0.4s ease-out 0.2s both;
    box-shadow: 0 8px 24px rgba(1, 69, 178, 0.3);
}

@keyframes scaleIn-b-q4svqclz7l {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.success-icon i[b-q4svqclz7l] {
    font-size: 2.5rem;
    color: white;
}

.success-header h1[b-q4svqclz7l] {
    font-size: 1.75rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.success-message[b-q4svqclz7l] {
    color: #666;
    font-size: 1rem;
}

/* Order Card */
.order-card[b-q4svqclz7l] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    margin-bottom: 1rem;
    animation: slideUp-b-q4svqclz7l 0.4s ease-out 0.1s both;
}

@keyframes slideUp-b-q4svqclz7l {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.order-header[b-q4svqclz7l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 1rem;
}

.order-number .label[b-q4svqclz7l] {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 0.25rem;
}

.order-number .value[b-q4svqclz7l] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    font-family: monospace;
}

.order-status[b-q4svqclz7l] {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-success[b-q4svqclz7l] {
    background: var(--primary-blue-light, #eaf3ff);
    color: var(--primary-blue, #0145b2);
}

.status-warning[b-q4svqclz7l] {
    background: #fff8e1;
    color: var(--primary-orange, #ffa819);
}

.status-info[b-q4svqclz7l] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-error[b-q4svqclz7l] {
    background: #ffebee;
    color: #c62828;
}

.status-default[b-q4svqclz7l] {
    background: #f5f5f5;
    color: #666;
}

.order-date[b-q4svqclz7l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.25rem;
}

.order-date i[b-q4svqclz7l] {
    color: #888;
}

/* Order Items */
.order-items[b-q4svqclz7l] {
    margin-bottom: 1.25rem;
}

.order-items h3[b-q4svqclz7l] {
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 1rem;
}

.item-row[b-q4svqclz7l] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px dashed #eee;
}

.item-row:last-child[b-q4svqclz7l] {
    border-bottom: none;
}

.item-image[b-q4svqclz7l] {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
}

.item-image img[b-q4svqclz7l] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-image[b-q4svqclz7l] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}

.item-details[b-q4svqclz7l] {
    flex: 1;
    min-width: 0;
}

.item-name[b-q4svqclz7l] {
    display: block;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-variant[b-q4svqclz7l] {
    display: block;
    font-size: 0.8rem;
    color: #888;
}

.item-qty[b-q4svqclz7l] {
    display: block;
    font-size: 0.8rem;
    color: #666;
}

.item-price[b-q4svqclz7l] {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* Price Summary */
.price-summary[b-q4svqclz7l] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1rem;
}

.summary-row[b-q4svqclz7l] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: #666;
}

.summary-row.discount span:last-child[b-q4svqclz7l] {
    color: #e53935;
}

.summary-row.total[b-q4svqclz7l] {
    border-top: 1px solid #ddd;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-weight: 600;
    color: #333;
}

.total-amount[b-q4svqclz7l] {
    font-size: 1.1rem;
    color: var(--primary-blue, #0145b2);
    font-weight: 700;
}

/* Info Cards */
.info-card[b-q4svqclz7l] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    margin-bottom: 1rem;
    animation: slideUp-b-q4svqclz7l 0.4s ease-out 0.2s both;
}

.info-card h3[b-q4svqclz7l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: #333;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.info-card h3 i[b-q4svqclz7l] {
    color: var(--primary-blue, #0145b2);
}

.info-content p[b-q4svqclz7l] {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

.recipient-name[b-q4svqclz7l] {
    font-weight: 600;
    color: #333 !important;
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
}

.recipient-phone[b-q4svqclz7l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem !important;
}

.recipient-phone i[b-q4svqclz7l] {
    font-size: 0.85rem;
    color: #888;
}

.info-row[b-q4svqclz7l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.info-row:not(:last-child)[b-q4svqclz7l] {
    border-bottom: 1px dashed #eee;
}

.info-row span:first-child[b-q4svqclz7l] {
    color: #666;
    font-size: 0.9rem;
}

.info-row span:last-child[b-q4svqclz7l] {
    font-weight: 500;
    color: #333;
}

.status-badge[b-q4svqclz7l] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.ref-code[b-q4svqclz7l] {
    font-family: monospace;
    font-size: 0.85rem !important;
}

/* Pickup Location Card */
.pickup-card[b-q4svqclz7l] {
    border-left: 4px solid #22c55e;
}

.pickup-card h3 i[b-q4svqclz7l] {
    color: #22c55e;
}

.store-name[b-q4svqclz7l] {
    font-size: 1rem !important;
    color: #1a365d !important;
    margin-bottom: 0.5rem !important;
}

.store-address[b-q4svqclz7l],
.store-hours[b-q4svqclz7l],
.store-phone[b-q4svqclz7l] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.375rem !important;
}

.store-address i[b-q4svqclz7l],
.store-hours i[b-q4svqclz7l],
.store-phone i[b-q4svqclz7l] {
    color: #888;
    font-size: 0.85rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.store-hours i[b-q4svqclz7l] {
    color: #22c55e;
}

.pickup-instructions[b-q4svqclz7l] {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 10px;
    margin-top: 1rem;
    border: 1px solid #fbbf24;
}

.pickup-instructions>i[b-q4svqclz7l] {
    color: #d97706;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.pickup-instructions p[b-q4svqclz7l] {
    margin: 0;
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.5;
}

/* Scheduled Delivery */
.scheduled-delivery[b-q4svqclz7l] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 10px;
    margin-top: 1rem;
    border: 1px solid #93c5fd;
}

.scheduled-delivery>i[b-q4svqclz7l] {
    color: #2563eb;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.scheduled-info[b-q4svqclz7l] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scheduled-info strong[b-q4svqclz7l] {
    color: #1e40af;
    font-size: 0.9rem;
}

.scheduled-info span[b-q4svqclz7l] {
    color: #1d4ed8;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Pet Card */
.pet-card h3 i[b-q4svqclz7l] {
    color: var(--primary-orange, #ffa819);
}

.pet-list[b-q4svqclz7l] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.pet-item[b-q4svqclz7l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #fff8f0 0%, #fff5e6 100%);
    border-radius: 12px;
    border: 1px solid #ffe4cc;
    flex: 1;
    min-width: 150px;
}

.pet-avatar[b-q4svqclz7l] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-orange, #ffa819) 0%, #ff8c00 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.pet-avatar img[b-q4svqclz7l] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-avatar i[b-q4svqclz7l] {
    font-size: 1.25rem;
    color: white;
}

.pet-avatar .fallback-icon[b-q4svqclz7l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pet-info[b-q4svqclz7l] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pet-name[b-q4svqclz7l] {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.pet-type[b-q4svqclz7l] {
    font-size: 0.8rem;
    color: #888;
}

/* Next Steps */
.next-steps[b-q4svqclz7l] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    animation: slideUp-b-q4svqclz7l 0.4s ease-out 0.3s both;
}

.next-steps h3[b-q4svqclz7l] {
    font-size: 1rem;
    color: #333;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.step-item[b-q4svqclz7l] {
    display: flex;
    gap: 1rem;
    padding: 0.875rem 0;
    position: relative;
}

.step-item:not(:last-child)[b-q4svqclz7l]::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 46px;
    width: 2px;
    height: calc(100% - 30px);
    background: #e0e0e0;
}

.step-icon[b-q4svqclz7l] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.step-icon i[b-q4svqclz7l] {
    font-size: 0.9rem;
    color: #888;
}

.step-item.success .step-icon[b-q4svqclz7l] {
    background: var(--primary-blue-light, #eaf3ff);
}

.step-item.success .step-icon i[b-q4svqclz7l] {
    color: var(--primary-blue, #0145b2);
}

.step-item.pending .step-icon[b-q4svqclz7l] {
    background: var(--primary-blue-light, #eaf3ff);
}

.step-item.pending .step-icon i[b-q4svqclz7l] {
    color: var(--primary-blue, #0145b2);
}

.step-item.warning .step-icon[b-q4svqclz7l] {
    background: #fff8e1;
}

.step-item.warning .step-icon i[b-q4svqclz7l] {
    color: var(--primary-orange, #ffa819);
}

.step-content strong[b-q4svqclz7l] {
    display: block;
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 0.25rem;
}

.step-content p[b-q4svqclz7l] {
    margin: 0;
    font-size: 0.85rem;
    color: #888;
}

/* Action Buttons */
.action-buttons[b-q4svqclz7l] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: slideUp-b-q4svqclz7l 0.4s ease-out 0.4s both;
}

.btn-primary[b-q4svqclz7l],
.btn-secondary[b-q4svqclz7l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

.btn-primary[b-q4svqclz7l] {
    background: linear-gradient(135deg, var(--primary-blue, #0145b2) 0%, #0156d4 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(1, 69, 178, 0.25);
}

.btn-primary:hover[b-q4svqclz7l] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(1, 69, 178, 0.35);
    background: linear-gradient(135deg, #0156d4 0%, var(--primary-blue, #0145b2) 100%);
}

.btn-secondary[b-q4svqclz7l] {
    background: white;
    color: #333;
    border: 1px solid #ddd;
}

.btn-secondary:hover[b-q4svqclz7l] {
    background: #f8f9fa;
    border-color: #ccc;
}

/* Support Note */
.support-note[b-q4svqclz7l] {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
    animation: fadeIn-b-q4svqclz7l 0.5s ease-out 0.5s both;
}

@keyframes fadeIn-b-q4svqclz7l {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.support-note p[b-q4svqclz7l] {
    margin: 0;
    font-size: 0.875rem;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.support-note i[b-q4svqclz7l] {
    color: var(--primary-blue, #0145b2);
}

/* Responsive */
@media (max-width: 480px) {
    .confirmation-page[b-q4svqclz7l] {
        padding: 1rem;
    }

    .success-header h1[b-q4svqclz7l] {
        font-size: 1.5rem;
    }

    .success-icon[b-q4svqclz7l] {
        width: 70px;
        height: 70px;
    }

    .success-icon i[b-q4svqclz7l] {
        font-size: 2rem;
    }

    .order-card[b-q4svqclz7l],
    .info-card[b-q4svqclz7l],
    .next-steps[b-q4svqclz7l] {
        padding: 1.25rem;
    }

    .item-row[b-q4svqclz7l] {
        gap: 0.75rem;
    }

    .item-image[b-q4svqclz7l] {
        width: 44px;
        height: 44px;
    }
}
/* Item-Level Pet Tags */
.item-pet-tags[b-q4svqclz7l] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.item-pet-tags > i[b-q4svqclz7l] {
    color: #ec4899;
    font-size: 0.7rem;
}
.pet-tag-chip[b-q4svqclz7l] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    background: linear-gradient(135deg, #fdf2f8, #fce7f3);
    border: 1px solid #f9a8d4;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #be185d;
    font-weight: 500;
}
/* /Components/Pages/OrderTracking.razor.rz.scp.css */
/* ============================================
   ORDER TRACKING PAGE
   Public page for guest order tracking
   ============================================ */

.tracking-page[b-1cgn4ooyfo] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
}

.tracking-page .container[b-1cgn4ooyfo] {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Loading */
.skeleton[b-1cgn4ooyfo] {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-1cgn4ooyfo 1.5s infinite;
    border-radius: 8px;
}

@keyframes shimmer-b-1cgn4ooyfo {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Error State */
.result-card.error[b-1cgn4ooyfo] {
    background: white;
    border-radius: 16px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.result-icon.error-icon[b-1cgn4ooyfo] {
    font-size: 64px;
    color: #e74c3c;
    margin-bottom: 20px;
}

.result-card.error h1[b-1cgn4ooyfo] {
    font-size: 1.5rem;
    color: #2d3436;
    margin-bottom: 8px;
}

.result-card.error p[b-1cgn4ooyfo] {
    color: #636e72;
    margin-bottom: 24px;
}

.result-actions .btn-primary[b-1cgn4ooyfo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-color, #ff6b35);
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

.result-actions .btn-primary:hover[b-1cgn4ooyfo] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* ============== Tracking Content ============== */

.tracking-content[b-1cgn4ooyfo] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Header */
.tracking-header[b-1cgn4ooyfo] {
    text-align: center;
    padding: 32px 20px 20px;
}

.tracking-icon[b-1cgn4ooyfo] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--primary-color, #ff6b35), #ff8f65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.25);
}

.tracking-icon i[b-1cgn4ooyfo] {
    font-size: 32px;
    color: white;
}

.tracking-header h1[b-1cgn4ooyfo] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2d3436;
    margin: 0 0 8px;
}

.order-ref[b-1cgn4ooyfo] {
    color: #636e72;
    font-size: 0.95rem;
}

.order-ref strong[b-1cgn4ooyfo] {
    color: #2d3436;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

/* ============== Status Timeline ============== */

.status-timeline[b-1cgn4ooyfo] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 24px 16px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
}

.timeline-step[b-1cgn4ooyfo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 64px;
    position: relative;
}

.step-dot[b-1cgn4ooyfo] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.timeline-step.upcoming .step-dot[b-1cgn4ooyfo] {
    background: #f0f0f0;
    color: #b2bec3;
    border: 2px solid #dfe6e9;
}

.timeline-step.active .step-dot[b-1cgn4ooyfo] {
    background: linear-gradient(135deg, var(--primary-color, #ff6b35), #ff8f65);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
    animation: pulse-dot-b-1cgn4ooyfo 2s infinite;
}

.timeline-step.completed .step-dot[b-1cgn4ooyfo] {
    background: #00b894;
    color: white;
}

@keyframes pulse-dot-b-1cgn4ooyfo {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
    }

    50% {
        box-shadow: 0 4px 20px rgba(255, 107, 53, 0.55);
    }
}

.step-label[b-1cgn4ooyfo] {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    color: #b2bec3;
    white-space: nowrap;
}

.timeline-step.active .step-label[b-1cgn4ooyfo] {
    color: var(--primary-color, #ff6b35);
}

.timeline-step.completed .step-label[b-1cgn4ooyfo] {
    color: #00b894;
}

.step-time[b-1cgn4ooyfo] {
    font-size: 0.65rem;
    color: #636e72;
}

.timeline-line[b-1cgn4ooyfo] {
    height: 3px;
    flex: 1;
    min-width: 20px;
    margin-top: 19px;
    border-radius: 2px;
    transition: background 0.3s;
}

.timeline-line.upcoming[b-1cgn4ooyfo] {
    background: #dfe6e9;
}

.timeline-line.completed[b-1cgn4ooyfo] {
    background: #00b894;
}

/* Current Status Badge */
.current-status[b-1cgn4ooyfo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
}

.current-status.status-pending[b-1cgn4ooyfo] {
    background: #ffeaa7;
    color: #d35400;
}

.current-status.status-paid[b-1cgn4ooyfo] {
    background: #dfe6e9;
    color: #2d3436;
}

.current-status.status-processing[b-1cgn4ooyfo] {
    background: #74b9ff;
    color: white;
}

.current-status.status-shipped[b-1cgn4ooyfo] {
    background: #a29bfe;
    color: white;
}

.current-status.status-delivered[b-1cgn4ooyfo] {
    background: #00b894;
    color: white;
}

/* Tracking Number Card */
.tracking-number-card[b-1cgn4ooyfo] {
    background: white;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.tracking-number-card h3[b-1cgn4ooyfo] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #636e72;
    margin: 0 0 12px;
    font-weight: 600;
}

.tracking-value[b-1cgn4ooyfo] {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    color: #2d3436;
    background: #f8f9fa;
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
}

/* Order Card */
.order-card[b-1cgn4ooyfo] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.order-card h3[b-1cgn4ooyfo] {
    font-size: 1rem;
    font-weight: 700;
    color: #2d3436;
    margin: 0 0 16px;
}

.order-items[b-1cgn4ooyfo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-row[b-1cgn4ooyfo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.item-row:last-child[b-1cgn4ooyfo] {
    border-bottom: none;
}

.item-image[b-1cgn4ooyfo] {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8f9fa;
}

.item-image img[b-1cgn4ooyfo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-details[b-1cgn4ooyfo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.item-name[b-1cgn4ooyfo] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #2d3436;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-variant[b-1cgn4ooyfo] {
    font-size: 0.78rem;
    color: #636e72;
}

.item-qty[b-1cgn4ooyfo] {
    font-size: 0.78rem;
    color: #b2bec3;
}

.item-price[b-1cgn4ooyfo] {
    font-weight: 700;
    color: var(--primary-color, #ff6b35);
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Price Summary */
.price-summary[b-1cgn4ooyfo] {
    border-top: 2px solid #f0f0f0;
    margin-top: 16px;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-row[b-1cgn4ooyfo] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #636e72;
}

.summary-row.discount span:last-child[b-1cgn4ooyfo] {
    color: #00b894;
    font-weight: 600;
}

.summary-row.total[b-1cgn4ooyfo] {
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    margin-top: 4px;
    font-weight: 700;
    font-size: 1.05rem;
    color: #2d3436;
}

.total-amount[b-1cgn4ooyfo] {
    color: var(--primary-color, #ff6b35);
}

/* Info Card */
.info-card[b-1cgn4ooyfo] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.info-card h3[b-1cgn4ooyfo] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: #2d3436;
    margin: 0 0 14px;
}

.info-card h3 i[b-1cgn4ooyfo] {
    color: var(--primary-color, #ff6b35);
}

.info-content p[b-1cgn4ooyfo] {
    margin: 0 0 4px;
    font-size: 0.9rem;
    color: #636e72;
    line-height: 1.5;
}

.info-content p strong[b-1cgn4ooyfo] {
    color: #2d3436;
}

/* Footer */
.tracking-footer[b-1cgn4ooyfo] {
    text-align: center;
    padding: 12px 0 20px;
}

.btn-secondary[b-1cgn4ooyfo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: white;
    color: #2d3436;
    border: 2px solid #dfe6e9;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.btn-secondary:hover[b-1cgn4ooyfo] {
    border-color: var(--primary-color, #ff6b35);
    color: var(--primary-color, #ff6b35);
    transform: translateY(-1px);
}

/* ============== Responsive ============== */
@media (max-width: 600px) {
    .tracking-page[b-1cgn4ooyfo] {
        padding: 20px 0;
    }

    .tracking-header h1[b-1cgn4ooyfo] {
        font-size: 1.3rem;
    }

    .status-timeline[b-1cgn4ooyfo] {
        padding: 16px 8px;
    }

    .step-dot[b-1cgn4ooyfo] {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .step-label[b-1cgn4ooyfo] {
        font-size: 0.6rem;
    }

    .timeline-line[b-1cgn4ooyfo] {
        margin-top: 15px;
        min-width: 12px;
    }

    .order-card[b-1cgn4ooyfo],
    .info-card[b-1cgn4ooyfo],
    .tracking-number-card[b-1cgn4ooyfo] {
        padding: 16px;
        border-radius: 12px;
    }
}
/* /Components/Pages/PaymentBank.razor.rz.scp.css */
.payment-page[b-sodv3vi043] {
    min-height: 100vh;
    background-color: #f8f9fa;
    padding: 2rem 0;
}

.payment-page .container[b-sodv3vi043] {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Back Link */
.back-link[b-sodv3vi043] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1a365d;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 2rem;
}

.back-link:hover[b-sodv3vi043] {
    color: #2c5282;
}

.back-icon[b-sodv3vi043] {
    font-size: 1.5rem;
}

/* Loading & Error States */
.loading-state[b-sodv3vi043],
.error-state[b-sodv3vi043],
.expired-state[b-sodv3vi043] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-state .spinner[b-sodv3vi043] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #1a365d;
    border-radius: 50%;
    animation: spin-b-sodv3vi043 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.error-icon[b-sodv3vi043],
.expired-icon[b-sodv3vi043] {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.error-state h2[b-sodv3vi043],
.expired-state h2[b-sodv3vi043] {
    color: #1a365d;
    margin-bottom: 0.5rem;
}

.expired-state p[b-sodv3vi043] {
    color: #718096;
    margin-bottom: 1.5rem;
}

/* Payment Summary with Timer */
.payment-summary[b-sodv3vi043] {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.summary-row[b-sodv3vi043] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.summary-row:last-child[b-sodv3vi043] {
    margin-bottom: 0;
}

.summary-row .amount[b-sodv3vi043] {
    color: #1a365d;
    font-size: 1.5rem;
    font-weight: 700;
}

.timer-row[b-sodv3vi043] {
    align-items: flex-end;
}

.timer[b-sodv3vi043] {
    text-align: right;
}

.countdown[b-sodv3vi043] {
    display: block;
    color: #e53e3e;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.countdown.urgent[b-sodv3vi043] {
    animation: pulse-urgent-b-sodv3vi043 1s infinite;
    color: #c53030;
}

@keyframes pulse-urgent-b-sodv3vi043 {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.expire-note[b-sodv3vi043] {
    display: block;
    color: #718096;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Stock Reservation Warning */
.stock-warning[b-sodv3vi043] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #fffaf0 0%, #feebcb 100%);
    border-left: 4px solid #dd6b20;
}

.stock-warning .warning-icon[b-sodv3vi043] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stock-warning span:last-child[b-sodv3vi043] {
    color: #744210;
    font-size: 0.85rem;
    line-height: 1.4;
}

.loading-state .spinner[b-sodv3vi043] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #1a365d;
    border-radius: 50%;
    animation: spin-b-sodv3vi043 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.error-icon[b-sodv3vi043] {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.error-state h2[b-sodv3vi043] {
    color: #1a365d;
    margin-bottom: 1.5rem;
}

/* Payment Content */
.payment-content[b-sodv3vi043] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

/* Payment Row */
.payment-row[b-sodv3vi043] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.row-label[b-sodv3vi043] {
    color: #1a365d;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.row-value.amount[b-sodv3vi043] {
    color: #1a365d;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Bank Accounts */
.bank-accounts[b-sodv3vi043] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bank-account[b-sodv3vi043] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.bank-account:hover[b-sodv3vi043] {
    border-color: #1a365d;
    background: #f7fafc;
}

.bank-account.selected[b-sodv3vi043] {
    border-color: #1a365d;
    background: #ebf8ff;
}

.bank-logo[b-sodv3vi043] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7fafc;
    overflow: hidden;
}

.bank-logo img[b-sodv3vi043] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bank-icon[b-sodv3vi043] {
    font-size: 1.5rem;
}

.bank-details[b-sodv3vi043] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bank-name[b-sodv3vi043] {
    color: #4a5568;
    font-size: 0.875rem;
}

.account-number[b-sodv3vi043] {
    color: #1a365d;
    font-weight: 600;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-copy[b-sodv3vi043] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.btn-copy:hover[b-sodv3vi043] {
    opacity: 1;
}

.account-name[b-sodv3vi043] {
    color: #718096;
    font-size: 0.875rem;
}

/* Bank QR Section - Centered */
.bank-qr-section[b-sodv3vi043] {
    margin: 1.5rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 16px;
    text-align: center;
    border: 1px solid #cbd5e0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bank-qr-section .qr-code[b-sodv3vi043] {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.bank-qr-section .qr-code img[b-sodv3vi043] {
    max-width: 200px;
    max-height: 200px;
    border-radius: 12px;
    background: white;
    padding: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.bank-qr-section .qr-info[b-sodv3vi043] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.bank-qr-section .qr-label[b-sodv3vi043] {
    color: #4a5568;
    font-size: 0.9rem;
}

.bank-qr-section .qr-amount[b-sodv3vi043] {
    color: #1a365d;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Transfer Form */
.transfer-form[b-sodv3vi043] {
    padding-top: 1.5rem;
}

.form-row[b-sodv3vi043] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.form-label[b-sodv3vi043] {
    color: #4a5568;
    font-weight: 500;
    min-width: 120px;
    padding-top: 0.75rem;
}

.form-field[b-sodv3vi043] {
    flex: 1;
}

.form-field input[type="text"][b-sodv3vi043],
.form-field input[type="number"][b-sodv3vi043],
.form-field input[type="date"][b-sodv3vi043],
.form-field input[type="time"][b-sodv3vi043] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    color: #2d3748;
    transition: border-color 0.2s;
}

.form-field input:focus[b-sodv3vi043] {
    outline: none;
    border-color: #1a365d;
}

.amount-field[b-sodv3vi043] {
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.amount-field input[b-sodv3vi043] {
    border: none !important;
    border-radius: 0 !important;
    flex: 1;
    text-align: right;
    font-weight: 600;
}

.amount-field input:focus[b-sodv3vi043] {
    box-shadow: none;
}

.amount-field .unit[b-sodv3vi043] {
    padding: 0.875rem 1rem;
    background: #f7fafc;
    color: #718096;
    font-weight: 500;
    border-left: 1px solid #e2e8f0;
}

/* ===============================================
   MODERN SLIP UPLOAD SECTION
   =============================================== */

.slip-upload-row[b-sodv3vi043] {
    border-bottom: none;
    padding-bottom: 0;
}

.slip-upload-section[b-sodv3vi043] {
    width: 100%;
}

.slip-upload-area[b-sodv3vi043] {
    display: flex;
    justify-content: center;
}

/* Modern Upload Dropzone */
.upload-dropzone[b-sodv3vi043] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 2rem;
    border: 2px dashed transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(white, white) padding-box,
        linear-gradient(135deg, #cbd5e0 0%, #a0aec0 50%, #cbd5e0 100%) border-box;
    position: relative;
    overflow: hidden;
}

.upload-dropzone[b-sodv3vi043]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26, 54, 93, 0.02) 0%, rgba(44, 82, 130, 0.04) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.upload-dropzone:hover[b-sodv3vi043] {
    background: linear-gradient(white, white) padding-box,
        linear-gradient(135deg, #1a365d 0%, #2c5282 50%, #1a365d 100%) border-box;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 54, 93, 0.15);
}

.upload-dropzone:hover[b-sodv3vi043]::before {
    opacity: 1;
}

.dropzone-icon[b-sodv3vi043] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.upload-dropzone:hover .dropzone-icon[b-sodv3vi043] {
    background: linear-gradient(135deg, #ebf4ff 0%, #c3dafe 100%);
    transform: scale(1.05);
}

.dropzone-icon i[b-sodv3vi043] {
    font-size: 2rem;
    color: #718096;
    transition: all 0.3s ease;
}

.upload-dropzone:hover .dropzone-icon i[b-sodv3vi043] {
    color: #1a365d;
    animation: float-b-sodv3vi043 2s ease-in-out infinite;
}

@keyframes float-b-sodv3vi043 {

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

    50% {
        transform: translateY(-4px);
    }
}

.dropzone-text[b-sodv3vi043] {
    text-align: center;
}

.dropzone-title[b-sodv3vi043] {
    display: block;
    color: #2d3748;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.dropzone-hint[b-sodv3vi043] {
    display: block;
    color: #a0aec0;
    font-size: 0.8125rem;
}

.dropzone-button[b-sodv3vi043] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(26, 54, 93, 0.3);
}

.upload-dropzone:hover .dropzone-button[b-sodv3vi043] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.4);
}

.dropzone-button i[b-sodv3vi043] {
    font-size: 0.75rem;
}

/* Hide the actual file input completely */
.file-input-hidden[b-sodv3vi043],
.upload-dropzone input[type="file"][b-sodv3vi043],
.upload-dropzone[b-sodv3vi043]  input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

/* Slip Preview - Premium Style */
.slip-preview[b-sodv3vi043] {
    position: relative;
    max-width: 300px;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    background: white;
    padding: 0.5rem;
}

.slip-preview img[b-sodv3vi043] {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.preview-badge[b-sodv3vi043] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.4);
}

.preview-badge i[b-sodv3vi043] {
    font-size: 0.75rem;
}

.btn-remove-slip[b-sodv3vi043] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.4);
    transition: all 0.2s ease;
}

.btn-remove-slip:hover[b-sodv3vi043] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.5);
}

/* Upload Progress - Modern */
.upload-progress[b-sodv3vi043] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #ebf4ff 0%, #c3dafe 100%);
    border-radius: 12px;
    color: #1a365d;
    font-size: 0.875rem;
    font-weight: 500;
}

.progress-spinner[b-sodv3vi043] {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(26, 54, 93, 0.2);
    border-top-color: #1a365d;
    border-radius: 50%;
    animation: spin-b-sodv3vi043 0.8s linear infinite;
}

/* Messages */
.error-message[b-sodv3vi043] {
    color: #e53e3e;
    background: #fed7d7;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1.5rem;
    text-align: center;
}

.success-message[b-sodv3vi043] {
    color: #276749;
    background: #c6f6d5;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1.5rem;
    text-align: center;
}

/* Confirm Button */
.btn-confirm[b-sodv3vi043] {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-confirm:hover:not(:disabled)[b-sodv3vi043] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-confirm:disabled[b-sodv3vi043] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-small[b-sodv3vi043] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-sodv3vi043 1s linear infinite;
}

/* Button Primary */
.btn-primary[b-sodv3vi043] {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;
}

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

/* Responsive */
@media (max-width: 640px) {
    .payment-page[b-sodv3vi043] {
        padding: 1rem 0;
    }

    .payment-content[b-sodv3vi043] {
        padding: 1.5rem 1rem;
    }

    .payment-row[b-sodv3vi043],
    .form-row[b-sodv3vi043] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .row-label[b-sodv3vi043],
    .form-label[b-sodv3vi043] {
        min-width: auto;
        padding-top: 0;
    }

    .bank-accounts[b-sodv3vi043] {
        width: 100%;
    }

    .row-value.amount[b-sodv3vi043] {
        align-self: flex-end;
    }

    /* Slip Upload Responsive */
    .upload-dropzone[b-sodv3vi043] {
        padding: 1.5rem;
        gap: 0.875rem;
    }

    .dropzone-icon[b-sodv3vi043] {
        width: 56px;
        height: 56px;
    }

    .dropzone-icon i[b-sodv3vi043] {
        font-size: 1.5rem;
    }

    .dropzone-title[b-sodv3vi043] {
        font-size: 0.9375rem;
    }

    .dropzone-button[b-sodv3vi043] {
        padding: 0.625rem 1.25rem;
        font-size: 0.8125rem;
    }

    .slip-preview[b-sodv3vi043] {
        max-width: 100%;
    }

    .preview-badge[b-sodv3vi043] {
        padding: 0.375rem 0.75rem;
        font-size: 0.6875rem;
    }

    .btn-remove-slip[b-sodv3vi043] {
        width: 32px;
        height: 32px;
    }

    .bank-qr-section[b-sodv3vi043] {
        padding: 1.5rem;
    }

    .bank-qr-section .qr-code img[b-sodv3vi043] {
        max-width: 160px;
        max-height: 160px;
    }
}
/* /Components/Pages/PaymentBeamCreditCard.razor.rz.scp.css */
.payment-page[b-c697ehkuid] {
    min-height: 100vh;
    background: #f8f9fa;
    padding: 2rem 1rem;
}

.container[b-c697ehkuid] {
    max-width: 600px;
    margin: 0 auto;
}

.back-link[b-c697ehkuid] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    text-decoration: none;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.back-link:hover[b-c697ehkuid] {
    color: #333;
}

.back-link i[b-c697ehkuid] {
    font-size: 0.9rem;
}

/* Loading & Status States */
.loading-state[b-c697ehkuid],
.error-state[b-c697ehkuid],
.expired-state[b-c697ehkuid],
.success-state[b-c697ehkuid] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.spinner[b-c697ehkuid] {
    width: 48px;
    height: 48px;
    border: 4px solid #f0f0f0;
    border-top-color: var(--primary-color, #4a7c59);
    border-radius: 50%;
    animation: spin-b-c697ehkuid 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.error-icon[b-c697ehkuid],
.expired-icon[b-c697ehkuid],
.success-icon[b-c697ehkuid] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.error-icon[b-c697ehkuid] {
    color: #dc3545;
}

.expired-icon[b-c697ehkuid] {
    color: #ffc107;
}

.success-icon[b-c697ehkuid] {
    color: #28a745;
}

.error-state h2[b-c697ehkuid],
.expired-state h2[b-c697ehkuid],
.success-state h2[b-c697ehkuid] {
    margin-bottom: 0.5rem;
    color: #333;
}

.error-state p[b-c697ehkuid],
.expired-state p[b-c697ehkuid],
.success-state p[b-c697ehkuid] {
    color: #666;
    margin-bottom: 1.5rem;
}

.btn-primary[b-c697ehkuid] {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--primary-color, #4a7c59);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

.btn-primary:hover[b-c697ehkuid] {
    background: #3d6a4a;
}

/* Payment Content */
.payment-content[b-c697ehkuid] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.payment-summary[b-c697ehkuid] {
    padding: 2rem;
    border-bottom: 1px solid #eee;
}

.summary-header[b-c697ehkuid] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.summary-header i[b-c697ehkuid] {
    font-size: 1.5rem;
    color: var(--primary-color, #4a7c59);
}

.summary-header h2[b-c697ehkuid] {
    font-size: 1.25rem;
    margin: 0;
    color: #333;
}

.order-info[b-c697ehkuid] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.info-row[b-c697ehkuid] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.info-row:not(:last-child)[b-c697ehkuid] {
    border-bottom: 1px dashed #ddd;
}

.info-row span:first-child[b-c697ehkuid] {
    color: #666;
}

.order-number[b-c697ehkuid] {
    font-weight: 600;
    color: #333;
    font-family: monospace;
}

.info-row.total[b-c697ehkuid] {
    padding-top: 0.75rem;
}

.info-row.total span:first-child[b-c697ehkuid] {
    font-weight: 600;
    color: #333;
}

.amount[b-c697ehkuid] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color, #4a7c59);
}

.card-brands[b-c697ehkuid] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.card-brands img[b-c697ehkuid] {
    height: 32px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.card-brands img:hover[b-c697ehkuid] {
    opacity: 1;
}

.security-note[b-c697ehkuid] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #28a745;
    font-size: 0.9rem;
}

.security-note i[b-c697ehkuid] {
    font-size: 0.85rem;
}

/* Timer Row */
.timer-row[b-c697ehkuid] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed #ddd;
}

.timer[b-c697ehkuid] {
    text-align: right;
}

.countdown[b-c697ehkuid] {
    display: block;
    color: #e53e3e;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.countdown.urgent[b-c697ehkuid] {
    animation: pulse-urgent-b-c697ehkuid 1s infinite;
    color: #c53030;
}

@keyframes pulse-urgent-b-c697ehkuid {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.expire-note[b-c697ehkuid] {
    display: block;
    color: #718096;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Stock Reservation Warning */
.stock-warning[b-c697ehkuid] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #fffaf0 0%, #feebcb 100%);
    border-left: 4px solid #dd6b20;
}

.stock-warning .warning-icon[b-c697ehkuid] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stock-warning span:last-child[b-c697ehkuid] {
    color: #744210;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Hidden Form */
#ktcPaymentForm[b-c697ehkuid] {
    display: none;
}

/* Payment Actions */
.payment-actions[b-c697ehkuid] {
    padding: 2rem;
}

.btn-pay[b-c697ehkuid] {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #4a7c59 0%, #3d6a4a 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 1rem;
}

.btn-pay:hover:not(:disabled)[b-c697ehkuid] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
}

.btn-pay:disabled[b-c697ehkuid] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-pay i[b-c697ehkuid] {
    font-size: 1rem;
}

.btn-cancel[b-c697ehkuid] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.btn-cancel:hover[b-c697ehkuid] {
    background: #f8f9fa;
    border-color: #ccc;
}

.spinner-small[b-c697ehkuid] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-c697ehkuid 1s linear infinite;
}

/* Redirecting State */
.redirecting-message[b-c697ehkuid] {
    text-align: center;
    padding: 2rem 0;
}

.redirecting-message p[b-c697ehkuid] {
    margin: 0.5rem 0;
    color: #333;
}

.redirect-note[b-c697ehkuid] {
    font-size: 0.9rem;
    color: #666 !important;
}

/* Error Message */
.error-message[b-c697ehkuid] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    margin: 0 2rem 2rem;
    background: #fff5f5;
    border: 1px solid #ffcccc;
    border-radius: 8px;
    color: #dc3545;
    font-size: 0.95rem;
}

.error-message i[b-c697ehkuid] {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .payment-page[b-c697ehkuid] {
        padding: 1rem;
    }

    .payment-summary[b-c697ehkuid],
    .payment-actions[b-c697ehkuid] {
        padding: 1.5rem;
    }

    .amount[b-c697ehkuid] {
        font-size: 1.25rem;
    }

    .card-brands img[b-c697ehkuid] {
        height: 24px;
    }
}
/* /Components/Pages/PaymentConfirm.razor.rz.scp.css */
.payment-page[b-w4yxzs83hm] {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 2rem 1rem;
}

.payment-page .container[b-w4yxzs83hm] {
    max-width: 520px;
    margin: 0 auto;
}

/* Back Link */
.back-link[b-w4yxzs83hm] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--primary-blue);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 2rem;
}

.back-link:hover[b-w4yxzs83hm] {
    color: #2c5282;
}

.back-icon[b-w4yxzs83hm] {
    font-size: 1.25rem;
    font-weight: 400;
}

/* Loading & Error States */
.loading-state[b-w4yxzs83hm],
.error-state[b-w4yxzs83hm] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.loading-state .spinner[b-w4yxzs83hm] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-w4yxzs83hm 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.error-icon[b-w4yxzs83hm] {
    font-size: 4rem;
    color: #e53e3e;
    margin-bottom: 1rem;
}

.error-state h2[b-w4yxzs83hm] {
    color: var(--primary-blue);
    margin-bottom: 1.5rem;
}

/* Payment Content */
.payment-content[b-w4yxzs83hm] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Payment Header */
.payment-header[b-w4yxzs83hm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.header-label[b-w4yxzs83hm] {
    color: #2d3748;
    font-size: 1rem;
    font-weight: 500;
}

.header-amount[b-w4yxzs83hm] {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
}

/* Form Sections */
.form-section[b-w4yxzs83hm] {
    padding: 1.5rem 2.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.form-section:last-of-type[b-w4yxzs83hm] {
    border-bottom: none;
}

.form-label[b-w4yxzs83hm] {
    display: block;
    color: #2d3748;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Bank Info */
.bank-info[b-w4yxzs83hm] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bank-logo[b-w4yxzs83hm] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.bank-logo img[b-w4yxzs83hm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bank-logo-placeholder[b-w4yxzs83hm] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #43a047;
    font-size: 1.25rem;
}

.bank-details[b-w4yxzs83hm] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.bank-name[b-w4yxzs83hm] {
    color: #4a5568;
    font-size: 0.875rem;
}

.account-number-row[b-w4yxzs83hm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.account-number[b-w4yxzs83hm] {
    color: var(--primary-blue);
    font-size: 1rem;
    font-weight: 600;
}

.btn-copy[b-w4yxzs83hm] {
    background: none;
    border: none;
    color: var(--primary-blue);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.btn-copy:hover[b-w4yxzs83hm] {
    opacity: 0.7;
}

.account-name[b-w4yxzs83hm] {
    color: #4a5568;
    font-size: 0.8125rem;
}

/* Form Fields */
.form-field[b-w4yxzs83hm] {
    position: relative;
}

.form-input[b-w4yxzs83hm] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--primary-blue);
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.form-input:focus[b-w4yxzs83hm] {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(30, 78, 140, 0.1);
}

.form-input[b-w4yxzs83hm]::placeholder {
    color: #a0aec0;
}

/* Amount Input */
.amount-input[b-w4yxzs83hm] {
    text-align: right;
    padding-right: 3.5rem;
}

.input-suffix[b-w4yxzs83hm] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #718096;
    font-size: 0.9375rem;
    pointer-events: none;
}

/* Date Input with Icon */
.date-input[b-w4yxzs83hm] {
    padding-left: 2.75rem;
}

.field-icon[b-w4yxzs83hm] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #718096;
    font-size: 1rem;
    pointer-events: none;
}

/* Time Input */
.time-input[b-w4yxzs83hm] {
    text-align: center;
}

/* Remove default date/time picker icons for cleaner look */
.form-input[type="date"][b-w4yxzs83hm]::-webkit-calendar-picker-indicator,
.form-input[type="time"][b-w4yxzs83hm]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}

/* Upload Dropzone - Modern Drag & Drop */
.upload-dropzone[b-w4yxzs83hm] {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
    overflow: hidden;
}

.upload-dropzone:hover[b-w4yxzs83hm] {
    border-color: #1e4e8c;
    background: linear-gradient(180deg, #f0f7ff 0%, #e8f2ff 100%);
}

.upload-dropzone.dragging[b-w4yxzs83hm] {
    border-color: #1e4e8c;
    border-style: solid;
    background: linear-gradient(180deg, #e8f2ff 0%, #dbeafe 100%);
    transform: scale(1.01);
    box-shadow: 0 8px 25px rgba(30, 78, 140, 0.15);
}

.dropzone-content[b-w4yxzs83hm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.dropzone-icon[b-w4yxzs83hm] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #1e4e8c 0%, #2c5aa0 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 12px rgba(30, 78, 140, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.upload-dropzone:hover .dropzone-icon[b-w4yxzs83hm] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 78, 140, 0.3);
}

.upload-dropzone.dragging .dropzone-icon[b-w4yxzs83hm] {
    transform: scale(1.1);
    animation: bounce-gentle-b-w4yxzs83hm 0.6s ease infinite;
}

@keyframes bounce-gentle-b-w4yxzs83hm {
    0%, 100% { transform: scale(1.1) translateY(0); }
    50% { transform: scale(1.1) translateY(-4px); }
}

.dropzone-text[b-w4yxzs83hm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.dropzone-title[b-w4yxzs83hm] {
    color: #374151;
    font-size: 0.9375rem;
    font-weight: 600;
}

.dropzone-or[b-w4yxzs83hm] {
    color: #9ca3af;
    font-size: 0.8125rem;
}

.dropzone-browse[b-w4yxzs83hm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    background: white;
    border: 1.5px solid #1e4e8c;
    border-radius: 8px;
    color: #1e4e8c;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.25rem;
}

.dropzone-browse:hover[b-w4yxzs83hm] {
    background: #1e4e8c;
    color: white;
}

.dropzone-browse input[type="file"][b-w4yxzs83hm],
.dropzone-browse[b-w4yxzs83hm]  input[type="file"] {
    display: none;
}

.dropzone-hint[b-w4yxzs83hm] {
    color: #9ca3af;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Drag Overlay */
.dropzone-overlay[b-w4yxzs83hm] {
    position: absolute;
    inset: 0;
    background: rgba(30, 78, 140, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: white;
    border-radius: 10px;
    z-index: 10;
    animation: fade-in-b-w4yxzs83hm 0.2s ease;
}

@keyframes fade-in-b-w4yxzs83hm {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dropzone-overlay i[b-w4yxzs83hm] {
    font-size: 2.5rem;
    animation: float-b-w4yxzs83hm 1s ease-in-out infinite;
}

@keyframes float-b-w4yxzs83hm {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.dropzone-overlay span[b-w4yxzs83hm] {
    font-size: 1rem;
    font-weight: 600;
}

/* Upload Progress */
.upload-progress[b-w4yxzs83hm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.progress-bar[b-w4yxzs83hm] {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-w4yxzs83hm] {
    height: 100%;
    width: 60%;
    background: linear-gradient(90deg, #1e4e8c 0%, #2c5aa0 50%, #1e4e8c 100%);
    background-size: 200% 100%;
    border-radius: 3px;
    animation: progress-animation-b-w4yxzs83hm 1.5s ease-in-out infinite;
}

@keyframes progress-animation-b-w4yxzs83hm {
    0% { background-position: 200% 0; width: 30%; }
    50% { width: 70%; }
    100% { background-position: -200% 0; width: 30%; }
}

.progress-text[b-w4yxzs83hm] {
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Slip Preview - Enhanced */
.slip-preview[b-w4yxzs83hm] {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.slip-preview img[b-w4yxzs83hm] {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}

.slip-overlay[b-w4yxzs83hm] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.slip-preview:hover .slip-overlay[b-w4yxzs83hm] {
    opacity: 1;
}

.btn-change-slip[b-w4yxzs83hm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: white;
    border: none;
    border-radius: 12px;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn-change-slip i[b-w4yxzs83hm] {
    font-size: 1.5rem;
    color: #1e4e8c;
}

.btn-change-slip:hover[b-w4yxzs83hm] {
    transform: scale(1.05);
}

.btn-remove-slip[b-w4yxzs83hm] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.btn-remove-slip:hover[b-w4yxzs83hm] {
    background: #e53e3e;
    transform: scale(1.1);
}

/* Upload Status - Legacy, now using upload-progress */
.upload-status[b-w4yxzs83hm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    color: #718096;
    font-size: 0.875rem;
}

.spinner-small[b-w4yxzs83hm] {
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: #1e4e8c;
    border-radius: 50%;
    animation: spin-b-w4yxzs83hm 1s linear infinite;
}

/* Messages */
.error-message[b-w4yxzs83hm],
.success-message[b-w4yxzs83hm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    font-size: 0.875rem;
}

.error-message[b-w4yxzs83hm] {
    color: #c53030;
    background: #fed7d7;
}

.error-message i[b-w4yxzs83hm] {
    font-size: 1rem;
}

.success-message[b-w4yxzs83hm] {
    color: #276749;
    background: #c6f6d5;
}

.success-message i[b-w4yxzs83hm] {
    font-size: 1rem;
}

/* Confirm Button */
.btn-confirm[b-w4yxzs83hm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: calc(100% - 5rem);
    margin: 1.5rem 2.5rem 2rem;
    padding: 1rem 1.5rem;
    background: var(--primary-blue);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-confirm:hover:not(:disabled)[b-w4yxzs83hm] {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 78, 140, 0.3);
}

.btn-confirm:disabled[b-w4yxzs83hm] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Button Primary */
.btn-primary[b-w4yxzs83hm] {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: var(--primary-blue);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-primary:hover[b-w4yxzs83hm] {
    opacity: 0.95;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 640px) {
    .payment-page[b-w4yxzs83hm] {
        padding: 1rem 0.75rem;
    }

    .payment-header[b-w4yxzs83hm] {
        padding: 1.5rem;
    }

    .form-section[b-w4yxzs83hm] {
        padding: 1.25rem 1.5rem;
    }

    .error-message[b-w4yxzs83hm],
    .success-message[b-w4yxzs83hm] {
        padding: 1rem 1.5rem;
    }

    .btn-confirm[b-w4yxzs83hm] {
        width: calc(100% - 3rem);
        margin: 1.25rem 1.5rem 1.5rem;
    }

    .header-amount[b-w4yxzs83hm] {
        font-size: 1.375rem;
    }
}
/* /Components/Pages/PaymentCreditCard.razor.rz.scp.css */
.payment-page[b-f77zf3ckjv] {
    min-height: 100vh;
    background: #f8f9fa;
    padding: 2rem 1rem;
}

.container[b-f77zf3ckjv] {
    max-width: 600px;
    margin: 0 auto;
}

.back-link[b-f77zf3ckjv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    text-decoration: none;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.back-link:hover[b-f77zf3ckjv] {
    color: #333;
}

.back-link i[b-f77zf3ckjv] {
    font-size: 0.9rem;
}

/* Loading & Status States */
.loading-state[b-f77zf3ckjv],
.error-state[b-f77zf3ckjv],
.expired-state[b-f77zf3ckjv],
.success-state[b-f77zf3ckjv] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.spinner[b-f77zf3ckjv] {
    width: 48px;
    height: 48px;
    border: 4px solid #f0f0f0;
    border-top-color: var(--primary-color, #4a7c59);
    border-radius: 50%;
    animation: spin-b-f77zf3ckjv 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.error-icon[b-f77zf3ckjv],
.expired-icon[b-f77zf3ckjv],
.success-icon[b-f77zf3ckjv] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.error-icon[b-f77zf3ckjv] {
    color: #dc3545;
}

.expired-icon[b-f77zf3ckjv] {
    color: #ffc107;
}

.success-icon[b-f77zf3ckjv] {
    color: #28a745;
}

.error-state h2[b-f77zf3ckjv],
.expired-state h2[b-f77zf3ckjv],
.success-state h2[b-f77zf3ckjv] {
    margin-bottom: 0.5rem;
    color: #333;
}

.error-state p[b-f77zf3ckjv],
.expired-state p[b-f77zf3ckjv],
.success-state p[b-f77zf3ckjv] {
    color: #666;
    margin-bottom: 1.5rem;
}

.btn-primary[b-f77zf3ckjv] {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--primary-color, #4a7c59);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

.btn-primary:hover[b-f77zf3ckjv] {
    background: #3d6a4a;
}

/* Payment Content */
.payment-content[b-f77zf3ckjv] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.payment-summary[b-f77zf3ckjv] {
    padding: 2rem;
    border-bottom: 1px solid #eee;
}

.summary-header[b-f77zf3ckjv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.summary-header i[b-f77zf3ckjv] {
    font-size: 1.5rem;
    color: var(--primary-color, #4a7c59);
}

.summary-header h2[b-f77zf3ckjv] {
    font-size: 1.25rem;
    margin: 0;
    color: #333;
}

.order-info[b-f77zf3ckjv] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.info-row[b-f77zf3ckjv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.info-row:not(:last-child)[b-f77zf3ckjv] {
    border-bottom: 1px dashed #ddd;
}

.info-row span:first-child[b-f77zf3ckjv] {
    color: #666;
}

.order-number[b-f77zf3ckjv] {
    font-weight: 600;
    color: #333;
    font-family: monospace;
}

.info-row.total[b-f77zf3ckjv] {
    padding-top: 0.75rem;
}

.info-row.total span:first-child[b-f77zf3ckjv] {
    font-weight: 600;
    color: #333;
}

.amount[b-f77zf3ckjv] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color, #4a7c59);
}

.card-brands[b-f77zf3ckjv] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.card-brands img[b-f77zf3ckjv] {
    height: 32px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.card-brands img:hover[b-f77zf3ckjv] {
    opacity: 1;
}

.security-note[b-f77zf3ckjv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #28a745;
    font-size: 0.9rem;
}

.security-note i[b-f77zf3ckjv] {
    font-size: 0.85rem;
}

/* Timer Row */
.timer-row[b-f77zf3ckjv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed #ddd;
}

.timer[b-f77zf3ckjv] {
    text-align: right;
}

.countdown[b-f77zf3ckjv] {
    display: block;
    color: #e53e3e;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.countdown.urgent[b-f77zf3ckjv] {
    animation: pulse-urgent-b-f77zf3ckjv 1s infinite;
    color: #c53030;
}

@keyframes pulse-urgent-b-f77zf3ckjv {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.expire-note[b-f77zf3ckjv] {
    display: block;
    color: #718096;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Stock Reservation Warning */
.stock-warning[b-f77zf3ckjv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #fffaf0 0%, #feebcb 100%);
    border-left: 4px solid #dd6b20;
}

.stock-warning .warning-icon[b-f77zf3ckjv] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stock-warning span:last-child[b-f77zf3ckjv] {
    color: #744210;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Hidden Form */
#ktcPaymentForm[b-f77zf3ckjv] {
    display: none;
}

/* Payment Actions */
.payment-actions[b-f77zf3ckjv] {
    padding: 2rem;
}

.btn-pay[b-f77zf3ckjv] {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #4a7c59 0%, #3d6a4a 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 1rem;
}

.btn-pay:hover:not(:disabled)[b-f77zf3ckjv] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
}

.btn-pay:disabled[b-f77zf3ckjv] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-pay i[b-f77zf3ckjv] {
    font-size: 1rem;
}

.btn-cancel[b-f77zf3ckjv] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.btn-cancel:hover[b-f77zf3ckjv] {
    background: #f8f9fa;
    border-color: #ccc;
}

.spinner-small[b-f77zf3ckjv] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-f77zf3ckjv 1s linear infinite;
}

/* Redirecting State */
.redirecting-message[b-f77zf3ckjv] {
    text-align: center;
    padding: 2rem 0;
}

.redirecting-message p[b-f77zf3ckjv] {
    margin: 0.5rem 0;
    color: #333;
}

.redirect-note[b-f77zf3ckjv] {
    font-size: 0.9rem;
    color: #666 !important;
}

/* Error Message */
.error-message[b-f77zf3ckjv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    margin: 0 2rem 2rem;
    background: #fff5f5;
    border: 1px solid #ffcccc;
    border-radius: 8px;
    color: #dc3545;
    font-size: 0.95rem;
}

.error-message i[b-f77zf3ckjv] {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .payment-page[b-f77zf3ckjv] {
        padding: 1rem;
    }

    .payment-summary[b-f77zf3ckjv],
    .payment-actions[b-f77zf3ckjv] {
        padding: 1.5rem;
    }

    .amount[b-f77zf3ckjv] {
        font-size: 1.25rem;
    }

    .card-brands img[b-f77zf3ckjv] {
        height: 24px;
    }
}
/* /Components/Pages/PaymentCreditCardResult.razor.rz.scp.css */
.result-page[b-kw9kn4dxym] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.container[b-kw9kn4dxym] {
    max-width: 500px;
    width: 100%;
}

/* Loading State */
.loading-state[b-kw9kn4dxym] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.spinner[b-kw9kn4dxym] {
    width: 56px;
    height: 56px;
    border: 4px solid #f0f0f0;
    border-top-color: var(--primary-color, #4a7c59);
    border-radius: 50%;
    animation: spin-b-kw9kn4dxym 1s linear infinite;
    margin: 0 auto 1.5rem;
}

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

.loading-state p[b-kw9kn4dxym] {
    color: #666;
    font-size: 1rem;
}

/* Result Card */
.result-card[b-kw9kn4dxym] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    padding: 3rem 2rem;
    text-align: center;
    animation: slideUp-b-kw9kn4dxym 0.4s ease-out;
}

@keyframes slideUp-b-kw9kn4dxym {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.result-icon[b-kw9kn4dxym] {
    font-size: 5rem;
    margin-bottom: 1.5rem;
}

.result-card.success .result-icon[b-kw9kn4dxym] {
    color: #28a745;
}

.result-card.failed .result-icon[b-kw9kn4dxym],
.result-card.error .result-icon[b-kw9kn4dxym] {
    color: #dc3545;
}

.result-card h1[b-kw9kn4dxym] {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.result-card>p[b-kw9kn4dxym] {
    color: #666;
    margin-bottom: 2rem;
}

/* Result Details */
.result-details[b-kw9kn4dxym] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 2rem;
    text-align: left;
}

.detail-row[b-kw9kn4dxym] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}

.detail-row:not(:last-child)[b-kw9kn4dxym] {
    border-bottom: 1px dashed #ddd;
}

.detail-row span:first-child[b-kw9kn4dxym] {
    color: #666;
    font-size: 0.95rem;
}

.detail-row .value[b-kw9kn4dxym] {
    font-weight: 600;
    color: #333;
    font-family: monospace;
    font-size: 0.95rem;
}

.detail-row .value.amount[b-kw9kn4dxym] {
    color: var(--primary-color, #4a7c59);
    font-size: 1.1rem;
}

.detail-row .value.error-code[b-kw9kn4dxym] {
    color: #dc3545;
}

/* Pending State */
.result-card.pending .result-icon[b-kw9kn4dxym] {
    color: #f6ad55;
}

.result-card.pending>p[b-kw9kn4dxym] {
    color: #744210;
}

.pending-spinner[b-kw9kn4dxym] {
    margin: 1.5rem 0;
}

.pending-spinner .spinner[b-kw9kn4dxym] {
    width: 40px;
    height: 40px;
    border: 3px solid #fed7aa;
    border-top-color: #dd6b20;
    margin: 0 auto;
}

.pending-note[b-kw9kn4dxym] {
    background: #fffaf0;
    border: 1px dashed #dd6b20;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.pending-note p[b-kw9kn4dxym] {
    margin: 0;
    color: #744210;
    font-size: 0.85rem;
}

.polling-status[b-kw9kn4dxym] {
    color: #dd6b20 !important;
    animation: pulse-b-kw9kn4dxym 1s infinite;
}

@keyframes pulse-b-kw9kn4dxym {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Result Actions */
.result-actions[b-kw9kn4dxym] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-primary[b-kw9kn4dxym] {
    display: inline-block;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #4a7c59 0%, #3d6a4a 100%);
    color: white;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover[b-kw9kn4dxym] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
}

.btn-secondary[b-kw9kn4dxym] {
    display: inline-block;
    width: 100%;
    padding: 0.875rem;
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    transition: background 0.2s, border-color 0.2s;
}

.btn-secondary:hover[b-kw9kn4dxym] {
    background: #f8f9fa;
    border-color: #ccc;
}

/* Failed Card Specific */
.result-card.failed>p[b-kw9kn4dxym] {
    color: #dc3545;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 480px) {
    .result-page[b-kw9kn4dxym] {
        padding: 1rem;
    }

    .result-card[b-kw9kn4dxym] {
        padding: 2rem 1.5rem;
    }

    .result-icon[b-kw9kn4dxym] {
        font-size: 4rem;
    }

    .result-card h1[b-kw9kn4dxym] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/PaymentQR.razor.rz.scp.css */
.payment-page[b-hq8nf3kkxw] {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 2rem 1rem;
}

.payment-page .container[b-hq8nf3kkxw] {
    max-width: 520px;
    margin: 0 auto;
}

/* Back Link */
.back-link[b-hq8nf3kkxw] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--primary-blue);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 2rem;
}

.back-link:hover[b-hq8nf3kkxw] {
    color: #2c5282;
}

.back-icon[b-hq8nf3kkxw] {
    font-size: 1.25rem;
    font-weight: 400;
}

/* Loading & Error States */
.loading-state[b-hq8nf3kkxw],
.error-state[b-hq8nf3kkxw],
.expired-state[b-hq8nf3kkxw] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.loading-state .spinner[b-hq8nf3kkxw] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-hq8nf3kkxw 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.error-icon[b-hq8nf3kkxw],
.expired-icon[b-hq8nf3kkxw] {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.error-state h2[b-hq8nf3kkxw],
.expired-state h2[b-hq8nf3kkxw] {
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.error-state p[b-hq8nf3kkxw],
.expired-state p[b-hq8nf3kkxw] {
    color: #718096;
    margin-bottom: 1.5rem;
}

/* Payment Content */
.payment-content[b-hq8nf3kkxw] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Payment Summary */
.payment-summary[b-hq8nf3kkxw] {
    padding: 2rem 2.5rem;
}

.summary-row[b-hq8nf3kkxw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.summary-row:last-child[b-hq8nf3kkxw] {
    margin-bottom: 0;
}

.summary-label[b-hq8nf3kkxw] {
    color: #2d3748;
    font-size: 1rem;
    font-weight: 500;
}

.summary-amount[b-hq8nf3kkxw] {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
}

.timer-section[b-hq8nf3kkxw] {
    text-align: right;
}

.countdown[b-hq8nf3kkxw] {
    display: block;
    color: #e53e3e;
    font-size: 1.375rem;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.5px;
}

.expire-note[b-hq8nf3kkxw] {
    display: block;
    color: #718096;
    font-size: 0.8125rem;
    margin-top: 0.375rem;
}

/* Urgent countdown animation */
.countdown.urgent[b-hq8nf3kkxw] {
    animation: pulse-urgent-b-hq8nf3kkxw 1s infinite;
    color: #c53030;
}

@keyframes pulse-urgent-b-hq8nf3kkxw {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* QR Section */
.qr-section[b-hq8nf3kkxw] {
    padding: 0 2.5rem 2rem;
    text-align: center;
}

.qr-header[b-hq8nf3kkxw] {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #2c5aa0 100%);
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    width: 100%;
    max-width: 280px;
    justify-content: center;
}

.qr-logo-icon[b-hq8nf3kkxw] {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qr-logo-icon .qr-logo[b-hq8nf3kkxw] {
    height: 28px;
    width: auto;
}

.qr-header-text[b-hq8nf3kkxw] {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: left;
}

.qr-code[b-hq8nf3kkxw] {
    margin: 0 auto 1.5rem;
    max-width: 180px;
}

.qr-code img[b-hq8nf3kkxw] {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.qr-placeholder[b-hq8nf3kkxw] {
    width: 180px;
    height: 180px;
    background: #f8fafc;
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #a0aec0;
}

.qr-placeholder i[b-hq8nf3kkxw] {
    font-size: 4rem;
}

/* Payment Details */
.payment-details[b-hq8nf3kkxw] {
    margin-bottom: 0;
}

.payment-amount[b-hq8nf3kkxw] {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.payment-name[b-hq8nf3kkxw] {
    color: #2d3748;
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: 0.125rem;
}

.payment-company[b-hq8nf3kkxw] {
    color: #718096;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}

.payment-ref[b-hq8nf3kkxw] {
    color: #718096;
    font-size: 0.875rem;
}

/* QR Actions */
.qr-actions[b-hq8nf3kkxw] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.5rem 2.5rem 2rem;
}

.btn-download[b-hq8nf3kkxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9375rem 1.5rem;
    background: white;
    border: 1.5px solid #d1d5db;
    color: #374151;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-download i[b-hq8nf3kkxw] {
    font-size: 0.875rem;
}

.btn-download:hover[b-hq8nf3kkxw] {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn-confirm[b-hq8nf3kkxw] {
    padding: 1rem 1.5rem;
    background: var(--primary-blue);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-confirm:hover[b-hq8nf3kkxw] {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 78, 140, 0.3);
}

/* Error Message */
.error-message[b-hq8nf3kkxw] {
    color: #e53e3e;
    background: #fed7d7;
    padding: 1rem;
    border-radius: 8px;
    margin: 0 2.5rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

.success-message[b-hq8nf3kkxw] {
    color: #276749;
    background: #c6f6d5;
    padding: 1rem;
    border-radius: 8px;
    margin: 0 2.5rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

/* Slip Upload Section - Premium Design */
.slip-upload-section[b-hq8nf3kkxw] {
    padding: 2rem 2.5rem;
    border-top: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.slip-upload-header[b-hq8nf3kkxw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.slip-icon-wrapper[b-hq8nf3kkxw] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #2c5aa0 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(30, 78, 140, 0.25);
}

.slip-icon-wrapper i[b-hq8nf3kkxw] {
    font-size: 1.25rem;
    color: white;
}

.slip-header-text h3[b-hq8nf3kkxw] {
    color: #1a202c;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.slip-subtitle[b-hq8nf3kkxw] {
    color: #718096;
    font-size: 0.875rem;
    margin: 0;
}

.slip-upload-area[b-hq8nf3kkxw] {
    display: flex;
    justify-content: center;
}

/* Modern Upload Dropzone */
.upload-dropzone[b-hq8nf3kkxw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 2rem;
    border: 2px dashed transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(white, white) padding-box,
        linear-gradient(135deg, #cbd5e0 0%, #a0aec0 50%, #cbd5e0 100%) border-box;
    position: relative;
    overflow: hidden;
}

.upload-dropzone[b-hq8nf3kkxw]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(30, 78, 140, 0.02) 0%, rgba(44, 90, 160, 0.04) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.upload-dropzone:hover[b-hq8nf3kkxw] {
    background: linear-gradient(white, white) padding-box,
        linear-gradient(135deg, var(--primary-blue) 0%, #2c5aa0 50%, var(--primary-blue) 100%) border-box;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(30, 78, 140, 0.15);
}

.upload-dropzone:hover[b-hq8nf3kkxw]::before {
    opacity: 1;
}

.dropzone-icon[b-hq8nf3kkxw] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.upload-dropzone:hover .dropzone-icon[b-hq8nf3kkxw] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    transform: scale(1.05);
}

.dropzone-icon i[b-hq8nf3kkxw] {
    font-size: 2rem;
    color: #718096;
    transition: all 0.3s ease;
}

.upload-dropzone:hover .dropzone-icon i[b-hq8nf3kkxw] {
    color: var(--primary-blue);
    animation: float-b-hq8nf3kkxw 2s ease-in-out infinite;
}

@keyframes float-b-hq8nf3kkxw {

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

    50% {
        transform: translateY(-4px);
    }
}

.dropzone-text[b-hq8nf3kkxw] {
    text-align: center;
}

.dropzone-title[b-hq8nf3kkxw] {
    display: block;
    color: #2d3748;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.dropzone-hint[b-hq8nf3kkxw] {
    display: block;
    color: #a0aec0;
    font-size: 0.8125rem;
}

.dropzone-button[b-hq8nf3kkxw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #2c5aa0 100%);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(30, 78, 140, 0.3);
}

.upload-dropzone:hover .dropzone-button[b-hq8nf3kkxw] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 78, 140, 0.4);
}

.dropzone-button i[b-hq8nf3kkxw] {
    font-size: 0.75rem;
}

/* Hide the actual file input completely */
.file-input-hidden[b-hq8nf3kkxw],
.upload-dropzone input[type="file"][b-hq8nf3kkxw],
.upload-dropzone[b-hq8nf3kkxw]  input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

/* Slip Preview - Premium Style */
.slip-preview[b-hq8nf3kkxw] {
    position: relative;
    max-width: 300px;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    background: white;
    padding: 0.5rem;
}

.slip-preview img[b-hq8nf3kkxw] {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.preview-badge[b-hq8nf3kkxw] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.4);
}

.preview-badge i[b-hq8nf3kkxw] {
    font-size: 0.75rem;
}

.btn-remove-slip[b-hq8nf3kkxw] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.4);
    transition: all 0.2s ease;
}

.btn-remove-slip:hover[b-hq8nf3kkxw] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.5);
}

/* Upload Progress - Modern */
.upload-progress[b-hq8nf3kkxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 12px;
    color: var(--primary-blue);
    font-size: 0.875rem;
    font-weight: 500;
}

.progress-spinner[b-hq8nf3kkxw] {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(30, 78, 140, 0.2);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-hq8nf3kkxw 0.8s linear infinite;
}

.btn-confirm:disabled[b-hq8nf3kkxw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-confirm .spinner-small[b-hq8nf3kkxw] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-hq8nf3kkxw 1s linear infinite;
    display: inline-block;
    margin-right: 0.5rem;
}

/* Button Primary */
.btn-primary[b-hq8nf3kkxw] {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: var(--primary-blue);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-primary:hover[b-hq8nf3kkxw] {
    opacity: 0.95;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 640px) {
    .payment-page[b-hq8nf3kkxw] {
        padding: 1rem 0.75rem;
    }

    .payment-summary[b-hq8nf3kkxw] {
        padding: 1.5rem;
    }

    .qr-section[b-hq8nf3kkxw] {
        padding: 0 1.5rem 1.5rem;
    }

    .qr-actions[b-hq8nf3kkxw] {
        padding: 1.25rem 1.5rem 1.5rem;
    }

    .error-message[b-hq8nf3kkxw] {
        margin: 0 1.5rem 1.25rem;
    }

    .countdown[b-hq8nf3kkxw] {
        font-size: 1.25rem;
    }

    .summary-amount[b-hq8nf3kkxw] {
        font-size: 1.375rem;
    }

    /* Slip Upload Responsive */
    .slip-upload-section[b-hq8nf3kkxw] {
        padding: 1.5rem;
    }

    .slip-upload-header[b-hq8nf3kkxw] {
        gap: 0.75rem;
    }

    .slip-icon-wrapper[b-hq8nf3kkxw] {
        width: 40px;
        height: 40px;
    }

    .slip-icon-wrapper i[b-hq8nf3kkxw] {
        font-size: 1rem;
    }

    .slip-header-text h3[b-hq8nf3kkxw] {
        font-size: 1rem;
    }

    .slip-subtitle[b-hq8nf3kkxw] {
        font-size: 0.8125rem;
    }

    .upload-dropzone[b-hq8nf3kkxw] {
        padding: 1.5rem;
        gap: 0.875rem;
    }

    .dropzone-icon[b-hq8nf3kkxw] {
        width: 56px;
        height: 56px;
    }

    .dropzone-icon i[b-hq8nf3kkxw] {
        font-size: 1.5rem;
    }

    .dropzone-title[b-hq8nf3kkxw] {
        font-size: 0.9375rem;
    }

    .dropzone-button[b-hq8nf3kkxw] {
        padding: 0.625rem 1.25rem;
        font-size: 0.8125rem;
    }

    .slip-preview[b-hq8nf3kkxw] {
        max-width: 100%;
    }

    .preview-badge[b-hq8nf3kkxw] {
        padding: 0.375rem 0.75rem;
        font-size: 0.6875rem;
    }

    .btn-remove-slip[b-hq8nf3kkxw] {
        width: 32px;
        height: 32px;
    }
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
/* Privacy Policy Page Styles - Matching About Page Design */

/* Hero Section */
.hero-section[b-vbd25i6nlz] {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(to bottom, var(--primary-blue) 0%, #0062ff4b 100%), url('/images/privacy-policy-header-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
    color: white;
    text-align: center;
}

/* Floating Bone Animations */
.floating-bone[b-vbd25i6nlz] {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.bone-1[b-vbd25i6nlz] {
    top: 12%;
    left: 8%;
    width: 70px;
    animation: float1-b-vbd25i6nlz 4s ease-in-out infinite;
}

.bone-2[b-vbd25i6nlz] {
    bottom: 18%;
    right: 10%;
    width: 90px;
    animation: float2-b-vbd25i6nlz 5s ease-in-out infinite;
}

.bone-3[b-vbd25i6nlz] {
    top: 60%;
    left: 15%;
    width: 55px;
    opacity: 0.8;
    animation: float3-b-vbd25i6nlz 4.5s ease-in-out infinite 0.5s;
}

.bone-4[b-vbd25i6nlz] {
    top: 25%;
    right: 18%;
    width: 65px;
    opacity: 0.75;
    animation: float4-b-vbd25i6nlz 5.5s ease-in-out infinite 1s;
}

@keyframes float1-b-vbd25i6nlz {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-12px) translateX(5px) rotate(5deg);
    }
    50% {
        transform: translateY(-20px) translateX(0) rotate(10deg);
    }
    75% {
        transform: translateY(-8px) translateX(-5px) rotate(3deg);
    }
}

@keyframes float2-b-vbd25i6nlz {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    33% {
        transform: translateY(-18px) translateX(-8px) rotate(-8deg);
    }
    66% {
        transform: translateY(-25px) translateX(5px) rotate(-12deg);
    }
}

@keyframes float3-b-vbd25i6nlz {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(-5deg);
    }
    40% {
        transform: translateY(-15px) translateX(10px) rotate(8deg);
    }
    80% {
        transform: translateY(-22px) translateX(-5px) rotate(0deg);
    }
}

@keyframes float4-b-vbd25i6nlz {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(10deg);
    }
    30% {
        transform: translateY(-10px) translateX(-10px) rotate(-5deg);
    }
    60% {
        transform: translateY(-28px) translateX(8px) rotate(15deg);
    }
    85% {
        transform: translateY(-12px) translateX(-3px) rotate(5deg);
    }
}

.hero-section .container[b-vbd25i6nlz] {
    position: relative;
    z-index: 2;
}

.section-tag[b-vbd25i6nlz] {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.hero-section h1[b-vbd25i6nlz] {
    font-size: 2.75rem;
    margin: 0 0 16px;
    font-weight: 700;
    color: #fde272;
}

.hero-subtitle[b-vbd25i6nlz] {
    font-size: 1.5rem;
    margin: 0 0 24px;
    opacity: 0.95;
}

.hero-subtitle strong[b-vbd25i6nlz] {
    color: #ffd700;
}

.hero-description[b-vbd25i6nlz] {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.9;
}

/* Table of Contents */
.toc-section[b-vbd25i6nlz] {
    background: #f8f9fa;
    padding: 40px 0;
}

.toc-section .container[b-vbd25i6nlz] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.toc-card[b-vbd25i6nlz] {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.toc-card h3[b-vbd25i6nlz] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--primary-blue);
    font-size: 1.3rem;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #eee;
}

.toc-list[b-vbd25i6nlz] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.toc-list li a[b-vbd25i6nlz] {
    display: block;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    transition: var(--transition-fast);
    font-size: 0.95rem;
}

.toc-list li a:hover[b-vbd25i6nlz] {
    background: var(--primary-blue);
    color: #fff;
    transform: translateX(4px);
}

/* Content Section */
.content-section[b-vbd25i6nlz] {
    padding: 60px 0;
    background: #fff;
}

.content-section .container[b-vbd25i6nlz] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.legal-content[b-vbd25i6nlz] {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Legal Section Cards */
.legal-section[b-vbd25i6nlz] {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
    scroll-margin-top: 100px;
}

.legal-section.highlight-section[b-vbd25i6nlz] {
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    border-color: var(--primary-yellow);
}

.legal-section h2[b-vbd25i6nlz] {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--primary-blue);
    font-size: 1.5rem;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #eee;
}

.section-number[b-vbd25i6nlz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary-blue);
    color: #fff;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.legal-section h3[b-vbd25i6nlz] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    font-size: 1.1rem;
    margin: 24px 0 12px;
}

.legal-section h3 i[b-vbd25i6nlz] {
    color: var(--primary-blue);
}

.legal-section p[b-vbd25i6nlz] {
    color: #555;
    line-height: 1.8;
    margin-bottom: 16px;
}

.legal-section ul[b-vbd25i6nlz] {
    padding-left: 20px;
    margin-bottom: 16px;
}

.legal-section ul li[b-vbd25i6nlz] {
    color: #555;
    line-height: 1.8;
    margin-bottom: 8px;
    position: relative;
}

.legal-section ul li[b-vbd25i6nlz]::marker {
    color: var(--primary-blue);
}

/* Usage Grid */
.usage-grid[b-vbd25i6nlz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.usage-item[b-vbd25i6nlz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: var(--transition-fast);
}

.usage-item:hover[b-vbd25i6nlz] {
    background: #e8f4ff;
    transform: translateY(-2px);
}

.usage-item i[b-vbd25i6nlz] {
    font-size: 1.3rem;
    color: var(--primary-blue);
    width: 24px;
    text-align: center;
}

.usage-item span[b-vbd25i6nlz] {
    color: #333;
    font-size: 0.95rem;
}

/* Social Auth Grid */
.social-auth-grid[b-vbd25i6nlz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin: 24px 0;
}

.auth-provider-card[b-vbd25i6nlz] {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
}

.provider-header[b-vbd25i6nlz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    color: #fff;
}

.provider-header.google[b-vbd25i6nlz] {
    background: linear-gradient(135deg, #4285f4, #34a853);
}

.provider-header.facebook[b-vbd25i6nlz] {
    background: linear-gradient(135deg, #1877f2, #166fe5);
}

.provider-header.line[b-vbd25i6nlz] {
    background: linear-gradient(135deg, #00b900, #00a000);
}

.provider-header i[b-vbd25i6nlz] {
    font-size: 1.5rem;
}

.provider-header h4[b-vbd25i6nlz] {
    margin: 0;
    font-size: 1.1rem;
}

.provider-content[b-vbd25i6nlz] {
    padding: 20px;
}

.provider-content p[b-vbd25i6nlz] {
    margin-bottom: 10px;
}

.provider-content ul[b-vbd25i6nlz] {
    padding-left: 18px;
    margin-bottom: 16px;
}

.provider-content ul li[b-vbd25i6nlz] {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.provider-link[b-vbd25i6nlz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-blue);
    font-size: 0.9rem;
    text-decoration: none;
}

.provider-link:hover[b-vbd25i6nlz] {
    text-decoration: underline;
}

/* Cookie Types */
.cookie-types[b-vbd25i6nlz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.cookie-item[b-vbd25i6nlz] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
}

.cookie-icon[b-vbd25i6nlz] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cookie-icon.essential[b-vbd25i6nlz] {
    background: #d4edda;
    color: #155724;
}

.cookie-icon.analytics[b-vbd25i6nlz] {
    background: #cce5ff;
    color: #004085;
}

.cookie-icon.marketing[b-vbd25i6nlz] {
    background: #fff3cd;
    color: #856404;
}

.cookie-icon i[b-vbd25i6nlz] {
    font-size: 1.2rem;
}

.cookie-item strong[b-vbd25i6nlz] {
    display: block;
    color: #333;
    margin-bottom: 4px;
}

.cookie-item p[b-vbd25i6nlz] {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}

/* Security Features */
.security-features[b-vbd25i6nlz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.security-item[b-vbd25i6nlz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #e8f5e9;
    border-radius: 12px;
    color: #2e7d32;
}

.security-item i[b-vbd25i6nlz] {
    font-size: 1.3rem;
}

.security-item span[b-vbd25i6nlz] {
    font-size: 0.95rem;
    font-weight: 500;
}

/* Rights Grid */
.rights-grid[b-vbd25i6nlz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.right-item[b-vbd25i6nlz] {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: var(--transition-fast);
}

.right-item:hover[b-vbd25i6nlz] {
    background: #e8f4ff;
    transform: translateY(-2px);
}

.right-item i[b-vbd25i6nlz] {
    font-size: 1.5rem;
    color: var(--primary-blue);
    flex-shrink: 0;
    margin-top: 4px;
}

.right-item strong[b-vbd25i6nlz] {
    display: block;
    color: #333;
    margin-bottom: 6px;
}

.right-item p[b-vbd25i6nlz] {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* PDPA Badge */
.pdpa-badge[b-vbd25i6nlz] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-blue);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 20px;
}

.pdpa-badge i[b-vbd25i6nlz] {
    font-size: 1.2rem;
    color: var(--primary-yellow);
}

/* Info & Success Boxes */
.info-box[b-vbd25i6nlz],
.success-box[b-vbd25i6nlz] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
}

.info-box[b-vbd25i6nlz] {
    background: #e3f2fd;
    border: 1px solid #90caf9;
}

.info-box i[b-vbd25i6nlz] {
    color: #1976d2;
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box p[b-vbd25i6nlz] {
    margin: 0;
    color: #0d47a1;
    line-height: 1.6;
}

.success-box[b-vbd25i6nlz] {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
}

.success-box i[b-vbd25i6nlz] {
    color: #388e3c;
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.success-box p[b-vbd25i6nlz] {
    margin: 0;
    color: #1b5e20;
    line-height: 1.6;
}

/* Contact Info */
.contact-info[b-vbd25i6nlz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.contact-item[b-vbd25i6nlz] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
}

.contact-item i[b-vbd25i6nlz] {
    font-size: 1.5rem;
    color: var(--primary-blue);
    width: 24px;
    text-align: center;
}

.contact-item strong[b-vbd25i6nlz] {
    display: block;
    color: #666;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.contact-item p[b-vbd25i6nlz] {
    margin: 0;
    color: #333;
    font-weight: 500;
}

/* Legal Navigation */
.legal-nav[b-vbd25i6nlz] {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 2px solid #eee;
}

.nav-link[b-vbd25i6nlz] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--primary-blue);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.nav-link:hover[b-vbd25i6nlz] {
    background: #1a4a7a;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(29, 78, 137, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section[b-vbd25i6nlz] {
        padding: 80px 0 60px;
    }

    .hero-section h1[b-vbd25i6nlz] {
        font-size: 2rem;
    }

    .hero-description[b-vbd25i6nlz] {
        font-size: 1rem;
    }

    .floating-bone[b-vbd25i6nlz] {
        opacity: 0.1;
    }

    .bone-1[b-vbd25i6nlz], .bone-3[b-vbd25i6nlz] {
        width: 50px;
    }

    .bone-2[b-vbd25i6nlz], .bone-4[b-vbd25i6nlz] {
        width: 40px;
    }

    .toc-list[b-vbd25i6nlz] {
        grid-template-columns: 1fr;
    }

    .legal-section[b-vbd25i6nlz] {
        padding: 24px;
    }

    .legal-section h2[b-vbd25i6nlz] {
        font-size: 1.25rem;
    }

    .section-number[b-vbd25i6nlz] {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .social-auth-grid[b-vbd25i6nlz] {
        grid-template-columns: 1fr;
    }

    .usage-grid[b-vbd25i6nlz],
    .security-features[b-vbd25i6nlz] {
        grid-template-columns: 1fr 1fr;
    }

    .rights-grid[b-vbd25i6nlz] {
        grid-template-columns: 1fr;
    }

    .contact-info[b-vbd25i6nlz] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-section h1[b-vbd25i6nlz] {
        font-size: 1.75rem;
    }

    .usage-grid[b-vbd25i6nlz],
    .security-features[b-vbd25i6nlz] {
        grid-template-columns: 1fr;
    }

    .nav-link[b-vbd25i6nlz] {
        padding: 14px 24px;
        font-size: 0.95rem;
    }
}
/* /Components/Pages/ProductCompare.razor.rz.scp.css */
/* Product Comparison Page Styles — Modern Redesign */

.compare-page[b-zevtfjmy3u] {
    background: linear-gradient(135deg, #f0f4f8 0%, #e8edf3 50%, #f5f7fa 100%);
    min-height: 100vh;
    padding-bottom: 60px;
}

/* Breadcrumb */
.breadcrumb-nav[b-zevtfjmy3u] {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 102, 204, 0.08);
    font-size: 0.875rem;
}

.breadcrumb-nav .container[b-zevtfjmy3u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.breadcrumb-nav a[b-zevtfjmy3u] {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-nav a:hover[b-zevtfjmy3u] {
    color: #0052a3;
    text-decoration: underline;
}

.breadcrumb-nav .separator[b-zevtfjmy3u] {
    color: #adb5bd;
}

.breadcrumb-nav .current[b-zevtfjmy3u] {
    color: #0066cc;
    font-weight: 600;
}

.compare-page .page-header[b-zevtfjmy3u] {
    padding: 30px 0;
}

.compare-page .page-header h1[b-zevtfjmy3u] {
    font-size: 1.8rem;
    color: #1a1a2e;
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #0066CC 0%, #0099ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================
   Compare Slots — Product Cards
   ========================================= */
.compare-slots[b-zevtfjmy3u] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.compare-slot[b-zevtfjmy3u] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px 20px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 102, 204, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.compare-slot:hover[b-zevtfjmy3u] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 102, 204, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 102, 204, 0.15);
}

.compare-slot.filled[b-zevtfjmy3u] {
    border-color: rgba(0, 102, 204, 0.12);
}

.compare-slot.empty[b-zevtfjmy3u] {
    border: 2px dashed rgba(0, 102, 204, 0.15);
    background: rgba(255, 255, 255, 0.5);
}

.compare-slot .remove-btn[b-zevtfjmy3u] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    color: #999;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.compare-slot .remove-btn:hover[b-zevtfjmy3u] {
    background: #ff4d4f;
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

.compare-slot .product-image[b-zevtfjmy3u] {
    width: 100%;
    height: 180px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #f0f4f8 0%, #e8f0fe 100%);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.compare-slot .product-image[b-zevtfjmy3u]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
    pointer-events: none;
}

.compare-slot .product-image img[b-zevtfjmy3u] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.compare-slot:hover .product-image img[b-zevtfjmy3u] {
    transform: scale(1.05);
}

.compare-slot .no-image[b-zevtfjmy3u] {
    font-size: 4rem;
    color: #999;
}

.compare-slot .product-info[b-zevtfjmy3u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.compare-slot .product-name[b-zevtfjmy3u] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
    line-height: 1.4;
    min-height: 2.8em;
}

.compare-slot .product-desc[b-zevtfjmy3u] {
    font-size: 0.85rem;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.compare-slot .detail-btn[b-zevtfjmy3u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, #0066CC 0%, #0080ff 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin-top: auto;
    border: none;
    position: relative;
    overflow: hidden;
}

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

.compare-slot .detail-btn:hover[b-zevtfjmy3u]::before {
    left: 100%;
}

.compare-slot .detail-btn:hover[b-zevtfjmy3u] {
    background: linear-gradient(135deg, #0052a3 0%, #0066CC 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.35);
}

/* Empty Slot */
.add-product[b-zevtfjmy3u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 15px;
}

.add-product .plus-icon[b-zevtfjmy3u] {
    font-size: 2.5rem;
    color: #0066CC;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 102, 204, 0.25);
    border-radius: 50%;
    transition: all 0.3s ease;
    background: rgba(0, 102, 204, 0.03);
}

.compare-slot.empty:hover .add-product .plus-icon[b-zevtfjmy3u] {
    border-color: rgba(0, 102, 204, 0.5);
    background: rgba(0, 102, 204, 0.06);
    transform: scale(1.05);
}

.add-product p[b-zevtfjmy3u] {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.add-product .select-btn[b-zevtfjmy3u] {
    padding: 10px 24px;
    background: white;
    border: 2px solid #0066CC;
    color: #0066CC;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.add-product .select-btn:hover[b-zevtfjmy3u] {
    background: linear-gradient(135deg, #0066CC 0%, #0080ff 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.3);
    transform: translateY(-1px);
}

/* Swipe Hint (mobile only) */
.swipe-hint[b-zevtfjmy3u] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border: 1px solid #90caf9;
    border-radius: 10px;
    color: #1565c0;
    font-size: 0.85rem;
    font-weight: 500;
    animation: swipeHintPulse-b-zevtfjmy3u 2s ease-in-out infinite;
}

.swipe-hint i[b-zevtfjmy3u] {
    font-size: 1rem;
    animation: swipeArrow-b-zevtfjmy3u 1.5s ease-in-out infinite;
}

@keyframes swipeHintPulse-b-zevtfjmy3u {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

@keyframes swipeArrow-b-zevtfjmy3u {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}

/* =========================================
   Comparison Table — Modern Redesign
   ========================================= */
.comparison-table[b-zevtfjmy3u] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 4px 24px rgba(0, 102, 204, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 102, 204, 0.08);
}

.compare-row[b-zevtfjmy3u] {
    display: grid;
    grid-template-columns: 160px repeat(var(--cols, 5), 1fr);
    border-bottom: 1px solid rgba(0, 102, 204, 0.06);
    transition: background 0.2s ease;
}

.compare-row:last-child[b-zevtfjmy3u] {
    border-bottom: none;
}

/* Subtle hover highlight on each row */
.compare-row:hover[b-zevtfjmy3u] {
    background: rgba(0, 102, 204, 0.015);
}

/* No alternating stripes — use clean, consistent look */
.compare-row:nth-child(odd)[b-zevtfjmy3u] {
    background: transparent;
}

.compare-row:nth-child(odd):hover[b-zevtfjmy3u] {
    background: rgba(0, 102, 204, 0.015);
}

/* Row Label — Glassmorphism sidebar */
.row-label[b-zevtfjmy3u] {
    padding: 20px 18px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.04) 0%, rgba(0, 102, 204, 0.02) 100%);
    border-right: 3px solid rgba(0, 102, 204, 0.12);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.row-value[b-zevtfjmy3u] {
    padding: 20px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-left: 1px solid rgba(0, 102, 204, 0.06);
    color: #374151;
    font-size: 0.9rem;
    position: relative;
}

/* =========================================
   Custom Dropdown — Fully Styled
   ========================================= */
.custom-dropdown[b-zevtfjmy3u] {
    position: relative;
    width: 100%;
    max-width: 220px;
}

.custom-dropdown-trigger[b-zevtfjmy3u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 2px solid rgba(0, 102, 204, 0.12);
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    outline: none;
    text-align: left;
}

.custom-dropdown-trigger:hover[b-zevtfjmy3u] {
    border-color: rgba(0, 102, 204, 0.35);
    background: rgba(0, 102, 204, 0.02);
    box-shadow: 0 2px 10px rgba(0, 102, 204, 0.08);
}

.custom-dropdown.open .custom-dropdown-trigger[b-zevtfjmy3u] {
    border-color: #0066CC;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1), 0 4px 12px rgba(0, 102, 204, 0.1);
    background: #fff;
}

.custom-dropdown-text[b-zevtfjmy3u] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-dropdown-arrow[b-zevtfjmy3u] {
    font-size: 0.65rem;
    color: #0066CC;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex-shrink: 0;
}

.custom-dropdown.open .custom-dropdown-arrow[b-zevtfjmy3u] {
    transform: rotate(180deg);
}

.custom-dropdown-menu[b-zevtfjmy3u] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(0, 102, 204, 0.12);
    border-radius: 14px;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: 100;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    animation: dropdownSlideIn-b-zevtfjmy3u 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes dropdownSlideIn-b-zevtfjmy3u {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.custom-dropdown-menu[b-zevtfjmy3u]::-webkit-scrollbar {
    width: 5px;
}

.custom-dropdown-menu[b-zevtfjmy3u]::-webkit-scrollbar-track {
    background: transparent;
}

.custom-dropdown-menu[b-zevtfjmy3u]::-webkit-scrollbar-thumb {
    background: rgba(0, 102, 204, 0.15);
    border-radius: 10px;
}

.custom-dropdown-option[b-zevtfjmy3u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 0.84rem;
    color: #374151;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.15s ease;
    gap: 8px;
}

.custom-dropdown-option:hover[b-zevtfjmy3u] {
    background: rgba(0, 102, 204, 0.06);
    color: #0066CC;
}

.custom-dropdown-option.selected[b-zevtfjmy3u] {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.08), rgba(0, 102, 204, 0.04));
    color: #0066CC;
    font-weight: 600;
}

.custom-dropdown-option.selected i[b-zevtfjmy3u] {
    color: #0066CC;
    font-size: 0.7rem;
}

.custom-dropdown-option span[b-zevtfjmy3u] {
    flex: 1;
    text-align: left;
}

.single-variant[b-zevtfjmy3u] {
    font-size: 0.85rem;
    color: #374151;
    font-weight: 500;
    padding: 6px 12px;
    background: rgba(0, 102, 204, 0.04);
    border-radius: 8px;
}

.no-variant[b-zevtfjmy3u] {
    color: #d1d5db;
}

/* =========================================
   Row Value Variants
   ========================================= */
.row-value.empty[b-zevtfjmy3u] {
    color: #d1d5db;
    font-weight: 400;
}

/* Price */
.row-value.price[b-zevtfjmy3u] {
    font-weight: 600;
    color: #0066CC;
    flex-direction: column;
    gap: 4px;
}

.row-value.price .sale-price[b-zevtfjmy3u] {
    color: #ef4444;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.row-value.price .original-price[b-zevtfjmy3u] {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 0.82rem;
    font-weight: 400;
}

/* Brand */
.row-value.brand[b-zevtfjmy3u] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.82rem;
    color: #6b7280;
}

/* Rating */
.row-value.rating[b-zevtfjmy3u] {
    flex-direction: column;
    gap: 4px;
}

.row-value.rating .stars[b-zevtfjmy3u] {
    color: #f59e0b;
    font-size: 1.05rem;
    letter-spacing: 2px;
}

.row-value.rating .rating-text[b-zevtfjmy3u] {
    font-size: 0.78rem;
    color: #9ca3af;
    font-weight: 500;
}

/* Features / Status */
.row-value.features[b-zevtfjmy3u] {
    text-align: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
}

.row-value.features ul[b-zevtfjmy3u] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.row-value.features li[b-zevtfjmy3u] {
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
    font-size: 0.9rem;
    line-height: 1.5;
}

.row-value.features li[b-zevtfjmy3u]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #0066CC;
}

/* Status Indicators — Pill Style */
.status-in-stock[b-zevtfjmy3u] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #16a34a;
    font-weight: 600;
    font-size: 0.82rem;
    background: rgba(22, 163, 74, 0.08);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(22, 163, 74, 0.15);
}

.status-in-stock i[b-zevtfjmy3u] {
    margin-right: 0;
    font-size: 0.7rem;
}

.status-out-stock[b-zevtfjmy3u] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ef4444;
    font-weight: 600;
    font-size: 0.82rem;
    background: rgba(239, 68, 68, 0.08);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.status-out-stock i[b-zevtfjmy3u] {
    margin-right: 0;
    font-size: 0.7rem;
}

.status-new[b-zevtfjmy3u] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #0066CC;
    font-weight: 600;
    font-size: 0.82rem;
    background: rgba(0, 102, 204, 0.08);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(0, 102, 204, 0.15);
}

.status-new i[b-zevtfjmy3u] {
    margin-right: 0;
    font-size: 0.7rem;
}

.status-featured[b-zevtfjmy3u] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #d97706;
    font-weight: 600;
    font-size: 0.82rem;
    background: rgba(217, 119, 6, 0.08);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(217, 119, 6, 0.15);
}

.status-featured i[b-zevtfjmy3u] {
    margin-right: 0;
    font-size: 0.7rem;
}

/* =========================================
   Promotion Cards — Professional Design
   ========================================= */
.row-value.promotion[b-zevtfjmy3u] {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    overflow: hidden;
    min-width: 0;
}

.promo-banners[b-zevtfjmy3u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.promo-banner-card[b-zevtfjmy3u] {
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(234, 88, 12, 0.1);
    background: #fff;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    max-width: 100%;
}

.promo-card-icon[b-zevtfjmy3u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 100%;
    background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
    color: #fff;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.promo-card-content[b-zevtfjmy3u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    text-align: left;
    min-width: 0;
    overflow: hidden;
}

.promo-card-title[b-zevtfjmy3u] {
    font-weight: 600;
    font-size: 0.82rem;
    color: #1a1a2e;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.25s ease;
}

/* Expand to show full text on hover */
.promo-banner-card:hover .promo-card-title[b-zevtfjmy3u] {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.promo-banner-card:hover[b-zevtfjmy3u] {
    border-color: rgba(234, 88, 12, 0.2);
    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.08);
    background: #fffbf5;
}

.no-promo[b-zevtfjmy3u] {
    color: #d1d5db;
    font-size: 0.85rem;
    font-style: italic;
}

/* =========================================
   Table Scroll Wrapper & Arrow Buttons
   ========================================= */
.table-scroll-wrapper[b-zevtfjmy3u] {
    position: relative;
}

.scroll-arrow[b-zevtfjmy3u] {
    display: none;
    /* Hidden on desktop */
}

/* Action Row */
.actions-row[b-zevtfjmy3u] {
    background: linear-gradient(180deg, rgba(0, 102, 204, 0.02) 0%, rgba(0, 102, 204, 0.05) 100%);
}

.actions-row .row-value[b-zevtfjmy3u] {
    flex-direction: column;
    gap: 10px;
    padding: 25px 15px;
}

.btn-view[b-zevtfjmy3u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: linear-gradient(135deg, #0066CC 0%, #0080ff 100%);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

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

.btn-view:hover[b-zevtfjmy3u]::before {
    left: 100%;
}

.btn-view:hover[b-zevtfjmy3u] {
    background: linear-gradient(135deg, #0052a3 0%, #0066CC 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.35);
}

.btn-add-cart[b-zevtfjmy3u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

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

.btn-add-cart:hover[b-zevtfjmy3u]::before {
    left: 100%;
}

.btn-add-cart:hover[b-zevtfjmy3u] {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
}

/* =========================================
   Product Selector Modal — Modern
   ========================================= */
.modal-overlay[b-zevtfjmy3u] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-zevtfjmy3u 0.25s ease;
}

@keyframes fadeIn-b-zevtfjmy3u {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content[b-zevtfjmy3u] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-zevtfjmy3u 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 102, 204, 0.08);
}

@keyframes slideUp-b-zevtfjmy3u {
    from {
        transform: translateY(30px) scale(0.97);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-header[b-zevtfjmy3u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(0, 102, 204, 0.08);
    background: linear-gradient(180deg, rgba(0, 102, 204, 0.03) 0%, transparent 100%);
}

.modal-header h2[b-zevtfjmy3u] {
    font-size: 1.3rem;
    margin: 0;
    font-weight: 700;
    color: #1a1a2e;
}

.modal-header .close-btn[b-zevtfjmy3u] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #6b7280;
}

.modal-header .close-btn:hover[b-zevtfjmy3u] {
    background: #ef4444;
    color: white;
    transform: rotate(90deg);
}

.modal-body[b-zevtfjmy3u] {
    padding: 24px 28px;
    overflow-y: auto;
}

.modal-body .search-box[b-zevtfjmy3u] {
    margin-bottom: 20px;
    display: flex;
    border: 2px solid rgba(0, 102, 204, 0.12);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
}

.modal-body .search-box:focus-within[b-zevtfjmy3u] {
    border-color: #0066CC;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.08);
}

.modal-body .search-box input[b-zevtfjmy3u] {
    flex: 1;
    padding: 14px 18px;
    border: none;
    font-size: 0.95rem;
    outline: none;
    background: transparent;
    color: #1a1a2e;
}

.modal-body .search-box input[b-zevtfjmy3u]::placeholder {
    color: #9ca3af;
}

.modal-body .search-box .search-btn[b-zevtfjmy3u] {
    padding: 14px 18px;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(0, 102, 204, 0.08);
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
}

.modal-body .search-box .search-btn:hover[b-zevtfjmy3u] {
    background: rgba(0, 102, 204, 0.05);
    color: #0066CC;
}

.modal-body .search-box input:focus[b-zevtfjmy3u] {
    outline: none;
}

.products-list[b-zevtfjmy3u] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.product-item[b-zevtfjmy3u] {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(0, 102, 204, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: rgba(255, 255, 255, 0.8);
}

.product-item:hover[b-zevtfjmy3u] {
    border-color: rgba(0, 102, 204, 0.25);
    background: rgba(0, 102, 204, 0.03);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.08);
}

.product-item img[b-zevtfjmy3u] {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0f4f8, #e8f0fe);
}

.product-item-info h4[b-zevtfjmy3u] {
    font-size: 0.85rem;
    margin: 0 0 4px 0;
    color: #1a1a2e;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-item-info .brand[b-zevtfjmy3u] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0 0 4px 0;
    font-weight: 500;
}

.product-item-info .price[b-zevtfjmy3u] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0066CC;
    margin: 0;
}

.no-results[b-zevtfjmy3u] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #9ca3af;
    font-weight: 500;
}

/* =========================================
   Responsive — Tablet
   ========================================= */
@media (max-width: 1024px) {
    .compare-slots[b-zevtfjmy3u] {
        grid-template-columns: repeat(2, 1fr);
    }

    .compare-row[b-zevtfjmy3u] {
        grid-template-columns: 130px repeat(2, 1fr);
    }

    .products-list[b-zevtfjmy3u] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================
   Responsive — Mobile (Polished Redesign)
   ========================================= */
@media (max-width: 768px) {
    .compare-page[b-zevtfjmy3u] {
        padding-bottom: 80px;
        background: linear-gradient(180deg, #f0f4f8 0%, #e8edf3 100%);
    }

    .compare-page .page-header[b-zevtfjmy3u] {
        padding: 16px 0 8px;
    }

    .compare-page .page-header h1[b-zevtfjmy3u] {
        font-size: 1.2rem;
    }

    /* ---- Product Slots: Horizontal Scroll with Snap ---- */
    .compare-slots[b-zevtfjmy3u] {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 4px 4px 12px;
        margin-bottom: 16px;
        scrollbar-width: none;
    }

    .compare-slots[b-zevtfjmy3u]::-webkit-scrollbar {
        display: none;
    }

    .compare-slot[b-zevtfjmy3u] {
        scroll-snap-align: start;
        flex: 0 0 70%;
        min-width: 70%;
        max-width: 70%;
        padding: 14px;
        min-height: 220px;
        border-radius: 14px;
        box-shadow: 0 2px 12px rgba(0, 102, 204, 0.06);
    }

    .compare-slot.empty[b-zevtfjmy3u] {
        flex: 0 0 50%;
        min-width: 50%;
        max-width: 50%;
        min-height: 200px;
    }

    .compare-slot .product-image[b-zevtfjmy3u] {
        height: 100px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .compare-slot .product-name[b-zevtfjmy3u] {
        font-size: 0.78rem;
        min-height: auto;
        margin-bottom: 6px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .compare-slot .product-desc[b-zevtfjmy3u] {
        display: none;
    }

    .compare-slot .detail-btn[b-zevtfjmy3u] {
        padding: 8px 18px;
        font-size: 0.72rem;
        border-radius: 20px;
    }

    .compare-slot .remove-btn[b-zevtfjmy3u] {
        width: 26px;
        height: 26px;
        font-size: 0.6rem;
        top: 8px;
        right: 8px;
    }

    .add-product[b-zevtfjmy3u] {
        gap: 10px;
    }

    .add-product .plus-icon[b-zevtfjmy3u] {
        font-size: 1.5rem;
        width: 44px;
        height: 44px;
    }

    .add-product p[b-zevtfjmy3u] {
        font-size: 0.72rem;
        margin: 0;
    }

    .add-product .select-btn[b-zevtfjmy3u] {
        padding: 7px 16px;
        font-size: 0.72rem;
    }

    /* ---- Swipe Hint ---- */
    .swipe-hint[b-zevtfjmy3u] {
        display: flex;
        margin-bottom: 16px;
        border-radius: 12px;
        font-size: 0.78rem;
        padding: 8px 14px;
    }

    /* ---- Table Scroll Wrapper & Arrows ---- */
    .table-scroll-wrapper[b-zevtfjmy3u] {
        position: relative;
    }

    .scroll-arrow[b-zevtfjmy3u] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(0, 102, 204, 0.15);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        color: #0066CC;
        font-size: 0.95rem;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        /* Hidden by default, fade in/out */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
    }

    .scroll-arrow.visible[b-zevtfjmy3u] {
        opacity: 1;
        pointer-events: auto;
    }

    .scroll-arrow.at-start[b-zevtfjmy3u],
    .scroll-arrow.at-end[b-zevtfjmy3u] {
        opacity: 0;
        pointer-events: none;
    }

    .scroll-arrow:active[b-zevtfjmy3u] {
        transform: translateY(-50%) scale(0.88);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    }

    .scroll-arrow.left[b-zevtfjmy3u] {
        left: 6px;
    }

    .scroll-arrow.right[b-zevtfjmy3u] {
        right: 6px;
    }

    /* ---- Comparison Table: Scrollable with Polished Rows ---- */
    .comparison-table[b-zevtfjmy3u] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        touch-action: pan-x;
        position: relative;
        border-radius: 16px;
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 4px 0;
        /* Hide scrollbar for cleaner touch experience */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .comparison-table[b-zevtfjmy3u]::-webkit-scrollbar {
        display: none;
    }

    .compare-row[b-zevtfjmy3u] {
        display: grid;
        grid-template-columns: 90px repeat(var(--cols, 5), calc(70vw - 16px));
        min-width: max-content;
        border-bottom: none;
        background: rgba(255, 255, 255, 0.95);
        margin-bottom: 6px;
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 102, 204, 0.06);
        overflow: hidden;
    }

    .row-label[b-zevtfjmy3u] {
        scroll-snap-align: start;
    }

    .compare-row:last-child[b-zevtfjmy3u] {
        margin-bottom: 0;
    }

    .compare-row:nth-child(odd)[b-zevtfjmy3u] {
        background: rgba(255, 255, 255, 0.95);
    }

    .compare-row:hover[b-zevtfjmy3u] {
        background: rgba(255, 255, 255, 1);
    }

    /* Sticky label column — blue gradient */
    .row-label[b-zevtfjmy3u] {
        position: sticky;
        left: 0;
        z-index: 2;
        background: linear-gradient(135deg, #0066CC 0%, #0080ff 100%);
        color: #fff;
        padding: 12px 8px;
        font-size: 0.65rem;
        font-weight: 700;
        border-right: none;
        letter-spacing: 0.03em;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-transform: uppercase;
    }

    .row-value[b-zevtfjmy3u] {
        padding: 12px 10px;
        font-size: 0.82rem;
        border-left: 1px solid rgba(0, 102, 204, 0.05);
    }

    /* ---- Actions Row ---- */
    .actions-row[b-zevtfjmy3u] {
        background: transparent;
    }

    .actions-row .row-value[b-zevtfjmy3u] {
        padding: 14px 8px;
        gap: 6px;
    }

    .btn-view[b-zevtfjmy3u],
    .btn-add-cart[b-zevtfjmy3u] {
        padding: 8px 12px;
        font-size: 0.7rem;
        white-space: nowrap;
        border-radius: 20px;
    }

    .btn-add-cart i[b-zevtfjmy3u] {
        font-size: 0.65rem;
    }

    /* ---- Custom Dropdown: Bottom-Sheet on Mobile ---- */
    .custom-dropdown[b-zevtfjmy3u] {
        max-width: 130px;
    }

    .custom-dropdown-trigger[b-zevtfjmy3u] {
        font-size: 0.72rem;
        padding: 8px 10px;
        border-radius: 10px;
        border-width: 1.5px;
    }

    .custom-dropdown-arrow[b-zevtfjmy3u] {
        font-size: 0.55rem;
    }

    .custom-dropdown-menu[b-zevtfjmy3u] {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 55vh;
        border-radius: 20px 20px 0 0;
        padding: 8px 8px 24px;
        z-index: 200;
        box-shadow:
            0 -8px 30px rgba(0, 0, 0, 0.15),
            0 -2px 8px rgba(0, 0, 0, 0.05);
        animation: sheetSlideUp-b-zevtfjmy3u 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .custom-dropdown-menu[b-zevtfjmy3u]::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 4px auto 12px;
    }

    @keyframes sheetSlideUp-b-zevtfjmy3u {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

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

    .custom-dropdown-option[b-zevtfjmy3u] {
        padding: 14px 16px;
        font-size: 0.88rem;
        border-radius: 12px;
    }

    .custom-dropdown-option.selected[b-zevtfjmy3u] {
        background: linear-gradient(135deg, rgba(0, 102, 204, 0.08), rgba(0, 102, 204, 0.04));
    }

    /* ---- Promo Cards Compact ---- */
    .row-value.promotion[b-zevtfjmy3u] {
        padding: 10px 8px;
    }

    .promo-banners[b-zevtfjmy3u] {
        gap: 4px;
    }

    .promo-banner-card[b-zevtfjmy3u] {
        border-radius: 8px;
    }

    .promo-card-icon[b-zevtfjmy3u] {
        width: 28px;
        font-size: 0.65rem;
    }

    .promo-card-content[b-zevtfjmy3u] {
        padding: 6px 8px;
        gap: 2px;
    }

    .promo-card-title[b-zevtfjmy3u] {
        font-size: 0.68rem;
        line-height: 1.3;
    }

    .promo-card-condition[b-zevtfjmy3u] {
        font-size: 0.58rem;
    }

    /* ---- Price ---- */
    .row-value.price .sale-price[b-zevtfjmy3u] {
        font-size: 0.95rem;
    }

    .row-value.price .original-price[b-zevtfjmy3u] {
        font-size: 0.7rem;
    }

    /* ---- Status pills compact ---- */
    .status-in-stock[b-zevtfjmy3u],
    .status-out-stock[b-zevtfjmy3u],
    .status-new[b-zevtfjmy3u],
    .status-featured[b-zevtfjmy3u] {
        font-size: 0.68rem;
        padding: 3px 8px;
        gap: 3px;
    }

    /* ---- Rating ---- */
    .row-value.rating .stars[b-zevtfjmy3u] {
        font-size: 0.85rem;
    }

    .row-value.rating .rating-text[b-zevtfjmy3u] {
        font-size: 0.65rem;
    }

    /* ---- Brand ---- */
    .row-value.brand[b-zevtfjmy3u] {
        font-size: 0.72rem;
    }

    /* ---- Modal ---- */
    .products-list[b-zevtfjmy3u] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-zevtfjmy3u] {
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        animation: sheetSlideUp-b-zevtfjmy3u 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .modal-overlay[b-zevtfjmy3u] {
        align-items: flex-end;
    }

    .modal-header[b-zevtfjmy3u] {
        padding: 20px 20px 14px;
        position: relative;
    }

    .modal-header[b-zevtfjmy3u]::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 0 auto 14px;
    }

    .modal-body[b-zevtfjmy3u] {
        padding: 14px 20px 30px;
    }

    .product-item[b-zevtfjmy3u] {
        padding: 12px;
        border-radius: 12px;
    }

    .product-item img[b-zevtfjmy3u] {
        width: 52px;
        height: 52px;
        border-radius: 8px;
    }

    .product-item-info h4[b-zevtfjmy3u] {
        font-size: 0.82rem;
    }
}
/* /Components/Pages/ProductDetail.razor.rz.scp.css */
/* Product Detail Page - New Design */

.product-detail-page[b-acyxtqdmks] {
    min-height: 100vh;
    background: #f8f9fa;
}

/* Breadcrumb */
.breadcrumb-nav[b-acyxtqdmks] {
    background: #fff;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.875rem;
}

.breadcrumb-nav .container[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.breadcrumb-nav a[b-acyxtqdmks] {
    color: #0066cc;
    text-decoration: none;
}

.breadcrumb-nav a:hover[b-acyxtqdmks] {
    text-decoration: underline;
}

.breadcrumb-nav .separator[b-acyxtqdmks] {
    color: #adb5bd;
}

.breadcrumb-nav .current[b-acyxtqdmks] {
    color: #0066cc;
    font-weight: 500;
}

/* Container */
.container[b-acyxtqdmks] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Loading & Not Found */
.loading-state[b-acyxtqdmks],
.not-found[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.spinner[b-acyxtqdmks] {
    width: 48px;
    height: 48px;
    border: 4px solid #e9ecef;
    border-top-color: #0066cc;
    border-radius: 50%;
    animation: spin-b-acyxtqdmks 0.8s linear infinite;
}

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

.not-found-icon[b-acyxtqdmks] {
    font-size: 4rem;
    color: #adb5bd;
    margin-bottom: 1rem;
}

.not-found h2[b-acyxtqdmks] {
    margin: 0 0 0.5rem 0;
    color: #212529;
}

.not-found p[b-acyxtqdmks] {
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.btn-primary[b-acyxtqdmks] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #0066cc;
    color: #fff;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
}

/* Product Main Section */
.product-main[b-acyxtqdmks] {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 2.5rem;
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Product Gallery */
.product-gallery[b-acyxtqdmks] {
    position: sticky;
    top: 100px;
    height: fit-content;
}

/* Main Gallery */
.product-gallery-main[b-acyxtqdmks] {
    position: relative;
    aspect-ratio: 1;
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
}

.product-gallery-main img[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.gallery-nav-btn[b-acyxtqdmks] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
    background: rgba(255, 255, 255, 0.9);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 5;
    transition: background 0.2s;
}

.gallery-nav-btn:hover[b-acyxtqdmks] {
    background: #fff;
}

.gallery-prev[b-acyxtqdmks] {
    left: 10px;
}

.gallery-next[b-acyxtqdmks] {
    right: 10px;
}

/* Thumbnail Gallery */
.product-gallery-thumbs[b-acyxtqdmks] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 4px;
}

.gallery-thumb[b-acyxtqdmks] {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.gallery-thumb.active[b-acyxtqdmks] {
    border-color: #2a5bd7;
    opacity: 1;
}

.gallery-thumb:hover[b-acyxtqdmks] {
    opacity: 1;
    border-color: #adb5bd;
}

.gallery-thumb img[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.main-image[b-acyxtqdmks] {
    position: relative;
    aspect-ratio: 1;
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    border: 1px solid #e9ecef;
}

.main-image img[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.main-image .no-image[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 4rem;
    color: #adb5bd;
}

.video-container[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.video-container video[b-acyxtqdmks],
.video-container iframe[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none;
}

/* Media placeholder for lazy loading */
.media-placeholder[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
}

.media-placeholder .placeholder-thumb[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(2px);
    transform: scale(1.05);
}

.media-placeholder .play-icon-large[b-acyxtqdmks] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    transition: all 0.2s ease;
}

.media-placeholder:hover .play-icon-large[b-acyxtqdmks] {
    background: rgba(255, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-duration[b-acyxtqdmks] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.discount-badge[b-acyxtqdmks] {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ff4757;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    z-index: 10;
    pointer-events: none;
}

.thumbnail-list[b-acyxtqdmks] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.thumbnail[b-acyxtqdmks] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    padding: 0;
    transition: border-color 0.2s;
}

.thumbnail:hover[b-acyxtqdmks] {
    border-color: #0066cc;
}

.thumbnail.active[b-acyxtqdmks] {
    border-color: #0066cc;
    border-width: 2px;
}

.thumbnail img[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumb[b-acyxtqdmks] {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-thumb .play-icon[b-acyxtqdmks] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

/* Product Info */
.product-info[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-title[b-acyxtqdmks] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529;
    line-height: 1.4;
    margin: 0;
}

.product-meta[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.rating[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #212529;
}

.rating i[b-acyxtqdmks] {
    color: #ffc107;
    font-size: 0.875rem;
}

.rating-value[b-acyxtqdmks] {
    font-weight: 600;
}

.meta-separator[b-acyxtqdmks] {
    color: #dee2e6;
}

.sold-count[b-acyxtqdmks] {
    color: #6c757d;
}

/* Price Section - Compact Premium Style */
.price-section[b-acyxtqdmks] {
    margin: 0.5rem 0;
    background: linear-gradient(135deg, #fef7f0 0%, #fff5f5 100%);
    padding: 0.625rem 1rem;
    border-radius: 8px;
    border: 1px solid #fee2e2;
    position: relative;
    overflow: hidden;
}

.price-section[b-acyxtqdmks]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #f97316, #ef4444, #f97316);
    background-size: 200% 100%;
    animation: price-shimmer-b-acyxtqdmks 2s ease infinite;
}

@keyframes price-shimmer-b-acyxtqdmks {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.price-box[b-acyxtqdmks] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0;
    flex-wrap: wrap;
}

.sale-price[b-acyxtqdmks] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #dc2626 !important;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.price-range-text[b-acyxtqdmks] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #dc2626;
}

.original-price[b-acyxtqdmks] {
    font-size: 0.875rem;
    color: #9ca3af !important;
    text-decoration: line-through;
    font-weight: 400;
    background: transparent !important;
}

.discount-tag[b-acyxtqdmks] {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    padding: 3px 8px !important;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    border: none;
}

/* Variant Section - Shopee-inspired */
.variant-section[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid #f0f0f0;
}

.variant-section:first-of-type[b-acyxtqdmks] {
    border-top: none;
}

/* Variant header with label + selected value */
.variant-header[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.variant-label[b-acyxtqdmks] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #757575;
    flex-shrink: 0;
}

.variant-selected-value[b-acyxtqdmks] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #222;
}

.variant-options[b-acyxtqdmks] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Variant chips with images (image-only mode) */
.variant-options.with-images .variant-chip[b-acyxtqdmks] {
    padding: 4px;
    border-radius: 8px;
    min-width: auto;
    width: 60px;
    height: 60px;
    justify-content: center;
    border: 2px solid #e9ecef;
    background: #fff;
}

.variant-options.with-images .variant-chip:hover[b-acyxtqdmks] {
    border-color: #0145b2;
}

.variant-options.with-images .variant-chip.active[b-acyxtqdmks] {
    border-color: #0145b2;
    background: #fff;
    box-shadow: 0 0 0 1px #0145b2;
}

/* Base variant chip styles - Shopee compact */
.variant-chip[b-acyxtqdmks] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.8125rem;
    color: #333;
    position: relative;
    overflow: hidden;
    line-height: 1.3;
}

.variant-chip:hover[b-acyxtqdmks] {
    border-color: #0145b2;
    color: #0145b2;
}

.variant-chip.active[b-acyxtqdmks] {
    border-color: #0145b2;
    color: #0145b2;
    background: #eaf3ff;
    animation: chipSelect-b-acyxtqdmks 0.25s ease;
}

@keyframes chipSelect-b-acyxtqdmks {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.variant-chip.out-of-stock[b-acyxtqdmks] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #fafafa;
}

.variant-chip.out-of-stock:hover[b-acyxtqdmks] {
    border-color: #e0e0e0;
    color: #333;
}

/* Unavailable variant option - combination doesn't exist */
.variant-chip.unavailable[b-acyxtqdmks] {
    position: relative;
    opacity: 0.4;
    cursor: not-allowed;
    background: #fafafa;
    color: #bbb;
    border-color: #e8e8e8;
    overflow: hidden;
}

.variant-chip.unavailable[b-acyxtqdmks]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -5%;
    width: 110%;
    height: 1px;
    background: #ccc;
    transform: rotate(-12deg);
    pointer-events: none;
}

.variant-chip.unavailable:hover[b-acyxtqdmks] {
    border-color: #e8e8e8;
    background: #fafafa;
    color: #bbb;
}

.variant-chip.unavailable .chip-text[b-acyxtqdmks] {
    color: #bbb;
}

.variant-chip.unavailable .chip-image[b-acyxtqdmks] {
    filter: grayscale(100%);
    opacity: 0.5;
}

/* Shopee-style corner checkmark */
.chip-check[b-acyxtqdmks] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 18px 18px;
    border-color: transparent transparent #0145b2 transparent;
    line-height: 0;
}

.chip-check i[b-acyxtqdmks] {
    position: absolute;
    bottom: -17px;
    right: 0;
    font-size: 8px;
    color: #fff;
    line-height: 1;
}

/* Chip image for product thumbnails */
.chip-image[b-acyxtqdmks] {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.chip-text[b-acyxtqdmks] {
    color: inherit;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Simple variant options (size, weight) */
.variant-options.simple .variant-chip[b-acyxtqdmks] {
    padding: 6px 14px;
    border-radius: 4px;
    min-width: auto;
}

/* Variant options wrapper (for collapsible mobile behavior) */
.variant-options-wrapper[b-acyxtqdmks] {
    flex: 1;
    min-width: 0;
}

/* Show more button - hidden on desktop */
.variant-show-more[b-acyxtqdmks] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 16px;
    margin-top: 6px;
    background: #fafafa;
    border: 1px dashed #e0e0e0;
    border-radius: 4px;
    color: #0145b2;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.variant-show-more:hover[b-acyxtqdmks] {
    background: #eaf3ff;
    border-color: #0145b2;
}

.variant-show-more i[b-acyxtqdmks] {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

/* Quantity Row */
.quantity-row[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.quantity-selector[b-acyxtqdmks] {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

.qty-btn[b-acyxtqdmks] {
    width: 36px;
    height: 36px;
    border: none;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 1.125rem;
    color: #495057;
    transition: background 0.2s;
}

.qty-btn:hover:not(:disabled)[b-acyxtqdmks] {
    background: #e9ecef;
}

.qty-btn:disabled[b-acyxtqdmks] {
    opacity: 0.4;
    cursor: not-allowed;
}

.quantity-selector input[b-acyxtqdmks] {
    width: 100px;
    height: 36px;
    border: none;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.quantity-selector input:focus[b-acyxtqdmks] {
    outline: none;
}

.quantity-selector input[b-acyxtqdmks]::-webkit-outer-spin-button,
.quantity-selector input[b-acyxtqdmks]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-selector input[type=number][b-acyxtqdmks] {
    -moz-appearance: textfield;
    appearance: textfield;
    /* Firefox */
}

.stock-info[b-acyxtqdmks] {
    color: #6c757d;
    font-size: 0.875rem;
}

.stock-info.loading[b-acyxtqdmks] {
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.stock-info.out-of-stock[b-acyxtqdmks] {
    color: #dc3545;
    font-weight: 500;
}

/* Flash Sale Strip - Modern Single-Line Design */
.flash-sale-strip[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 50%, #f97316 100%);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    color: #fff;
    font-size: 0.8rem;
}

.flash-strip-left[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.flash-badge[b-acyxtqdmks] {
    width: 22px;
    height: 22px;
    background: #fff;
    color: #dc2626;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.flash-title[b-acyxtqdmks] {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flash-strip-center[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.flash-timer[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.timer-block[b-acyxtqdmks] {
    background: #fff;
    color: #1f2937;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.75rem;
    min-width: 22px;
    text-align: center;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.timer-sep[b-acyxtqdmks] {
    font-weight: 700;
    color: #fff;
    font-size: 0.75rem;
}

.flash-strip-right[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.flash-stock[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stock-bar[b-acyxtqdmks] {
    width: 50px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.stock-fill[b-acyxtqdmks] {
    height: 100%;
    background: #fff;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.stock-text[b-acyxtqdmks] {
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.flash-limit-tag[b-acyxtqdmks] {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
}

.flash-limit-tag.exceeded[b-acyxtqdmks] {
    background: #fbbf24;
    color: #92400e;
}

.flash-sale-strip.not-eligible[b-acyxtqdmks] {
    opacity: 0.6;
    filter: grayscale(40%);
}

/* Flash Sale Price Styling */
.price-section.flash-sale-price[b-acyxtqdmks] {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border-color: #ffcdd2;
}

.price-section.flash-sale-price[b-acyxtqdmks]::before {
    background: linear-gradient(90deg, #ee4d2d, #ff6633, #ee4d2d);
}

.sale-price.flash[b-acyxtqdmks] {
    color: #ee4d2d !important;
    font-weight: 700 !important;
    font-size: 1.625rem !important;
}

.discount-tag.flash[b-acyxtqdmks] {
    background: linear-gradient(135deg, #ee4d2d 0%, #ff6633 100%) !important;
    color: #fff !important;
    font-weight: 700;
    padding: 3px 10px !important;
    border-radius: 4px;
    border: none !important;
    box-shadow: 0 2px 6px rgba(238, 77, 45, 0.3);
}

/* Action Buttons */
.action-buttons[b-acyxtqdmks] {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
}

.btn-compare[b-acyxtqdmks] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #fff;
    color: #0145b2;
    border: 1px solid #0145b2;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-compare:hover[b-acyxtqdmks] {
    background: #eaf3ff;
}

.btn-add-cart[b-acyxtqdmks] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #0145b2;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-add-cart:hover[b-acyxtqdmks] {
    background: #013a96;
}

.btn-add-cart:disabled[b-acyxtqdmks] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-add-cart.disabled-stock:disabled[b-acyxtqdmks] {
    background: #6c757d;
    opacity: 1;
}

.btn-favorite[b-acyxtqdmks] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #495057;
}

.btn-favorite i[b-acyxtqdmks] {
    color: #ff4757;
    font-size: 1rem;
}

.btn-favorite:hover[b-acyxtqdmks] {
    border-color: #ff4757;
}

.btn-favorite.active[b-acyxtqdmks] {
    background: #fff0f1;
    border-color: #ff4757;
}

.spinner-small[b-acyxtqdmks] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-acyxtqdmks 0.8s linear infinite;
}

/* Cart Message */
.cart-message[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.9rem;
    animation: slideIn-b-acyxtqdmks 0.3s ease;
}

@keyframes slideIn-b-acyxtqdmks {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.cart-message.success[b-acyxtqdmks] {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.cart-message.error[b-acyxtqdmks] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.view-cart-link[b-acyxtqdmks] {
    color: #0066cc;
    text-decoration: none;
    font-weight: 600;
    margin-left: auto;
}

.view-cart-link:hover[b-acyxtqdmks] {
    text-decoration: underline;
}

/* Bundle Deals Section */
.bundle-deals[b-acyxtqdmks] {
    margin-top: 1.5rem;
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.bundle-deals .section-header[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.bundle-deals .section-header h2[b-acyxtqdmks] {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
    border-left: 4px solid #f97316;
    padding: 0.5rem 0 0.5rem 0.75rem;
}

/* Bundle Row — "Product A + Product B = Savings" */
.bundle-row[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
    border: 1px solid #f3e8d0;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffbf5 0%, #fff8ef 100%);
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.bundle-row:last-child[b-acyxtqdmks] {
    margin-bottom: 0;
}

.bundle-row:hover[b-acyxtqdmks] {
    border-color: #f97316;
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.1);
}

/* Items container — horizontal layout */
.bundle-items[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

/* Individual product in the bundle */
.bundle-item[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
    width: 100px;
    min-width: 0;
}

.bundle-item.partner[b-acyxtqdmks] {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.bundle-item.partner:hover[b-acyxtqdmks] {
    transform: translateY(-2px);
}

.bundle-item-image[b-acyxtqdmks] {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #e5e7eb;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

.bundle-item.current .bundle-item-image[b-acyxtqdmks] {
    border-color: #0066cc;
}

.bundle-item.partner:hover .bundle-item-image[b-acyxtqdmks] {
    border-color: #f97316;
}

.bundle-item-image img[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bundle-item-name[b-acyxtqdmks] {
    font-size: 0.7rem;
    font-weight: 500;
    color: #374151;
    text-align: center;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}

.bundle-item-price[b-acyxtqdmks] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #dc2626;
}

/* Plus connector */
.bundle-plus[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
    font-size: 0.75rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);
}

/* Savings section — right side */
.bundle-savings[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    text-align: right;
}

.bundle-deal-name[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #92400e;
}

.bundle-deal-name i[b-acyxtqdmks] {
    color: #f97316;
    font-size: 0.7rem;
}

.bundle-save-amount[b-acyxtqdmks] {
    font-size: 0.9rem;
    font-weight: 800;
    color: #dc2626;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    letter-spacing: 0.3px;
}

.bundle-action-btn[b-acyxtqdmks] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.bundle-action-btn:hover[b-acyxtqdmks] {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.bundle-action-btn i[b-acyxtqdmks] {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.bundle-action-btn:hover i[b-acyxtqdmks] {
    transform: translateX(2px);
}

/* Product Details Section */
.product-details-section[b-acyxtqdmks] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.details-main[b-acyxtqdmks] {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.details-header h2[b-acyxtqdmks] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.details-tabs[b-acyxtqdmks] {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.detail-tab[b-acyxtqdmks] {
    position: relative;
    padding: 0.75rem 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s;
}

.detail-tab[b-acyxtqdmks]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    transition: background 0.2s;
}

.detail-tab:hover[b-acyxtqdmks] {
    color: var(--primary-blue);
}

.detail-tab.active[b-acyxtqdmks] {
    color: var(--primary-blue);
}

.detail-tab.active[b-acyxtqdmks]::after {
    background: #fde272;
}

.details-content[b-acyxtqdmks] {
    line-height: 1.8;
    color: #495057;
}

.description-content h3[b-acyxtqdmks],
.description-content h4[b-acyxtqdmks],
.sample-description h3[b-acyxtqdmks],
.sample-description h4[b-acyxtqdmks] {
    color: #212529;
    margin: 1.5rem 0 0.75rem 0;
    font-weight: 600;
}

.description-content h3:first-child[b-acyxtqdmks],
.sample-description h3:first-child[b-acyxtqdmks] {
    margin-top: 0;
}

.description-content p[b-acyxtqdmks],
.sample-description p[b-acyxtqdmks] {
    margin: 0 0 1rem 0;
}

.description-content ul[b-acyxtqdmks],
.sample-description ul[b-acyxtqdmks] {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.description-content li[b-acyxtqdmks],
.sample-description li[b-acyxtqdmks] {
    margin-bottom: 0.5rem;
}

.description-video[b-acyxtqdmks] {
    margin: 1.5rem 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.description-video video[b-acyxtqdmks] {
    width: 100%;
    display: block;
}

.nutrition-table[b-acyxtqdmks] {
    width: 100%;
    border-collapse: collapse;
}

.nutrition-table tr[b-acyxtqdmks] {
    border-bottom: 1px solid #e9ecef;
}

.nutrition-table th[b-acyxtqdmks],
.nutrition-table td[b-acyxtqdmks] {
    padding: 0.75rem 1rem;
    text-align: left;
}

.nutrition-table th[b-acyxtqdmks] {
    width: 200px;
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.no-content[b-acyxtqdmks] {
    color: #adb5bd;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Rich content from attributes */
.attribute-rich-content[b-acyxtqdmks] {
    line-height: 1.8;
    color: #495057;
}

.attribute-rich-content h3[b-acyxtqdmks],
.attribute-rich-content h4[b-acyxtqdmks] {
    color: #212529;
    margin: 1.5rem 0 0.75rem 0;
    font-weight: 600;
}

.attribute-rich-content h3:first-child[b-acyxtqdmks],
.attribute-rich-content h4:first-child[b-acyxtqdmks] {
    margin-top: 0;
}

.attribute-rich-content p[b-acyxtqdmks] {
    margin: 0 0 1rem 0;
}

.attribute-rich-content ul[b-acyxtqdmks] {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.attribute-rich-content li[b-acyxtqdmks] {
    margin-bottom: 0.5rem;
}

.attribute-rich-content img[b-acyxtqdmks] {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Key-value attribute rows */
.attribute-row[b-acyxtqdmks] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
}

.attribute-row:last-child[b-acyxtqdmks] {
    border-bottom: none;
}

.attribute-name[b-acyxtqdmks] {
    font-weight: 600;
    color: #495057;
}

.attribute-value[b-acyxtqdmks] {
    color: #6c757d;
}

.nutrition-content[b-acyxtqdmks] {
    min-height: 100px;
}


/* Sidebar */
.details-sidebar[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sidebar-section[b-acyxtqdmks] {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sidebar-section h3[b-acyxtqdmks] {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

/* Coupons Section */
.coupons-section.sidebar-section[b-acyxtqdmks] {
    padding: 0.75rem;
}

.coupons-section h3[b-acyxtqdmks] {
    border: none;
    border-bottom: none;
    border-left: 3px solid #0145b2;
    padding: 0.25rem 0 0.25rem 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.coupons-section h3 i[b-acyxtqdmks] {
    color: #0145b2;
    font-size: 0.75rem;
}

.coupon-list[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.coupon-card[b-acyxtqdmks] {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.15s ease;
    position: relative;
    padding: 0;
    aspect-ratio: auto;
    box-shadow: none;
    transform: none;
}

.coupon-card:hover[b-acyxtqdmks] {
    border-color: #b8d4f8;
}

/* Left accent strip */
.coupon-accent[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    background: #0145b2;
    flex-shrink: 0;
    position: relative;
}

.coupon-accent i[b-acyxtqdmks] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.55rem;
}

/* Perforated edge circles */
.coupon-accent[b-acyxtqdmks]::before,
.coupon-accent[b-acyxtqdmks]::after {
    content: '';
    position: absolute;
    right: -4px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}

.coupon-accent[b-acyxtqdmks]::before {
    top: -4px;
}

.coupon-accent[b-acyxtqdmks]::after {
    bottom: -4px;
}

.coupon-body[b-acyxtqdmks] {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0.4rem 0.5rem 0.4rem 0.625rem;
    gap: 0.5rem;
    min-width: 0;
}

.coupon-info[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.coupon-label[b-acyxtqdmks] {
    font-size: 0.7rem;
    color: #0145b2;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coupon-condition[b-acyxtqdmks] {
    font-size: 0.6rem;
    color: #7c8a9a;
    line-height: 1.2;
}

.coupon-condition strong[b-acyxtqdmks] {
    font-weight: 600;
    color: #0145b2;
}

.coupon-exp[b-acyxtqdmks] {
    font-size: 0.55rem;
    color: #a0aec0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.coupon-exp i[b-acyxtqdmks] {
    font-size: 0.5rem;
}

.coupon-btn[b-acyxtqdmks] {
    padding: 0.25rem 0.625rem;
    background: #0145b2;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.coupon-btn:hover[b-acyxtqdmks] {
    background: #013a96;
}

.coupon-btn.collecting[b-acyxtqdmks] {
    opacity: 0.7;
    cursor: wait;
}

.coupon-btn.collecting .spinner-small[b-acyxtqdmks] {
    width: 10px;
    height: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-acyxtqdmks 0.8s linear infinite;
    display: inline-block;
}

/* Collected badge */
.coupon-collected-badge[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.coupon-collected-badge i[b-acyxtqdmks] {
    font-size: 0.9rem;
    color: #22c55e;
}

.coupon-card.collected[b-acyxtqdmks] {
    background: #f8fdf9;
    border-color: #d1fae5;
}

.coupon-card.collected .coupon-accent[b-acyxtqdmks] {
    background: #16a34a;
}

.coupon-card.collected .coupon-label[b-acyxtqdmks] {
    color: #166534;
}

.coupon-card.collected .coupon-condition[b-acyxtqdmks] {
    color: #166534;
}

/* Recommended Products Section */
.recommended-section h3[b-acyxtqdmks] {
    border: none;
    border-left: 4px solid #f97316;
    padding: 0.5rem 0 0.5rem 0.75rem;
    margin-bottom: 0.875rem;
    font-size: 0.95rem;
}

.recommended-list[b-acyxtqdmks] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.recommended-list .flash-product-card[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    overflow: hidden;
    background: #fff;
}

.recommended-list .flash-product-card:hover[b-acyxtqdmks] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #f97316;
}

.recommended-list .flash-product-image[b-acyxtqdmks] {
    aspect-ratio: 1;
    background: #fafafa;
    overflow: hidden;
}

.recommended-list .flash-product-image img[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.recommended-list .flash-product-card:hover .flash-product-image img[b-acyxtqdmks] {
    transform: scale(1.05);
}

.recommended-list .flash-product-info[b-acyxtqdmks] {
    padding: 0.5rem;
}

.recommended-list .flash-product-brand[b-acyxtqdmks] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #f97316;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.recommended-list .flash-product-name[b-acyxtqdmks] {
    font-size: 0.7rem;
    color: #1f2937;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.recommended-list .flash-product-desc[b-acyxtqdmks] {
    display: none;
    /* Hide for cleaner grid look */
}

.recommended-list .flash-product-price[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 4px;
}

.recommended-list .flash-price-symbol[b-acyxtqdmks],
.recommended-list .flash-price-min[b-acyxtqdmks],
.recommended-list .flash-price-max[b-acyxtqdmks] {
    color: #dc2626;
    font-weight: 700;
    font-size: 0.75rem;
}

.recommended-list .flash-price-dash[b-acyxtqdmks] {
    color: #dc2626;
}

.recommended-list .flash-discount-badge[b-acyxtqdmks] {
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 2px;
}

.recommended-list .flash-product-tags[b-acyxtqdmks] {
    display: none;
    /* Hide tags for compact view */
}

.recommended-list .flash-product-rating[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6rem;
    color: #6b7280;
}

.recommended-list .flash-product-rating i[b-acyxtqdmks] {
    color: #fbbf24;
    font-size: 0.55rem;
}

.recommended-list .flash-product-rating .sold-count[b-acyxtqdmks] {
    display: none;
    /* Hide sold count for compact view */
}

.recommended-list .flash-product-rating .rating-separator[b-acyxtqdmks] {
    display: none;
}

/* Legacy styles - keeping for backward compatibility */
.recommended-card[b-acyxtqdmks] {
    display: block;
    padding: 0.75rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
}

.recommended-card:hover[b-acyxtqdmks] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rec-brand[b-acyxtqdmks] {
    margin-bottom: 0.5rem;
}

.rec-brand img[b-acyxtqdmks] {
    height: 16px;
    width: auto;
}

.rec-brand .brand-text[b-acyxtqdmks] {
    font-size: 0.65rem;
    color: #0066cc;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rec-image[b-acyxtqdmks] {
    aspect-ratio: 1;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.rec-image img[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rec-info[b-acyxtqdmks] {
    margin-bottom: 0.5rem;
}

.rec-brand-name[b-acyxtqdmks] {
    font-size: 0.7rem;
    color: #0066cc;
    font-weight: 500;
}

.rec-name[b-acyxtqdmks] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #212529;
    margin: 0.25rem 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rec-desc[b-acyxtqdmks] {
    font-size: 0.7rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rec-price[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rec-current[b-acyxtqdmks] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0066cc;
}

.rec-discount[b-acyxtqdmks] {
    background: #ff4757;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
}

.rec-meta[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.rec-action[b-acyxtqdmks] {
    color: #0066cc;
    font-weight: 500;
}

.rec-rating[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: #6c757d;
}

.rec-rating i[b-acyxtqdmks] {
    color: #ffc107;
    font-size: 0.6rem;
}

.rec-sold[b-acyxtqdmks] {
    margin-left: 0.5rem;
}

/* Reviews Section */
.reviews-section[b-acyxtqdmks] {
    margin-top: 1.5rem;
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

@media (max-width: 992px) {
    .reviews-section[b-acyxtqdmks] {
        margin-top: 0.75rem;
        padding: 1rem;
        border-radius: 10px;
    }
}

.reviews-section h2[b-acyxtqdmks] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 1.5rem 0;
    padding: 1rem 0 1rem 1rem;
    border-left: 5px solid #ffd700;
    background: transparent;
}

.reviews-header[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 992px) {
    .reviews-header[b-acyxtqdmks] {
        gap: 1rem;
        margin-bottom: 1rem;
    }
}

.reviews-summary[b-acyxtqdmks] {
    flex-shrink: 0;
}

.summary-score[b-acyxtqdmks] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

@media (max-width: 992px) {
    .summary-score[b-acyxtqdmks] {
        gap: 0.25rem;
    }
}

.score-number[b-acyxtqdmks] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0066cc;
    line-height: 1;
}

@media (max-width: 992px) {
    .score-number[b-acyxtqdmks] {
        font-size: 1.75rem;
    }
}

.score-max[b-acyxtqdmks] {
    font-size: 0.875rem;
    color: #6c757d;
}

.summary-stars[b-acyxtqdmks] {
    display: flex;
    gap: 2px;
    margin-top: 0.25rem;
}

.summary-stars i[b-acyxtqdmks] {
    font-size: 1rem;
    color: #ffc107;
}

@media (max-width: 992px) {
    .summary-stars i[b-acyxtqdmks] {
        font-size: 0.8rem;
    }
}

.review-filters[b-acyxtqdmks] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 992px) {
    .review-filters[b-acyxtqdmks] {
        gap: 6px;
    }
}

.filter-btn[b-acyxtqdmks] {
    padding: 0.5rem 1.25rem;
    border: 1px solid #d0d5dd;
    border-radius: 20px;
    background: white;
    cursor: pointer;
    font-size: 0.875rem;
    color: #495057;
    transition: all 0.2s;
}

@media (max-width: 992px) {
    .filter-btn[b-acyxtqdmks] {
        padding: 6px 14px;
        font-size: 0.75rem;
        border-radius: 16px;
    }
}

.filter-btn:hover[b-acyxtqdmks] {
    background: var(--primary-blue-light);
    color: var(--primary-blue);
}

.filter-btn.active[b-acyxtqdmks] {
    background: var(--primary-blue-light);
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.review-list[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-item[b-acyxtqdmks] {
    padding: 1.25rem 0;
    border-bottom: 1px solid #e9ecef;
}

.review-item:last-child[b-acyxtqdmks] {
    border-bottom: none;
}

.review-header[b-acyxtqdmks] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.reviewer-avatar[b-acyxtqdmks] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #e9ecef;
    flex-shrink: 0;
}

.reviewer-avatar img[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviewer-info[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reviewer-name[b-acyxtqdmks] {
    font-weight: 600;
    color: #212529;
    font-size: 0.9rem;
}

.review-stars[b-acyxtqdmks] {
    display: flex;
    gap: 2px;
}

.review-stars i[b-acyxtqdmks] {
    font-size: 0.75rem;
    color: #dee2e6;
}

.review-stars i.filled[b-acyxtqdmks] {
    color: #ffc107;
}

.review-meta[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.review-date[b-acyxtqdmks] {
    font-size: 0.8rem;
    color: #6c757d;
}

.review-variant[b-acyxtqdmks] {
    font-size: 0.8rem;
    color: #6c757d;
}

.review-comment[b-acyxtqdmks] {
    color: #495057;
    line-height: 1.6;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}

.review-images[b-acyxtqdmks] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.review-images img[b-acyxtqdmks] {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.review-images img:hover[b-acyxtqdmks] {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.verified-badge[b-acyxtqdmks] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #28a745;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 1200px) {
    .product-details-section[b-acyxtqdmks] {
        grid-template-columns: 1fr;
    }

    .details-sidebar[b-acyxtqdmks] {
        flex-direction: row;
    }

    .sidebar-section[b-acyxtqdmks] {
        flex: 1;
    }
}

@media (max-width: 992px) {
    .product-main[b-acyxtqdmks] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        overflow: hidden;
    }

    .product-gallery[b-acyxtqdmks] {
        position: static;
        max-width: 100%;
        width: 100%;
        margin: 0;
        overflow: hidden;
    }

    .product-gallery-main[b-acyxtqdmks] {
        width: 100%;
        max-width: 100%;
    }

    .details-sidebar[b-acyxtqdmks] {
        flex-direction: column;
    }

    /* When sidebar stacks, expand recommended to 4 columns */
    .recommended-list[b-acyxtqdmks] {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .product-detail-page[b-acyxtqdmks] {
        padding-bottom: 100px;
        background: #fff;
    }

    .product-main[b-acyxtqdmks] {
        padding: 0;
        margin-top: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        gap: 0;
    }

    .product-info[b-acyxtqdmks] {
        padding: 0.875rem 1rem;
    }

    .product-title[b-acyxtqdmks] {
        font-size: 1.15rem;
        line-height: 1.4;
    }

    /* Breadcrumb mobile — hide on mobile */
    .breadcrumb-nav[b-acyxtqdmks] {
        display: none;
    }

    .action-buttons[b-acyxtqdmks] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .btn-compare[b-acyxtqdmks] {
        order: 3;
        width: 100%;
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    .btn-add-cart[b-acyxtqdmks] {
        flex: 1;
        min-width: 0;
        padding: 14px 20px;
        font-size: 0.95rem;
        border-radius: 10px;
    }

    .btn-favorite[b-acyxtqdmks] {
        flex: 0 0 auto;
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 10px;
    }

    .btn-favorite span[b-acyxtqdmks] {
        display: none;
    }

    .btn-favorite i[b-acyxtqdmks] {
        font-size: 1.25rem;
    }

    .reviews-header[b-acyxtqdmks] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Bundle responsive - tablet */
    .bundle-row[b-acyxtqdmks] {
        gap: 1rem;
        padding: 0.875rem;
    }

    .bundle-item-image[b-acyxtqdmks] {
        width: 70px;
        height: 70px;
    }

    .bundle-item[b-acyxtqdmks] {
        width: 85px;
    }

    /* Recommended grid - 3 columns on tablet */
    .recommended-list[b-acyxtqdmks] {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Price section mobile */
    .price-section[b-acyxtqdmks] {
        padding: 12px 0;
    }

    .current-price[b-acyxtqdmks] {
        font-size: 1.5rem;
    }

    .original-price[b-acyxtqdmks] {
        font-size: 1rem;
    }

    /* Flash Sale Strip mobile */
    .flash-sale-strip[b-acyxtqdmks] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 10px;
    }

    .flash-strip-left[b-acyxtqdmks] {
        order: 1;
    }

    .flash-strip-center[b-acyxtqdmks] {
        order: 2;
        margin-left: auto;
    }

    .flash-strip-right[b-acyxtqdmks] {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        padding-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Price section mobile */
    .price-section[b-acyxtqdmks] {
        padding: 0.5rem 0.875rem;
        margin: 0.5rem 0;
    }

    .sale-price[b-acyxtqdmks] {
        font-size: 1.375rem;
    }

    .sale-price.flash[b-acyxtqdmks] {
        font-size: 1.5rem !important;
    }

    .discount-tag[b-acyxtqdmks] {
        padding: 2px 6px !important;
        font-size: 0.7rem;
    }

    /* Variant chips mobile */
    .variant-chip[b-acyxtqdmks] {
        padding: 10px 16px;
        font-size: 0.9rem;
        min-height: 44px;
    }

    /* Product gallery mobile — full-width hero + overlay thumbnails */
    .product-gallery[b-acyxtqdmks] {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .product-gallery-main[b-acyxtqdmks] {
        width: 100%;
        border-radius: 0;
        border: none;
        aspect-ratio: 1;
        background: #fff;
        margin-bottom: 0;
    }

    .gallery-nav-btn[b-acyxtqdmks] {
        display: none;
    }

    .product-gallery-thumbs[b-acyxtqdmks] {
        position: absolute;
        bottom: 12px;
        left: 0;
        right: 0;
        justify-content: center;
        padding: 0 12px;
        z-index: 5;
        gap: 6px;
        height: auto;
    }

    .gallery-thumb[b-acyxtqdmks] {
        width: 48px;
        height: 48px;
        border-radius: 6px;
        border: 2px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        opacity: 0.85;
        background: #fff;
    }

    .gallery-thumb.active[b-acyxtqdmks] {
        border-color: #fff;
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    }

    .gallery-thumb:hover[b-acyxtqdmks] {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .container[b-acyxtqdmks] {
        padding: 0;
    }

    /* Flash Sale Strip small mobile */
    .flash-sale-strip[b-acyxtqdmks] {
        padding: 6px 8px;
        gap: 6px;
        border-radius: 6px;
    }

    .flash-badge[b-acyxtqdmks] {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }

    .flash-title[b-acyxtqdmks] {
        font-size: 0.7rem;
    }

    .timer-block[b-acyxtqdmks] {
        padding: 2px 4px;
        font-size: 0.7rem;
        min-width: 20px;
    }

    .stock-bar[b-acyxtqdmks] {
        width: 40px;
    }

    .stock-text[b-acyxtqdmks] {
        font-size: 0.65rem;
    }

    .flash-limit-tag[b-acyxtqdmks] {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    /* Price section small mobile */
    .price-section[b-acyxtqdmks] {
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
    }

    .sale-price[b-acyxtqdmks] {
        font-size: 1.25rem;
    }

    .sale-price.flash[b-acyxtqdmks] {
        font-size: 1.375rem !important;
    }

    .original-price[b-acyxtqdmks] {
        font-size: 0.8rem;
    }

    .discount-tag[b-acyxtqdmks] {
        padding: 2px 6px !important;
        font-size: 0.65rem;
        border-radius: 3px;
    }

    /* Bundle responsive - mobile */
    .bundle-row[b-acyxtqdmks] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.875rem;
    }

    .bundle-items[b-acyxtqdmks] {
        width: 100%;
        justify-content: center;
    }

    .bundle-item[b-acyxtqdmks] {
        width: 90px;
    }

    .bundle-item-image[b-acyxtqdmks] {
        width: 70px;
        height: 70px;
    }

    .bundle-savings[b-acyxtqdmks] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-top: 1px solid #f3e8d0;
        padding-top: 0.75rem;
    }

    .bundle-deals[b-acyxtqdmks] {
        padding: 0.875rem;
    }

    /* Recommended products - 3 columns compact */
    .recommended-list[b-acyxtqdmks] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.375rem;
    }

    .recommended-list .flash-product-info[b-acyxtqdmks] {
        padding: 0.375rem;
    }

    .recommended-list .flash-product-brand[b-acyxtqdmks] {
        font-size: 0.55rem;
    }

    .recommended-list .flash-product-name[b-acyxtqdmks] {
        font-size: 0.65rem;
    }

    .recommended-list .flash-price-symbol[b-acyxtqdmks],
    .recommended-list .flash-price-min[b-acyxtqdmks],
    .recommended-list .flash-price-max[b-acyxtqdmks] {
        font-size: 0.7rem;
    }

    .variant-section[b-acyxtqdmks] {
        gap: 0.5rem;
        padding: 0.625rem 0;
    }

    .variant-header[b-acyxtqdmks] {
        gap: 0.375rem;
    }

    .variant-label[b-acyxtqdmks] {
        font-size: 0.8125rem;
    }

    .variant-selected-value[b-acyxtqdmks] {
        font-size: 0.8125rem;
    }

    .variant-options[b-acyxtqdmks] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        /* Collapsible: limit to ~2 rows, expand on toggle */
        max-height: 82px;
        overflow: hidden;
        transition: max-height 0.3s ease;
        position: relative;
    }

    .variant-options.expanded[b-acyxtqdmks] {
        max-height: 2000px;
    }

    /* Fade-out gradient at bottom when collapsed */
    .variant-options-wrapper[b-acyxtqdmks] {
        position: relative;
    }

    .variant-options:not(.expanded)+.variant-show-more[b-acyxtqdmks]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 24px;
        background: linear-gradient(to bottom, transparent, #fff);
        pointer-events: none;
        margin-bottom: 1px;
    }

    .variant-show-more[b-acyxtqdmks] {
        display: flex;
        position: relative;
    }

    .variant-chip[b-acyxtqdmks] {
        flex: 0 0 auto;
        padding: 5px 10px;
        font-size: 0.75rem;
        border-radius: 3px;
    }

    .chip-text[b-acyxtqdmks] {
        max-width: 120px;
    }

    .chip-check[b-acyxtqdmks] {
        border-width: 0 0 15px 15px;
    }

    .chip-check i[b-acyxtqdmks] {
        bottom: -14px;
        font-size: 7px;
    }

    .action-buttons[b-acyxtqdmks] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px;
    }

    .btn-add-cart[b-acyxtqdmks] {
        flex: 1;
        padding: 16px 20px;
        font-size: 1rem;
        order: 1;
        border-radius: 12px;
    }

    .btn-favorite[b-acyxtqdmks] {
        display: flex !important;
        position: static;
        flex: 0 0 auto;
        width: 54px;
        height: 54px;
        z-index: auto;
        order: 2;
        border-radius: 12px;
        padding: 0;
        justify-content: center;
        align-items: center;
    }

    .btn-favorite span[b-acyxtqdmks] {
        display: none;
    }

    .btn-compare[b-acyxtqdmks] {
        display: none;
    }

    .review-filters[b-acyxtqdmks] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .review-filter-btn[b-acyxtqdmks] {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* Price mobile small */
    .current-price[b-acyxtqdmks] {
        font-size: 1.35rem;
    }

    .discount-tag[b-acyxtqdmks] {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    /* Quantity selector */
    .quantity-section[b-acyxtqdmks] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .quantity-controls[b-acyxtqdmks] {
        width: 100%;
        justify-content: space-between;
    }
}

/* Product Specs Section (when no description) */
.product-specs[b-acyxtqdmks] {
    padding: 0.5rem 0;
}

.product-specs .short-desc[b-acyxtqdmks] {
    font-size: 1rem;
    color: #495057;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.specs-grid[b-acyxtqdmks] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.spec-item[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.spec-item:hover[b-acyxtqdmks] {
    background: #e9ecef;
}

.spec-label[b-acyxtqdmks] {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-value[b-acyxtqdmks] {
    font-size: 0.95rem;
    color: #212529;
    font-weight: 600;
}

.product-tags-section[b-acyxtqdmks] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.product-tags-section .spec-label[b-acyxtqdmks] {
    margin-bottom: 0.75rem;
    display: block;
}

.tags-list[b-acyxtqdmks] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-chip[b-acyxtqdmks] {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, #e8f4ff 0%, #f0f7ff 100%);
    color: #0066cc;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #cce4ff;
    transition: all 0.2s ease;
}

.tag-chip:hover[b-acyxtqdmks] {
    background: linear-gradient(135deg, #d0e8ff 0%, #e8f4ff 100%);
    transform: translateY(-1px);
}

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

/* Attributes Content from Database */
.attributes-content[b-acyxtqdmks] {
    padding: 0.5rem 0;
}

.attribute-rich-content[b-acyxtqdmks] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.attribute-rich-content:last-child[b-acyxtqdmks] {
    border-bottom: none;
    margin-bottom: 0;
}

.attribute-section-title[b-acyxtqdmks] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #0066cc;
    display: inline-block;
}

.attribute-rich-content h3[b-acyxtqdmks],
.attribute-rich-content h4[b-acyxtqdmks] {
    color: #212529;
    margin: 1.5rem 0 0.75rem 0;
    font-weight: 600;
}

.attribute-rich-content h3:first-child[b-acyxtqdmks],
.attribute-rich-content h4:first-child[b-acyxtqdmks] {
    margin-top: 0;
}

.attribute-rich-content p[b-acyxtqdmks] {
    margin: 0 0 1rem 0;
    line-height: 1.7;
    color: #495057;
}

.attribute-rich-content ul[b-acyxtqdmks],
.attribute-rich-content ol[b-acyxtqdmks] {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.attribute-rich-content li[b-acyxtqdmks] {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.attribute-rich-content img[b-acyxtqdmks] {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

.attribute-row[b-acyxtqdmks] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.attribute-row:last-child[b-acyxtqdmks] {
    margin-bottom: 0;
}

.attribute-name[b-acyxtqdmks] {
    font-weight: 500;
    color: #495057;
}

.attribute-value[b-acyxtqdmks] {
    font-weight: 600;
    color: #212529;
}

/* Attribute Display Types */
.attribute-text[b-acyxtqdmks] {
    margin-bottom: 1.5rem;
    line-height: 1.7;
    color: #495057;
}

.attribute-text p[b-acyxtqdmks] {
    margin: 0 0 1rem 0;
}

.attribute-text h3[b-acyxtqdmks],
.attribute-text h4[b-acyxtqdmks] {
    color: #212529;
    margin: 1.5rem 0 0.75rem 0;
    font-weight: 600;
}

.attribute-text h3:first-child[b-acyxtqdmks],
.attribute-text h4:first-child[b-acyxtqdmks] {
    margin-top: 0;
}

.attribute-text ul[b-acyxtqdmks],
.attribute-text ol[b-acyxtqdmks] {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.attribute-text li[b-acyxtqdmks] {
    margin-bottom: 0.5rem;
}

.attribute-image[b-acyxtqdmks] {
    margin: 1.5rem 0;
    text-align: center;
}

.attribute-image img[b-acyxtqdmks] {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.attribute-video[b-acyxtqdmks] {
    margin: 1.5rem 0;
}

.attribute-video .video-wrapper[b-acyxtqdmks] {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

.attribute-video .video-wrapper iframe[b-acyxtqdmks] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.attribute-video video[b-acyxtqdmks] {
    width: 100%;
    border-radius: 12px;
    background: #000;
}

/* No Reviews Empty State */
.no-reviews[b-acyxtqdmks] {
    text-align: center;
    padding: 48px 24px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
}

@media (max-width: 992px) {
    .no-reviews[b-acyxtqdmks] {
        padding: 28px 16px;
        border-radius: 10px;
    }
}

.no-reviews i[b-acyxtqdmks] {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 16px;
}

@media (max-width: 992px) {
    .no-reviews i[b-acyxtqdmks] {
        font-size: 2rem;
        margin-bottom: 10px;
    }
}

.no-reviews p[b-acyxtqdmks] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 8px 0;
}

@media (max-width: 992px) {
    .no-reviews p[b-acyxtqdmks] {
        font-size: 0.9rem;
        margin: 0 0 4px 0;
    }
}

.no-reviews span[b-acyxtqdmks] {
    font-size: 0.875rem;
    color: #94a3b8;
}

@media (max-width: 992px) {
    .no-reviews span[b-acyxtqdmks] {
        font-size: 0.775rem;
    }
}

/* ========================================
   Mobile Sticky Bottom Action Bar
   ======================================== */
.mobile-sticky-actions[b-acyxtqdmks] {
    display: none;
    /* Hidden on desktop */
}

@media (max-width: 992px) {
    .mobile-sticky-actions[b-acyxtqdmks] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 0;
        box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.08);
        z-index: 1000;
        align-items: stretch;
        border-top: 1px solid #f1f5f9;
        height: 56px;
    }

    /* Add padding to main content to avoid sticky bar overlap */
    .product-detail-page[b-acyxtqdmks] {
        padding-bottom: 64px;
    }

    /* Left icon group */
    .sticky-icon-group[b-acyxtqdmks] {
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
    }

    .sticky-icon-btn[b-acyxtqdmks] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 64px;
        background: transparent;
        border: none;
        border-right: 1px solid #f1f5f9;
        color: #64748b;
        cursor: pointer;
        transition: all 0.15s ease;
        text-decoration: none;
        padding: 6px 0;
    }

    .sticky-icon-btn i[b-acyxtqdmks] {
        font-size: 1.125rem;
        line-height: 1;
    }

    .sticky-icon-btn span[b-acyxtqdmks] {
        font-size: 0.6rem;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 56px;
    }

    .sticky-icon-btn:active[b-acyxtqdmks] {
        background: #f8fafc;
    }

    .sticky-icon-btn.active[b-acyxtqdmks] {
        color: #ef4444;
    }

    .sticky-icon-btn.active i[b-acyxtqdmks] {
        animation: heart-pop-b-acyxtqdmks 0.3s ease;
    }

    @keyframes heart-pop-b-acyxtqdmks {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.2);
        }

        100% {
            transform: scale(1);
        }
    }

    /* Main cart button */
    .sticky-btn-cart[b-acyxtqdmks] {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 8px 12px 8px 8px;
        background: #0145b2;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
        letter-spacing: 0.01em;
    }

    .sticky-btn-cart:active[b-acyxtqdmks] {
        background: #013a96;
        transform: scale(0.98);
    }

    .sticky-btn-cart:disabled[b-acyxtqdmks] {
        background: #94a3b8;
        cursor: not-allowed;
    }

    .sticky-btn-cart.disabled-stock[b-acyxtqdmks] {
        background: #cbd5e1;
        color: #f8fafc;
    }

    .sticky-btn-cart i[b-acyxtqdmks] {
        font-size: 0.95rem;
    }

    .sticky-btn-cart .spinner-small[b-acyxtqdmks] {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin-b-acyxtqdmks 0.8s linear infinite;
    }

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

    /* Hide the original action buttons section on mobile */
    .action-buttons[b-acyxtqdmks] {
        display: none !important;
    }
}

/* Hide bottom nav on mobile/tablet */
@media (max-width: 768px) {
    .promo-banners[b-acyxtqdmks] {
        padding: 0px;
    }
}

@media (max-width: 480px) {
    .mobile-sticky-actions[b-acyxtqdmks] {
        height: 52px;
    }

    .sticky-icon-btn[b-acyxtqdmks] {
        width: 56px;
    }

    .sticky-icon-btn i[b-acyxtqdmks] {
        font-size: 1rem;
    }

    .sticky-icon-btn span[b-acyxtqdmks] {
        font-size: 0.55rem;
    }

    .sticky-btn-cart[b-acyxtqdmks] {
        font-size: 0.85rem;
        margin: 6px 10px 6px 6px;
        border-radius: 7px;
    }
}

/* Promotion Banners — Compact Pill Tags */
.promo-banners[b-acyxtqdmks] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.promo-banner-tag[b-acyxtqdmks] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    font-size: 0.775rem;
    line-height: 1.3;
    transition: all 0.2s ease;
    cursor: default;
}

.promo-banner-tag:hover[b-acyxtqdmks] {
    background: #ffedd5;
    border-color: #fdba74;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.1);
}

.promo-banner-icon[b-acyxtqdmks] {
    color: #ea580c;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.promo-banner-text[b-acyxtqdmks] {
    font-weight: 600;
    color: #9a3412;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.promo-banner-condition[b-acyxtqdmks] {
    color: #c2410c;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0.75;
}

.promo-banner-condition[b-acyxtqdmks]::before {
    content: "·";
    margin-right: 3px;
    font-weight: 700;
}

@media (max-width: 480px) {
    .promo-banner-text[b-acyxtqdmks] {
        max-width: 180px;
        font-size: 0.725rem;
    }

    .promo-banner-condition[b-acyxtqdmks] {
        font-size: 0.65rem;
    }

    .promo-banner-tag[b-acyxtqdmks] {
        padding: 4px 8px;
        gap: 4px;
        font-size: 0.725rem;
    }
}

/* ========================================
   Collapsed Options Preview (Shopee-style)
   ======================================== */
.options-preview[b-acyxtqdmks] {
    cursor: pointer;
    border-top: 1px solid #f0f0f0;
    padding: 0.25rem 0;
    transition: background 0.15s ease;
    overflow: hidden;
    max-width: 100%;
}

.options-preview:hover[b-acyxtqdmks] {
    background: #fafbfc;
}

.preview-row[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f5f5f5;
    min-width: 0;
    overflow: hidden;
}

.preview-row:last-child[b-acyxtqdmks] {
    border-bottom: none;
}

.preview-row .variant-label[b-acyxtqdmks] {
    flex-shrink: 0;
    min-width: 60px;
    font-size: 0.8125rem;
    color: #757575;
    font-weight: 500;
}

.preview-chips[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}

.preview-chip[b-acyxtqdmks] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    font-size: 0.75rem;
    color: #555;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.3;
}

.preview-chip.selected[b-acyxtqdmks] {
    background: #eaf3ff;
    border-color: #0145b2;
    color: #0145b2;
    font-weight: 600;
}

.preview-chip.more[b-acyxtqdmks] {
    background: #fff;
    border: 1px dashed #ccc;
    color: #0145b2;
    font-weight: 600;
    min-width: 36px;
    justify-content: center;
}

.preview-arrow[b-acyxtqdmks] {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: #bbb;
    transition: color 0.15s ease;
}

.options-preview:hover .preview-arrow[b-acyxtqdmks] {
    color: #0145b2;
}

/* ========================================
   Bottom Sheet Overlay (Shopee-style)
   ======================================== */
.sheet-backdrop[b-acyxtqdmks] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    animation: sheetFadeIn-b-acyxtqdmks 0.3s ease forwards;
}

.sheet-backdrop.open[b-acyxtqdmks] {
    opacity: 1;
}

@keyframes sheetFadeIn-b-acyxtqdmks {
    from { opacity: 0; }
    to { opacity: 1; }
}

.options-sheet[b-acyxtqdmks] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    transform: translateY(100%);
    animation: sheetSlideUp-b-acyxtqdmks 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.06);
}

/* Drag handle indicator */
.sheet-handle[b-acyxtqdmks] {
    display: flex;
    justify-content: center;
    padding: 10px 0 2px;
    flex-shrink: 0;
}

.sheet-handle[b-acyxtqdmks]::after {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
}

.options-sheet.open[b-acyxtqdmks] {
    transform: translateY(0);
}

@keyframes sheetSlideUp-b-acyxtqdmks {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Sheet Header */
.sheet-header[b-acyxtqdmks] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 20px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    position: relative;
}

.sheet-product-thumb[b-acyxtqdmks] {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    margin-top: -28px;
}

.sheet-product-thumb img[b-acyxtqdmks] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.sheet-product-info[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.sheet-price[b-acyxtqdmks] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #dc2626;
    line-height: 1.2;
}

.sheet-price-original[b-acyxtqdmks] {
    font-size: 0.8rem;
    color: #9ca3af;
    text-decoration: line-through;
    margin-left: 6px;
}

.sheet-variant-name[b-acyxtqdmks] {
    font-size: 0.8rem;
    color: #374151;
    margin-top: 4px;
    font-weight: 500;
}

.sheet-stock[b-acyxtqdmks] {
    font-size: 0.775rem;
    color: #6c757d;
    margin-top: 2px;
}

.sheet-stock-hint[b-acyxtqdmks] {
    font-size: 0.775rem;
    color: #0145b2;
    margin-top: 2px;
    font-weight: 500;
}

.sheet-close[b-acyxtqdmks] {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sheet-close:hover[b-acyxtqdmks] {
    background: #e5e7eb;
    color: #374151;
    transform: rotate(90deg);
}

/* Sheet Body - scrollable area */
.sheet-body[b-acyxtqdmks] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 16px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.sheet-option-group[b-acyxtqdmks] {
    padding: 14px 0;
    border-bottom: 1px solid #f5f5f5;
}

.sheet-option-group:last-child[b-acyxtqdmks] {
    border-bottom: none;
}

.sheet-option-group .variant-header[b-acyxtqdmks] {
    margin-bottom: 10px;
}

.sheet-option-group .variant-options[b-acyxtqdmks] {
    max-height: none;
    overflow: visible;
}

/* Sheet Footer - fixed at bottom */
.sheet-footer[b-acyxtqdmks] {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
    /* Safe area for notch devices */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.sheet-actions[b-acyxtqdmks] {
    display: flex;
    gap: 10px;
}

.sheet-btn[b-acyxtqdmks] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border: none;
    border-radius: 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.sheet-btn:active[b-acyxtqdmks] {
    transform: scale(0.97);
}

.sheet-btn-cart[b-acyxtqdmks] {
    background: #fff;
    color: #0145b2;
    border: 2px solid #0145b2;
}

.sheet-btn-cart:hover[b-acyxtqdmks] {
    background: #eaf3ff;
}

.sheet-btn-cart:disabled[b-acyxtqdmks] {
    border-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

.sheet-btn-cart:disabled:active[b-acyxtqdmks] {
    transform: none;
}

.sheet-btn-buy[b-acyxtqdmks] {
    background: linear-gradient(135deg, #0145b2 0%, #013088 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(1, 69, 178, 0.3);
}

.sheet-btn-buy:hover[b-acyxtqdmks] {
    background: linear-gradient(135deg, #013a96 0%, #012670 100%);
    box-shadow: 0 4px 12px rgba(1, 69, 178, 0.35);
}

.sheet-btn-buy:disabled[b-acyxtqdmks] {
    background: #d1d5db;
    box-shadow: none;
    cursor: not-allowed;
}

.sheet-btn-buy:disabled:active[b-acyxtqdmks] {
    transform: none;
}

.sheet-btn-cart.disabled-stock[b-acyxtqdmks],
.sheet-btn-buy.disabled-stock[b-acyxtqdmks] {
    opacity: 0.6;
}

.sheet-btn .spinner-small[b-acyxtqdmks] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-acyxtqdmks 0.8s linear infinite;
}

/* ========================================
   Updated Mobile Sticky Bar (Two Buttons)
   ======================================== */
@media (max-width: 992px) {
    .sticky-btn-addcart[b-acyxtqdmks] {
        background: #fff;
        color: #0145b2;
        border-right: 1px solid #e5e7eb;
        flex: 0 0 auto;
        width: auto;
        padding: 0 16px;
        margin: 0;
        border-radius: 0;
        font-size: 0.8rem;
        gap: 6px;
    }

    .sticky-btn-addcart:active[b-acyxtqdmks] {
        background: #eaf3ff;
    }

    .sticky-btn-buynow[b-acyxtqdmks] {
        flex: 1;
        background: #0145b2;
        color: #fff;
        border: none;
        margin: 8px 12px 8px 8px;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
    }

    .sticky-btn-buynow:active[b-acyxtqdmks] {
        background: #013a96;
        transform: scale(0.98);
    }
}

/* ========================================
   Bottom Sheet Responsive
   ======================================== */
@media (min-width: 993px) {
    /* Desktop: center the sheet like a modal */
    .options-sheet[b-acyxtqdmks] {
        max-width: 560px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        border-radius: 16px 16px 0 0;
    }

    .options-sheet.open[b-acyxtqdmks] {
        transform: translateX(-50%) translateY(0);
    }

    @keyframes sheetSlideUp-b-acyxtqdmks {
        from { transform: translateX(-50%) translateY(100%); }
        to { transform: translateX(-50%) translateY(0); }
    }
}

@media (max-width: 480px) {
    .options-sheet[b-acyxtqdmks] {
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
    }

    .sheet-header[b-acyxtqdmks] {
        padding: 8px 16px 12px;
        gap: 10px;
    }

    .sheet-product-thumb[b-acyxtqdmks] {
        width: 84px;
        height: 84px;
        border-radius: 10px;
        margin-top: -22px;
    }

    .sheet-price[b-acyxtqdmks] {
        font-size: 1.375rem;
    }

    .sheet-body[b-acyxtqdmks] {
        padding: 10px 16px 12px;
    }

    .sheet-footer[b-acyxtqdmks] {
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .sheet-btn[b-acyxtqdmks] {
        padding: 12px 14px;
        font-size: 0.875rem;
        border-radius: 20px;
    }

    .sheet-close[b-acyxtqdmks] {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
        top: 10px;
        right: 12px;
    }

    .preview-row .variant-label[b-acyxtqdmks] {
        min-width: 50px;
        font-size: 0.75rem;
    }

    .preview-chip[b-acyxtqdmks] {
        padding: 3px 10px;
        font-size: 0.7rem;
    }
}

/* ========================================
   Mobile Inline Coupons Section
   ======================================== */
.mobile-coupons-inline[b-acyxtqdmks] {
    display: none;
}

@media (max-width: 768px) {
    .mobile-coupons-inline[b-acyxtqdmks] {
        display: block;
        border: 1px solid #e8ecf1;
        border-radius: 8px;
        overflow: hidden;
        margin: 0.5rem 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-coupons-inline:active[b-acyxtqdmks] {
        background: #f5f7fa;
    }

    .mobile-coupons-header[b-acyxtqdmks] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 0.75rem;
        background: #fbfcfd;
    }

    .mobile-coupons-title[b-acyxtqdmks] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: #0145b2;
    }

    .mobile-coupons-title i[b-acyxtqdmks] {
        font-size: 0.75rem;
    }

    .mobile-coupons-preview[b-acyxtqdmks] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .coupon-preview-more[b-acyxtqdmks] {
        font-size: 0.65rem;
        font-weight: 600;
        color: #0145b2;
        background: #eaf3ff;
        padding: 1px 6px;
        border-radius: 10px;
        min-width: 18px;
        text-align: center;
    }

    .mobile-coupons-arrow[b-acyxtqdmks] {
        font-size: 0.6rem;
        color: #9ca3af;
    }

    .mobile-coupons-list[b-acyxtqdmks] {
        padding: 0 0.625rem 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-coupon-row[b-acyxtqdmks] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 6px 8px;
        background: #f9fafb;
        border-radius: 6px;
        transition: background 0.15s ease;
    }

    .mobile-coupon-row:active[b-acyxtqdmks] {
        background: #f0f4f8;
    }

    .mobile-coupon-row.collected[b-acyxtqdmks] {
        opacity: 0.65;
    }

    .mobile-coupon-info[b-acyxtqdmks] {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1;
        min-width: 0;
        cursor: pointer;
    }

    .mobile-coupon-icon[b-acyxtqdmks] {
        font-size: 0.6rem;
        color: #0145b2;
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        background: #eaf3ff;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-coupon-name[b-acyxtqdmks] {
        font-size: 0.725rem;
        font-weight: 500;
        color: #374151;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-coupon-btn[b-acyxtqdmks] {
        flex-shrink: 0;
        padding: 4px 14px;
        background: #dc2626;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-coupon-btn:active[b-acyxtqdmks] {
        transform: scale(0.95);
        background: #b91c1c;
    }

    .mobile-coupon-btn:disabled[b-acyxtqdmks] {
        opacity: 0.6;
    }

    .mobile-coupon-btn .spinner-small[b-acyxtqdmks] {
        width: 12px;
        height: 12px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin-b-acyxtqdmks 0.8s linear infinite;
    }

    .mobile-coupon-collected[b-acyxtqdmks] {
        color: #16a34a;
        font-size: 0.8rem;
        flex-shrink: 0;
        padding-right: 4px;
    }

    /* Hide sidebar coupons on mobile */
    .coupons-section.sidebar-section[b-acyxtqdmks] {
        display: none;
    }
}

/* ========================================
   Promo Banners Wrapper — Tap to open sheet
   ======================================== */
.promo-banners-wrapper[b-acyxtqdmks] {
    margin-top: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.promo-banner-more[b-acyxtqdmks] {
    display: none;
}

@media (max-width: 768px) {
    .promo-banner-more[b-acyxtqdmks] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 10px;
        background: #fff;
        border: 1px dashed #d0d5dd;
        border-radius: 6px;
        font-size: 0.725rem;
        font-weight: 600;
        color: #0145b2;
        cursor: pointer;
    }

    .promo-banner-more i[b-acyxtqdmks] {
        font-size: 0.55rem;
    }

    /* Details sections — remove card styling on mobile */
    .product-details-section[b-acyxtqdmks] {
        margin-top: 0.5rem;
    }

    .details-main[b-acyxtqdmks] {
        border-radius: 0;
        box-shadow: none;
        padding: 1rem;
    }

    .reviews-section[b-acyxtqdmks] {
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 0;
    }

    .bundle-deals[b-acyxtqdmks] {
        border-radius: 0;
        box-shadow: none;
    }

    .sidebar-section[b-acyxtqdmks] {
        border-radius: 0;
        box-shadow: none;
    }
}

/* ========================================
   Promotions & Coupons Bottom Sheet
   ======================================== */
.promo-coupon-sheet[b-acyxtqdmks] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    transform: translateY(100%);
    animation: sheetSlideUp-b-acyxtqdmks 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.promo-coupon-sheet.open[b-acyxtqdmks] {
    transform: translateY(0);
}

/* Header */
.pc-sheet-header[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    position: relative;
}

.pc-sheet-title[b-acyxtqdmks] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.pc-sheet-header .sheet-close[b-acyxtqdmks] {
    position: absolute;
    top: 12px;
    right: 16px;
}

/* Body — scrollable */
.pc-sheet-body[b-acyxtqdmks] {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 16px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Section */
.pc-section[b-acyxtqdmks] {
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.pc-section:last-child[b-acyxtqdmks] {
    border-bottom: none;
}

.pc-section-label[b-acyxtqdmks] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

/* Promotion Items */
.pc-promo-list[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-promo-item[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.pc-promo-item:active[b-acyxtqdmks] {
    background: #ffedd5;
}

.pc-promo-icon[b-acyxtqdmks] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pc-promo-icon i[b-acyxtqdmks] {
    color: #fff;
    font-size: 0.7rem;
}

.pc-promo-info[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pc-promo-name[b-acyxtqdmks] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #9a3412;
    line-height: 1.4;
}

.pc-promo-condition[b-acyxtqdmks] {
    font-size: 0.7rem;
    color: #c2410c;
    font-weight: 500;
}

/* Coupon Items */
.pc-coupon-list[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-coupon-item[b-acyxtqdmks] {
    display: flex;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: all 0.15s ease;
}

.pc-coupon-item.collected[b-acyxtqdmks] {
    opacity: 0.7;
}

.pc-coupon-accent[b-acyxtqdmks] {
    width: 44px;
    background: linear-gradient(135deg, #0145b2 0%, #013088 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pc-coupon-accent i[b-acyxtqdmks] {
    color: #fff;
    font-size: 0.85rem;
}

.pc-coupon-body[b-acyxtqdmks] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 10px;
    min-width: 0;
}

.pc-coupon-info[b-acyxtqdmks] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pc-coupon-name[b-acyxtqdmks] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.pc-coupon-condition[b-acyxtqdmks] {
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 400;
}

.pc-coupon-condition strong[b-acyxtqdmks] {
    color: #0145b2;
    font-weight: 600;
}

.pc-coupon-expiry[b-acyxtqdmks] {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: 1px;
}

/* Collect button */
.pc-coupon-btn[b-acyxtqdmks] {
    flex-shrink: 0;
    padding: 6px 16px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.pc-coupon-btn:active[b-acyxtqdmks] {
    transform: scale(0.95);
    background: #b91c1c;
}

.pc-coupon-btn:disabled[b-acyxtqdmks] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pc-coupon-btn.collecting[b-acyxtqdmks] {
    padding: 6px 20px;
}

.pc-coupon-btn .spinner-small[b-acyxtqdmks] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-acyxtqdmks 0.8s linear infinite;
}

/* Collected state */
.pc-coupon-collected[b-acyxtqdmks] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.pc-coupon-collected i[b-acyxtqdmks] {
    font-size: 0.85rem;
}

/* Footer */
.pc-sheet-footer[b-acyxtqdmks] {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.pc-sheet-ok-btn[b-acyxtqdmks] {
    display: block;
    width: 100%;
    padding: 14px 16px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.pc-sheet-ok-btn:active[b-acyxtqdmks] {
    transform: scale(0.97);
    background: #b91c1c;
}

/* Desktop: center the sheet like a modal */
@media (min-width: 993px) {
    .promo-coupon-sheet[b-acyxtqdmks] {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        border-radius: 16px 16px 0 0;
    }

    .promo-coupon-sheet.open[b-acyxtqdmks] {
        transform: translateX(-50%) translateY(0);
    }
}
/* Desktop & Mobile Display Utilities for Options */
.desktop-only-options[b-acyxtqdmks] {
    display: block;
}
.mobile-only-options[b-acyxtqdmks] {
    display: none;
}
@media (max-width: 992px) {
    .desktop-only-options[b-acyxtqdmks] {
        display: none !important;
    }
    .mobile-only-options[b-acyxtqdmks] {
        display: block !important;
    }

    /* Mobile Price Card */
    .mobile-price-card[b-acyxtqdmks] {
        background: linear-gradient(180deg, #fffcf5 0%, #fff3de 100%);
        border: 1px solid #ffecb3;
        border-radius: 12px;
        padding: 12px 16px;
        margin-bottom: 12px;
    }
    .mobile-price-label[b-acyxtqdmks] {
        font-size: 0.85rem;
        color: #9c601e;
        font-weight: 500;
        margin-bottom: 4px;
        display: block;
    }
    .mobile-price-value[b-acyxtqdmks] {
        font-size: 1.75rem;
        font-weight: 800;
        color: #d14900;
        line-height: 1;
    }
    .mobile-price-value .currency[b-acyxtqdmks] {
        font-size: 0.9rem;
        font-weight: 600;
        margin-left: 4px;
    }

    /* Mobile Coupon Ticket */
    .mobile-coupon-ticket[b-acyxtqdmks] {
        background: linear-gradient(135deg, #e62525 0%, #bd0a0a 100%);
        border-radius: 12px;
        color: #fff;
        position: relative;
        overflow: hidden;
        margin-bottom: 12px;
        cursor: pointer;
        padding: 0;
    }
    .ticket-cutout[b-acyxtqdmks] {
        position: absolute;
        top: 36px;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 50%;
        z-index: 2;
    }
    .ticket-cutout-left[b-acyxtqdmks] {
        left: -8px;
    }
    .ticket-cutout-right[b-acyxtqdmks] {
        right: -8px;
    }
    .ticket-top[b-acyxtqdmks] {
        padding: 10px 16px 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed rgba(255,255,255,0.4);
    }
    .ticket-title[b-acyxtqdmks] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85rem;
        font-weight: 600;
        color: rgba(255,255,255,0.9);
    }
    .ticket-count[b-acyxtqdmks] {
        background: rgba(255,255,255,0.25);
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .ticket-bottom[b-acyxtqdmks] {
        padding: 12px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .ticket-amount-box[b-acyxtqdmks] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .ticket-amount[b-acyxtqdmks] {
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1;
    }
    .ticket-condition[b-acyxtqdmks] {
        font-size: 0.8rem;
        font-weight: 500;
        color: rgba(255,255,255,0.9);
    }
    .ticket-use-btn[b-acyxtqdmks] {
        background: #fff;
        color: #d12222;
        border: none;
        border-radius: 20px;
        padding: 8px 16px;
        font-weight: 700;
        font-size: 0.9rem;
    }

    /* Mobile Promo Banners Wrapper */
    .mobile-promo-banners-wrapper[b-acyxtqdmks] {
        margin-bottom: 16px;
        overflow-x: auto;
        padding-bottom: 4px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .mobile-promo-banners-wrapper[b-acyxtqdmks]::-webkit-scrollbar {
        display: none;
    }
    .mobile-promo-banners[b-acyxtqdmks] {
        display: flex;
        gap: 8px;
    }
    .mobile-promo-pill[b-acyxtqdmks] {
        border: 1px solid #f97316;
        color: #d95700;
        background: #fffaf5;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Options Cards for Mobile */
    .full-options-wrapper .desktop-options-wrapper[b-acyxtqdmks] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .full-options-wrapper .sheet-option-group[b-acyxtqdmks] {
        background: #fff;
        border: 1px solid #eaebf0 !important;
        border-radius: 12px;
        padding: 14px 16px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }
    .full-options-wrapper .variant-header[b-acyxtqdmks] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px !important;
    }
    .full-options-wrapper .variant-label[b-acyxtqdmks] {
        font-size: 0.95rem;
        color: #111;
        font-weight: 700;
    }
    .full-options-wrapper .variant-selected-value[b-acyxtqdmks] {
        color: #0145b2;
        font-size: 0.85rem;
        font-weight: 600;
    }
    .full-options-wrapper .variant-selected-value[b-acyxtqdmks]::before {
        content: "เลือก: ";
        font-weight: 500;
        color: #666;
    }
}

/* /Components/Pages/Products.razor.rz.scp.css */
/* Products Page Styles - Matching reference design */

.products-page[b-xy9b4g997e] {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 16px;
}

/* Brand Banner */
.brand-banner[b-xy9b4g997e] {
    background: var(--white);
    padding: 1rem 0;
}

.brand-banner img[b-xy9b4g997e] {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 12px;
}

/* Page Header Section */
.page-header-section[b-xy9b4g997e] {
    padding: 24px 0 16px;
}

.search-indicator[b-xy9b4g997e] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.search-indicator .indicator-bar[b-xy9b4g997e] {
    width: 4px;
    height: 20px;
    background: #FFD700;
    border-radius: 2px;
}

.search-indicator .indicator-text[b-xy9b4g997e] {
    font-size: 0.875rem;
    color: #666;
}

.page-title[b-xy9b4g997e] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0066CC;
    margin: 0;
}

/* Products Layout */
.products-layout[b-xy9b4g997e] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
}

/* Filters Sidebar */
.filters-sidebar[b-xy9b4g997e] {
    background: var(--white);
    border-radius: 4px;
    padding: 16px;
    position: sticky;
    top: 130px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    /* Prevent layout shifts during filtering */
    min-width: 300px;
    contain: style;
    /* Enable scrolling when category list exceeds viewport */
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
}

.filters-sidebar[b-xy9b4g997e]::-webkit-scrollbar {
    width: 5px;
}

.filters-sidebar[b-xy9b4g997e]::-webkit-scrollbar-track {
    background: transparent;
}

.filters-sidebar[b-xy9b4g997e]::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 4px;
}

.filters-sidebar[b-xy9b4g997e]::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

.filter-section[b-xy9b4g997e] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
    transition: all 0.2s ease;
}

.filter-section:last-child[b-xy9b4g997e] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.filter-section h3[b-xy9b4g997e] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
}

/* Filters Header */
.filters-header[b-xy9b4g997e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
}

.filters-header h3[b-xy9b4g997e] {
    margin: 0;
}

.clear-filter-link[b-xy9b4g997e] {
    background: none;
    border: none;
    color: #0066CC;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
}

.clear-filter-link:hover[b-xy9b4g997e] {
    text-decoration: underline;
}

/* Search Box */
.search-box[b-xy9b4g997e] {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.search-box input[b-xy9b4g997e] {
    flex: 1;
    padding: 10px 12px;
    border: none;
    font-size: 0.875rem;
    outline: none;
}

.search-box input[b-xy9b4g997e]::placeholder {
    color: #999;
}

.search-btn[b-xy9b4g997e] {
    padding: 10px 14px;
    background: #f5f5f5;
    border: none;
    border-left: 1px solid #ddd;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.search-btn:hover[b-xy9b4g997e] {
    background: #eee;
    color: #0066CC;
}

/* Filter Checkboxes */
.filter-options[b-xy9b4g997e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-options.nested[b-xy9b4g997e] {
    padding-left: 8px;
}

.filter-checkbox[b-xy9b4g997e] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #333;
    padding: 4px 0;
    transition: all 0.2s ease;
    position: relative;
}

.filter-checkbox:hover[b-xy9b4g997e] {
    color: #0066CC;
}

/* Hide native checkbox */
.filter-checkbox input[type="checkbox"][b-xy9b4g997e] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom checkbox box */
.filter-checkbox[b-xy9b4g997e]::before {
    content: '';
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid #d0d0d0;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Checkmark icon (using CSS) */
.filter-checkbox[b-xy9b4g997e]::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: translateY(-55%) rotate(45deg);
    opacity: 0;
    transition: all 0.2s ease;
}

/* Checked state */
.filter-checkbox:has(input:checked)[b-xy9b4g997e]::before {
    background: #0066CC;
    border-color: #0066CC;
}

.filter-checkbox:has(input:checked)[b-xy9b4g997e]::after {
    opacity: 1;
}

/* Indeterminate state (some children checked) */
.filter-checkbox.indeterminate[b-xy9b4g997e]::before {
    background: #0066CC;
    border-color: #0066CC;
}

.filter-checkbox.indeterminate[b-xy9b4g997e]::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 10px;
    height: 0;
    border: none;
    border-top: 2.5px solid white;
    transform: translateY(-50%);
    opacity: 1;
}

/* Hover effect on checkbox */
.filter-checkbox:hover[b-xy9b4g997e]::before {
    border-color: #0066CC;
}

/* Focus state for accessibility */
.filter-checkbox:has(input:focus-visible)[b-xy9b4g997e]::before {
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
}

.filter-checkbox span[b-xy9b4g997e] {
    transition: color 0.2s ease;
    line-height: 1.4;
}

/* Hierarchical Category Filter */
.category-parent[b-xy9b4g997e] {
    margin-bottom: 2px;
}

.category-row[b-xy9b4g997e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.category-row .filter-checkbox[b-xy9b4g997e] {
    flex: 1;
    margin: 0;
}

/* Expand arrow on the right side */
.expand-arrow[b-xy9b4g997e] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.expand-arrow:hover[b-xy9b4g997e] {
    color: #0066CC;
}

.expand-arrow i[b-xy9b4g997e] {
    transition: transform 0.2s ease;
}

.filter-checkbox .count[b-xy9b4g997e] {
    color: #999;
    font-size: 0.8rem;
    margin-left: auto;
    font-weight: 400;
}

.category-children[b-xy9b4g997e] {
    margin-left: 34px;
    margin-top: 2px;
    animation: slideDown-b-xy9b4g997e 0.2s ease;
}

@keyframes slideDown-b-xy9b4g997e {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

.filter-checkbox.child[b-xy9b4g997e] {
    font-size: 0.85rem;
    padding: 3px 0;
}

.filter-checkbox.child[b-xy9b4g997e]::before {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 5px;
}

.filter-checkbox.child[b-xy9b4g997e]::after {
    left: 7px;
    width: 5px;
    height: 9px;
    border-width: 0 2px 2px 0;
}

/* Indeterminate dash for child-level checkboxes */
.filter-checkbox.child.indeterminate[b-xy9b4g997e]::before {
    background: #0066CC;
    border-color: #0066CC;
}

.filter-checkbox.child.indeterminate[b-xy9b4g997e]::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    width: 10px;
    height: 0;
    border: none;
    border-top: 2.5px solid white;
    transform: translateY(-50%);
    opacity: 1;
}

.filter-checkbox.child span:first-of-type[b-xy9b4g997e] {
    color: #555;
}

/* Level 3 grandchildren */
.category-children.level-3[b-xy9b4g997e] {
    margin-left: 20px;
    border-left: 2px solid #e8ecf0;
    padding-left: 10px;
}

.filter-checkbox.grandchild[b-xy9b4g997e] {
    font-size: 0.8rem;
    padding: 2px 0;
}

.filter-checkbox.grandchild[b-xy9b4g997e]::before {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 4px;
}

.filter-checkbox.grandchild[b-xy9b4g997e]::after {
    left: 6px;
    width: 5px;
    height: 8px;
    border-width: 0 2px 2px 0;
}

.filter-checkbox.grandchild span:first-of-type[b-xy9b4g997e] {
    color: #777;
}

/* Collapsible Filter Sections */
.filter-header-row[b-xy9b4g997e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-header-row h3[b-xy9b4g997e] {
    margin: 0;
}

.collapse-btn[b-xy9b4g997e] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    font-size: 0.75rem;
}

.collapse-btn:hover[b-xy9b4g997e] {
    color: #0066CC;
}

/* Show More Button */
.show-more-btn[b-xy9b4g997e] {
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    background: transparent;
    color: var(--primary-blue);
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    transition: all 0.25s ease;
}

.show-more-btn:hover[b-xy9b4g997e] {
    color: #0066CC;
    transform: translateX(4px);
}

.show-more-btn:active[b-xy9b4g997e] {
    transform: translateX(2px) scale(0.98);
}

.show-more-btn i[b-xy9b4g997e] {
    font-size: 0.7rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.show-more-btn:hover i[b-xy9b4g997e] {
    animation: bounce-arrow-b-xy9b4g997e 0.5s ease infinite;
}

@keyframes bounce-arrow-b-xy9b4g997e {

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

    50% {
        transform: translateY(3px);
    }
}

/* Filter options - no replay animation for smooth experience */
.filter-options[b-xy9b4g997e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.filter-options .filter-checkbox[b-xy9b4g997e] {
    opacity: 1;
    transform: translateX(0);
}

/* Only animate on initial page load using a one-time class */
.filters-sidebar.initial-load .filter-options .filter-checkbox[b-xy9b4g997e] {
    animation: slideIn-b-xy9b4g997e 0.3s ease forwards;
    opacity: 0;
    transform: translateX(-10px);
}

.filters-sidebar.initial-load .filter-options .filter-checkbox:nth-child(1)[b-xy9b4g997e] {
    animation-delay: 0.05s;
}

.filters-sidebar.initial-load .filter-options .filter-checkbox:nth-child(2)[b-xy9b4g997e] {
    animation-delay: 0.1s;
}

.filters-sidebar.initial-load .filter-options .filter-checkbox:nth-child(3)[b-xy9b4g997e] {
    animation-delay: 0.15s;
}

.filters-sidebar.initial-load .filter-options .filter-checkbox:nth-child(4)[b-xy9b4g997e] {
    animation-delay: 0.2s;
}

.filters-sidebar.initial-load .filter-options .filter-checkbox:nth-child(5)[b-xy9b4g997e] {
    animation-delay: 0.25s;
}

@keyframes slideIn-b-xy9b4g997e {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Collapse button animation */
.collapse-btn[b-xy9b4g997e] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.75rem;
    transition: all 0.25s ease;
    border-radius: 4px;
}

.collapse-btn:hover[b-xy9b4g997e] {
    color: #0066CC;
    background: rgba(0, 102, 204, 0.08);
}

.collapse-btn i[b-xy9b4g997e] {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsible section animations */
.filter-section.collapsible[b-xy9b4g997e] {
    transition: all 0.3s ease;
}

.filter-section.collapsible .filter-options[b-xy9b4g997e] {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease,
        margin 0.25s ease;
    margin-top: 0;
}

.filter-section.collapsible.expanded .filter-options[b-xy9b4g997e] {
    max-height: 1000px;
    opacity: 1;
    margin-top: 12px;
}

/* Price Slider */
.price-slider-container[b-xy9b4g997e] {
    padding: 15px 0 5px;
}

.price-slider[b-xy9b4g997e] {
    position: relative;
    height: 30px;
    margin-bottom: 10px;
}

.slider-track[b-xy9b4g997e] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
}

.slider-range[b-xy9b4g997e] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: #0066CC;
    border-radius: 2px;
}

.price-range-input[b-xy9b4g997e] {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
}

.price-range-input[b-xy9b4g997e]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: transparent;
    border: none;
}

.price-range-input[b-xy9b4g997e]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: transparent;
    border: none;
}

.price-range-input[b-xy9b4g997e]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #FFD700;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    margin-top: -10px;
    position: relative;
    z-index: 2;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.price-range-input[b-xy9b4g997e]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.price-range-input[b-xy9b4g997e]::-webkit-slider-thumb:active {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.price-range-input[b-xy9b4g997e]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #FFD700;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.price-range-input[b-xy9b4g997e]::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.slider-range[b-xy9b4g997e] {
    transition: all 0.1s ease;
}

.price-range-input.input-min[b-xy9b4g997e] {
    z-index: 3;
}

.price-range-input.input-max[b-xy9b4g997e] {
    z-index: 4;
}

.price-labels[b-xy9b4g997e] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #333;
    font-weight: 500;
    padding: 0 2px;
}

/* Products Content */
.products-content[b-xy9b4g997e] {
    min-height: 400px;
}

/* Banner Carousel */
.banner-carousel[b-xy9b4g997e] {
    margin-bottom: 16px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.banner-carousel .carousel-inner[b-xy9b4g997e] {
    border-radius: 16px;
}

.banner-carousel .carousel-item img[b-xy9b4g997e] {
    width: 100%;
    height: auto;
    display: block;
}

/* Custom Navigation Arrows */
.banner-carousel .carousel-control-prev[b-xy9b4g997e],
.banner-carousel .carousel-control-next[b-xy9b4g997e] {
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.banner-carousel:hover .carousel-control-prev[b-xy9b4g997e],
.banner-carousel:hover .carousel-control-next[b-xy9b4g997e] {
    opacity: 1;
}

.banner-carousel .carousel-control-prev[b-xy9b4g997e] {
    left: 16px;
}

.banner-carousel .carousel-control-next[b-xy9b4g997e] {
    right: 16px;
}

.banner-carousel .carousel-control-prev:hover[b-xy9b4g997e],
.banner-carousel .carousel-control-next:hover[b-xy9b4g997e] {
    background: #0066CC;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.4);
}

.banner-carousel .carousel-control-prev-icon[b-xy9b4g997e],
.banner-carousel .carousel-control-next-icon[b-xy9b4g997e] {
    width: 16px;
    height: 16px;
    filter: invert(0.2);
}

.banner-carousel .carousel-control-prev:hover .carousel-control-prev-icon[b-xy9b4g997e],
.banner-carousel .carousel-control-next:hover .carousel-control-next-icon[b-xy9b4g997e] {
    filter: invert(1);
}

/* Custom Indicators */
.banner-carousel .carousel-indicators[b-xy9b4g997e] {
    bottom: 16px;
    margin-bottom: 0;
    gap: 8px;
}

.banner-carousel .carousel-indicators button[b-xy9b4g997e] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
}

.banner-carousel .carousel-indicators button:hover[b-xy9b4g997e] {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}

.banner-carousel .carousel-indicators button.active[b-xy9b4g997e] {
    background: #FFD700;
    width: 28px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

/* Category Quick Links */
.category-quick-links[b-xy9b4g997e] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow-x: auto;
    align-items: center;
}

.category-pill[b-xy9b4g997e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f8f8f8;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-size: 0.75rem;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.category-pill:hover[b-xy9b4g997e] {
    background: linear-gradient(135deg, #0066CC 0%, #0052a3 100%);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.category-pill:active[b-xy9b4g997e] {
    transform: translateY(-1px);
}

.category-pill img[b-xy9b4g997e] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.category-pill.active[b-xy9b4g997e] {
    background: linear-gradient(135deg, #0066CC 0%, #0052a3 100%);
    color: white;
}

.category-pill-nav[b-xy9b4g997e] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0066CC;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.category-pill-nav:hover[b-xy9b4g997e] {
    background: #0052a3;
    transform: scale(1.1);
}

/* Products Toolbar */
.products-toolbar[b-xy9b4g997e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ededed;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.sort-tabs[b-xy9b4g997e] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sort-tabs[b-xy9b4g997e]::before {
    content: 'เรียงโดย';
    font-size: 0.9rem;
    color: #555;
    margin-right: 4px;
}

.sort-tab[b-xy9b4g997e] {
    padding: 8px 16px;
    background: white;
    border: 1px solid transparent;
    color: #333;
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.sort-tab:hover[b-xy9b4g997e] {
    color: #0066CC;
}

.sort-tab.active[b-xy9b4g997e] {
    background: #0066CC;
    color: white;
}

.sort-dropdown[b-xy9b4g997e] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-dropdown label[b-xy9b4g997e] {
    display: none;
}

.sort-dropdown select[b-xy9b4g997e] {
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 2px;
    font-size: 0.85rem;
    background: white;
    cursor: pointer;
    color: #333;
    min-width: 150px;
}

/* Loading State */
.loading-state[b-xy9b4g997e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: white;
    border-radius: 12px;
    animation: fadeIn-b-xy9b4g997e 0.3s ease;
}

@keyframes fadeIn-b-xy9b4g997e {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.spinner[b-xy9b4g997e] {
    width: 48px;
    height: 48px;
    border: 4px solid #eee;
    border-top-color: #0066CC;
    border-radius: 50%;
    animation: spin-b-xy9b4g997e 0.8s linear infinite;
    position: relative;
}

.spinner[b-xy9b4g997e]::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 4px solid transparent;
    border-top-color: rgba(0, 102, 204, 0.3);
    border-radius: 50%;
    animation: spin-b-xy9b4g997e 1.2s linear infinite reverse;
}

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

.loading-state p[b-xy9b4g997e] {
    margin-top: 16px;
    color: #666;
    animation: pulse-b-xy9b4g997e 1.5s ease-in-out infinite;
}

@keyframes pulse-b-xy9b4g997e {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* No Results */
.no-results[b-xy9b4g997e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: white;
    border-radius: 12px;
    text-align: center;
    animation: fadeIn-b-xy9b4g997e 0.4s ease;
}

.no-results-icon[b-xy9b4g997e] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 16px;
    animation: bounceIn-b-xy9b4g997e 0.5s ease;
}

@keyframes bounceIn-b-xy9b4g997e {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.no-results h2[b-xy9b4g997e] {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 1.25rem;
}

.no-results p[b-xy9b4g997e] {
    color: #666;
    margin-bottom: 20px;
}

.no-results .btn-primary[b-xy9b4g997e] {
    padding: 10px 24px;
    background: #0066CC;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.no-results .btn-primary:hover[b-xy9b4g997e] {
    background: #0052a3;
}

/* Products Grid */
.products-grid[b-xy9b4g997e] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

/* Product card entrance animation */
.products-grid>a[b-xy9b4g997e] {
    animation: cardSlideUp-b-xy9b4g997e 0.4s ease forwards;
    opacity: 0;
    transform: translateY(20px);
    border-radius: 4px;
    border: 1px solid transparent;
}

.products-grid>a:nth-child(1)[b-xy9b4g997e] { animation-delay: 0.05s; }
.products-grid>a:nth-child(2)[b-xy9b4g997e] { animation-delay: 0.1s; }
.products-grid>a:nth-child(3)[b-xy9b4g997e] { animation-delay: 0.15s; }
.products-grid>a:nth-child(4)[b-xy9b4g997e] { animation-delay: 0.2s; }
.products-grid>a:nth-child(5)[b-xy9b4g997e] { animation-delay: 0.25s; }
.products-grid>a:nth-child(6)[b-xy9b4g997e] { animation-delay: 0.3s; }
.products-grid>a:nth-child(7)[b-xy9b4g997e] { animation-delay: 0.35s; }
.products-grid>a:nth-child(8)[b-xy9b4g997e] { animation-delay: 0.4s; }
.products-grid>a:nth-child(9)[b-xy9b4g997e] { animation-delay: 0.45s; }
.products-grid>a:nth-child(10)[b-xy9b4g997e] { animation-delay: 0.5s; }
.products-grid>a:nth-child(11)[b-xy9b4g997e] { animation-delay: 0.55s; }
.products-grid>a:nth-child(12)[b-xy9b4g997e] { animation-delay: 0.6s; }

@keyframes cardSlideUp-b-xy9b4g997e {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Product card hover effects */
.products-grid>a:hover[b-xy9b4g997e] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #0066CC;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Flash Product Card - additional styles for description */
.flash-product-desc[b-xy9b4g997e] {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Product Tags */
.flash-tag.in-stock[b-xy9b4g997e] {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #A5D6A7;
}

.flash-tag.out-stock[b-xy9b4g997e] {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #FFCDD2;
}

.flash-tag.variant[b-xy9b4g997e] {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFCC80;
}

/* Pagination */
.pagination[b-xy9b4g997e] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 12px 16px;
    background: white;
    border-radius: 12px;
    transition: opacity 0.3s ease;
}

.pagination.pagination-loading[b-xy9b4g997e] {
    opacity: 0.45;
    pointer-events: none;
}

.page-btn[b-xy9b4g997e] {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid #e5e7eb;
    background: white;
    color: #374151;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.page-btn:hover:not(:disabled)[b-xy9b4g997e] {
    border-color: #0066CC;
    color: #0066CC;
    background: rgba(0, 102, 204, 0.04);
}

.page-btn:active:not(:disabled)[b-xy9b4g997e] {
    transform: scale(0.95);
}

.page-btn.active[b-xy9b4g997e] {
    background: linear-gradient(135deg, #0066CC 0%, #004999 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
    font-weight: 700;
}

.page-btn:disabled[b-xy9b4g997e] {
    opacity: 0.35;
    cursor: not-allowed;
}

.page-btn.prev[b-xy9b4g997e],
.page-btn.next[b-xy9b4g997e] {
    font-weight: 500;
    padding: 0 14px;
    border-color: transparent;
    background: #f3f4f6;
    color: #6b7280;
}

.page-btn.prev:hover:not(:disabled)[b-xy9b4g997e],
.page-btn.next:hover:not(:disabled)[b-xy9b4g997e] {
    background: #e5e7eb;
    color: #374151;
}

.page-btn i[b-xy9b4g997e] {
    font-size: 0.65rem;
}

.page-btn-text[b-xy9b4g997e] {
    font-size: 0.78rem;
}

.page-ellipsis[b-xy9b4g997e] {
    padding: 0 2px;
    color: #9ca3af;
    font-size: 0.85rem;
    letter-spacing: 2px;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .products-grid[b-xy9b4g997e] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .products-layout[b-xy9b4g997e] {
        grid-template-columns: 1fr;
    }

    /* Mobile filter toggle */
    .filters-sidebar[b-xy9b4g997e] {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        height: 85vh;
        z-index: 1050;
        background: var(--white);
        overflow-y: auto;
        padding: 20px;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    }

    .filter-section[b-xy9b4g997e] {
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #eee;
    }

    .products-grid[b-xy9b4g997e] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .category-quick-links[b-xy9b4g997e] {
        display: none;
    }

    .slide-nav[b-xy9b4g997e] {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .slide-nav.prev[b-xy9b4g997e] {
        left: 10px;
    }

    .slide-nav.next[b-xy9b4g997e] {
        right: 10px;
    }

    /* Mobile filter backdrop */
    .mobile-filter-backdrop[b-xy9b4g997e] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1049;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    .mobile-filter-backdrop.active[b-xy9b4g997e] {
        opacity: 1;
        visibility: visible;
    }
}

/* Mobile-only elements - hidden on desktop */
.mobile-top-section[b-xy9b4g997e],
.mobile-promo-strip[b-xy9b4g997e],
.mobile-img-badges[b-xy9b4g997e],
.mobile-add-cart-btn[b-xy9b4g997e] {
    display: none;
}

@media (max-width: 768px) {
    .products-page[b-xy9b4g997e] {
        padding-bottom: 12px;
        background: #f5f5f5;
    }

    /* Hide desktop-only elements on mobile */
    .page-header-section[b-xy9b4g997e],
    .banner-carousel[b-xy9b4g997e],
    .category-quick-links[b-xy9b4g997e],
    .products-toolbar[b-xy9b4g997e] {
        display: none !important;
    }

    /* Show mobile top section */
    .mobile-top-section[b-xy9b4g997e] {
        display: block;
        padding: 0 0 8px;
        padding-top: 12px;
    }

    /* Mobile Search Bar */
    .mobile-search-bar[b-xy9b4g997e] {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #fff;
        border: 2px solid #e8e8e8;
        border-radius: 10px;
        padding: 10px 14px;
        margin-bottom: 12px;
        transition: border-color 0.2s ease;
    }

    .mobile-search-bar:focus-within[b-xy9b4g997e] {
        border-color: #0066CC;
    }

    .mobile-search-bar > i[b-xy9b4g997e] {
        color: #999;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .mobile-search-bar input[b-xy9b4g997e] {
        flex: 1;
        border: none;
        outline: none;
        font-size: 0.9rem;
        color: #333;
        background: transparent;
        min-width: 0;
    }

    .mobile-search-bar input[b-xy9b4g997e]::placeholder {
        color: #bbb;
    }

    .mobile-search-btn[b-xy9b4g997e] {
        display: none;
    }

    /* Mobile Pets Category Tabs (Circle Icons) */
    .mobile-category-tabs[b-xy9b4g997e] {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 15px 8px; /* Added side padding for scale */
        background: #fff;
    }

    .mobile-category-tabs[b-xy9b4g997e]::-webkit-scrollbar {
        display: none;
    }

    .mobile-cat-tab[b-xy9b4g997e] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 6px 8px;
        border: none;
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
        min-width: 64px;
        transition: all 0.25s ease;
    }

    .cat-tab-icon[b-xy9b4g997e] {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        border: 2.5px solid #e8e8e8;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: all 0.25s ease;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .cat-tab-icon img[b-xy9b4g997e] {
        width: 34px;
        height: 34px;
        object-fit: contain;
    }

    .cat-tab-icon i[b-xy9b4g997e] {
        font-size: 1.1rem;
        color: #999;
        transition: color 0.25s ease;
    }

    .cat-tab-name[b-xy9b4g997e] {
        font-size: 0.7rem;
        color: #777;
        font-weight: 500;
        white-space: nowrap;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.25s ease;
    }

    .mobile-cat-tab.active .cat-tab-icon[b-xy9b4g997e] {
        border-color: #0066CC;
        box-shadow: 0 2px 10px rgba(0, 102, 204, 0.3);
    }

    .mobile-cat-tab.active .cat-tab-icon i[b-xy9b4g997e] {
        color: #0066CC;
    }

    .mobile-cat-tab.active .cat-tab-name[b-xy9b4g997e] {
        color: #0066CC;
        font-weight: 700;
    }

    /* Mobile Category Pills (Row 1) */
    .mobile-category-pills[b-xy9b4g997e] {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 10px 15px;
        background: #fff;
        border-bottom: 4px solid #f9f9f9;
        margin: 0;
    }

    .mobile-category-pills[b-xy9b4g997e]::-webkit-scrollbar {
        display: none;
    }

    .m-cat-pill[b-xy9b4g997e] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 20px;
        background: #f4f5f5;
        color: #333;
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
        border: none;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    .m-cat-pill img[b-xy9b4g997e] {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .m-cat-pill.active[b-xy9b4g997e] {
        background: #2544A4;
        color: white;
        box-shadow: 0 2px 6px rgba(37, 68, 164, 0.4);
    }

    /* Mobile Sub Tabs (Row 2) */
    .mobile-sub-tabs[b-xy9b4g997e] {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 15px;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    .mobile-sub-tabs[b-xy9b4g997e]::-webkit-scrollbar {
        display: none;
    }

    .m-sub-tab[b-xy9b4g997e] {
        padding: 12px 4px;
        font-size: 0.85rem;
        color: #9A9FA5;
        font-weight: 500;
        white-space: nowrap;
        border: none;
        background: transparent;
        border-bottom: 2px solid transparent;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    .m-sub-tab.active[b-xy9b4g997e] {
        color: #FF7B00;
        font-weight: 700;
        border-bottom-color: #FF7B00;
    }

    /* Mobile Sort & Filter Toolbar (Row 3) */
    .mobile-action-bar[b-xy9b4g997e] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        background: #fff;
        font-size: 0.8rem;
        color: #777;
        margin-bottom: 8px; /* Spans to the grid area */
    }

    .item-count[b-xy9b4g997e] {
        font-weight: 600;
        color: #9A9FA5;
    }

    .action-buttons[b-xy9b4g997e] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .btn-action[b-xy9b4g997e] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border: 1px solid #EAEAEA;
        border-radius: 16px;
        background: #fff;
        color: #333;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .btn-action i[b-xy9b4g997e] {
        color: #555;
    }

    .action-buttons .divider[b-xy9b4g997e] {
        width: 1px;
        height: 14px;
        background: #EAEAEA;
    }

    .mobile-top-section[b-xy9b4g997e] {
        position: relative;
        padding: 0;
        background: #f5f5f5;
    }

    /* Mobile Sort Dropdown */
    .mobile-sort-backdrop[b-xy9b4g997e] {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: transparent;
        z-index: 1045;
    }

    .mobile-sort-popup[b-xy9b4g997e] {
        position: absolute;
        bottom: -5px;
        right: 15px;
        transform: translateY(100%);
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        z-index: 1050;
        min-width: 160px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .mobile-sort-popup button[b-xy9b4g997e] {
        padding: 12px 16px;
        text-align: left;
        width: 100%;
        border: none;
        background: transparent;
        font-size: 0.85rem;
        border-bottom: 1px solid #f0f0f0;
        color: #333;
    }

    .mobile-sort-popup button.active[b-xy9b4g997e] {
        color: #0066CC;
        font-weight: 600;
        background: #f8fbff;
    }

    .mobile-sort-popup button:last-child[b-xy9b4g997e] {
        border-bottom: none;
    }

    /* Adjust Filters Sidebar to slide in properly */
    .filters-sidebar.mobile-open[b-xy9b4g997e] {
        transform: translateY(0);
    }
    
    .mobile-filter-header[b-xy9b4g997e] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;

        /* Sticky header implementation */
        position: sticky;
        top: -20px;
        margin-top: -20px;
        margin-left: -20px;
        margin-right: -20px;
        padding: 20px 20px 10px;
        background: var(--white);
        z-index: 10;
        border-radius: 16px 16px 0 0;
    }
    
    .mobile-filter-header h3[b-xy9b4g997e] {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }
    
    .close-filter-btn[b-xy9b4g997e] {
        background: none;
        border: none;
        font-size: 1.25rem;
        color: #999;
    }

    /* Products Grid → 2-column grid */
    .products-grid[b-xy9b4g997e] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Cancel the card entrance animation hover transform on mobile */
    .products-grid > a[b-xy9b4g997e] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .products-grid > a:hover[b-xy9b4g997e] {
        transform: none;
    }

    /* Vertical Product Card */
    .flash-product-card[b-xy9b4g997e] {
        display: flex !important;
        flex-direction: column !important;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        text-decoration: none;
        position: relative;
    }

    .flash-product-card:hover[b-xy9b4g997e] {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Full thumbnail image on top */
    .flash-product-image[b-xy9b4g997e] {
        width: 100%;
        min-width: unset;
        height: auto;
        aspect-ratio: auto;
        flex-shrink: 0;
        background: #f8f8f8;
        position: relative;
    }

    .flash-product-image img[b-xy9b4g997e] {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Overlay badges on thumbnail */
    .mobile-img-badges[b-xy9b4g997e] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: absolute;
        top: 6px;
        left: 6px;
        z-index: 2;
    }

    .img-badge[b-xy9b4g997e] {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 7px;
        border-radius: 4px;
        font-size: 0.6rem;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        line-height: 1.4;
    }

    .img-badge i[b-xy9b4g997e] {
        font-size: 0.5rem;
    }

    .badge-discount[b-xy9b4g997e] {
        background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);
    }

    .badge-tag[b-xy9b4g997e] {
        font-size: 0.55rem;
        font-weight: 600;
    }

    /* Wishlist shortcut button */
    .wishlist-shortcut-btn[b-xy9b4g997e] {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        z-index: 3;
        transition: all 0.2s ease;
    }

    .wishlist-shortcut-btn:hover[b-xy9b4g997e] {
        color: #ef4444;
        transform: scale(1.1);
    }

    .wishlist-shortcut-btn:active[b-xy9b4g997e] {
        transform: scale(0.95);
    }

    /* Quick add-to-cart button */
    .mobile-add-cart-btn[b-xy9b4g997e] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
        border-radius: 6px;
        background: linear-gradient(135deg, #0066CC 0%, #0052a3 100%);
        color: #fff;
        border: 2px solid #fff;
        cursor: pointer;
        font-size: 0.8rem;
        box-shadow: 0 2px 8px rgba(0, 102, 204, 0.35);
        transition: all 0.2s ease;
        z-index: 3;
    }

    .mobile-add-cart-btn:active[b-xy9b4g997e] {
        transform: scale(0.9);
        box-shadow: 0 1px 4px rgba(0, 102, 204, 0.4);
    }

    /* Info on the right */
    .flash-product-info[b-xy9b4g997e] {
        flex: 1;
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
        gap: 1px;
    }

    .flash-product-brand[b-xy9b4g997e] {
        font-size: 0.65rem;
        margin-bottom: 0;
        opacity: 0.7;
    }

    .flash-product-name[b-xy9b4g997e] {
        font-size: 0.82rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-bottom: 2px;
        min-height: unset;
        line-height: 1.3;
    }

    .flash-product-desc[b-xy9b4g997e] {
        display: none;
    }

    .flash-product-price[b-xy9b4g997e] {
        margin-bottom: 1px;
    }

    .flash-price-symbol[b-xy9b4g997e],
    .flash-price-min[b-xy9b4g997e],
    .flash-price-max[b-xy9b4g997e] {
        font-size: 0.82rem;
    }

    /* Hide inline discount badge on mobile (shown in promo strip instead) */
    .flash-discount-badge[b-xy9b4g997e] {
        display: none;
    }

    /* Hide original tags on mobile (shown in promo strip instead) */
    .flash-product-tags[b-xy9b4g997e] {
        display: none;
    }

    .flash-product-rating[b-xy9b4g997e] {
        font-size: 0.65rem;
        margin-bottom: 2px;
    }

    .flash-product-rating i[b-xy9b4g997e] {
        font-size: 0.6rem;
    }

    .flash-product-rating .sold-count[b-xy9b4g997e] {
        display: none;
    }

    /* Mobile Promotion Strip */
    .mobile-promo-strip[b-xy9b4g997e] {
        display: flex;
        gap: 5px;
        margin-top: auto;
        flex-wrap: wrap;
    }

    .promo-badge-discount[b-xy9b4g997e],
    .promo-badge-tag[b-xy9b4g997e] {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.65rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .promo-badge-discount[b-xy9b4g997e] {
        background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);
        color: #fff;
    }

    .promo-badge-discount i[b-xy9b4g997e] {
        font-size: 0.55rem;
    }

    .promo-badge-tag[b-xy9b4g997e] {
        color: #fff;
        font-size: 0.6rem;
    }

    /* Skeleton loading - 2-column grid */
    .skeleton-products-grid[b-xy9b4g997e] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .skeleton-product-card[b-xy9b4g997e] {
        display: flex !important;
        flex-direction: column !important;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

    .skeleton-product-card .skeleton-image[b-xy9b4g997e] {
        width: 100% !important;
        min-width: unset;
        height: auto !important;
        aspect-ratio: 1 !important;
    }

    .skeleton-product-card .skeleton-content[b-xy9b4g997e] {
        flex: 1;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Pagination simplified */
    .pagination[b-xy9b4g997e] {
        gap: 4px;
        padding: 10px 8px;
        margin-top: 10px;
    }

    .page-btn[b-xy9b4g997e] {
        min-width: 32px;
        height: 32px;
        padding: 0 6px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .page-btn.prev[b-xy9b4g997e],
    .page-btn.next[b-xy9b4g997e] {
        min-width: 32px;
        padding: 0 8px;
    }

    .page-btn-text[b-xy9b4g997e] {
        display: none;
    }

    .page-title[b-xy9b4g997e] {
        font-size: 1.25rem;
    }

    /* Filter toggle button for mobile */
    .mobile-filter-toggle[b-xy9b4g997e] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        background: var(--white);
        border: 1px solid #ddd;
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-filter-toggle:hover[b-xy9b4g997e] {
        border-color: #0066CC;
        color: #0066CC;
    }

    .mobile-filter-toggle i[b-xy9b4g997e] {
        font-size: 1rem;
    }

    .slide-nav[b-xy9b4g997e] {
        opacity: 1;
        width: 32px;
        height: 32px;
    }

    .slide-dots[b-xy9b4g997e] {
        bottom: 10px;
        gap: 8px;
    }

    .dot[b-xy9b4g997e] {
        width: 8px;
        height: 8px;
    }

    .dot.active[b-xy9b4g997e] {
        width: 22px;
    }

    .sort-tabs[b-xy9b4g997e] {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .sort-tabs[b-xy9b4g997e]::-webkit-scrollbar {
        display: none;
    }

    .sort-dropdown[b-xy9b4g997e] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* Even smaller mobile - keep 2-column grid */
    .products-grid[b-xy9b4g997e] {
        gap: 8px;
    }

    .cat-tab-icon[b-xy9b4g997e] {
        width: 44px;
        height: 44px;
    }

    .cat-tab-icon img[b-xy9b4g997e] {
        width: 28px;
        height: 28px;
    }

    .cat-tab-name[b-xy9b4g997e] {
        font-size: 0.65rem;
    }

    .filter-tag-chip[b-xy9b4g997e] {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .page-btn.prev span[b-xy9b4g997e],
    .page-btn.next span[b-xy9b4g997e] {
        display: none;
    }
}
/* /Components/Pages/Promotions.razor.rz.scp.css */
/* ==========================================
   PROMOTIONS V2 — Premium Pet Store Design
   ========================================== */

.promo-v2[b-in6khnc49j] {
    min-height: 100vh;
    background: var(--gray-50, #F9FAFB);
    padding-bottom: 100px;
}

/* Version Switcher */
.version-switcher[b-in6khnc49j] {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-blue, #0145b2);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(1, 69, 178, 0.35);
    transition: all 0.2s ease;
    font-family: inherit;
}

.version-switcher:hover[b-in6khnc49j] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(1, 69, 178, 0.45);
    color: #fff;
}

.version-switcher i[b-in6khnc49j] {
    font-size: 0.72rem;
}

/* ==========================================
   HERO BANNER — Gradient with shapes
   ========================================== */

.promo-hero[b-in6khnc49j] {
    position: relative;
    background: linear-gradient(135deg, #012d7a 0%, #0145b2 50%, #0160d9 100%);
    padding: 36px 20px 32px;
    overflow: hidden;
}

.hero-bg-shapes[b-in6khnc49j] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-shape[b-in6khnc49j] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    background: #fff;
}

.shape-1[b-in6khnc49j] {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -60px;
}

.shape-2[b-in6khnc49j] {
    width: 200px;
    height: 200px;
    bottom: -80px;
    left: -40px;
}

.shape-3[b-in6khnc49j] {
    width: 120px;
    height: 120px;
    top: 20px;
    left: 60%;
    opacity: 0.05;
}

.hero-inner[b-in6khnc49j] {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
}

.hero-badge[b-in6khnc49j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    color: var(--primary-yellow, #ffd46b);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.hero-badge i[b-in6khnc49j] {
    font-size: 0.7rem;
}

.hero-title[b-in6khnc49j] {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.hero-subtitle[b-in6khnc49j] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    margin: 0 0 20px;
    font-weight: 400;
}

/* Hero Search */
.hero-search[b-in6khnc49j] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    padding: 14px 20px;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin: 0 auto 20px;
    max-width: 560px;
}

.hero-search i[b-in6khnc49j] {
    color: #94a3b8;
    font-size: 1rem;
    flex-shrink: 0;
}

.hero-search input[b-in6khnc49j] {
    border: none;
    background: none;
    outline: none;
    flex: 1;
    font-size: 0.92rem;
    color: #1e293b;
    font-family: inherit;
}

.hero-search input[b-in6khnc49j]::placeholder {
    color: #94a3b8;
}

.search-clear[b-in6khnc49j] {
    background: #e2e8f0;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.search-clear:hover[b-in6khnc49j] {
    background: #cbd5e1;
}

.search-clear i[b-in6khnc49j] {
    font-size: 0.6rem;
    color: #475569;
}

/* Hero Stats */
.hero-stats[b-in6khnc49j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 14px 8px;
    max-width: 420px;
    margin: 0 auto;
}

.stat-item[b-in6khnc49j] {
    flex: 1;
    text-align: center;
}

.stat-number[b-in6khnc49j] {
    display: block;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}

.stat-label[b-in6khnc49j] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-in6khnc49j] {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

/* ==========================================
   STICKY FILTER BAR
   ========================================== */

.promo-filter-bar[b-in6khnc49j] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 0 20px;
}

.filter-tabs-row[b-in6khnc49j],
.filter-chips-row[b-in6khnc49j] {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Tabs Row */
.filter-tabs-row[b-in6khnc49j] {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0;
    border-bottom: 1px solid #f0f0f0;
}

.filter-tabs-row[b-in6khnc49j]::-webkit-scrollbar {
    display: none;
}

.ftab[b-in6khnc49j] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    border: none;
    background: none;
    font-size: 0.82rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    font-family: inherit;
    /* Override Bootstrap button defaults */
    border-radius: 0;
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
}

.ftab[b-in6khnc49j]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 16px;
    right: 16px;
    height: 2.5px;
    background: transparent;
    border-radius: 2px 2px 0 0;
    transition: all 0.2s;
}

.ftab.active[b-in6khnc49j] {
    color: var(--primary-blue, #0145b2);
    font-weight: 700;
}

.ftab.active[b-in6khnc49j]::after {
    background: var(--primary-blue, #0145b2);
}

.ftab:hover:not(.active)[b-in6khnc49j] {
    color: #334155;
}

.ftab i[b-in6khnc49j] {
    font-size: 0.78rem;
}

.ftab-icon[b-in6khnc49j] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
}

/* Filter Chips Row */
.filter-chips-row[b-in6khnc49j] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0 12px;
}

.filter-chips-row[b-in6khnc49j]::-webkit-scrollbar {
    display: none;
}

.fchip[b-in6khnc49j] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid #e5e7eb !important;
    background: #fff !important;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: inherit;
    /* Override Bootstrap/global button resets */
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.5;
}

.fchip i[b-in6khnc49j] {
    font-size: 0.72rem;
}

.fchip:hover[b-in6khnc49j] {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

/* Colored active states */
.chip-green.active[b-in6khnc49j] {
    background: #ecfdf5 !important;
    color: #059669;
    border-color: #6ee7b7 !important;
}

.chip-green.active i[b-in6khnc49j] {
    color: #10b981;
}

.chip-red.active[b-in6khnc49j] {
    background: #fef2f2 !important;
    color: #dc2626;
    border-color: #fca5a5 !important;
}

.chip-red.active i[b-in6khnc49j] {
    color: #ef4444;
}

.chip-orange.active[b-in6khnc49j] {
    background: #fffbeb !important;
    color: #d97706;
    border-color: #fcd34d !important;
}

.chip-orange.active i[b-in6khnc49j] {
    color: #f59e0b;
}

.chip-purple.active[b-in6khnc49j] {
    background: #faf5ff !important;
    color: #7c3aed;
    border-color: #c4b5fd !important;
}

.chip-purple.active i[b-in6khnc49j] {
    color: #8b5cf6;
}

.fchip-clear[b-in6khnc49j] {
    border-color: #fee2e2 !important;
    color: #ef4444;
    background: #fff5f5 !important;
}

.fchip-clear:hover[b-in6khnc49j] {
    background: #fef2f2 !important;
}

/* ==========================================
   MAIN CONTENT
   ========================================== */

.promo-main[b-in6khnc49j] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Results Bar */
.results-bar[b-in6khnc49j] {
    padding: 12px 0 6px;
}

.results-count[b-in6khnc49j] {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.results-count i[b-in6khnc49j] {
    color: #f59e0b;
    font-size: 0.78rem;
}

/* ==========================================
   PRODUCT CARDS
   ========================================== */

.product-list[b-in6khnc49j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 20px;
}

.pcard[b-in6khnc49j] {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.04);
    min-height: 0;
}

.pcard:hover[b-in6khnc49j] {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
    border-color: rgba(1, 69, 178, 0.15);
    color: inherit !important;
    text-decoration: none !important;
}

.pcard:active[b-in6khnc49j] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Card Image */
.pcard-img-wrap[b-in6khnc49j] {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8fafc;
}

.pcard-img-wrap img[b-in6khnc49j] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 0.4s;
}

.pcard:hover .pcard-img-wrap img[b-in6khnc49j] {
    transform: scale(1.05);
}

.pcard-badge-discount[b-in6khnc49j] {
    position: absolute;
    top: 10px;
    left: 0;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 10px 4px 8px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

/* Card Body */
.pcard-body[b-in6khnc49j] {
    flex: 1;
    min-width: 0;
    padding: 10px 0 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pcard-brand[b-in6khnc49j] {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 1px;
}

.pcard-name[b-in6khnc49j] {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    /* Override Bootstrap h3 sizing */
    margin-top: 0;
    margin-bottom: 4px;
}

/* Pricing */
.pcard-pricing[b-in6khnc49j] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}

.price-promo[b-in6khnc49j] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ef4444;
    letter-spacing: -0.3px;
}

.price-original[b-in6khnc49j] {
    font-size: 0.78rem;
    color: #cbd5e1;
    text-decoration: line-through;
}

.price-range[b-in6khnc49j] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ef4444;
}

/* Meta */
.pcard-meta[b-in6khnc49j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.meta-rating[b-in6khnc49j] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    color: #475569;
    font-weight: 600;
}

.meta-rating i[b-in6khnc49j] {
    color: #f59e0b;
    font-size: 0.62rem;
}

.meta-sold[b-in6khnc49j] {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
}

/* Arrow */
.pcard-arrow[b-in6khnc49j] {
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: #d1d5db;
    flex-shrink: 0;
    transition: color 0.2s;
}

.pcard:hover .pcard-arrow[b-in6khnc49j] {
    color: var(--primary-blue, #0145b2);
}

.pcard-arrow i[b-in6khnc49j] {
    font-size: 0.7rem;
}

/* ==========================================
   PROMOTION PILLS (Horizontal Scroll)
   ========================================== */

.pcard-pills[b-in6khnc49j] {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: auto;
    padding-top: 4px;
    padding-right: 8px;
}

.pcard-pills[b-in6khnc49j]::-webkit-scrollbar {
    display: none;
}

.pill[b-in6khnc49j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.pill:hover[b-in6khnc49j] {
    transform: scale(1.03);
}

.pill i[b-in6khnc49j] {
    font-size: 0.58rem;
}

.pill-label[b-in6khnc49j] {
    font-size: 0.7rem;
}

.pill-cond[b-in6khnc49j] {
    font-size: 0.6rem;
    opacity: 0.7;
    font-weight: 500;
}

/* Pill colors */
.pill-red[b-in6khnc49j] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.pill-red i[b-in6khnc49j] {
    color: #ef4444;
}

.pill-green[b-in6khnc49j] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.pill-green i[b-in6khnc49j] {
    color: #10b981;
}

.pill-purple[b-in6khnc49j] {
    background: #faf5ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.pill-purple i[b-in6khnc49j] {
    color: #8b5cf6;
}

.pill-amber[b-in6khnc49j] {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.pill-amber i[b-in6khnc49j] {
    color: #f59e0b;
}

.pill-blue[b-in6khnc49j] {
    background: var(--primary-blue-light, #eaf3ff);
    color: var(--primary-blue, #0145b2);
    border: 1px solid #bfdbfe;
}

.pill-blue i[b-in6khnc49j] {
    color: #0160d9;
}

/* ==========================================
   SKELETON LOADING
   ========================================== */

.skeleton-list[b-in6khnc49j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
}

.skel-card[b-in6khnc49j] {
    display: flex;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    min-height: 140px;
}

.skel-img[b-in6khnc49j] {
    width: 140px;
    min-width: 140px;
    height: auto;
}

.skel-body[b-in6khnc49j] {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skel-brand[b-in6khnc49j] {
    height: 10px;
    width: 60px;
}

.skel-name[b-in6khnc49j] {
    height: 14px;
    width: 75%;
}

.skel-name2[b-in6khnc49j] {
    height: 14px;
    width: 55%;
}

.skel-price[b-in6khnc49j] {
    height: 18px;
    width: 100px;
}

.skel-pills[b-in6khnc49j] {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.skel-pill[b-in6khnc49j] {
    height: 26px;
    width: 80px;
    border-radius: 8px;
}

.skel[b-in6khnc49j] {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer-b-in6khnc49j 1.5s ease-in-out infinite;
    border-radius: 6px;
}

@keyframes shimmer-b-in6khnc49j {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ==========================================
   EMPTY STATE
   ========================================== */

.empty-state[b-in6khnc49j] {
    text-align: center;
    padding: 60px 24px;
}

.empty-icon[b-in6khnc49j] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue-light, #eaf3ff), #d4e8ff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.empty-icon i[b-in6khnc49j] {
    font-size: 2rem;
    color: #93b8e8;
}

.empty-state h3[b-in6khnc49j] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #334155;
    margin: 0 0 8px;
}

.empty-state p[b-in6khnc49j] {
    font-size: 0.88rem;
    color: #94a3b8;
    margin: 0 0 28px;
}

.btn-reset[b-in6khnc49j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-blue, #0145b2), #012d7a);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    box-shadow: 0 4px 14px rgba(1, 69, 178, 0.3);
}

.btn-reset:hover[b-in6khnc49j] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(1, 69, 178, 0.4);
}

.btn-reset:active[b-in6khnc49j] {
    transform: translateY(0);
}

/* ==========================================
   TOAST
   ========================================== */

.promo-toast[b-in6khnc49j] {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 14px 24px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    z-index: 10000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: toastUp-b-in6khnc49j 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.promo-toast.success i[b-in6khnc49j] {
    color: #34d399;
}

.promo-toast.error[b-in6khnc49j] {
    background: #dc2626;
}

@keyframes toastUp-b-in6khnc49j {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.95);
    }

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

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 640px) {
    .promo-hero[b-in6khnc49j] {
        padding: 28px 16px 24px;
    }

    .hero-title[b-in6khnc49j] {
        font-size: 1.4rem;
    }

    .hero-subtitle[b-in6khnc49j] {
        font-size: 0.82rem;
    }

    .hero-search[b-in6khnc49j] {
        padding: 10px 14px;
        border-radius: 12px;
    }

    .stat-number[b-in6khnc49j] {
        font-size: 1.1rem;
    }

    .pcard-img-wrap[b-in6khnc49j] {
        width: 115px;
        min-width: 115px;
        max-width: 115px;
    }

    .pcard-body[b-in6khnc49j] {
        padding: 12px 0 12px 12px;
    }

    .pcard-name[b-in6khnc49j] {
        font-size: 0.85rem;
    }

    .price-promo[b-in6khnc49j] {
        font-size: 1rem;
    }

    .ftab[b-in6khnc49j] {
        padding: 10px 14px;
        font-size: 0.78rem;
    }

    .fchip[b-in6khnc49j] {
        padding: 6px 12px;
        font-size: 0.74rem;
    }

    .promo-toast[b-in6khnc49j] {
        left: 16px;
        right: 16px;
        transform: none;
        bottom: 90px;
    }

    @keyframes toastUp-b-in6khnc49j {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

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

@media (max-width: 400px) {
    .pcard-img-wrap[b-in6khnc49j] {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }

    .pcard-name[b-in6khnc49j] {
        font-size: 0.8rem;
    }

    .hero-title[b-in6khnc49j] {
        font-size: 1.2rem;
    }

    .hero-stats[b-in6khnc49j] {
        padding: 10px 4px;
    }

    .stat-number[b-in6khnc49j] {
        font-size: 1rem;
    }
}

/* Tablet+ : 2-column grid */
@media (min-width: 768px) {
    .promo-hero[b-in6khnc49j] {
        padding: 40px 32px 32px;
    }

    .hero-title[b-in6khnc49j] {
        font-size: 2rem;
    }

    .hero-subtitle[b-in6khnc49j] {
        font-size: 0.95rem;
    }

    .hero-search[b-in6khnc49j] {
        max-width: 520px;
        padding: 12px 20px;
    }

    .hero-stats[b-in6khnc49j] {
        max-width: 400px;
    }

    .stat-number[b-in6khnc49j] {
        font-size: 1.5rem;
    }

    .promo-filter-bar[b-in6khnc49j] {
        padding: 0 32px;
    }

    .ftab[b-in6khnc49j] {
        padding: 12px 20px;
        font-size: 0.85rem;
    }

    .fchip[b-in6khnc49j] {
        padding: 7px 14px;
        font-size: 0.8rem;
    }

    .promo-main[b-in6khnc49j] {
        padding: 0 24px;
    }

    /* 2-column product grid */
    .product-list[b-in6khnc49j] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .pcard-img-wrap[b-in6khnc49j] {
        width: 155px;
        min-width: 155px;
        max-width: 155px;
    }

    .pcard-body[b-in6khnc49j] {
        padding: 12px 0 12px 14px;
    }

    .pcard-name[b-in6khnc49j] {
        font-size: 0.9rem;
    }

    .price-promo[b-in6khnc49j] {
        font-size: 1.05rem;
    }

    .pill[b-in6khnc49j] {
        padding: 4px 10px;
    }

    .pill-label[b-in6khnc49j] {
        font-size: 0.72rem;
    }

    .meta-rating[b-in6khnc49j],
    .meta-sold[b-in6khnc49j] {
        font-size: 0.74rem;
    }

    /* Skeleton 2-column */
    .skeleton-list[b-in6khnc49j] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Large desktop: bigger cards, fill space */
@media (min-width: 1200px) {
    .promo-hero[b-in6khnc49j] {
        padding: 44px 40px 36px;
    }

    .hero-title[b-in6khnc49j] {
        font-size: 2.2rem;
    }

    .promo-main[b-in6khnc49j] {
        padding: 0 32px;
    }

    .product-list[b-in6khnc49j] {
        gap: 14px;
    }

    .pcard-img-wrap[b-in6khnc49j] {
        width: 170px;
        min-width: 170px;
        max-width: 170px;
    }

    .pcard-body[b-in6khnc49j] {
        padding: 14px 0 14px 16px;
    }

    .pcard-name[b-in6khnc49j] {
        font-size: 0.95rem;
    }

    .price-promo[b-in6khnc49j] {
        font-size: 1.15rem;
    }
}

/* Ultra-wide: 3-column grid */
@media (min-width: 1500px) {
    .product-list[b-in6khnc49j] {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .skeleton-list[b-in6khnc49j] {
        grid-template-columns: repeat(3, 1fr);
    }

    .pcard-img-wrap[b-in6khnc49j] {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
    }
}
/* /Components/Pages/Returns.razor.rz.scp.css */
/* Returns Page Styles - Matching Privacy/Terms Page Design */

/* Hero Section */
.hero-section[b-oxai40el85] {
    position: relative; overflow: hidden;
    background-image: linear-gradient(to bottom, var(--primary-blue) 0%, #0062ff4b 100%);
    padding: 80px 0; color: white; text-align: center;
}

.floating-bone[b-oxai40el85] { position: absolute; pointer-events: none; z-index: 1; }
.bone-1[b-oxai40el85] { top: 12%; left: 8%; width: 70px; animation: float1-b-oxai40el85 4s ease-in-out infinite; }
.bone-2[b-oxai40el85] { bottom: 18%; right: 10%; width: 90px; animation: float2-b-oxai40el85 5s ease-in-out infinite; }
.bone-3[b-oxai40el85] { top: 60%; left: 15%; width: 55px; opacity: 0.8; animation: float3-b-oxai40el85 4.5s ease-in-out infinite 0.5s; }
.bone-4[b-oxai40el85] { top: 25%; right: 18%; width: 65px; opacity: 0.75; animation: float4-b-oxai40el85 5.5s ease-in-out infinite 1s; }

@keyframes float1-b-oxai40el85 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(10deg)} }
@keyframes float2-b-oxai40el85 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-25px) rotate(-12deg)} }
@keyframes float3-b-oxai40el85 { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-15px) rotate(8deg)} }
@keyframes float4-b-oxai40el85 { 0%,100%{transform:translateY(0) rotate(10deg)} 50%{transform:translateY(-28px) rotate(15deg)} }

.hero-section .container[b-oxai40el85] { position: relative; z-index: 2; }
.section-tag[b-oxai40el85] { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; margin-bottom: 20px; background: rgba(255,255,255,0.15); }
.hero-section h1[b-oxai40el85] { font-size: 2.75rem; margin: 0 0 16px; font-weight: 700; color: #fde272; }
.hero-subtitle[b-oxai40el85] { font-size: 1.5rem; margin: 0 0 24px; opacity: 0.95; }
.hero-description[b-oxai40el85] { max-width: 700px; margin: 0 auto; font-size: 1.1rem; line-height: 1.7; opacity: 0.9; }

/* Content */
.content-section[b-oxai40el85] { padding: 60px 0; background: #fff; }
.content-section .container[b-oxai40el85] { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.legal-content[b-oxai40el85] { display: flex; flex-direction: column; gap: 40px; }

.legal-section[b-oxai40el85] {
    background: #fff; border-radius: 16px; padding: 32px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06); border: 1px solid #eee;
}
.legal-section.highlight-section[b-oxai40el85] {
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    border-color: var(--primary-yellow);
}
.legal-section h2[b-oxai40el85] {
    display: flex; align-items: center; gap: 16px;
    color: var(--primary-blue); font-size: 1.5rem;
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #eee;
}
.section-number[b-oxai40el85] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; background: var(--primary-blue);
    color: #fff; border-radius: 50%; font-size: 1rem; font-weight: 700; flex-shrink: 0;
}
.legal-section h3[b-oxai40el85] {
    display: flex; align-items: center; gap: 10px;
    color: #333; font-size: 1.1rem; margin: 24px 0 16px;
}
.legal-section h3 i[b-oxai40el85] { color: var(--primary-blue); }
.legal-section p[b-oxai40el85] { color: #555; line-height: 1.8; margin-bottom: 16px; }

/* Condition Cards */
.condition-grid[b-oxai40el85] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px; margin-bottom: 16px;
}

.condition-card[b-oxai40el85] {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 20px; border-radius: 12px; transition: transform 0.2s;
}
.condition-card:hover[b-oxai40el85] { transform: translateY(-2px); }

.condition-card.eligible[b-oxai40el85] {
    background: #e8f5e9; border: 1px solid #a5d6a7;
}
.condition-card.eligible i[b-oxai40el85] { color: #388e3c; font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }

.condition-card.ineligible[b-oxai40el85] {
    background: #fce4ec; border: 1px solid #ef9a9a;
}
.condition-card.ineligible i[b-oxai40el85] { color: #c62828; font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }

.condition-card strong[b-oxai40el85] { display: block; color: #333; margin-bottom: 4px; }
.condition-card p[b-oxai40el85] { margin: 0; font-size: 0.9rem; color: #666; line-height: 1.5; }

/* Process Steps */
.process-steps[b-oxai40el85] { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }

.process-step[b-oxai40el85] {
    display: flex; align-items: flex-start; gap: 20px;
    padding: 20px; background: #fff; border-radius: 12px;
    border: 1px solid #eee; transition: transform 0.2s;
}
.process-step:hover[b-oxai40el85] { transform: translateX(4px); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }

.process-step-num[b-oxai40el85] {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; background: var(--primary-blue);
    color: #fff; border-radius: 50%; font-weight: 700; flex-shrink: 0;
}

.process-step strong[b-oxai40el85] { display: block; color: var(--primary-blue); margin-bottom: 4px; }
.process-step p[b-oxai40el85] { margin: 0; color: #555; font-size: 0.95rem; line-height: 1.6; }

/* Refund Timeline */
.refund-timeline[b-oxai40el85] { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }

.refund-item[b-oxai40el85] {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 20px; background: #f8f9fa; border-radius: 12px;
}

.refund-icon[b-oxai40el85] {
    width: 48px; height: 48px; background: #cce5ff; color: #004085;
    border-radius: 12px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.refund-icon i[b-oxai40el85] { font-size: 1.2rem; }
.refund-item strong[b-oxai40el85] { display: block; color: #333; margin-bottom: 4px; }
.refund-item p[b-oxai40el85] { margin: 0; font-size: 0.9rem; color: #666; line-height: 1.6; }

/* Contact Info */
.contact-info[b-oxai40el85] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px; margin-top: 20px;
}
.contact-item[b-oxai40el85] {
    display: flex; align-items: center; gap: 16px;
    padding: 20px; background: #f8f9fa; border-radius: 12px;
}
.contact-item i[b-oxai40el85] { font-size: 1.5rem; color: var(--primary-blue); width: 24px; text-align: center; }
.contact-item strong[b-oxai40el85] { display: block; color: #666; font-size: 0.85rem; margin-bottom: 4px; }
.contact-item p[b-oxai40el85] { margin: 0; color: #333; font-weight: 500; }

/* Navigation */
.legal-nav[b-oxai40el85] {
    display: flex; justify-content: center; gap: 16px;
    margin-top: 40px; padding-top: 40px; border-top: 2px solid #eee; flex-wrap: wrap;
}
.nav-link[b-oxai40el85] {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 32px; background: var(--primary-blue); color: #fff;
    text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.2s;
}
.nav-link:hover[b-oxai40el85] {
    background: #1a4a7a; transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(29,78,137,0.3); color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section[b-oxai40el85] { padding: 80px 0 60px; }
    .hero-section h1[b-oxai40el85] { font-size: 2rem; }
    .hero-description[b-oxai40el85] { font-size: 1rem; }
    .floating-bone[b-oxai40el85] { opacity: 0.1; }
    .legal-section[b-oxai40el85] { padding: 24px; }
    .legal-section h2[b-oxai40el85] { font-size: 1.25rem; }
    .section-number[b-oxai40el85] { width: 32px; height: 32px; font-size: 0.85rem; }
    .condition-grid[b-oxai40el85] { grid-template-columns: 1fr; }
    .contact-info[b-oxai40el85] { grid-template-columns: 1fr; }
    .legal-nav[b-oxai40el85] { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
    .hero-section h1[b-oxai40el85] { font-size: 1.75rem; }
    .nav-link[b-oxai40el85] { padding: 14px 24px; font-size: 0.95rem; }
}
/* /Components/Pages/Shipping.razor.rz.scp.css */
/* Shipping Page Styles - Matching About/Privacy Page Design */

/* Hero Section */
.hero-section[b-f9c44cem1x] {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(to bottom, var(--primary-blue) 0%, #0062ff4b 100%);
    padding: 80px 0;
    color: white;
    text-align: center;
}

.floating-bone[b-f9c44cem1x] { position: absolute; pointer-events: none; z-index: 1; }
.bone-1[b-f9c44cem1x] { top: 12%; left: 8%; width: 70px; animation: float1-b-f9c44cem1x 4s ease-in-out infinite; }
.bone-2[b-f9c44cem1x] { bottom: 18%; right: 10%; width: 90px; animation: float2-b-f9c44cem1x 5s ease-in-out infinite; }
.bone-3[b-f9c44cem1x] { top: 60%; left: 15%; width: 55px; opacity: 0.8; animation: float3-b-f9c44cem1x 4.5s ease-in-out infinite 0.5s; }
.bone-4[b-f9c44cem1x] { top: 25%; right: 18%; width: 65px; opacity: 0.75; animation: float4-b-f9c44cem1x 5.5s ease-in-out infinite 1s; }

@keyframes float1-b-f9c44cem1x { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(10deg)} }
@keyframes float2-b-f9c44cem1x { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-25px) rotate(-12deg)} }
@keyframes float3-b-f9c44cem1x { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-15px) rotate(8deg)} }
@keyframes float4-b-f9c44cem1x { 0%,100%{transform:translateY(0) rotate(10deg)} 50%{transform:translateY(-28px) rotate(15deg)} }

.hero-section .container[b-f9c44cem1x] { position: relative; z-index: 2; }
.section-tag[b-f9c44cem1x] { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; margin-bottom: 20px; background: rgba(255,255,255,0.15); }
.hero-section h1[b-f9c44cem1x] { font-size: 2.75rem; margin: 0 0 16px; font-weight: 700; color: #fde272; }
.hero-subtitle[b-f9c44cem1x] { font-size: 1.5rem; margin: 0 0 24px; opacity: 0.95; }
.hero-description[b-f9c44cem1x] { max-width: 700px; margin: 0 auto; font-size: 1.1rem; line-height: 1.7; opacity: 0.9; }

/* Content */
.content-section[b-f9c44cem1x] { padding: 60px 0; background: #fff; }
.content-section .container[b-f9c44cem1x] { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.legal-content[b-f9c44cem1x] { display: flex; flex-direction: column; gap: 40px; }

.legal-section[b-f9c44cem1x] {
    background: #fff; border-radius: 16px; padding: 32px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06); border: 1px solid #eee;
}

.legal-section.highlight-section[b-f9c44cem1x] {
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    border-color: var(--primary-yellow);
}

.legal-section h2[b-f9c44cem1x] {
    display: flex; align-items: center; gap: 16px;
    color: var(--primary-blue); font-size: 1.5rem;
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #eee;
}

.section-number[b-f9c44cem1x] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; background: var(--primary-blue);
    color: #fff; border-radius: 50%; font-size: 1rem; flex-shrink: 0;
}

.legal-section p[b-f9c44cem1x] { color: #555; line-height: 1.8; margin-bottom: 16px; }
.legal-section ul[b-f9c44cem1x] { padding-left: 20px; margin-bottom: 16px; }
.legal-section ul li[b-f9c44cem1x] { color: #555; line-height: 1.8; margin-bottom: 8px; }
.legal-section ul li[b-f9c44cem1x]::marker { color: var(--primary-blue); }

/* Area Grid */
.area-grid[b-f9c44cem1x] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px; margin: 20px 0;
}

.area-card[b-f9c44cem1x] {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; background: #fff; border-radius: 12px;
    border: 1px solid #eee; transition: transform 0.2s;
}
.area-card:hover[b-f9c44cem1x] { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.area-card i[b-f9c44cem1x] { font-size: 1.2rem; color: var(--primary-blue); }
.area-card strong[b-f9c44cem1x] { display: block; color: #333; font-size: 0.95rem; }
.area-card span[b-f9c44cem1x] { font-size: 0.85rem; color: #666; }

/* Shipping Info Grid */
.shipping-info-grid[b-f9c44cem1x] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px; margin: 20px 0;
}

.shipping-info-card[b-f9c44cem1x] {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 20px; background: #f8f9fa; border-radius: 12px;
}

.shipping-info-icon[b-f9c44cem1x] {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.shipping-info-icon.standard[b-f9c44cem1x] { background: #cce5ff; color: #004085; }
.shipping-info-icon.express[b-f9c44cem1x] { background: #fff3cd; color: #856404; }
.shipping-info-icon i[b-f9c44cem1x] { font-size: 1.2rem; }

.shipping-info-card strong[b-f9c44cem1x] { display: block; color: #333; margin-bottom: 4px; }
.shipping-info-card p[b-f9c44cem1x] { margin: 0 0 4px; font-size: 0.9rem; color: #666; }
.shipping-price[b-f9c44cem1x] { font-size: 0.85rem; color: #999; font-style: italic; }

/* Method Cards */
.method-cards[b-f9c44cem1x] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px; margin-top: 24px;
}

.method-card[b-f9c44cem1x] {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08); border: 1px solid #eee;
    transition: transform 0.2s;
}
.method-card:hover[b-f9c44cem1x] { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }

.method-header[b-f9c44cem1x] {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; color: #fff;
}
.method-header.delivery[b-f9c44cem1x] { background: linear-gradient(135deg, var(--primary-blue), #1a6dd4); }
.method-header.drivethru[b-f9c44cem1x] { background: linear-gradient(135deg, #e67e22, #f39c12); }
.method-header.locker[b-f9c44cem1x] { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.method-header i[b-f9c44cem1x] { font-size: 1.3rem; }
.method-header h4[b-f9c44cem1x] { margin: 0; font-size: 1.1rem; }

.method-body[b-f9c44cem1x] { padding: 20px; }
.method-body p[b-f9c44cem1x] { margin-bottom: 12px; }
.method-body ul[b-f9c44cem1x] { padding-left: 18px; margin-bottom: 16px; }
.method-body ul li[b-f9c44cem1x] { font-size: 0.9rem; margin-bottom: 6px; color: #555; }

.method-link[b-f9c44cem1x] {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--primary-blue); font-size: 0.9rem;
    text-decoration: none; font-weight: 600;
}
.method-link:hover[b-f9c44cem1x] { text-decoration: underline; }

/* Info & Success Boxes */
.info-box[b-f9c44cem1x], .success-box[b-f9c44cem1x] {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 20px; border-radius: 12px; margin-top: 20px;
}
.info-box[b-f9c44cem1x] { background: #e3f2fd; border: 1px solid #90caf9; }
.info-box i[b-f9c44cem1x] { color: #1976d2; font-size: 1.3rem; flex-shrink: 0; }
.info-box p[b-f9c44cem1x] { margin: 0; color: #0d47a1; line-height: 1.6; }
.success-box[b-f9c44cem1x] { background: #e8f5e9; border: 1px solid #a5d6a7; }
.success-box i[b-f9c44cem1x] { color: #388e3c; font-size: 1.3rem; flex-shrink: 0; }
.success-box p[b-f9c44cem1x] { margin: 0; color: #1b5e20; line-height: 1.6; }

/* Navigation */
.legal-nav[b-f9c44cem1x] {
    display: flex; justify-content: center; gap: 16px;
    margin-top: 40px; padding-top: 40px; border-top: 2px solid #eee;
    flex-wrap: wrap;
}

.nav-link[b-f9c44cem1x] {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 32px; background: var(--primary-blue); color: #fff;
    text-decoration: none; border-radius: 50px; font-weight: 600;
    transition: all 0.2s;
}
.nav-link:hover[b-f9c44cem1x] {
    background: #1a4a7a; transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(29,78,137,0.3); color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section[b-f9c44cem1x] { padding: 80px 0 60px; }
    .hero-section h1[b-f9c44cem1x] { font-size: 2rem; }
    .hero-description[b-f9c44cem1x] { font-size: 1rem; }
    .floating-bone[b-f9c44cem1x] { opacity: 0.1; }
    .legal-section[b-f9c44cem1x] { padding: 24px; }
    .legal-section h2[b-f9c44cem1x] { font-size: 1.25rem; }
    .section-number[b-f9c44cem1x] { width: 32px; height: 32px; font-size: 0.85rem; }
    .area-grid[b-f9c44cem1x] { grid-template-columns: 1fr 1fr; }
    .shipping-info-grid[b-f9c44cem1x], .method-cards[b-f9c44cem1x] { grid-template-columns: 1fr; }
    .legal-nav[b-f9c44cem1x] { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
    .hero-section h1[b-f9c44cem1x] { font-size: 1.75rem; }
    .area-grid[b-f9c44cem1x] { grid-template-columns: 1fr; }
    .nav-link[b-f9c44cem1x] { padding: 14px 24px; font-size: 0.95rem; }
}
/* /Components/Pages/TermsOfService.razor.rz.scp.css */
/* Terms of Service Page Styles - Matching About Page Design */

.terms-page[b-nnavjoxelf] {
    background: #f5f7fa;
    min-height: 100vh;
}

/* Hero Section - Same as About Page */
.hero-section[b-nnavjoxelf] {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(to bottom, var(--primary-blue) 0%, #0062ff4b 100%), url('/images/about-header-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
    color: white;
    text-align: center;
}

/* Floating Bone Animations - Same as About Page */
.floating-bone[b-nnavjoxelf] {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.bone-1[b-nnavjoxelf] {
    top: 12%;
    left: 8%;
    width: 70px;
    animation: float1-b-nnavjoxelf 4s ease-in-out infinite;
}

.bone-2[b-nnavjoxelf] {
    bottom: 18%;
    right: 10%;
    width: 90px;
    animation: float2-b-nnavjoxelf 5s ease-in-out infinite;
}

.bone-3[b-nnavjoxelf] {
    top: 60%;
    left: 15%;
    width: 55px;
    opacity: 0.8;
    animation: float3-b-nnavjoxelf 4.5s ease-in-out infinite 0.5s;
}

.bone-4[b-nnavjoxelf] {
    top: 25%;
    right: 18%;
    width: 65px;
    opacity: 0.75;
    animation: float4-b-nnavjoxelf 5.5s ease-in-out infinite 1s;
}

@keyframes float1-b-nnavjoxelf {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    25% { transform: translateY(-12px) translateX(5px) rotate(5deg); }
    50% { transform: translateY(-20px) translateX(0) rotate(10deg); }
    75% { transform: translateY(-8px) translateX(-5px) rotate(3deg); }
}

@keyframes float2-b-nnavjoxelf {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    33% { transform: translateY(-18px) translateX(-8px) rotate(-8deg); }
    66% { transform: translateY(-25px) translateX(5px) rotate(-12deg); }
}

@keyframes float3-b-nnavjoxelf {
    0%, 100% { transform: translateY(0) translateX(0) rotate(-5deg); }
    40% { transform: translateY(-15px) translateX(10px) rotate(8deg); }
    80% { transform: translateY(-22px) translateX(-5px) rotate(0deg); }
}

@keyframes float4-b-nnavjoxelf {
    0%, 100% { transform: translateY(0) translateX(0) rotate(10deg); }
    30% { transform: translateY(-10px) translateX(-10px) rotate(-5deg); }
    60% { transform: translateY(-28px) translateX(8px) rotate(15deg); }
    85% { transform: translateY(-12px) translateX(-3px) rotate(5deg); }
}

.hero-section .container[b-nnavjoxelf] {
    position: relative;
    z-index: 2;
}

.section-tag[b-nnavjoxelf] {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.15);
}

.hero-section h1[b-nnavjoxelf] {
    font-size: 2.75rem;
    margin: 0 0 16px;
    font-weight: 700;
    color: #fde272;
}

.hero-subtitle[b-nnavjoxelf] {
    font-size: 1.25rem;
    margin: 0 0 24px;
    opacity: 0.95;
}

.hero-subtitle strong[b-nnavjoxelf] {
    color: #ffd700;
}

.hero-description[b-nnavjoxelf] {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.9;
}

/* Table of Contents Section */
.toc-section[b-nnavjoxelf] {
    background: white;
    padding: 60px 0;
    margin-top: -40px;
    border-radius: 40px 40px 0 0;
    position: relative;
    z-index: 3;
}

.toc-card[b-nnavjoxelf] {
    max-width: 900px;
    margin: 0 auto;
}

.toc-card h3[b-nnavjoxelf] {
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.toc-list[b-nnavjoxelf] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.toc-list li a[b-nnavjoxelf] {
    display: block;
    padding: 14px 20px;
    background: #f8fafc;
    border-radius: 12px;
    color: #4a5568;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    text-decoration: none;
    border-left: 4px solid transparent;
}

.toc-list li a:hover[b-nnavjoxelf] {
    background: #e8f4fd;
    color: var(--primary-blue);
    border-left-color: var(--primary-blue);
    transform: translateX(4px);
}

/* Content Section */
.content-section[b-nnavjoxelf] {
    padding: 60px 0 80px;
}

.legal-content[b-nnavjoxelf] {
    max-width: 900px;
    margin: 0 auto;
}

/* Legal Sections */
.legal-section[b-nnavjoxelf] {
    background: white;
    border-radius: 20px;
    padding: 36px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.legal-section.highlight-section[b-nnavjoxelf] {
    border: 2px solid var(--primary-blue);
    background: linear-gradient(135deg, #f8fafc 0%, #e8f4fd 100%);
}

.legal-section h2[b-nnavjoxelf] {
    font-size: 1.5rem;
    color: #1a365d;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 700;
}

.section-number[b-nnavjoxelf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary-blue);
    color: white;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.legal-section h3[b-nnavjoxelf] {
    font-size: 1.15rem;
    color: #2d3748;
    margin: 28px 0 14px;
    font-weight: 600;
}

.legal-section p[b-nnavjoxelf] {
    color: #4a5568;
    line-height: 1.9;
    margin: 0 0 16px;
    font-size: 1.05rem;
}

.legal-section ul[b-nnavjoxelf], .legal-section ol[b-nnavjoxelf] {
    margin: 0 0 20px;
    padding-left: 28px;
    color: #4a5568;
}

.legal-section li[b-nnavjoxelf] {
    margin-bottom: 12px;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Definition List */
.definition-list[b-nnavjoxelf] {
    list-style: none;
    padding: 0;
}

.definition-list li[b-nnavjoxelf] {
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 12px;
    border-left: 4px solid var(--primary-blue);
}

.definition-list strong[b-nnavjoxelf] {
    color: var(--primary-blue);
    font-weight: 600;
}

/* Payment Methods Display */
.payment-methods[b-nnavjoxelf] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0;
}

.method-item[b-nnavjoxelf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f7ff 100%);
    border-radius: 14px;
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 1rem;
}

.method-item i[b-nnavjoxelf] {
    font-size: 1.5rem;
}

/* Social Providers Display */
.social-providers[b-nnavjoxelf] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0;
}

.provider-item[b-nnavjoxelf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    font-weight: 600;
    color: #2d3748;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.provider-item:hover[b-nnavjoxelf] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.provider-item i[b-nnavjoxelf] {
    font-size: 1.75rem;
}

.provider-item.google i[b-nnavjoxelf] { color: #4285F4; }
.provider-item.facebook i[b-nnavjoxelf] { color: #1877F2; }
.provider-item.line i[b-nnavjoxelf] { color: #00B900; }

/* Info & Warning Boxes */
.info-box[b-nnavjoxelf], .warning-box[b-nnavjoxelf] {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 14px;
    margin: 24px 0;
    align-items: flex-start;
}

.info-box[b-nnavjoxelf] {
    background: linear-gradient(135deg, #e8f4fd 0%, #d4e8f9 100%);
    border-left: 4px solid #3182ce;
}

.info-box i[b-nnavjoxelf] {
    color: #3182ce;
    font-size: 1.5rem;
    margin-top: 2px;
}

.info-box p[b-nnavjoxelf] {
    margin: 0;
    color: #2b6cb0;
    font-size: 1rem;
}

.warning-box[b-nnavjoxelf] {
    background: linear-gradient(135deg, #fef3cd 0%, #fce8a6 100%);
    border-left: 4px solid #f6ad55;
}

.warning-box i[b-nnavjoxelf] {
    color: #dd6b20;
    font-size: 1.5rem;
    margin-top: 2px;
}

.warning-box p[b-nnavjoxelf] {
    margin: 0;
    color: #975a16;
    font-size: 1rem;
}

/* Contact Info */
.contact-info[b-nnavjoxelf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.contact-item[b-nnavjoxelf] {
    display: flex;
    gap: 18px;
    padding: 24px;
    background: #f8fafc;
    border-radius: 16px;
    transition: all 0.2s ease;
}

.contact-item:hover[b-nnavjoxelf] {
    background: #e8f4fd;
    transform: translateY(-2px);
}

.contact-item i[b-nnavjoxelf] {
    font-size: 1.75rem;
    color: var(--primary-blue);
    margin-top: 2px;
}

.contact-item strong[b-nnavjoxelf] {
    display: block;
    color: #1a365d;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 1rem;
}

.contact-item p[b-nnavjoxelf] {
    margin: 0;
    color: #718096;
    font-size: 0.95rem;
}

/* Legal Navigation */
.legal-nav[b-nnavjoxelf] {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.legal-nav .nav-link[b-nnavjoxelf] {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 36px;
    background: var(--primary-blue);
    color: white;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.legal-nav .nav-link:hover[b-nnavjoxelf] {
    background: #1e5bb5;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 91, 181, 0.35);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section[b-nnavjoxelf] {
        padding: 60px 0;
    }

    .hero-section h1[b-nnavjoxelf] {
        font-size: 2rem;
    }

    .hero-subtitle[b-nnavjoxelf] {
        font-size: 1rem;
    }

    .toc-section[b-nnavjoxelf] {
        padding: 40px 20px;
        margin-top: -20px;
    }

    .toc-list[b-nnavjoxelf] {
        grid-template-columns: 1fr;
    }

    .content-section[b-nnavjoxelf] {
        padding: 40px 16px;
    }

    .legal-section[b-nnavjoxelf] {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .legal-section h2[b-nnavjoxelf] {
        font-size: 1.25rem;
    }

    .section-number[b-nnavjoxelf] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .payment-methods[b-nnavjoxelf], .social-providers[b-nnavjoxelf] {
        flex-direction: column;
    }

    .contact-info[b-nnavjoxelf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/AccountSidebar.razor.rz.scp.css */
.account-sidebar[b-r3p59m62pk] {
    padding: 24px;
}

/* User Info Section */
.user-info[b-r3p59m62pk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 16px;
}

.user-avatar[b-r3p59m62pk] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar img[b-r3p59m62pk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-loading[b-r3p59m62pk] {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-r3p59m62pk 1.5s infinite;
    border-radius: 50%;
}

@keyframes shimmer-b-r3p59m62pk {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.user-details h3[b-r3p59m62pk] {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.user-details p[b-r3p59m62pk] {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Navigation */
.account-nav[b-r3p59m62pk] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Nav Toggle Button (My Account section) */
.nav-toggle[b-r3p59m62pk] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #1a1a1a;
    text-align: left;
}

.nav-toggle:hover[b-r3p59m62pk] {
    color: #333;
}

.nav-toggle .nav-icon[b-r3p59m62pk] {
    width: 32px;
    font-size: 20px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nav-toggle .nav-text[b-r3p59m62pk] {
    flex: 1;
    font-weight: 500;
}

.nav-toggle .arrow[b-r3p59m62pk] {
    color: #999;
    font-size: 12px;
}

/* Submenu */
.nav-submenu[b-r3p59m62pk] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-submenu li a[b-r3p59m62pk] {
    display: block;
    border-radius: 10px;
    padding: 8px 0 8px 32px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.2s ease;
}

.nav-submenu li a:hover[b-r3p59m62pk] {
    color: #1a1a1a;
}

.nav-submenu li.active a[b-r3p59m62pk] {
    background-color: var(--primary-blue-light, #eaf3ff);
    margin: 0 -24px;
    padding-left: 56px;
    padding-right: 24px;
}

/* Nav Links */
.nav-link[b-r3p59m62pk] {
    display: flex;
    align-items: center;
    padding: 10px 0;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

.nav-link:last-child[b-r3p59m62pk] {
    border-bottom: none;
}

.nav-link:hover[b-r3p59m62pk] {
    color: #333;
}

.nav-link.active[b-r3p59m62pk] {
    background-color: var(--primary-blue-light, #eaf3ff);
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
}

.nav-link .nav-icon[b-r3p59m62pk] {
    width: 32px;
    font-size: 20px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nav-link .nav-text[b-r3p59m62pk] {
    font-weight: 500;
}

/* Icon Colors */
.nav-icon i[b-r3p59m62pk] {
    color: #555;
}

/* Responsive - Hide sidebar on mobile (bottom nav is used instead) */
@media (max-width: 900px) {
    .account-sidebar[b-r3p59m62pk] {
        display: none;
    }
}

@media (max-width: 768px) {
    .account-sidebar[b-r3p59m62pk] {
        padding: 16px;
    }

    .user-avatar[b-r3p59m62pk] {
        width: 56px;
        height: 56px;
    }

    .user-details h3[b-r3p59m62pk] {
        font-size: 16px;
    }

    .nav-submenu li.active a[b-r3p59m62pk] {
        margin: 0 -16px;
        padding-left: 48px;
        padding-right: 16px;
    }

    .nav-link.active[b-r3p59m62pk] {
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* /Components/Shared/CameraSearchModal.razor.rz.scp.css */
/* Camera Search Modal Styles */

.camera-modal-overlay[b-qygx5be0eu] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gray-900);
    z-index: 10000;
    animation: fadeIn-b-qygx5be0eu 0.3s ease;
    overflow: hidden;
}

@keyframes fadeIn-b-qygx5be0eu {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =====================
   Intro/Tutorial Screen
   ===================== */
.intro-screen[b-qygx5be0eu] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    padding-top: 60px;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.intro-screen[b-qygx5be0eu]::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.intro-close[b-qygx5be0eu] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.intro-close:hover[b-qygx5be0eu] {
    background: rgba(255, 255, 255, 0.2);
}

.intro-content[b-qygx5be0eu] {
    max-width: 360px;
    width: 100%;
}

.intro-icon[b-qygx5be0eu] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0156d4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 2.5rem;
    animation: pulse-b-qygx5be0eu 2s ease-in-out infinite;
}

@keyframes pulse-b-qygx5be0eu {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(1, 69, 178, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(1, 69, 178, 0);
    }
}

.intro-content h2[b-qygx5be0eu] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.intro-subtitle[b-qygx5be0eu] {
    color: var(--gray-400);
    font-size: 0.95rem;
    margin-bottom: 32px;
}

.intro-steps[b-qygx5be0eu] {
    text-align: left;
    margin-bottom: 24px;
}

.intro-step[b-qygx5be0eu] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}

.step-icon[b-qygx5be0eu] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(1, 69, 178, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary-blue);
    flex-shrink: 0;
}

.step-content h4[b-qygx5be0eu] {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.step-content p[b-qygx5be0eu] {
    font-size: 0.85rem;
    color: var(--gray-400);
    margin: 0;
}

.intro-tip[b-qygx5be0eu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 193, 7, 0.15);
    border-radius: var(--radius-md);
    color: #ffc107;
    font-size: 0.85rem;
    margin-bottom: 24px;
}

.intro-tip i[b-qygx5be0eu] {
    font-size: 1rem;
}

.btn-start-scan[b-qygx5be0eu] {
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0156d4 100%);
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-start-scan:hover[b-qygx5be0eu] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(1, 69, 178, 0.4);
}

.btn-skip-intro[b-qygx5be0eu] {
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 8px 16px;
}

.btn-skip-intro:hover[b-qygx5be0eu] {
    color: var(--gray-300);
}

/* =====================
   Scanner Screen
   ===================== */
.scanner-screen[b-qygx5be0eu] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.scanner-header[b-qygx5be0eu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
}

.scanner-header h2[b-qygx5be0eu] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.back-btn[b-qygx5be0eu],
.flash-btn[b-qygx5be0eu] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.back-btn:hover[b-qygx5be0eu],
.flash-btn:hover[b-qygx5be0eu] {
    background: rgba(255, 255, 255, 0.2);
}

.flash-btn.active[b-qygx5be0eu] {
    background: #ffc107;
    color: var(--gray-900);
}

/* Scanner Viewport */
.scanner-viewport[b-qygx5be0eu] {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
}

#camera-preview[b-qygx5be0eu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scan-overlay[b-qygx5be0eu] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6) 0%,
        transparent 25%,
        transparent 75%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

.scan-frame[b-qygx5be0eu] {
    width: 280px;
    height: 180px;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
}

.corner[b-qygx5be0eu] {
    position: absolute;
    width: 30px;
    height: 30px;
    border-color: var(--primary-blue);
    border-style: solid;
    border-width: 0;
}

.corner.top-left[b-qygx5be0eu] {
    top: -2px;
    left: -2px;
    border-top-width: 4px;
    border-left-width: 4px;
    border-top-left-radius: var(--radius-lg);
}

.corner.top-right[b-qygx5be0eu] {
    top: -2px;
    right: -2px;
    border-top-width: 4px;
    border-right-width: 4px;
    border-top-right-radius: var(--radius-lg);
}

.corner.bottom-left[b-qygx5be0eu] {
    bottom: -2px;
    left: -2px;
    border-bottom-width: 4px;
    border-left-width: 4px;
    border-bottom-left-radius: var(--radius-lg);
}

.corner.bottom-right[b-qygx5be0eu] {
    bottom: -2px;
    right: -2px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-bottom-right-radius: var(--radius-lg);
}

.scan-line[b-qygx5be0eu] {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 50%, transparent 100%);
    border-radius: 2px;
    opacity: 0;
}

.scan-line.scanning[b-qygx5be0eu] {
    opacity: 1;
    animation: scanMove-b-qygx5be0eu 2s ease-in-out infinite;
}

@keyframes scanMove-b-qygx5be0eu {
    0%, 100% {
        top: 10px;
    }
    50% {
        top: calc(100% - 13px);
    }
}

.scan-status[b-qygx5be0eu] {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Error Message */
.scanner-error[b-qygx5be0eu] {
    padding: 12px 16px;
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

/* Scanned Result */
.scanned-result[b-qygx5be0eu] {
    padding: 16px;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
}

.result-product[b-qygx5be0eu] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.result-product img[b-qygx5be0eu] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--gray-100);
}

.result-info[b-qygx5be0eu] {
    flex: 1;
    min-width: 0;
}

.result-info h4[b-qygx5be0eu] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-sku[b-qygx5be0eu] {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin: 0 0 4px;
}

.result-price[b-qygx5be0eu] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-orange);
    margin: 0;
}

.btn-view-product[b-qygx5be0eu] {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--primary-blue);
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.btn-view-product:hover[b-qygx5be0eu] {
    background: #0156d4;
}

/* Manual Entry Section */
.scanner-actions[b-qygx5be0eu] {
    padding: 16px;
    background: var(--gray-100);
}

.manual-entry[b-qygx5be0eu] {
    text-align: center;
}

.manual-entry > p[b-qygx5be0eu] {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin: 0 0 12px;
}

.manual-input-group[b-qygx5be0eu] {
    display: flex;
    gap: 8px;
}

.manual-input-group input[b-qygx5be0eu] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--white);
}

.manual-input-group input:focus[b-qygx5be0eu] {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(1, 69, 178, 0.1);
}

.manual-input-group button[b-qygx5be0eu] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--primary-blue);
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.manual-input-group button:hover:not(:disabled)[b-qygx5be0eu] {
    background: #0156d4;
}

.manual-input-group button:disabled[b-qygx5be0eu] {
    background: var(--gray-300);
    cursor: not-allowed;
}
/* /Components/Shared/FloatingActions.razor.rz.scp.css */
/* Floating Action Buttons - Mobile Only */

.fab-container[b-is2i8u307z] {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 16px;
    z-index: 1002; /* Above bottom-nav (1001) but below mobile-nav-backdrop (1999) */
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: auto;
}

@media (max-width: 992px) {
    .fab-container[b-is2i8u307z] {
        display: flex;
        bottom: 220px;
    }
}

/* Points Badge */
.fab-points-badge[b-is2i8u307z] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    color: #8b4513;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    animation: pointsGlow-b-is2i8u307z 2s ease-in-out infinite;
}

.fab-points-badge i[b-is2i8u307z] {
    font-size: 0.9rem;
}

@keyframes pointsGlow-b-is2i8u307z {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(255, 215, 0, 0.6);
    }
}

/* FAB Buttons */
.fab[b-is2i8u307z] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    -webkit-tap-highlight-color: transparent;
}

/* Fix FontAwesome icons inside FABs - prevent CSS isolation from breaking them */
.fab[b-is2i8u307z]  i,
.fab i[b-is2i8u307z] {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', FontAwesome !important;
    font-weight: 900;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
    line-height: 1;
}

.fab:active[b-is2i8u307z] {
    transform: scale(0.95);
}

/* Camera FAB */
.fab-camera[b-is2i8u307z] {
    background: var(--white);
    color: var(--primary-blue);
    border: 2px solid var(--gray-200);
}

.fab-camera:hover[b-is2i8u307z] {
    background: var(--gray-50);
}

/* Animation for FABs appearing */
@keyframes fabBounceIn-b-is2i8u307z {
    0% {
        opacity: 0;
        transform: scale(0) translateY(20px);
    }
    60% {
        transform: scale(1.1) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.fab-container .fab[b-is2i8u307z] {
    animation: fabBounceIn-b-is2i8u307z 0.4s ease-out backwards;
}

.fab-container .fab-camera[b-is2i8u307z] {
    animation-delay: 0.1s;
}

.fab-container .fab-points-badge[b-is2i8u307z] {
    animation: fabBounceIn-b-is2i8u307z 0.4s ease-out backwards;
    animation-delay: 0.2s;
}

/* /Components/Shared/MascotBanner.razor.rz.scp.css */
.mascot-banner-card[b-49f4sx4cca] {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.mascot-banner-content[b-49f4sx4cca] {
    flex: 1;
    z-index: 2;
}

.mascot-banner-title[b-49f4sx4cca] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--bs-heading-color);
}

.mascot-banner-text[b-49f4sx4cca] {
    font-size: 1rem;
    color: var(--bs-body-color);
    margin-bottom: 1rem;
    opacity: 0.9;
}

.mascot-banner-btn[b-49f4sx4cca] {
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
}

.mascot-banner-img-container[b-49f4sx4cca] {
    flex: 0 0 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.mascot-banner-img[b-49f4sx4cca] {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.floating-animation[b-49f4sx4cca] {
    animation: float-b-49f4sx4cca 5s ease-in-out infinite;
}

@keyframes float-b-49f4sx4cca {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Background decorative element */
.mascot-banner-card[b-49f4sx4cca]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 1;
}

@media (max-width: 768px) {
    .mascot-banner-card[b-49f4sx4cca] {
        flex-direction: column-reverse;
        text-align: center;
        padding: 1.5rem;
    }
    
    .mascot-banner-img-container[b-49f4sx4cca] {
        margin-bottom: 1rem;
        flex: 0 0 120px;
    }
}
/* /Components/Shared/MascotEmptyState.razor.rz.scp.css */
.mascot-empty-state[b-u3fb1q7lmf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.mascot-img[b-u3fb1q7lmf] {
    max-width: 200px;
    height: auto;
    margin-bottom: 1.5rem;
    object-fit: contain;
}

.mascot-title[b-u3fb1q7lmf] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-gray-800);
    margin-bottom: 0.5rem;
}

.mascot-description[b-u3fb1q7lmf] {
    font-size: 0.9rem;
    color: var(--bs-gray-600);
    max-width: 400px;
}

.floating-animation[b-u3fb1q7lmf] {
    animation: float-b-u3fb1q7lmf 4s ease-in-out infinite;
}

@keyframes float-b-u3fb1q7lmf {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
/* /Components/Shared/MascotHelper.razor.rz.scp.css */
/* ==========================================
   MascotHelper - Floating Chat Mascot Widget
   ========================================== */

/* Container */
.mascot-helper-container[b-zmtr3rby8m] {
    position: fixed;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom: 30px;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mascot-helper-container.visible[b-zmtr3rby8m] {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.mascot-helper-container.hidden[b-zmtr3rby8m] {
    opacity: 0;
    transform: translateY(40px) scale(0.6);
    pointer-events: none;
}

/* Exit animation */
.mascot-helper-container.dismissing[b-zmtr3rby8m] {
    animation: mascotDismiss-b-zmtr3rby8m 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes mascotDismiss-b-zmtr3rby8m {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    30% {
        transform: translateY(-15px) scale(1.08) rotate(-3deg);
    }
    100% {
        opacity: 0;
        transform: translateY(80px) scale(0.3) rotate(12deg);
        filter: blur(4px);
    }
}

/* Position variants */
.mascot-helper-container.bottom-right[b-zmtr3rby8m] {
    right: 24px;
    align-items: flex-end;
}

.mascot-helper-container.bottom-left[b-zmtr3rby8m] {
    left: 24px;
    align-items: flex-start;
}


/* ==========================================
   Speech Bubble
   ========================================== */
.speech-bubble[b-zmtr3rby8m] {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    border-radius: 16px;
    padding: 16px 18px 12px;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
    max-width: 220px;
    min-width: 180px;
    border: 1px solid rgba(1, 69, 178, 0.08);
    animation: bubbleIn-b-zmtr3rby8m 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.speech-bubble.dismissing[b-zmtr3rby8m] {
    animation: bubbleDismiss-b-zmtr3rby8m 0.35s ease-in forwards;
}

@keyframes bubbleIn-b-zmtr3rby8m {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(12px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes bubbleDismiss-b-zmtr3rby8m {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.7) translateY(12px);
    }
}

/* Speech bubble arrow */
.speech-bubble[b-zmtr3rby8m]::after {
    content: '';
    position: absolute;
    bottom: -8px;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #f8f9ff 0%, #f8f9ff 100%);
    transform: rotate(45deg);
    border-right: 1px solid rgba(1, 69, 178, 0.08);
    border-bottom: 1px solid rgba(1, 69, 178, 0.08);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.04);
}

.bottom-right .speech-bubble[b-zmtr3rby8m]::after {
    right: 28px;
}

.bottom-left .speech-bubble[b-zmtr3rby8m]::after {
    left: 28px;
}

/* Bubble content */
.bubble-content[b-zmtr3rby8m] {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 10px;
}

/* Chat CTA button inside bubble */
.bubble-action[b-zmtr3rby8m] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--primary-blue, #0145b2) 0%, #0256d4 100%);
    color: white;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 3px 10px rgba(1, 69, 178, 0.25);
}

.bubble-action:hover[b-zmtr3rby8m] {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(1, 69, 178, 0.35);
    background: linear-gradient(135deg, #0256d4 0%, #0367f5 100%);
}

.bubble-action:active[b-zmtr3rby8m] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(1, 69, 178, 0.2);
}

.bubble-action i[b-zmtr3rby8m] {
    font-size: 0.9rem;
}

/* ==========================================
   Close Buttons
   ========================================== */

/* Bubble close button */
.bubble-close-btn[b-zmtr3rby8m] {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.3);
    transition: all 0.2s ease;
    z-index: 2;
    line-height: 1;
    padding: 0;
}

.bubble-close-btn:hover[b-zmtr3rby8m] {
    background: #dc2626;
    transform: scale(1.15);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

.bubble-close-btn:active[b-zmtr3rby8m] {
    transform: scale(0.95);
}

/* Mascot close button (hover-reveal) */
.mascot-close-btn[b-zmtr3rby8m] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(100, 100, 100, 0.8);
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
    z-index: 3;
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    padding: 0;
    line-height: 1;
}

.mascot-close-btn.show[b-zmtr3rby8m] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.mascot-close-btn:hover[b-zmtr3rby8m] {
    background: #ef4444;
    transform: scale(1.15);
}


/* ==========================================
   Mascot Image / Video
   ========================================== */
.mascot-helper-img-container[b-zmtr3rby8m] {
    position: relative;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mascot-helper-img-container:hover[b-zmtr3rby8m] {
    transform: scale(1.08);
}

.mascot-helper-img-container:active[b-zmtr3rby8m] {
    transform: scale(0.95);
}

.mascot-helper-img[b-zmtr3rby8m] {
    width: 130px;
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
    background: transparent;
    object-fit: contain;
    border-radius: 50%;
}

.wiggle[b-zmtr3rby8m] {
    animation: wiggle-b-zmtr3rby8m 0.5s ease-in-out;
}

@keyframes wiggle-b-zmtr3rby8m {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-5deg); }
}


/* ==========================================
   Responsive: Tablet
   ========================================== */
@media (max-width: 1024px) {
    .mascot-helper-container[b-zmtr3rby8m] {
        bottom: 100px;
        right: 16px;
    }

    .mascot-helper-img[b-zmtr3rby8m] {
        width: 110px;
    }

    .speech-bubble[b-zmtr3rby8m] {
        max-width: 200px;
        min-width: 160px;
        padding: 14px 16px 10px;
    }

    .bubble-content[b-zmtr3rby8m] {
        font-size: 0.85rem;
    }
}


/* ==========================================
   Responsive: Mobile
   ========================================== */
@media (max-width: 768px) {
    .mascot-helper-container[b-zmtr3rby8m] {
        bottom: 80px; /* Above the bottom nav bar */
        right: 12px;
    }

    .mascot-helper-container.bottom-right[b-zmtr3rby8m] {
        right: 12px;
    }

    .mascot-helper-container.bottom-left[b-zmtr3rby8m] {
        left: 12px;
    }

    .mascot-helper-img[b-zmtr3rby8m] {
        width: 80px;
    }

    .speech-bubble[b-zmtr3rby8m] {
        max-width: 170px;
        min-width: 140px;
        padding: 12px 14px 10px;
        border-radius: 12px;
        margin-bottom: 8px;
    }

    .speech-bubble[b-zmtr3rby8m]::after {
        width: 12px;
        height: 12px;
        bottom: -6px;
    }

    .bottom-right .speech-bubble[b-zmtr3rby8m]::after {
        right: 18px;
    }

    .bubble-content[b-zmtr3rby8m] {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .bubble-action[b-zmtr3rby8m] {
        padding: 6px 12px;
        font-size: 0.78rem;
        border-radius: 8px;
    }

    .bubble-close-btn[b-zmtr3rby8m] {
        width: 24px;
        height: 24px;
        font-size: 10px;
        top: -8px;
        right: -8px;
    }

    .mascot-close-btn[b-zmtr3rby8m] {
        width: 20px;
        height: 20px;
        font-size: 9px;
        top: -4px;
        right: -4px;
        /* Hidden by default on mobile — bubble close btn is enough */
        opacity: 0;
        pointer-events: none;
    }

    /* Only show mascot close btn when there's no speech bubble */
    .mascot-helper-container:not(:has(.speech-bubble)) .mascot-close-btn[b-zmtr3rby8m] {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
}


/* ==========================================
   Responsive: Small phones
   ========================================== */
@media (max-width: 360px) {
    .mascot-helper-container[b-zmtr3rby8m] {
        bottom: 75px;
        right: 8px;
    }

    .mascot-helper-img[b-zmtr3rby8m] {
        width: 65px;
    }

    .speech-bubble[b-zmtr3rby8m] {
        max-width: 150px;
        min-width: 120px;
        padding: 10px 12px 8px;
    }

    .bubble-content[b-zmtr3rby8m] {
        font-size: 0.75rem;
    }

    .bubble-action[b-zmtr3rby8m] {
        padding: 5px 10px;
        font-size: 0.72rem;
    }
}
/* /Components/Shared/MascotStatus.razor.rz.scp.css */
.mascot-status-container[b-pzk2ujcm9z] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    width: 100%;
}

.mascot-status-container.fullscreen[b-pzk2ujcm9z] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 2000;
}

.mascot-status-content[b-pzk2ujcm9z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mascot-status-img[b-pzk2ujcm9z] {
    max-width: 150px;
    height: auto;
    margin-bottom: 1rem;
}

.mascot-status-message[b-pzk2ujcm9z] {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    display: flex;
    align-items: center;
}

/* Animations based on state */
.loading[b-pzk2ujcm9z] {
    animation: pulse-b-pzk2ujcm9z 1.5s infinite;
}

.success[b-pzk2ujcm9z] {
    animation: bounceIn-b-pzk2ujcm9z 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.error[b-pzk2ujcm9z] {
    animation: shake-b-pzk2ujcm9z 0.5s;
}

@keyframes pulse-b-pzk2ujcm9z {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

@keyframes bounceIn-b-pzk2ujcm9z {
    0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    20% { transform: scale3d(1.1, 1.1, 1.1); }
    40% { transform: scale3d(0.9, 0.9, 0.9); }
    60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
    80% { transform: scale3d(0.97, 0.97, 0.97); }
    100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes shake-b-pzk2ujcm9z {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* NotificationBell Component Styles - Premium Modern Edition */

.notification-bell-container[b-lazj3q90sc] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notification-bell-btn[b-lazj3q90sc] {
    background: none;
    border: none;
    padding: 8px;
    font-size: 1.25rem;
    color: white;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
}

.notification-bell-btn:hover[b-lazj3q90sc] {
    color: #ff6b35;
    transform: scale(1.1);
}

.notification-badge[b-lazj3q90sc] {
    position: absolute;
    top: 2px;
    right: 0px;
    background: linear-gradient(135deg, #ff6b35 0%, #ff4444 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(255, 68, 68, 0.4);
    animation: badge-pop-b-lazj3q90sc 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badge-pop-b-lazj3q90sc {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.notification-dropdown[b-lazj3q90sc] {
    position: absolute;
    top: calc(100% + 12px);
    right: -10px;
    width: 380px;
    max-width: calc(100vw - 20px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0,0,0,0.05);
    z-index: 1000;
    overflow: hidden;
    transform-origin: top right;
    animation: dropdown-pop-b-lazj3q90sc 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

@keyframes dropdown-pop-b-lazj3q90sc {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.notification-header[b-lazj3q90sc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.6);
}

.notification-header h6[b-lazj3q90sc] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.2px;
}

.mark-all-read-btn[b-lazj3q90sc] {
    background: rgba(255, 107, 53, 0.1);
    border: none;
    color: #ff6b35;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mark-all-read-btn:hover[b-lazj3q90sc] {
    background: rgba(255, 107, 53, 0.15);
    transform: translateY(-1px);
}

.notification-loading[b-lazj3q90sc],
.notification-empty[b-lazj3q90sc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    color: #94a3b8;
    gap: 12px;
    background: rgba(255, 255, 255, 0.3);
}

.notification-loading i[b-lazj3q90sc],
.notification-empty i[b-lazj3q90sc] {
    font-size: 2.2rem;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.notification-list[b-lazj3q90sc] {
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 0;
}

/* Custom scrollbar for webkit */
.notification-list[b-lazj3q90sc]::-webkit-scrollbar {
    width: 6px;
}

.notification-list[b-lazj3q90sc]::-webkit-scrollbar-track {
    background: transparent;
}

.notification-list[b-lazj3q90sc]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.notification-item[b-lazj3q90sc] {
    display: flex;
    align-items: flex-start;
    padding: 14px;
    margin: 4px 10px;
    gap: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 12px;
    border: 1px solid transparent;
}

.notification-item:hover[b-lazj3q90sc] {
    background: rgba(248, 250, 252, 0.8);
    transform: translateX(4px);
}

.notification-item.unread[b-lazj3q90sc] {
    background: linear-gradient(145deg, #fffcfb 0%, #fff4f0 100%);
    border-color: rgba(255, 107, 53, 0.15);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.05);
}

.notification-item.unread:hover[b-lazj3q90sc] {
    background: linear-gradient(145deg, #fff4f0 0%, #ffede5 100%);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.1);
}

.notification-icon[b-lazj3q90sc] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.7), 0 2px 5px rgba(0,0,0,0.05);
}

.notification-item.unread .notification-icon[b-lazj3q90sc] {
    background: linear-gradient(135deg, #fff1eb 0%, #ffecd2 100%);
}

.notification-item:hover .notification-icon[b-lazj3q90sc] {
    transform: scale(1.05) rotate(-5deg);
}

.notification-icon img[b-lazj3q90sc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.notification-icon i[b-lazj3q90sc] {
    font-size: 1.1rem;
    color: #64748b;
}

.notification-item.unread .notification-icon i[b-lazj3q90sc] {
    color: #ff6b35;
}

.notification-content[b-lazj3q90sc] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-lazj3q90sc] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.3;
}

.notification-body[b-lazj3q90sc] {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time[b-lazj3q90sc] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 6px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.notification-dot[b-lazj3q90sc] {
    width: 10px;
    height: 10px;
    background: #ff6b35;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
    animation: pulse-dot-b-lazj3q90sc 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-dot-b-lazj3q90sc {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(255, 107, 53, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}

.notification-footer[b-lazj3q90sc] {
    padding: 14px 16px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(248, 250, 252, 0.6);
}

.notification-footer a[b-lazj3q90sc] {
    color: #ff6b35;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.notification-footer a i[b-lazj3q90sc] {
    transition: transform 0.2s ease;
}

.notification-footer a:hover[b-lazj3q90sc] {
    color: #e85a2a;
}

.notification-footer a:hover i[b-lazj3q90sc] {
    transform: translateX(4px);
}

/* Mobile responsive - Centered Modal Style */
@media (max-width: 480px) {
    .notification-dropdown[b-lazj3q90sc] {
        position: fixed;
        top: 50%;
        bottom: auto;
        left: 50%;
        right: auto;
        width: calc(100vw - 32px);
        max-width: 100vw;
        border-radius: 24px;
        max-height: 80vh;
        transform-origin: center center;
        animation: modal-pop-b-lazj3q90sc 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
        /* The massive 2000px shadow creates a pure-CSS darkened backdrop overlay! */
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3), 0 0 0 2000px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.9);
        z-index: 99999 !important;
    }
    
    /* Remove handle for modal */
    .notification-header[b-lazj3q90sc]::before {
        display: none;
    }
    
    .notification-header[b-lazj3q90sc] {
        padding-top: 18px;
    }
    
    @keyframes modal-pop-b-lazj3q90sc {
        0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
        100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    }
    
    .notification-list[b-lazj3q90sc] {
        max-height: calc(80vh - 140px);
    }
}
/* /Components/Shared/PWAInstallPrompt.razor.rz.scp.css */
/* PWA Install Prompt Styles - Aligned with project blue theme */

.pwa-prompt-overlay[b-7c7zyhsj9r] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
    animation: overlay-fade-b-7c7zyhsj9r 0.3s ease;
    padding: 20px;
}

@keyframes overlay-fade-b-7c7zyhsj9r {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pwa-prompt-container[b-7c7zyhsj9r] {
    width: 100%;
    max-width: 400px;
    animation: prompt-slide-b-7c7zyhsj9r 0.3s ease;
}

@keyframes prompt-slide-b-7c7zyhsj9r {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pwa-prompt[b-7c7zyhsj9r] {
    background: white;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(1, 69, 178, 0.15);
}

.pwa-prompt-icon[b-7c7zyhsj9r] {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(1, 69, 178, 0.25);
}

.pwa-prompt-icon img[b-7c7zyhsj9r] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pwa-prompt-icon.notification-icon[b-7c7zyhsj9r] {
    background: linear-gradient(135deg, #0145b2, #3373cc);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-prompt-icon.notification-icon i[b-7c7zyhsj9r] {
    font-size: 2.5rem;
    color: white;
}

.pwa-prompt-content h3[b-7c7zyhsj9r] {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0145b2;
}

.pwa-prompt-content p[b-7c7zyhsj9r] {
    margin: 0 0 16px;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

.pwa-prompt-features[b-7c7zyhsj9r] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pwa-prompt-features span[b-7c7zyhsj9r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #0145b2;
    background: #eaf3ff;
    padding: 6px 12px;
    border-radius: 20px;
}

.pwa-prompt-features span i[b-7c7zyhsj9r] {
    color: #0145b2;
}

.pwa-prompt-actions[b-7c7zyhsj9r] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pwa-btn-primary[b-7c7zyhsj9r] {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #0145b2, #3373cc);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.pwa-btn-primary:hover[b-7c7zyhsj9r] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(1, 69, 178, 0.4);
}

.pwa-btn-primary:active[b-7c7zyhsj9r] {
    transform: translateY(0);
}

.pwa-btn-secondary[b-7c7zyhsj9r] {
    width: 100%;
    padding: 12px 24px;
    background: transparent;
    color: #999;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.pwa-btn-secondary:hover[b-7c7zyhsj9r] {
    color: #666;
}

/* Desktop alignment */
@media (min-width: 768px) {
    .pwa-prompt-overlay[b-7c7zyhsj9r] {
        align-items: center;
    }
    
    .pwa-prompt-actions[b-7c7zyhsj9r] {
        flex-direction: row;
    }
    
    .pwa-btn-secondary[b-7c7zyhsj9r] {
        width: auto;
    }
}
/* /Components/Shared/SearchBar.razor.rz.scp.css */
/* ==========================================
   SEARCH BAR COMPONENT
   Consistent with PetShop Design System
   ========================================== */

.search-bar-wrapper[b-5qpvklphb6] {
    position: relative;
    width: 100%;
}

.search-bar[b-5qpvklphb6] {
    display: flex;
    align-items: center;
    background: var(--white, #fff);
    border-radius: var(--radius-full, 9999px);
    overflow: visible;
    transition: all var(--transition-normal, 0.3s ease-in-out);
}

.search-bar:focus-within[b-5qpvklphb6],
.search-bar-active[b-5qpvklphb6] {
    box-shadow: 0 0 0 3px rgba(1, 69, 178, 0.15);
}

.search-bar input[type="search"][b-5qpvklphb6] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    padding: 12px 20px;
    background: transparent;
    color: var(--gray-800, #1F2937);
    font-family: var(--font-primary, 'Prompt', 'Inter', sans-serif);
}

.search-bar input[type="search"][b-5qpvklphb6]::placeholder {
    color: var(--gray-400, #9CA3AF);
}

.search-bar input[type="search"][b-5qpvklphb6]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-buttons[b-5qpvklphb6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 10px;
}

.search-btn[b-5qpvklphb6],
.camera-btn[b-5qpvklphb6] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast, 0.15s ease-in-out);
    background: transparent;
    color: var(--gray-500, #6B7280);
}

.search-btn:hover[b-5qpvklphb6],
.camera-btn:hover[b-5qpvklphb6] {
    background: var(--gray-200, #E5E7EB);
    color: var(--primary-blue, #0145b2);
}

.lang-divider[b-5qpvklphb6] {
    color: var(--gray-200, #E5E7EB);
}

/* ==========================================
   SEARCH SUGGESTIONS DROPDOWN
   ========================================== */

.search-suggestions[b-5qpvklphb6] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--white, #fff);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
    z-index: 1000;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    animation: slideDown-b-5qpvklphb6 0.2s ease-out;
    border: 1px solid var(--gray-100, #F3F4F6);
}

@keyframes slideDown-b-5qpvklphb6 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Custom Scrollbar */
.search-suggestions[b-5qpvklphb6]::-webkit-scrollbar {
    width: 6px;
}

.search-suggestions[b-5qpvklphb6]::-webkit-scrollbar-track {
    background: transparent;
}

.search-suggestions[b-5qpvklphb6]::-webkit-scrollbar-thumb {
    background: var(--gray-200, #E5E7EB);
    border-radius: 3px;
}

.search-suggestions[b-5qpvklphb6]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-300, #D1D5DB);
}

/* ==========================================
   LOADING STATE
   ========================================== */

.search-loading[b-5qpvklphb6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--gray-500, #6B7280);
}

.search-loading i[b-5qpvklphb6] {
    color: var(--primary-blue, #0145b2);
    font-size: 20px;
}

/* ==========================================
   NO RESULTS STATE
   ========================================== */

.search-no-results[b-5qpvklphb6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    color: var(--gray-500, #6B7280);
    text-align: center;
}

.search-no-results i[b-5qpvklphb6] {
    font-size: 40px;
    color: var(--gray-300, #D1D5DB);
    margin-bottom: 16px;
}

.search-no-results span[b-5qpvklphb6] {
    font-weight: 600;
    color: var(--gray-700, #374151);
    font-size: 1rem;
}

.search-no-results p[b-5qpvklphb6] {
    font-size: 0.875rem;
    margin: 8px 0 0;
    color: var(--gray-400, #9CA3AF);
}

/* ==========================================
   SUGGESTION SECTIONS
   ========================================== */

.suggestion-section[b-5qpvklphb6] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-100, #F3F4F6);
}

.suggestion-section:last-of-type[b-5qpvklphb6] {
    border-bottom: none;
}

.suggestion-header[b-5qpvklphb6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-400, #9CA3AF);
    margin-bottom: 12px;
    padding: 0 4px;
}

.suggestion-header i[b-5qpvklphb6] {
    font-size: 12px;
    color: var(--primary-blue, #0145b2);
}

/* ==========================================
   PRODUCT SUGGESTION ITEMS
   ========================================== */

.suggestion-list[b-5qpvklphb6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-suggestion-item[b-5qpvklphb6] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: var(--radius-lg, 12px);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast, 0.15s ease-in-out);
    cursor: pointer;
}

.product-suggestion-item:hover[b-5qpvklphb6],
.product-suggestion-item.selected[b-5qpvklphb6] {
    background: var(--primary-blue-light, #eaf3ff);
}

.product-suggestion-image[b-5qpvklphb6] {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--gray-100, #F3F4F6);
    border: 1px solid var(--gray-200, #E5E7EB);
}

.product-suggestion-image img[b-5qpvklphb6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-suggestion-image .no-image[b-5qpvklphb6] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300, #D1D5DB);
    font-size: 20px;
}

.product-suggestion-info[b-5qpvklphb6] {
    flex: 1;
    min-width: 0;
}

.product-suggestion-name[b-5qpvklphb6] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gray-800, #1F2937);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-suggestion-name mark[b-5qpvklphb6] {
    background: var(--primary-yellow, #ffd46b);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.product-suggestion-brand[b-5qpvklphb6] {
    font-size: 0.75rem;
    color: var(--gray-500, #6B7280);
    margin-top: 2px;
}

.product-suggestion-price[b-5qpvklphb6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.product-suggestion-price .sale-price[b-5qpvklphb6] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--error, #EF4444);
}

.product-suggestion-price .original-price[b-5qpvklphb6] {
    font-size: 0.8125rem;
    color: var(--gray-400, #9CA3AF);
    text-decoration: line-through;
}

.product-suggestion-price .regular-price[b-5qpvklphb6] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--primary-blue, #0145b2);
}

.product-suggestion-price .discount-badge[b-5qpvklphb6] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--white, #fff);
    background: var(--error, #EF4444);
    padding: 2px 6px;
    border-radius: var(--radius-full, 9999px);
}

.product-suggestion-arrow[b-5qpvklphb6] {
    color: var(--gray-300, #D1D5DB);
    font-size: 12px;
    transition: all var(--transition-fast, 0.15s ease-in-out);
}

.product-suggestion-item:hover .product-suggestion-arrow[b-5qpvklphb6] {
    color: var(--primary-blue, #0145b2);
    transform: translateX(3px);
}

/* Promotion Tag in Search Suggestions */
.product-suggestion-promo[b-5qpvklphb6] {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.product-suggestion-promo .promo-tag[b-5qpvklphb6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--primary-blue, #0145b2);
    background: var(--primary-blue-light, #eaf3ff);
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   BRAND & CATEGORY CHIPS
   ========================================== */

.suggestion-chips[b-5qpvklphb6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.suggestion-chip[b-5qpvklphb6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--gray-50, #F9FAFB);
    border: 1px solid var(--gray-200, #E5E7EB);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-700, #374151);
    text-decoration: none;
    transition: all var(--transition-fast, 0.15s ease-in-out);
    cursor: pointer;
}

.suggestion-chip:hover[b-5qpvklphb6] {
    background: var(--primary-blue-light, #eaf3ff);
    border-color: var(--primary-blue, #0145b2);
    color: var(--primary-blue, #0145b2);
}

.suggestion-chip .chip-logo[b-5qpvklphb6] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: var(--radius-sm, 4px);
}

.brand-chip[b-5qpvklphb6] {
    background: var(--white, #fff);
}

.category-chip[b-5qpvklphb6] {
    background: var(--secondary-cream, #FFF5E1);
    border-color: var(--primary-orange, #ffa819);
    color: var(--gray-700, #374151);
}

.category-chip:hover[b-5qpvklphb6] {
    background: var(--primary-orange, #ffa819);
    border-color: var(--primary-orange, #ffa819);
    color: var(--white, #fff);
}

/* ==========================================
   VIEW ALL FOOTER
   ========================================== */

.suggestion-footer[b-5qpvklphb6] {
    padding: 16px 20px;
    background: var(--gray-50, #F9FAFB);
    border-top: 1px solid var(--gray-100, #F3F4F6);
    border-radius: 0 0 var(--radius-xl, 16px) var(--radius-xl, 16px);
}

.view-all-link[b-5qpvklphb6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--primary-blue, #0145b2);
    color: var(--white, #fff);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast, 0.15s ease-in-out);
}

.view-all-link:hover[b-5qpvklphb6] {
    background: var(--primary-blue-dark, #0146b3);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
    color: var(--white, #fff);
}

.view-all-link span[b-5qpvklphb6] {
    flex: 1;
    text-align: center;
}

/* ==========================================
   MOBILE RESPONSIVE
   ========================================== */

@media (max-width: 992px) {
    .search-bar input[type="search"][b-5qpvklphb6] {
        font-size: 16px;
        /* Prevent iOS zoom on focus */
        padding: 10px 16px;
    }

    .search-buttons[b-5qpvklphb6] {
        padding-right: 8px;
        gap: 4px;
    }

    .search-btn[b-5qpvklphb6],
    .camera-btn[b-5qpvklphb6] {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 768px) {
    .search-suggestions[b-5qpvklphb6] {
        max-height: 60vh;
        border-radius: var(--radius-lg, 12px);
        position: fixed;
        top: auto;
        bottom: 80px;
        /* Above bottom nav */
        left: 12px;
        right: 12px;
        max-height: 50vh;
    }

    .suggestion-section[b-5qpvklphb6] {
        padding: 12px 16px;
    }

    .product-suggestion-item[b-5qpvklphb6] {
        padding: 10px;
        gap: 12px;
    }

    .product-suggestion-image[b-5qpvklphb6] {
        width: 48px;
        height: 48px;
    }

    .product-suggestion-name[b-5qpvklphb6] {
        font-size: 0.875rem;
    }

    .suggestion-chips[b-5qpvklphb6] {
        gap: 6px;
    }

    .suggestion-chip[b-5qpvklphb6] {
        padding: 8px 14px;
        font-size: 0.8rem;
        min-height: 36px;
    }

    .suggestion-footer[b-5qpvklphb6] {
        padding: 12px 16px;
    }

    .view-all-link[b-5qpvklphb6] {
        padding: 12px 20px;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .search-bar input[type="search"][b-5qpvklphb6] {
        padding: 10px 14px;
    }

    .search-btn[b-5qpvklphb6],
    .camera-btn[b-5qpvklphb6] {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }
}
/* /Components/Shared/SearchModal.razor.rz.scp.css */
/* Search Modal Styles */

.search-modal-backdrop[b-5rf31bvirp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.search-modal-backdrop.active[b-5rf31bvirp] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.search-modal[b-5rf31bvirp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    z-index: 2001;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    /* Morph animation: clip from header area expanding down */
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.15s ease;
}

.search-modal.active[b-5rf31bvirp] {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    pointer-events: auto;
    transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.1s ease;
}

/* Closing state — reverse morph back to header */
.search-modal.closing[b-5rf31bvirp] {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    pointer-events: none;
    transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease 0.1s;
}

.search-modal-header[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--primary-blue);
    flex-shrink: 0;
}

.search-modal-input-wrapper[b-5rf31bvirp] {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: var(--radius-full);
    padding: 0 16px;
    gap: 10px;
}

.search-modal-input-wrapper .search-icon[b-5rf31bvirp] {
    color: var(--gray-400);
    font-size: 1rem;
}

.search-modal-input-wrapper input[b-5rf31bvirp] {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 0;
    font-size: 16px;
    font-family: inherit;
    background: transparent;
}

.search-modal-input-wrapper input[b-5rf31bvirp]::placeholder {
    color: var(--gray-400);
}

.search-modal-input-wrapper .clear-btn[b-5rf31bvirp] {
    background: var(--gray-200);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 0.75rem;
}

.search-modal-close[b-5rf31bvirp] {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 8px 12px;
    cursor: pointer;
}

.search-modal-content[b-5rf31bvirp] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

/* Staggered content reveal for morph effect */
.search-modal.active .search-modal-content[b-5rf31bvirp] {
    animation: contentFadeIn-b-5rf31bvirp 0.3s ease 0.15s both;
}

.search-modal.closing .search-modal-content[b-5rf31bvirp] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

@keyframes contentFadeIn-b-5rf31bvirp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Backdrop closing state */
.search-modal-backdrop.closing[b-5rf31bvirp] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Product Suggestion Items */
.suggestion-list[b-5rf31bvirp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-suggestion-item[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.product-suggestion-item:active[b-5rf31bvirp] {
    background: var(--gray-100);
}

.product-suggestion-image[b-5rf31bvirp] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
    flex-shrink: 0;
}

.product-suggestion-image img[b-5rf31bvirp] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-suggestion-image .no-image[b-5rf31bvirp] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300);
    font-size: 1.25rem;
}

.product-suggestion-info[b-5rf31bvirp] {
    flex: 1;
    min-width: 0;
}

.product-suggestion-name[b-5rf31bvirp] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-800);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-suggestion-name mark[b-5rf31bvirp] {
    background: var(--primary-yellow);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.product-suggestion-brand[b-5rf31bvirp] {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 2px;
}

.product-suggestion-price[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.product-suggestion-price .sale-price[b-5rf31bvirp] {
    font-weight: 600;
    color: var(--error);
    font-size: 0.9rem;
}

.product-suggestion-price .original-price[b-5rf31bvirp] {
    font-size: 0.75rem;
    color: var(--gray-400);
    text-decoration: line-through;
}

.product-suggestion-price .regular-price[b-5rf31bvirp] {
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 0.9rem;
}

.product-suggestion-item>i[b-5rf31bvirp] {
    color: var(--gray-300);
    font-size: 0.8rem;
}

/* Promotion Tag */
.product-suggestion-promo[b-5rf31bvirp] {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.product-suggestion-promo .promo-tag[b-5rf31bvirp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--primary-blue);
    background: var(--primary-blue-light);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quick Category Grid (fallback when not on Products page) */
.quick-category-grid[b-5rf31bvirp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.quick-category-item[b-5rf31bvirp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--gray-700);
    transition: all 0.2s;
}

.quick-category-item:active[b-5rf31bvirp] {
    background: var(--primary-blue-light);
    color: var(--primary-blue);
}

.quick-category-item i[b-5rf31bvirp] {
    font-size: 1.25rem;
    color: var(--primary-blue);
}

.quick-category-item span[b-5rf31bvirp] {
    font-size: 0.7rem;
    font-weight: 500;
}

/* View All Link */
.suggestion-footer[b-5rf31bvirp] {
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.view-all-link[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--primary-blue);
    color: var(--white);
    border-radius: var(--radius-lg);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.view-all-link:active[b-5rf31bvirp] {
    background: var(--primary-blue-dark);
}

/* Loading State */
.search-loading[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--gray-500);
}

.search-loading i[b-5rf31bvirp] {
    font-size: 1.25rem;
    color: var(--primary-blue);
}

/* No Results */
.search-no-results[b-5rf31bvirp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--gray-500);
}

.search-no-results i[b-5rf31bvirp] {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--gray-300);
}

.search-no-results span[b-5rf31bvirp] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-700);
}

.search-no-results p[b-5rf31bvirp] {
    font-size: 0.85rem;
    margin-top: 8px;
    color: var(--gray-500);
}

/* ======================================= */
/* Unified Filter Section Pattern          */
/* ======================================= */

.filter-section[b-5rf31bvirp] {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray-100);
}

.filter-section:last-child[b-5rf31bvirp] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.filter-section-header[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-section-header i[b-5rf31bvirp] {
    color: var(--primary-blue);
    font-size: 0.75rem;
    width: 16px;
    text-align: center;
}

.filter-section-header .filter-badge[b-5rf31bvirp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: var(--primary-blue);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    padding: 0 5px;
    margin-left: 2px;
    animation: badge-pop-b-5rf31bvirp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.filter-section-header .filter-reset-btn[b-5rf31bvirp] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--gray-400);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: color 0.15s;
}

.filter-section-header .filter-reset-btn:active[b-5rf31bvirp] {
    color: var(--error);
}

@keyframes badge-pop-b-5rf31bvirp {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Category Tree — Desktop-style checkbox hierarchy */
.cat-tree[b-5rf31bvirp] {
    display: flex;
    flex-direction: column;
}



.cat-row[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    min-height: 28px;
}

.cat-check[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.cat-check input[type="checkbox"][b-5rf31bvirp] {
    width: 15px;
    height: 15px;
    accent-color: var(--primary-blue);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.cat-check span[b-5rf31bvirp] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-700);
    line-height: 1.3;
}

/* Indeterminate state — dash overlay on checkbox */
.cat-check.indeterminate[b-5rf31bvirp] {
    position: relative;
}

.cat-check.indeterminate input[type="checkbox"][b-5rf31bvirp] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid var(--primary-blue);
    border-radius: 3px;
    background: var(--primary-blue);
    position: relative;
}

.cat-check.indeterminate input[type="checkbox"][b-5rf31bvirp]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.cat-expand[b-5rf31bvirp] {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--gray-400);
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    transition: color 0.15s;
    flex-shrink: 0;
}

.cat-expand:active[b-5rf31bvirp] {
    color: var(--primary-blue);
}

.cat-children[b-5rf31bvirp] {
    padding-left: 22px;
}

/* Promo chip icon colors */
.filter-pill.promo i[b-5rf31bvirp] {
    font-size: 0.65rem;
}

.filter-pill.promo i.promo-sale[b-5rf31bvirp] { color: #E53E3E; }
.filter-pill.promo i.promo-new[b-5rf31bvirp] { color: #7C3AED; }
.filter-pill.promo i.promo-ship[b-5rf31bvirp] { color: #059669; }
.filter-pill.promo i.promo-disc[b-5rf31bvirp] { color: #D97706; }
.filter-pill.promo i.promo-deal[b-5rf31bvirp] { color: #DB2777; }
.filter-pill.promo i.promo-stock[b-5rf31bvirp] { color: #0D9488; }

.filter-pill.promo.active i[b-5rf31bvirp] {
    color: #fff;
}


.filter-pills-scroll[b-5rf31bvirp] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Compact Pills */
.filter-pill[b-5rf31bvirp] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 10px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    font-size: 0.73rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-pill small[b-5rf31bvirp] {
    font-size: 0.6rem;
    color: var(--gray-400);
    font-weight: 400;
}

.filter-pill i[b-5rf31bvirp] {
    font-size: 0.55rem;
    color: #fff;
}

.filter-pill:active[b-5rf31bvirp] {
    transform: scale(0.95);
}

.filter-pill.active[b-5rf31bvirp] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
}

.filter-pill.active small[b-5rf31bvirp] {
    color: rgba(255, 255, 255, 0.7);
}

.filter-pill.sm[b-5rf31bvirp] {
    padding: 3px 8px;
    font-size: 0.68rem;
}

.filter-pill.more-pill[b-5rf31bvirp] {
    background: var(--gray-50);
    border-style: dashed;
    color: var(--primary-blue);
    font-weight: 700;
}

.filter-pill.more-pill:active[b-5rf31bvirp] {
    background: var(--primary-blue-light);
}

/* Sticky filter status bar — under search header */
.filter-sticky-status[b-5rf31bvirp] {
    flex-shrink: 0;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
    padding: 8px 16px;
}

.filter-status-inner[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-status-inner i:first-child[b-5rf31bvirp] {
    color: var(--primary-blue);
    font-size: 0.75rem;
}

.filter-status-inner .filter-badge[b-5rf31bvirp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: var(--primary-blue);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    padding: 0 5px;
    margin-left: 2px;
}

.filter-status-inner .filter-reset-btn[b-5rf31bvirp] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--gray-400);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: color 0.15s;
}

.filter-status-inner .filter-reset-btn:active[b-5rf31bvirp] {
    color: var(--error);
}

/* Sticky apply bar — bottom of modal */
.filter-sticky-apply[b-5rf31bvirp] {
    flex-shrink: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.filter-apply-btn[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #0066CC 0%, #004999 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
    transition: all 0.2s ease;
}

.filter-apply-btn:active[b-5rf31bvirp] {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
}

.filter-apply-btn .result-count[b-5rf31bvirp] {
    opacity: 0.8;
    font-weight: 500;
}

/* Price Quick Chips */
.price-chips[b-5rf31bvirp] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.price-chip[b-5rf31bvirp] {
    padding: 5px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.price-chip:active[b-5rf31bvirp] {
    transform: scale(0.95);
}

.price-chip.active[b-5rf31bvirp] {
    background: linear-gradient(135deg, #0066CC 0%, #004999 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.25);
}

/* Price Range Row */
.price-range-row[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    gap: 0;
}

.price-input-group[b-5rf31bvirp] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.price-input-group:focus-within[b-5rf31bvirp] {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.08);
}

.price-currency[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--white);
    background: linear-gradient(135deg, #0066CC, #004999);
    min-height: 36px;
    flex-shrink: 0;
}

.price-input-group input[b-5rf31bvirp] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-800);
    padding: 8px 10px;
    width: 50px;
    background: transparent;
    appearance: textfield;
    -moz-appearance: textfield;
}

.price-input-group input[b-5rf31bvirp]::placeholder {
    color: var(--gray-400);
    font-weight: 500;
}

.price-input-group input[b-5rf31bvirp]::-webkit-outer-spin-button,
.price-input-group input[b-5rf31bvirp]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Connector between inputs */
.price-connector[b-5rf31bvirp] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 4px;
    flex-shrink: 0;
}

.price-connector i[b-5rf31bvirp] {
    font-size: 0.55rem;
    color: var(--gray-300);
}

.price-connector-line[b-5rf31bvirp] {
    width: 6px;
    height: 1.5px;
    background: var(--gray-200);
}