/* /Components/Cards/ExperienceCard.razor.rz.scp.css */
/* Experience Card Container */
.experience-card[b-9v2oo4utgb] {
    background: white;
    border-radius: 16px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.experience-card:hover[b-9v2oo4utgb] {
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.experience-card:active[b-9v2oo4utgb] {
    transform: translateY(0);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.experience-card:focus[b-9v2oo4utgb] {
    outline: 2px solid #FFA726;
    outline-offset: 2px;
}

/* Image Container */
.card-image-container[b-9v2oo4utgb] {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #F5F5F5;
}

.card-image[b-9v2oo4utgb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.experience-card:hover .card-image[b-9v2oo4utgb] {
    transform: scale(1.05);
}

.card-image-placeholder[b-9v2oo4utgb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #F0F0F0, #E0E0E0);
    color: #B0B0B0;
    font-size: 48px;
}

/* Category Badge */
.category-badge[b-9v2oo4utgb] {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #1A3B47;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Card Content */
.card-content[b-9v2oo4utgb] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.card-title[b-9v2oo4utgb] {
    font-size: 18px;
    font-weight: 600;
    color: #1A3B47;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Amenities Row */
.amenities-row[b-9v2oo4utgb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666666;
}

.amenity-icon[b-9v2oo4utgb] {
    font-size: 16px;
    color: #999999;
    transition: color 0.2s ease;
}

.amenity-icon:hover[b-9v2oo4utgb] {
    color: #FFA726;
}

.amenities-more[b-9v2oo4utgb] {
    font-size: 12px;
    font-weight: 500;
    color: #999999;
    margin-left: 4px;
}

/* Card Footer */
.card-footer[b-9v2oo4utgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #F0F0F0;
}

/* Price Container */
.price-container[b-9v2oo4utgb] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-label[b-9v2oo4utgb] {
    font-size: 12px;
    color: #999999;
}

.price-amount[b-9v2oo4utgb] {
    font-size: 20px;
    font-weight: 700;
    color: #1A3B47;
}

.price-unit[b-9v2oo4utgb] {
    font-size: 12px;
    color: #666666;
}

/* Book Now Button Customization */
.experience-card :deep(.btn-primary)[b-9v2oo4utgb] {
    padding: 8px 16px;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 480px) {
    .card-image-container[b-9v2oo4utgb] {
        height: 160px;
    }

    .card-content[b-9v2oo4utgb] {
        padding: 14px;
        gap: 10px;
    }

    .card-title[b-9v2oo4utgb] {
        font-size: 16px;
    }

    .price-amount[b-9v2oo4utgb] {
        font-size: 18px;
    }
}

/* Loading State */
.experience-card.loading[b-9v2oo4utgb] {
    pointer-events: none;
}

.experience-card.loading .card-image-container[b-9v2oo4utgb],
.experience-card.loading .card-title[b-9v2oo4utgb],
.experience-card.loading .amenities-row[b-9v2oo4utgb],
.experience-card.loading .price-container[b-9v2oo4utgb] {
    background: linear-gradient(90deg, #F5F5F5 25%, #E0E0E0 50%, #F5F5F5 75%);
    background-size: 200% 100%;
    animation: shimmer-b-9v2oo4utgb 1.5s infinite;
    color: transparent;
}

@keyframes shimmer-b-9v2oo4utgb {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}
/* /Components/Cards/NewsCard.razor.rz.scp.css */
/* News Card Container */
.news-card[b-37diwdoilo] {
    background: white;
    border-radius: 12px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-card:hover[b-37diwdoilo] {
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.news-card:active[b-37diwdoilo] {
    transform: translateY(0);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.news-card:focus[b-37diwdoilo] {
    outline: 2px solid #FFA726;
    outline-offset: 2px;
}

/* Image Container */
.news-image-container[b-37diwdoilo] {
    position: relative;
    width: 100%;
    padding-bottom: 66.67%; /* 3:2 aspect ratio */
    overflow: hidden;
    background: #F5F5F5;
}

.news-image[b-37diwdoilo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-card:hover .news-image[b-37diwdoilo] {
    transform: scale(1.05);
}

.news-image-placeholder[b-37diwdoilo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F0F0F0, #E0E0E0);
    color: #B0B0B0;
    font-size: 36px;
}

/* News Content */
.news-content[b-37diwdoilo] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

/* Category Badge */
.news-category[b-37diwdoilo] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start;
}

.category-default[b-37diwdoilo] {
    background: #F0F0F0;
    color: #666666;
}

.category-events[b-37diwdoilo] {
    background: #FFF3E0;
    color: #E65100;
}

.category-corporate[b-37diwdoilo] {
    background: #E3F2FD;
    color: #1565C0;
}

.category-education[b-37diwdoilo] {
    background: #F3E5F5;
    color: #7B1FA2;
}

.category-community[b-37diwdoilo] {
    background: #E8F5E9;
    color: #2E7D32;
}

.category-resorts[b-37diwdoilo] {
    background: #E0F2F1;
    color: #00695C;
}

/* News Title */
.news-title[b-37diwdoilo] {
    font-size: 16px;
    font-weight: 600;
    color: #1A3B47;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* News Summary */
.news-summary[b-37diwdoilo] {
    font-size: 14px;
    line-height: 1.5;
    color: #666666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* News Footer */
.news-footer[b-37diwdoilo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
}

/* News Date */
.news-date[b-37diwdoilo] {
    font-size: 12px;
    color: #999999;
}

/* Read More Link */
.read-more[b-37diwdoilo] {
    font-size: 12px;
    font-weight: 500;
    color: #FFA726;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}

.news-card:hover .read-more[b-37diwdoilo] {
    gap: 8px;
}

.read-more i[b-37diwdoilo] {
    font-size: 10px;
    transition: transform 0.2s ease;
}

/* Responsive Design */
@media (max-width: 480px) {
    .news-content[b-37diwdoilo] {
        padding: 14px;
        gap: 6px;
    }

    .news-title[b-37diwdoilo] {
        font-size: 15px;
    }

    .news-summary[b-37diwdoilo] {
        font-size: 13px;
    }

    .news-category[b-37diwdoilo] {
        font-size: 10px;
        padding: 3px 8px;
    }
}

/* Square variant for grid layout */
.news-card.square .news-image-container[b-37diwdoilo] {
    padding-bottom: 100%; /* 1:1 aspect ratio */
}

/* Portrait variant */
.news-card.portrait .news-image-container[b-37diwdoilo] {
    padding-bottom: 133%; /* 3:4 aspect ratio */
}

/* Loading State */
.news-card.loading[b-37diwdoilo] {
    pointer-events: none;
}

.news-card.loading .news-image-container[b-37diwdoilo],
.news-card.loading .news-title[b-37diwdoilo],
.news-card.loading .news-summary[b-37diwdoilo],
.news-card.loading .news-date[b-37diwdoilo] {
    background: linear-gradient(90deg, #F5F5F5 25%, #E0E0E0 50%, #F5F5F5 75%);
    background-size: 200% 100%;
    animation: shimmer-b-37diwdoilo 1.5s infinite;
    color: transparent;
}

@keyframes shimmer-b-37diwdoilo {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}
/* /Components/Filters/FilterModal.razor.rz.scp.css */
.modal-overlay[b-4jpwcxn8et] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Bottom sheet on mobile */
    z-index: 1000;
    animation: fadeIn-b-4jpwcxn8et 0.2s ease-out;
}

.modal-content[b-4jpwcxn8et] {
    background: white;
    width: 100%;
    max-width: 600px;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    animation: slideUp-b-4jpwcxn8et 0.3s ease-out;
}

.modal-header[b-4jpwcxn8et] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border-secondary);
}

.modal-header h2[b-4jpwcxn8et] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

.close-btn[b-4jpwcxn8et] {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover[b-4jpwcxn8et] {
    background: var(--color-background-secondary);
}

.modal-body[b-4jpwcxn8et] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.filter-section[b-4jpwcxn8et] {
    margin-bottom: 24px;
}

.filter-section h3[b-4jpwcxn8et] {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--color-text-primary);
}

/* Price Inputs */
.price-inputs[b-4jpwcxn8et] {
    display: flex;
    gap: 16px;
}

.input-group[b-4jpwcxn8et] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label[b-4jpwcxn8et] {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.input-group input[b-4jpwcxn8et] {
    padding: 12px;
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    font-size: 16px;
}

/* Checkbox Groups */
.checkbox-group[b-4jpwcxn8et] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-label[b-4jpwcxn8et] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 16px;
    color: var(--color-text-primary);
}

.checkbox-label input[type="checkbox"][b-4jpwcxn8et] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
}

/* Footer */
.modal-footer[b-4jpwcxn8et] {
    padding: 20px;
    border-top: 1px solid var(--color-border-secondary);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
}

.btn-clear[b-4jpwcxn8et] {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding: 12px;
}

.btn-apply[b-4jpwcxn8et] {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    max-width: 200px;
}

/* Desktop Styles */
@media (min-width: 768px) {
    .modal-overlay[b-4jpwcxn8et] {
        align-items: center;
        /* Center on desktop */
    }

    .modal-content[b-4jpwcxn8et] {
        border-radius: 20px;
        max-height: 80vh;
        animation: fadeIn-b-4jpwcxn8et 0.2s ease-out;
    }
}

@keyframes slideUp-b-4jpwcxn8et {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
    }
}
/* /Components/Home/FeaturedExperiences.razor.rz.scp.css */
/* Featured Experiences Section */
.featured-experiences[b-8pqy115piw] {
    padding: 24px 0;
    background: #FFFFFF;
}

/* Section Header */
.section-header[b-8pqy115piw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 20px;
}

.section-title[b-8pqy115piw] {
    font-size: 24px;
    font-weight: 700;
    color: #1A3B47;
    margin: 0;
}

/* Experiences Container */
.experiences-container[b-8pqy115piw] {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.experiences-container[b-8pqy115piw]::-webkit-scrollbar {
    display: none;
}

/* Experiences Scroll Container */
.experiences-scroll[b-8pqy115piw] {
    display: flex;
    gap: 16px;
    padding: 0 16px 16px 16px;
    scroll-snap-type: x mandatory;
}

/* Scroll Snap for Cards */
.experiences-scroll > :deep(.experience-card)[b-8pqy115piw] {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: calc(100vw - 64px);
    max-width: 320px;
}

/* Scroll Indicators */
.scroll-indicators[b-8pqy115piw] {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
}

.indicator[b-8pqy115piw] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D0D0D0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active[b-8pqy115piw] {
    width: 24px;
    border-radius: 4px;
    background: #FFA726;
}

.indicator:hover:not(.active)[b-8pqy115piw] {
    background: #B0B0B0;
}

/* Responsive Design - Tablet */
@media (min-width: 768px) {
    .experiences-scroll > :deep(.experience-card)[b-8pqy115piw] {
        width: 280px;
    }

    .section-header[b-8pqy115piw] {
        padding: 0 24px;
    }

    .experiences-scroll[b-8pqy115piw] {
        padding: 0 24px 16px 24px;
    }
}

/* Responsive Design - Desktop */
@media (min-width: 1024px) {
    .featured-experiences[b-8pqy115piw] {
        padding: 32px 0;
    }

    .section-header[b-8pqy115piw] {
        padding: 0 32px;
        margin-bottom: 24px;
    }

    .experiences-scroll[b-8pqy115piw] {
        padding: 0 32px 20px 32px;
        gap: 20px;
    }

    .experiences-scroll > :deep(.experience-card)[b-8pqy115piw] {
        width: 300px;
    }

    .section-title[b-8pqy115piw] {
        font-size: 28px;
    }
}

/* Loading State */
.featured-experiences.loading .experiences-scroll[b-8pqy115piw] {
    display: flex;
    gap: 16px;
}

.featured-experiences.loading .experience-card[b-8pqy115piw] {
    background: linear-gradient(90deg, #F5F5F5 25%, #E0E0E0 50%, #F5F5F5 75%);
    background-size: 200% 100%;
    animation: shimmer-b-8pqy115piw 1.5s infinite;
}

/* Animation */
@keyframes shimmer-b-8pqy115piw {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}
/* /Components/Home/NewsEventsSection.razor.rz.scp.css */
/* News & Events Section */
.news-events-section[b-shk1xyshiu] {
    padding: 24px 0;
    background: #FFFFFF;
}

/* Section Header */
.section-header[b-shk1xyshiu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 20px;
}

.section-title[b-shk1xyshiu] {
    font-size: 24px;
    font-weight: 700;
    color: #1A3B47;
    margin: 0;
}

/* Filter Button */
.filter-button[b-shk1xyshiu] {
    background: transparent;
    border: 1px solid #D0D0D0;
    border-radius: 8px;
    padding: 8px 12px;
    color: #1A3B47;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.filter-button:hover[b-shk1xyshiu] {
    background: #F5F5F5;
    border-color: #FFA726;
    color: #FFA726;
}

.filter-button:active[b-shk1xyshiu] {
    transform: scale(0.95);
}

/* News Container */
.news-container[b-shk1xyshiu] {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.news-container[b-shk1xyshiu]::-webkit-scrollbar {
    display: none;
}

/* News Scroll Container */
.news-scroll[b-shk1xyshiu] {
    display: flex;
    gap: 16px;
    padding: 0 16px 16px 16px;
    scroll-snap-type: x mandatory;
}

/* Scroll Snap for Cards */
.news-scroll > :deep(.news-card)[b-shk1xyshiu] {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: calc(100vw - 64px);
    max-width: 280px;
}

/* Category Filters */
.category-filters[b-shk1xyshiu] {
    display: flex;
    gap: 8px;
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-filters[b-shk1xyshiu]::-webkit-scrollbar {
    display: none;
}

.filter-pill[b-shk1xyshiu] {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid #D0D0D0;
    border-radius: 20px;
    background: white;
    color: #666666;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.filter-pill:hover[b-shk1xyshiu] {
    background: #F5F5F5;
    border-color: #B0B0B0;
}

.filter-pill.active[b-shk1xyshiu] {
    background: #FFA726;
    border-color: #FFA726;
    color: white;
}

.filter-pill:active[b-shk1xyshiu] {
    transform: scale(0.95);
}

/* Responsive Design - Tablet */
@media (min-width: 768px) {
    .news-scroll > :deep(.news-card)[b-shk1xyshiu] {
        width: 260px;
    }

    .section-header[b-shk1xyshiu] {
        padding: 0 24px;
    }

    .news-scroll[b-shk1xyshiu] {
        padding: 0 24px 16px 24px;
    }

    .category-filters[b-shk1xyshiu] {
        padding: 16px 24px;
    }
}

/* Responsive Design - Desktop */
@media (min-width: 1024px) {
    .news-events-section[b-shk1xyshiu] {
        padding: 32px 0;
    }

    .section-header[b-shk1xyshiu] {
        padding: 0 32px;
        margin-bottom: 24px;
    }

    .news-scroll[b-shk1xyshiu] {
        padding: 0 32px 20px 32px;
        gap: 20px;
    }

    .news-scroll > :deep(.news-card)[b-shk1xyshiu] {
        width: 280px;
    }

    .section-title[b-shk1xyshiu] {
        font-size: 28px;
    }

    .category-filters[b-shk1xyshiu] {
        padding: 16px 32px;
        gap: 12px;
    }

    .filter-pill[b-shk1xyshiu] {
        padding: 10px 20px;
        font-size: 15px;
    }
}

/* Loading State */
.news-events-section.loading .news-scroll[b-shk1xyshiu] {
    display: flex;
    gap: 16px;
}

.news-events-section.loading .news-card[b-shk1xyshiu] {
    background: linear-gradient(90deg, #F5F5F5 25%, #E0E0E0 50%, #F5F5F5 75%);
    background-size: 200% 100%;
    animation: shimmer-b-shk1xyshiu 1.5s infinite;
}

/* Animation */
@keyframes shimmer-b-shk1xyshiu {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Entry Animation */
.category-filters[b-shk1xyshiu] {
    animation: slideDown-b-shk1xyshiu 0.3s ease-out;
}

@keyframes slideDown-b-shk1xyshiu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/LanguageSelector.razor.rz.scp.css */
.language-selector[b-jdzbkz1frp] {
    display: flex;
    align-items: center;
}

.language-btn[b-jdzbkz1frp] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--atkv-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.language-btn:hover[b-jdzbkz1frp] {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.language-btn:active[b-jdzbkz1frp] {
    transform: scale(0.95);
}

.language-icon[b-jdzbkz1frp] {
    width: 1.125rem;
    height: 1.125rem;
    stroke: currentColor;
}

.language-text[b-jdzbkz1frp] {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .language-btn[b-jdzbkz1frp] {
        padding: 0.25rem 0.625rem;
    }

    .language-icon[b-jdzbkz1frp] {
        width: 1rem;
        height: 1rem;
    }

    .language-text[b-jdzbkz1frp] {
        font-size: 0.8125rem;
    }
}
/* /Components/Layout/BottomNav.razor.rz.scp.css */
.atkv-bottom-nav[b-1vweiu5cs7] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: var(--atkv-primary-blue);
    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
}

.atkv-bottom-nav-container[b-1vweiu5cs7] {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    max-width: 600px;
    margin: 0 auto;
}

.atkv-bottom-nav-item[b-1vweiu5cs7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 8px 4px;
    transition: color var(--atkv-transition-base);
    position: relative;
}

.atkv-bottom-nav-item:hover[b-1vweiu5cs7] {
    color: white;
}

.atkv-bottom-nav-item i[b-1vweiu5cs7] {
    font-size: 24px;
    transition: transform var(--atkv-transition-base);
}

.atkv-bottom-nav-label[b-1vweiu5cs7] {
    font-size: 11px;
    font-weight: var(--atkv-font-weight-medium);
    text-align: center;
}

/* Active state */
.atkv-bottom-nav-item.active[b-1vweiu5cs7] {
    color: white;
}

.atkv-bottom-nav-item.active[b-1vweiu5cs7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: white;
    border-radius: 0 0 3px 3px;
}

.atkv-bottom-nav-item.active i[b-1vweiu5cs7] {
    transform: scale(1.1);
}

/* Center item special styling */
.atkv-bottom-nav-center[b-1vweiu5cs7] {
    position: relative;
}

.atkv-bottom-nav-center i[b-1vweiu5cs7] {
    font-size: 28px;
}

/* Mobile only - show bottom nav */
@media (max-width: 768px) {
    .atkv-bottom-nav[b-1vweiu5cs7] {
        display: block;
    }
}

/* Adjust for safe area on modern phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .atkv-bottom-nav[b-1vweiu5cs7] {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(72px + env(safe-area-inset-bottom));
    }
}

/* iPad and smaller tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .atkv-bottom-nav[b-1vweiu5cs7] {
        display: block;
        height: 64px;
    }

    .atkv-bottom-nav-container[b-1vweiu5cs7] {
        max-width: 768px;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .atkv-bottom-nav[b-1vweiu5cs7] {
        height: 56px;
    }

    .atkv-bottom-nav-item i[b-1vweiu5cs7] {
        font-size: 20px;
    }

    .atkv-bottom-nav-label[b-1vweiu5cs7] {
        font-size: 10px;
    }
}
/* /Components/Layout/TopNavBar.razor.rz.scp.css */
.atkv-top-nav[b-btd714jpmp] {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--atkv-primary-blue);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.atkv-top-nav-container[b-btd714jpmp] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.atkv-top-nav-logo img[b-btd714jpmp] {
    height: 36px;
    width: auto;
}

.atkv-top-nav-actions[b-btd714jpmp] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.atkv-top-nav-icon[b-btd714jpmp] {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 24px;
    padding: 8px;
    border-radius: var(--atkv-radius-sm);
    transition: background-color var(--atkv-transition-base);
    position: relative;
}

.atkv-top-nav-icon:hover[b-btd714jpmp] {
    background: rgba(255, 255, 255, 0.1);
}

.atkv-top-nav-icon:focus-visible[b-btd714jpmp] {
    outline: 2px solid white;
    outline-offset: 2px;
}

.atkv-notification-badge[b-btd714jpmp] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #FFA726;
    border-radius: 50%;
    border: 2px solid var(--atkv-primary-blue);
}

@media (max-width: 480px) {
    .atkv-top-nav[b-btd714jpmp] {
        height: 56px;
    }

    .atkv-top-nav-container[b-btd714jpmp] {
        padding: 0 16px;
    }

    .atkv-top-nav-logo img[b-btd714jpmp] {
        height: 32px;
    }

    .atkv-top-nav-icon[b-btd714jpmp] {
        font-size: 20px;
        padding: 6px;
    }
}
/* /Components/OfflineIndicator.razor.rz.scp.css */
.offline-indicator[b-lg34tz9s3m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ff4444;
    color: white;
    padding: 12px;
    text-align: center;
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out, background-color 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-weight: 500;
}

.offline-indicator.visible[b-lg34tz9s3m] {
    transform: translateY(0);
}

.offline-indicator.online[b-lg34tz9s3m] {
    background: #44ff44;
    color: #333;
}

.offline-indicator.online[b-lg34tz9s3m]::before {
    content: "✓ ";
    margin-right: 5px;
}

.offline-content[b-lg34tz9s3m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
}

.offline-content i[b-lg34tz9s3m] {
    font-size: 18px;
}

.pending-badge[b-lg34tz9s3m] {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 8px;
}

@media (max-width: 600px) {
    .offline-indicator[b-lg34tz9s3m] {
        font-size: 13px;
        padding: 10px;
    }

    .offline-content[b-lg34tz9s3m] {
        gap: 8px;
    }

    .offline-content i[b-lg34tz9s3m] {
        font-size: 16px;
    }
}
/* /Components/PWA/InstallPrompt.razor.rz.scp.css */
.install-prompt[b-w1uke9ckiy] {
    position: fixed;
    bottom: 80px; /* Above bottom navigation */
    left: 16px;
    right: 16px;
    z-index: 1000;
    animation: slideUp-b-w1uke9ckiy 0.3s ease-out;
}

.install-prompt-content[b-w1uke9ckiy] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
}

.close-button[b-w1uke9ckiy] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}

.close-button:hover[b-w1uke9ckiy] {
    color: #000;
}

.close-button:focus-visible[b-w1uke9ckiy] {
    outline: 2px solid #4A7AB8;
    outline-offset: 2px;
    border-radius: 4px;
}

.install-icon[b-w1uke9ckiy] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4A7AB8, #3A6BAA);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.install-icon i[b-w1uke9ckiy] {
    font-size: 28px;
    color: white;
}

.install-title[b-w1uke9ckiy] {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin: 0 0 8px 0;
}

.install-description[b-w1uke9ckiy] {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.install-buttons[b-w1uke9ckiy] {
    display: flex;
    gap: 12px;
}

.install-buttons .btn[b-w1uke9ckiy] {
    flex: 1;
    padding: 12px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.install-buttons .btn-primary[b-w1uke9ckiy] {
    background: #000;
    color: white;
}

.install-buttons .btn-primary:hover[b-w1uke9ckiy] {
    background: #2A2A2A;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.install-buttons .btn-secondary[b-w1uke9ckiy] {
    background: white;
    color: #000;
    border: 1px solid #E0E0E0;
}

.install-buttons .btn-secondary:hover[b-w1uke9ckiy] {
    background: #F5F5F5;
}

.install-buttons .btn:focus-visible[b-w1uke9ckiy] {
    outline: 2px solid #4A7AB8;
    outline-offset: 2px;
}

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

/* Tablet and Desktop */
@media (min-width: 768px) {
    .install-prompt[b-w1uke9ckiy] {
        max-width: 400px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 24px;
    }
}
/* /Components/UI/SearchInput.razor.rz.scp.css */
    .atkv-search-input[b-l7su78tsk5] {
        width: 100%;
    }

    .atkv-search-container[b-l7su78tsk5] {
        position: relative;
        display: flex;
        align-items: center;
        background: white;
        border: 2px solid #E5E7EB;
        border-radius: 9999px;
        padding: 0 16px;
        min-height: 48px;
        transition: border-color var(--atkv-transition-base);
    }

    .atkv-search-container:focus-within[b-l7su78tsk5] {
        border-color: var(--atkv-primary-blue);
        box-shadow: 0 0 0 3px rgba(74, 122, 184, 0.1);
    }

    .atkv-search-icon[b-l7su78tsk5] {
        color: var(--atkv-text-secondary);
        font-size: 18px;
        margin-right: 12px;
    }

    .atkv-search-field[b-l7su78tsk5] {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: 16px;
        color: var(--atkv-text-primary);
        padding: 12px 0;
    }

    .atkv-search-field[b-l7su78tsk5]::placeholder {
        color: var(--atkv-text-secondary);
    }

    .atkv-search-clear[b-l7su78tsk5],
    .atkv-search-filter[b-l7su78tsk5] {
        background: transparent;
        border: none;
        color: var(--atkv-text-secondary);
        cursor: pointer;
        font-size: 18px;
        padding: 8px;
        border-radius: var(--atkv-radius-sm);
        transition: all var(--atkv-transition-base);
        margin-left: 4px;
    }

    .atkv-search-clear:hover[b-l7su78tsk5],
    .atkv-search-filter:hover[b-l7su78tsk5] {
        color: var(--atkv-primary-blue);
        background: var(--atkv-bg-light);
    }

    .atkv-search-filter[b-l7su78tsk5] {
        color: var(--atkv-primary-blue);
    }

    @media (max-width: 480px) {
        .atkv-search-container[b-l7su78tsk5] {
            min-height: 44px;
            padding: 0 12px;
        }

        .atkv-search-icon[b-l7su78tsk5] {
            font-size: 16px;
            margin-right: 8px;
        }

        .atkv-search-field[b-l7su78tsk5] {
            font-size: 14px;
        }

        .atkv-search-clear[b-l7su78tsk5],
        .atkv-search-filter[b-l7su78tsk5] {
            font-size: 16px;
            padding: 6px;
        }
    }
/* /Components/Wallet/AddPaymentMethodModal.razor.rz.scp.css */
.modal-backdrop[b-xe41t88zj5] {
    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;
    animation: fadeIn-b-xe41t88zj5 0.25s ease-out;
    padding: 1rem;
}

.modal-backdrop.closing[b-xe41t88zj5] {
    animation: fadeOut-b-xe41t88zj5 0.25s ease-out;
}

.modal-content[b-xe41t88zj5] {
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-xe41t88zj5 0.25s ease-out;
}

.modal-content.closing[b-xe41t88zj5] {
    animation: slideDown-b-xe41t88zj5 0.25s ease-out;
}

.modal-header[b-xe41t88zj5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-xe41t88zj5] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-body[b-xe41t88zj5] {
    padding: 1.5rem;
}

/* Form Styles */
.form-group[b-xe41t88zj5] {
    margin-bottom: 1.25rem;
}

.form-group label[b-xe41t88zj5] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #666;
    margin-bottom: 0.5rem;
}

.form-input[b-xe41t88zj5],
.form-select[b-xe41t88zj5] {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9375rem;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    transition: border-color 0.2s;
    background: white;
}

.form-input:focus[b-xe41t88zj5],
.form-select:focus[b-xe41t88zj5] {
    outline: none;
    border-color: #00a651;
}

.form-input.invalid[b-xe41t88zj5] {
    border-color: #e74c3c;
}

.form-row[b-xe41t88zj5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Card Input */
.card-input-wrapper[b-xe41t88zj5] {
    position: relative;
}

.card-type-icon[b-xe41t88zj5] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: #666;
}

/* CVV Input */
.cvv-wrapper[b-xe41t88zj5] {
    position: relative;
}

.cvv-toggle[b-xe41t88zj5] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 0.25rem;
}

.cvv-toggle:hover[b-xe41t88zj5] {
    color: #333;
}

/* Error Messages */
.error-message[b-xe41t88zj5] {
    color: #e74c3c;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.error-banner[b-xe41t88zj5] {
    background: #ffebee;
    color: #c62828;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Save Card Option */
.save-card-option[b-xe41t88zj5] {
    margin: 1.5rem 0;
}

.checkbox-label[b-xe41t88zj5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

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

.checkbox-label span[b-xe41t88zj5] {
    font-size: 0.875rem;
    color: #333;
}

/* Security Info */
.security-info[b-xe41t88zj5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f0f9f4;
    border: 1px solid #c3e6ce;
    border-radius: 8px;
    color: #155724;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.security-info i[b-xe41t88zj5] {
    color: #00a651;
}

/* Billing Section */
.billing-section[b-xe41t88zj5] {
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
    margin-top: 1.5rem;
}

.section-toggle[b-xe41t88zj5] {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 0.75rem 0;
    cursor: pointer;
    font-size: 0.9375rem;
    color: #333;
}

.section-toggle:hover[b-xe41t88zj5] {
    color: #00a651;
}

.optional-label[b-xe41t88zj5] {
    margin-left: auto;
    margin-right: 0.5rem;
    font-size: 0.8125rem;
    color: #999;
}

.section-toggle i[b-xe41t88zj5] {
    color: #666;
    transition: transform 0.3s ease;
}

.billing-fields[b-xe41t88zj5] {
    animation: expandDown-b-xe41t88zj5 0.3s ease-out;
    padding-top: 0.5rem;
}

/* Modal Footer */
.modal-footer[b-xe41t88zj5] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
}

.modal-footer :deep(button)[b-xe41t88zj5] {
    flex: 1;
}

/* Animations */
@keyframes fadeIn-b-xe41t88zj5 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut-b-xe41t88zj5 {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

@keyframes slideDown-b-xe41t88zj5 {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

@keyframes expandDown-b-xe41t88zj5 {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modal-content[b-xe41t88zj5] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        animation: slideUpMobile-b-xe41t88zj5 0.25s ease-out;
    }

    .modal-content.closing[b-xe41t88zj5] {
        animation: slideDownMobile-b-xe41t88zj5 0.25s ease-out;
    }

    @keyframes slideUpMobile-b-xe41t88zj5 {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    @keyframes slideDownMobile-b-xe41t88zj5 {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }

    .form-row[b-xe41t88zj5] {
        grid-template-columns: 1fr;
    }

    .modal-footer[b-xe41t88zj5] {
        flex-direction: column;
    }

    .modal-footer :deep(button)[b-xe41t88zj5] {
        width: 100%;
    }
}
/* /Components/Wallet/TopUpModal.razor.rz.scp.css */
.modal-backdrop[b-pfc852rsv0] {
    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-pfc852rsv0 0.25s ease-out;
    padding: 1rem;
}

.modal-backdrop.closing[b-pfc852rsv0] {
    animation: fadeOut-b-pfc852rsv0 0.25s ease-out;
}

.modal-content[b-pfc852rsv0] {
    background: white;
    border-radius: 20px;
    max-width: 550px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-pfc852rsv0 0.25s ease-out;
}

.modal-content.closing[b-pfc852rsv0] {
    animation: slideDown-b-pfc852rsv0 0.25s ease-out;
}

.modal-header[b-pfc852rsv0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-pfc852rsv0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-body[b-pfc852rsv0] {
    padding: 1.5rem;
}

/* Current Balance Card */
.current-balance-card[b-pfc852rsv0] {
    background: linear-gradient(135deg, #00a651 0%, #00d168 100%);
    color: white;
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.balance-label[b-pfc852rsv0] {
    font-size: 0.75rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.balance-value[b-pfc852rsv0] {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.wallet-type[b-pfc852rsv0] {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Amount Section */
.amount-section[b-pfc852rsv0] {
    margin-bottom: 2rem;
}

.section-label[b-pfc852rsv0] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 1rem;
}

.preset-amounts[b-pfc852rsv0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.preset-button[b-pfc852rsv0] {
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #e5e5e5;
    border-radius: 25px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preset-button:hover[b-pfc852rsv0] {
    border-color: #00a651;
    background: #f9fff9;
}

.preset-button.selected[b-pfc852rsv0] {
    background: #00a651;
    border-color: #00a651;
    color: white;
}

.custom-amount label[b-pfc852rsv0] {
    display: block;
    font-size: 0.8125rem;
    color: #999;
    margin-bottom: 0.5rem;
}

.amount-input-wrapper[b-pfc852rsv0] {
    display: flex;
    align-items: center;
    position: relative;
}

.currency-prefix[b-pfc852rsv0] {
    position: absolute;
    left: 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #666;
}

.amount-input[b-pfc852rsv0] {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2rem;
    font-size: 1.125rem;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    transition: border-color 0.2s;
}

.amount-input:focus[b-pfc852rsv0] {
    outline: none;
    border-color: #00a651;
}

.amount-hint[b-pfc852rsv0] {
    font-size: 0.75rem;
    color: #999;
    margin-top: 0.5rem;
}

.error-message[b-pfc852rsv0] {
    color: #e74c3c;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* Payment Section */
.payment-section[b-pfc852rsv0] {
    margin-bottom: 1.5rem;
}

.saved-cards[b-pfc852rsv0] {
    margin-bottom: 0.75rem;
}

.payment-option[b-pfc852rsv0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-option:hover[b-pfc852rsv0] {
    border-color: #00a651;
    background: #f9fff9;
}

.payment-option.selected[b-pfc852rsv0] {
    border-color: #00a651;
    background: #f0fff5;
}

.payment-option input[type="radio"][b-pfc852rsv0] {
    margin: 0;
}

.payment-option i[b-pfc852rsv0] {
    font-size: 1.25rem;
    color: #666;
}

.card-details[b-pfc852rsv0] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-number[b-pfc852rsv0] {
    font-weight: 500;
    color: #333;
}

.card-expiry[b-pfc852rsv0] {
    font-size: 0.875rem;
    color: #999;
}

/* Terms Section */
.terms-section[b-pfc852rsv0] {
    margin-bottom: 1.5rem;
}

.checkbox-label[b-pfc852rsv0] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-pfc852rsv0] {
    margin-top: 0.125rem;
}

.checkbox-label span[b-pfc852rsv0] {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.4;
}

.checkbox-label a[b-pfc852rsv0] {
    color: #00a651;
    text-decoration: none;
}

.checkbox-label a:hover[b-pfc852rsv0] {
    text-decoration: underline;
}

/* Error Banner */
.error-banner[b-pfc852rsv0] {
    background: #ffebee;
    color: #c62828;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Success View */
.success-view[b-pfc852rsv0] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.success-icon[b-pfc852rsv0] {
    margin-bottom: 1.5rem;
}

.success-icon i[b-pfc852rsv0] {
    font-size: 4rem;
    color: #00a651;
}

.success-title[b-pfc852rsv0] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.success-amount[b-pfc852rsv0] {
    font-size: 2rem;
    font-weight: bold;
    color: #00a651;
    margin-bottom: 0.5rem;
}

.success-message[b-pfc852rsv0] {
    color: #666;
    margin-bottom: 1.5rem;
}

.new-balance[b-pfc852rsv0] {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-balance .balance-label[b-pfc852rsv0] {
    color: #666;
    text-transform: none;
    opacity: 1;
}

.new-balance .balance-value[b-pfc852rsv0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.transaction-reference[b-pfc852rsv0] {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 2rem;
}

.transaction-reference .mono[b-pfc852rsv0] {
    font-family: 'Monaco', 'Courier New', monospace;
    background: #f5f5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.success-actions[b-pfc852rsv0] {
    display: flex;
    gap: 1rem;
}

.success-actions :deep(button)[b-pfc852rsv0] {
    flex: 1;
}

/* Modal Footer */
.modal-footer[b-pfc852rsv0] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
}

.modal-footer :deep(button)[b-pfc852rsv0] {
    flex: 1;
}

/* Animations */
@keyframes fadeIn-b-pfc852rsv0 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut-b-pfc852rsv0 {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

@keyframes slideDown-b-pfc852rsv0 {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modal-content[b-pfc852rsv0] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        animation: slideUpMobile-b-pfc852rsv0 0.25s ease-out;
    }

    .modal-content.closing[b-pfc852rsv0] {
        animation: slideDownMobile-b-pfc852rsv0 0.25s ease-out;
    }

    @keyframes slideUpMobile-b-pfc852rsv0 {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    @keyframes slideDownMobile-b-pfc852rsv0 {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }

    .preset-amounts[b-pfc852rsv0] {
        grid-template-columns: repeat(3, 1fr);
    }

    .modal-footer[b-pfc852rsv0] {
        flex-direction: column;
    }

    .modal-footer :deep(button)[b-pfc852rsv0] {
        width: 100%;
    }

    .success-actions[b-pfc852rsv0] {
        flex-direction: column;
    }
}
/* /Components/Wallet/TransactionDetailModal.razor.rz.scp.css */
.modal-backdrop[b-q49r6larnn] {
    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-q49r6larnn 0.25s ease-out;
    padding: 1rem;
}

.modal-backdrop.closing[b-q49r6larnn] {
    animation: fadeOut-b-q49r6larnn 0.25s ease-out;
}

.modal-content[b-q49r6larnn] {
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-q49r6larnn 0.25s ease-out;
}

.modal-content.closing[b-q49r6larnn] {
    animation: slideDown-b-q49r6larnn 0.25s ease-out;
}

.modal-header[b-q49r6larnn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-q49r6larnn] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-body[b-q49r6larnn] {
    padding: 1.5rem;
}

/* Transaction Status Badge */
.transaction-status-badge[b-q49r6larnn] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.transaction-status-badge.completed[b-q49r6larnn] {
    background: #e8f5e9;
    color: #2e7d32;
}

.transaction-status-badge.pending[b-q49r6larnn] {
    background: #fff3e0;
    color: #f57c00;
}

.transaction-status-badge.failed[b-q49r6larnn] {
    background: #ffebee;
    color: #c62828;
}

/* Detail Sections */
.detail-section[b-q49r6larnn] {
    margin-bottom: 2rem;
}

.detail-section:last-child[b-q49r6larnn] {
    margin-bottom: 0;
}

.section-title[b-q49r6larnn] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

/* Main Amount Display */
.detail-amount[b-q49r6larnn] {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.detail-amount.positive[b-q49r6larnn] {
    color: #00a651;
}

.detail-amount.negative[b-q49r6larnn] {
    color: #e74c3c;
}

.amount-sign[b-q49r6larnn] {
    font-size: 1.5rem;
}

.amount-currency[b-q49r6larnn] {
    font-size: 1.25rem;
    opacity: 0.8;
}

.detail-description[b-q49r6larnn] {
    font-size: 1.125rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
}

.detail-merchant[b-q49r6larnn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9375rem;
}

/* Detail Rows */
.detail-row[b-q49r6larnn] {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f8f8f8;
}

.detail-row:last-child[b-q49r6larnn] {
    border-bottom: none;
}

.detail-label[b-q49r6larnn] {
    color: #999;
    font-size: 0.875rem;
}

.detail-value[b-q49r6larnn] {
    color: #333;
    font-weight: 500;
    font-size: 0.875rem;
    text-align: right;
}

.detail-value.mono[b-q49r6larnn] {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.8125rem;
}

/* Collapsible Section */
.section-toggle[b-q49r6larnn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-bottom: 1rem;
}

.section-toggle .section-title[b-q49r6larnn] {
    margin-bottom: 0;
}

.section-toggle i[b-q49r6larnn] {
    color: #666;
    transition: transform 0.3s ease;
}

.additional-info[b-q49r6larnn] {
    animation: expandDown-b-q49r6larnn 0.3s ease-out;
}

/* Modal Footer */
.modal-footer[b-q49r6larnn] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.modal-footer :deep(button)[b-q49r6larnn] {
    flex: 1;
    min-width: 120px;
}

/* Animations */
@keyframes fadeIn-b-q49r6larnn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut-b-q49r6larnn {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

@keyframes slideDown-b-q49r6larnn {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

@keyframes expandDown-b-q49r6larnn {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modal-content[b-q49r6larnn] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        animation: slideUpMobile-b-q49r6larnn 0.25s ease-out;
    }

    .modal-content.closing[b-q49r6larnn] {
        animation: slideDownMobile-b-q49r6larnn 0.25s ease-out;
    }

    @keyframes slideUpMobile-b-q49r6larnn {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    @keyframes slideDownMobile-b-q49r6larnn {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(100%);
        }
    }

    .modal-footer[b-q49r6larnn] {
        flex-direction: column;
    }

    .modal-footer :deep(button)[b-q49r6larnn] {
        width: 100%;
    }
}
/* /Components/Wallet/TransferModal.razor.rz.scp.css */
.modal-backdrop[b-3vytv8cx7o] {
    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-3vytv8cx7o 0.25s ease-out;
    padding: 1rem;
}

.modal-backdrop.closing[b-3vytv8cx7o] {
    animation: fadeOut-b-3vytv8cx7o 0.25s ease-out;
}

.modal-content[b-3vytv8cx7o] {
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-3vytv8cx7o 0.25s ease-out;
}

.modal-content.closing[b-3vytv8cx7o] {
    animation: slideDown-b-3vytv8cx7o 0.25s ease-out;
}

.modal-header[b-3vytv8cx7o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-3vytv8cx7o] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-body[b-3vytv8cx7o] {
    padding: 1.5rem;
}

/* Wallet Selection */
.wallet-selection[b-3vytv8cx7o] {
    margin-bottom: 1rem;
}

.section-label[b-3vytv8cx7o] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.75rem;
}

.wallet-options[b-3vytv8cx7o] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wallet-option[b-3vytv8cx7o] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wallet-option:hover[b-3vytv8cx7o] {
    border-color: #00a651;
    background: #f9fff9;
}

.wallet-option.selected[b-3vytv8cx7o] {
    border-color: #00a651;
    background: #f0fff5;
}

.wallet-icon[b-3vytv8cx7o] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
}

.wallet-icon.atkv[b-3vytv8cx7o] {
    background: linear-gradient(135deg, #00a651 0%, #00d168 100%);
    color: white;
}

.wallet-icon.bonus[b-3vytv8cx7o] {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
    color: white;
}

.wallet-details[b-3vytv8cx7o] {
    flex: 1;
}

.wallet-name[b-3vytv8cx7o] {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.25rem;
}

.wallet-balance[b-3vytv8cx7o] {
    font-size: 0.875rem;
    color: #666;
}

.wallet-option input[type="radio"][b-3vytv8cx7o] {
    margin: 0;
}

/* Transfer Arrow */
.transfer-arrow[b-3vytv8cx7o] {
    text-align: center;
    padding: 0.5rem;
    color: #00a651;
    font-size: 1.5rem;
}

/* Amount Section */
.amount-section[b-3vytv8cx7o] {
    margin-bottom: 1.5rem;
}

.amount-input-wrapper[b-3vytv8cx7o] {
    display: flex;
    align-items: center;
    position: relative;
}

.currency-prefix[b-3vytv8cx7o] {
    position: absolute;
    left: 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #666;
}

.currency-suffix[b-3vytv8cx7o] {
    position: absolute;
    right: 1rem;
    font-size: 0.875rem;
    color: #666;
}

.amount-input[b-3vytv8cx7o] {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-left: 2rem;
    font-size: 1.125rem;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    transition: border-color 0.2s;
}

.amount-input:focus[b-3vytv8cx7o] {
    outline: none;
    border-color: #00a651;
}

.available-balance[b-3vytv8cx7o] {
    font-size: 0.8125rem;
    color: #666;
    margin-top: 0.5rem;
}

.error-message[b-3vytv8cx7o] {
    color: #e74c3c;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* Note Section */
.note-section[b-3vytv8cx7o] {
    margin-bottom: 1.5rem;
}

.optional-label[b-3vytv8cx7o] {
    font-size: 0.75rem;
    color: #999;
    margin-left: 0.5rem;
}

.form-input[b-3vytv8cx7o] {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9375rem;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    transition: border-color 0.2s;
}

.form-input:focus[b-3vytv8cx7o] {
    outline: none;
    border-color: #00a651;
}

/* Error Banner */
.error-banner[b-3vytv8cx7o] {
    background: #ffebee;
    color: #c62828;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Transfer Summary (Confirmation) */
.transfer-summary[b-3vytv8cx7o] {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 1.5rem;
}

.summary-section[b-3vytv8cx7o] {
    padding: 1rem 0;
    border-bottom: 1px solid #e5e5e5;
}

.summary-section:last-child[b-3vytv8cx7o] {
    border-bottom: none;
}

.summary-label[b-3vytv8cx7o] {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.summary-value[b-3vytv8cx7o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
}

.summary-amount[b-3vytv8cx7o] {
    font-size: 1.25rem;
    font-weight: bold;
}

.summary-amount.positive[b-3vytv8cx7o] {
    color: #00a651;
}

.summary-amount.negative[b-3vytv8cx7o] {
    color: #e74c3c;
}

.transfer-arrow-small[b-3vytv8cx7o] {
    text-align: center;
    padding: 0.5rem;
    color: #999;
}

.fee-section[b-3vytv8cx7o] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-top: 1px solid #e5e5e5;
}

.fee-label[b-3vytv8cx7o] {
    color: #666;
    font-size: 0.875rem;
}

.fee-amount[b-3vytv8cx7o] {
    font-weight: 500;
    color: #ff9800;
}

.note-display[b-3vytv8cx7o] {
    padding: 0.75rem 0;
    border-top: 1px solid #e5e5e5;
}

.note-label[b-3vytv8cx7o] {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 0.25rem;
}

.note-text[b-3vytv8cx7o] {
    color: #333;
    font-size: 0.875rem;
}

/* Success View */
.success-view[b-3vytv8cx7o] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.success-icon[b-3vytv8cx7o] {
    margin-bottom: 1.5rem;
}

.success-icon i[b-3vytv8cx7o] {
    font-size: 4rem;
    color: #00a651;
}

.success-title[b-3vytv8cx7o] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 2rem;
}

.updated-balances[b-3vytv8cx7o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.balance-card[b-3vytv8cx7o] {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 8px;
}

.balance-card .balance-label[b-3vytv8cx7o] {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.balance-card .balance-value[b-3vytv8cx7o] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
}

.transaction-reference[b-3vytv8cx7o] {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 2rem;
}

.transaction-reference .mono[b-3vytv8cx7o] {
    font-family: 'Monaco', 'Courier New', monospace;
    background: #f5f5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.success-actions[b-3vytv8cx7o] {
    display: flex;
    gap: 1rem;
}

.success-actions :deep(button)[b-3vytv8cx7o] {
    flex: 1;
}

/* Modal Footer */
.modal-footer[b-3vytv8cx7o] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
}

.modal-footer :deep(button)[b-3vytv8cx7o] {
    flex: 1;
}

/* Animations */
@keyframes fadeIn-b-3vytv8cx7o {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut-b-3vytv8cx7o {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideUp-b-3vytv8cx7o {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown-b-3vytv8cx7o {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modal-content[b-3vytv8cx7o] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        animation: slideUpMobile-b-3vytv8cx7o 0.25s ease-out;
    }

    .modal-content.closing[b-3vytv8cx7o] {
        animation: slideDownMobile-b-3vytv8cx7o 0.25s ease-out;
    }

    @keyframes slideUpMobile-b-3vytv8cx7o {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    @keyframes slideDownMobile-b-3vytv8cx7o {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }

    .updated-balances[b-3vytv8cx7o] {
        grid-template-columns: 1fr;
    }

    .modal-footer[b-3vytv8cx7o] {
        flex-direction: column;
    }

    .modal-footer :deep(button)[b-3vytv8cx7o] {
        width: 100%;
    }
}
/* /Components/Wallet/WalletCard.razor.rz.scp.css */
/* Wallet Card Container - Following BRANDING.md specifications */
.wallet-card[b-1cehckkyxu] {
    background: linear-gradient(135deg, #B3D7F0 0%, #A8CDE8 100%);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.wallet-card:hover[b-1cehckkyxu] {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.wallet-card:active[b-1cehckkyxu] {
    transform: translateY(0);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
}

.wallet-card:focus[b-1cehckkyxu] {
    outline: 2px solid #FFA726;
    outline-offset: 2px;
}

/* Wallet Header */
.wallet-header[b-1cehckkyxu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.wallet-title[b-1cehckkyxu] {
    font-size: 24px;
    font-weight: 700;
    color: #1A3B47;
    margin: 0;
}

.wallet-arrow[b-1cehckkyxu] {
    font-size: 20px;
    color: #1A3B47;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.wallet-card:hover .wallet-arrow[b-1cehckkyxu] {
    transform: translateX(4px);
    opacity: 1;
}

/* Wallet Balances Container */
.wallet-balances[b-1cehckkyxu] {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

/* Balance Item */
.wallet-balance-item[b-1cehckkyxu] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 140px;
}

/* Icon Circles */
.wallet-icon-circle[b-1cehckkyxu] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFA726;
    color: white;
    font-size: 20px;
    box-shadow: 0px 2px 4px rgba(255, 167, 38, 0.3);
    flex-shrink: 0;
}

.wallet-icon-circle.atkv-wallet[b-1cehckkyxu] {
    background: linear-gradient(135deg, #FFA726, #FF9800);
}

.wallet-icon-circle.bonus-wallet[b-1cehckkyxu] {
    background: linear-gradient(135deg, #FFB74D, #FFA726);
}

/* Wallet Details */
.wallet-details[b-1cehckkyxu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wallet-label[b-1cehckkyxu] {
    font-size: 12px;
    font-weight: 500;
    color: #1A3B47;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Amount Display */
.wallet-amount[b-1cehckkyxu] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.amount[b-1cehckkyxu] {
    font-size: 22px;
    font-weight: 700;
    color: #1A3B47;
}

.currency[b-1cehckkyxu] {
    font-size: 14px;
    font-weight: 500;
    color: #1A3B47;
    opacity: 0.7;
}

.currency-badge[b-1cehckkyxu] {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(26, 59, 71, 0.1);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #1A3B47;
}

/* Responsive Design */
@media (max-width: 480px) {
    .wallet-card[b-1cehckkyxu] {
        padding: 20px;
        border-radius: 16px;
    }

    .wallet-title[b-1cehckkyxu] {
        font-size: 20px;
    }

    .wallet-balances[b-1cehckkyxu] {
        gap: 24px;
    }

    .wallet-icon-circle[b-1cehckkyxu] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .amount[b-1cehckkyxu] {
        font-size: 18px;
    }

    .wallet-balance-item[b-1cehckkyxu] {
        min-width: 120px;
    }
}

/* Decorative Background Pattern */
.wallet-card[b-1cehckkyxu]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Animation for loading state */
@keyframes shimmer-b-1cehckkyxu {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.wallet-card.loading .amount[b-1cehckkyxu] {
    background: linear-gradient(90deg, #E0E0E0 25%, #F0F0F0 50%, #E0E0E0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-1cehckkyxu 1.5s infinite;
    color: transparent;
    border-radius: 4px;
    display: inline-block;
    min-width: 80px;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/**
 * ATKV Mobile App - Main Layout Styles
 * Design System: ATKV Brand (Blue navigation)
 * Mobile-first responsive design
 * WCAG 2.1 AA compliant
 */

/* ==========================================================================
   Mobile-First PWA Layout
   ========================================================================== */

.mobile-app-layout[b-c7rq40ypwy] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background: #FAFAFA;
}

/* Skip navigation link for accessibility */
.skip-navigation[b-c7rq40ypwy] {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--atkv-primary-blue);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 1000;
}

.skip-navigation:focus[b-c7rq40ypwy] {
    top: 0;
}

/* ==========================================================================
   Top Navigation Header
   ========================================================================== */

.mobile-header[b-c7rq40ypwy] {
    /* ATKV Blue background per design */
    background-color: var(--color-primary-blue);
    color: var(--color-white);

    /* Height per design system */
    height: var(--nav-height-mobile);
    padding: 0 var(--spacing-4);

    /* Elevation shadow */
    box-shadow: var(--shadow-sm);

    flex-shrink: 0;
    z-index: var(--z-header);

    /* Safe area for notched devices */
    padding-top: env(safe-area-inset-top);
}

.header-content[b-c7rq40ypwy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    max-width: 100%;
    height: 100%;
}

.header-left[b-c7rq40ypwy] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 1;
}

.header-right[b-c7rq40ypwy] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Logo styling per design (40-48px height) */
.header-logo[b-c7rq40ypwy] {
    height: 40px;
    width: auto;
    object-fit: contain;
    /* Filter to make logo white on blue background if needed */
    filter: brightness(0) invert(1);
}

/* Title - hide on very small screens, show ATKV branding */
.header-title[b-c7rq40ypwy] {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    margin: 0;
    color: var(--color-white);
    white-space: nowrap;

    /* Hide on small screens to save space */
    display: none;
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */

.mobile-content[b-c7rq40ypwy] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #FAFAFA;
}

.content-body[b-c7rq40ypwy] {
    min-height: calc(100vh - 136px); /* Account for top (64px) and bottom (72px) nav */
    padding-bottom: 80px; /* Extra space for bottom nav */
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .content-body[b-c7rq40ypwy] {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* ==========================================================================
   Bottom Navigation Container
   ========================================================================== */

.mobile-bottom-nav[b-c7rq40ypwy] {
    /* ATKV Blue background per design */
    background-color: var(--color-primary-blue);

    /* Fixed at bottom */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    /* Height per design system */
    height: var(--nav-height-mobile);

    /* Reverse shadow (shadow going up) */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);

    flex-shrink: 0;
    z-index: var(--z-nav);

    /* Safe area for devices with bottom notch/home indicator */
    padding-bottom: env(safe-area-inset-bottom);
}

/* ==========================================================================
   Responsive Design (Mobile-First)
   ========================================================================== */

/* Small mobile devices (375px and up) - Show title */
@media (min-width: 375px) {
    .header-title[b-c7rq40ypwy] {
        display: block;
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .mobile-header[b-c7rq40ypwy] {
        height: var(--nav-height-desktop);
        padding: 0 var(--spacing-6);
    }

    .header-logo[b-c7rq40ypwy] {
        height: 48px;
    }

    .header-title[b-c7rq40ypwy] {
        font-size: var(--font-size-h3);
    }

    .content-body[b-c7rq40ypwy] {
        padding: var(--spacing-6);
        max-width: 1200px;
        margin: 0 auto;
    }

    .mobile-bottom-nav[b-c7rq40ypwy] {
        height: var(--nav-height-desktop);
    }
}

/* Large Desktop (1024px and up) */
@media (min-width: 1024px) {
    .mobile-header[b-c7rq40ypwy] {
        padding: 0 var(--spacing-8);
    }

    .content-body[b-c7rq40ypwy] {
        padding: var(--spacing-8) var(--spacing-12);
    }
}

/* Extra Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    .content-body[b-c7rq40ypwy] {
        max-width: 1440px;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    .mobile-header[b-c7rq40ypwy],
    .mobile-bottom-nav[b-c7rq40ypwy] {
        border: 2px solid var(--color-white);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .mobile-header[b-c7rq40ypwy],
    .mobile-bottom-nav[b-c7rq40ypwy] {
        display: none;
    }

    .mobile-content[b-c7rq40ypwy] {
        padding-bottom: 0;
        overflow: visible;
    }

    .content-body[b-c7rq40ypwy] {
        padding: 0;
        max-width: 100%;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/**
 * ATKV Mobile App - Bottom Navigation Styles
 * Design System: ATKV Brand (Blue navigation)
 * Reference: /design/page-010
 * Mobile-first responsive design
 * WCAG 2.1 AA compliant
 */

/* ==========================================================================
   Bottom Navigation Container
   ========================================================================== */

.bottom-nav-container[b-mvd7o8wf92] {
    display: flex;
    justify-content: space-around;
    align-items: center;

    /* Full width and height */
    width: 100%;
    height: 100%;

    /* No additional padding - controlled by parent */
    padding: 0;

    /* Transparent background - blue comes from parent */
    background-color: transparent;
}

/* ==========================================================================
   Navigation Items
   ========================================================================== */

.nav-item[b-mvd7o8wf92] {
    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);

    /* Sizing - equal distribution */
    flex: 1;
    min-width: 60px;
    max-width: 120px;

    /* Spacing */
    padding: var(--spacing-2) var(--spacing-1);

    /* Remove default link styling */
    text-decoration: none;

    /* White text/icons on blue background per design */
    color: rgba(255, 255, 255, 0.7);

    /* Touch feedback */
    position: relative;
    border-radius: var(--radius-sm);

    /* Smooth transitions */
    transition: all var(--transition-base);

    /* Ensure touch target size */
    min-height: var(--touch-target-minimum);
}

/* Hover state - slightly brighter */
.nav-item:hover[b-mvd7o8wf92] {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

/* Active state - full white, with background circle */
.nav-item.active[b-mvd7o8wf92] {
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
}

.nav-item.active[b-mvd7o8wf92]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    z-index: -1;
}

/* Active icon slightly larger */
.nav-item.active .nav-icon[b-mvd7o8wf92] {
    transform: scale(1.1);
}

/* Focus visible state for keyboard navigation */
.nav-item:focus-visible[b-mvd7o8wf92] {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   Navigation Icons
   ========================================================================== */

.nav-icon[b-mvd7o8wf92] {
    display: flex;
    align-items: center;
    justify-content: center;

    /* Icon size per design (24-28px) */
    width: 24px;
    height: 24px;

    /* Smooth transform for active state */
    transition: transform var(--transition-base);
}

.nav-icon svg[b-mvd7o8wf92] {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ==========================================================================
   Navigation Labels
   ========================================================================== */

.nav-label[b-mvd7o8wf92] {
    /* Typography per design (11-13px, medium weight) */
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;

    /* Center and prevent wrapping */
    text-align: center;
    white-space: nowrap;

    /* Slight letter spacing for readability */
    letter-spacing: 0.01em;
}

/* ==========================================================================
   Responsive Design (Mobile-First)
   ========================================================================== */

/* Tablets (768px and up) - Slightly larger */
@media (min-width: 768px) {
    .nav-item[b-mvd7o8wf92] {
        min-width: 80px;
        max-width: 140px;
        padding: var(--spacing-3) var(--spacing-2);
        gap: var(--spacing-2);
    }

    .nav-icon[b-mvd7o8wf92] {
        width: 28px;
        height: 28px;
    }

    .nav-label[b-mvd7o8wf92] {
        font-size: 13px;
    }
}

/* Desktop (1024px and up) - Horizontal layout option */
@media (min-width: 1024px) {
    /* Keep bottom nav, but allow more space */
    .nav-item[b-mvd7o8wf92] {
        flex-direction: row;
        gap: var(--spacing-3);
        padding: var(--spacing-3) var(--spacing-4);
        max-width: 160px;
    }

    .nav-label[b-mvd7o8wf92] {
        font-size: 14px;
    }
}

/* ==========================================================================
   Touch Feedback (Mobile Devices)
   ========================================================================== */

/* Active touch state (tap feedback) */
.nav-item:active[b-mvd7o8wf92] {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

/* Prevent highlight on tap */
.nav-item[b-mvd7o8wf92] {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

/* ==========================================================================
   Accessibility Features
   ========================================================================== */

/* Ensure proper contrast in high contrast mode */
@media (prefers-contrast: high) {
    .nav-item[b-mvd7o8wf92] {
        color: var(--color-white);
        border: 1px solid transparent;
    }

    .nav-item:hover[b-mvd7o8wf92],
    .nav-item:focus-visible[b-mvd7o8wf92] {
        border-color: var(--color-white);
    }

    .nav-item.active[b-mvd7o8wf92] {
        background-color: rgba(255, 255, 255, 0.3);
        border-color: var(--color-white);
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .nav-item[b-mvd7o8wf92],
    .nav-icon[b-mvd7o8wf92] {
        transition: none;
    }

    .nav-item:hover[b-mvd7o8wf92],
    .nav-item:active[b-mvd7o8wf92],
    .nav-item.active .nav-icon[b-mvd7o8wf92] {
        transform: none;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .bottom-nav-container[b-mvd7o8wf92] {
        display: none;
    }
}
/* /Pages/Admin/AdminDashboard.razor.rz.scp.css */
.admin-dashboard[b-1tee5h7d8t] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.dashboard-title[b-1tee5h7d8t] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #1A3B47;
}

/* Loading State */
.loading-spinner[b-1tee5h7d8t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.spinner[b-1tee5h7d8t] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #830101;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin-b-1tee5h7d8t 1s linear infinite;
}

@keyframes spin-b-1tee5h7d8t {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error Message */
.error-message[b-1tee5h7d8t] {
    background: #fff5f5;
    border: 1px solid #fc8181;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    color: #c53030;
}

.error-message i[b-1tee5h7d8t] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Metrics Grid */
.metrics-grid[b-1tee5h7d8t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.metric-card[b-1tee5h7d8t] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.metric-card:hover[b-1tee5h7d8t] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.metric-icon[b-1tee5h7d8t] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
}

.metric-icon.members[b-1tee5h7d8t] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-icon.registrations[b-1tee5h7d8t] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-icon.sessions[b-1tee5h7d8t] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-icon.wallet[b-1tee5h7d8t] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.metric-icon.bookings[b-1tee5h7d8t] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.metric-icon.revenue[b-1tee5h7d8t] {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.metric-content h3[b-1tee5h7d8t] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: #1A3B47;
}

.metric-content p[b-1tee5h7d8t] {
    font-size: 0.875rem;
    margin: 0.25rem 0;
    color: #4A5568;
    font-weight: 600;
}

.metric-content small[b-1tee5h7d8t] {
    font-size: 0.75rem;
    color: #718096;
}

/* Dashboard Sections */
.dashboard-section[b-1tee5h7d8t] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dashboard-section h2[b-1tee5h7d8t] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: #1A3B47;
}

.dashboard-section h3[b-1tee5h7d8t] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1rem 0 0.75rem 0;
    color: #4A5568;
}

/* Health Grid */
.health-grid[b-1tee5h7d8t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.health-item[b-1tee5h7d8t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid;
    gap: 0.5rem;
}

.health-item i[b-1tee5h7d8t] {
    font-size: 2rem;
}

.health-item span[b-1tee5h7d8t] {
    font-weight: 600;
    font-size: 1rem;
}

.health-item small[b-1tee5h7d8t] {
    font-size: 0.75rem;
    opacity: 0.8;
}

.health-item.healthy[b-1tee5h7d8t] {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #16a34a;
}

.health-item.degraded[b-1tee5h7d8t] {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #d97706;
}

.health-item.unhealthy[b-1tee5h7d8t] {
    background: #fef2f2;
    border-color: #ef4444;
    color: #dc2626;
}

/* Activity List */
.activity-list[b-1tee5h7d8t] {
    margin-bottom: 1.5rem;
}

.activity-item[b-1tee5h7d8t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem;
    border-bottom: 1px solid #e2e8f0;
}

.activity-item:last-child[b-1tee5h7d8t] {
    border-bottom: none;
}

.activity-item i[b-1tee5h7d8t] {
    font-size: 1.5rem;
    color: #667eea;
}

.activity-details[b-1tee5h7d8t] {
    flex: 1;
}

.activity-details strong[b-1tee5h7d8t] {
    display: block;
    color: #1A3B47;
    margin-bottom: 0.25rem;
}

.activity-details small[b-1tee5h7d8t] {
    color: #718096;
    font-size: 0.75rem;
}

/* Dashboard Footer */
.dashboard-footer[b-1tee5h7d8t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dashboard-footer p[b-1tee5h7d8t] {
    margin: 0;
    color: #718096;
    font-size: 0.875rem;
}

/* Button */
.btn[b-1tee5h7d8t] {
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s, transform 0.2s;
}

.btn-primary[b-1tee5h7d8t] {
    background: #830101;
    color: white;
}

.btn-primary:hover[b-1tee5h7d8t] {
    background: #6b0101;
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-dashboard[b-1tee5h7d8t] {
        padding: 1rem;
    }

    .dashboard-title[b-1tee5h7d8t] {
        font-size: 1.5rem;
    }

    .metrics-grid[b-1tee5h7d8t] {
        grid-template-columns: 1fr;
    }

    .health-grid[b-1tee5h7d8t] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-footer[b-1tee5h7d8t] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}
/* /Pages/Auth/ChangePassword.razor.rz.scp.css */
/**
 * ATKV Mobile App - Change Password Page Styles
 * Design System: ATKV Brand (Blue gradient background)
 * Reference: /design/page-008, page-009
 * Mobile-first responsive design
 * WCAG 2.1 AA compliant
 */

/* ==========================================================================
   Container & Background
   ========================================================================== */

.change-password-container[b-usahwp5zw0] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);

    /* Blue gradient background (left to right: #5A8FC7 → #E8EDF5) */
    background: linear-gradient(
        to right,
        #5A8FC7 0%,
        #7BA4D5 50%,
        #E8EDF5 100%
    );

    overflow-x: hidden;
    overflow-y: auto;
}

/* ==========================================================================
   Change Password Card
   ========================================================================== */

.change-password-card[b-usahwp5zw0] {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-8);
    width: 100%;
    max-width: 480px;

    position: relative;
    z-index: 10;

    /* Smooth entrance animation */
    animation: slideUpFadeIn-b-usahwp5zw0 0.4s ease-out;
}

/* ==========================================================================
   Header
   ========================================================================== */

.change-password-header[b-usahwp5zw0] {
    text-align: center;
    margin-bottom: var(--spacing-6);
}

.title[b-usahwp5zw0] {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-heading);
    margin: 0 0 var(--spacing-2) 0;
}

.subtitle[b-usahwp5zw0] {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
    margin: 0;
}

/* ==========================================================================
   Alert Messages
   ========================================================================== */

.alert[b-usahwp5zw0] {
    border-radius: var(--radius-md);
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-body-sm);
}

.alert i[b-usahwp5zw0] {
    font-size: 20px;
    flex-shrink: 0;
}

.alert-danger[b-usahwp5zw0] {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

.alert-success[b-usahwp5zw0] {
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

/* ==========================================================================
   Form Groups
   ========================================================================== */

.form-group[b-usahwp5zw0] {
    margin-bottom: var(--spacing-5);
}

.form-label[b-usahwp5zw0] {
    display: block;
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.form-label i[b-usahwp5zw0] {
    margin-right: var(--spacing-1);
    color: var(--color-text-secondary);
}

/* Inputs use design system styles from inputs.css */
.form-control[b-usahwp5zw0] {
    width: 100%;
}

/* ==========================================================================
   Validation Messages
   ========================================================================== */

.text-danger[b-usahwp5zw0] {
    display: block;
    color: var(--color-error);
    font-size: var(--font-size-caption);
    margin-top: var(--spacing-1);
    line-height: 1.4;
}

/* ==========================================================================
   Submit Button ("Stoor" / "Save")
   ========================================================================== */

.btn-submit[b-usahwp5zw0] {
    /* Extends atkv-btn-primary from design system */
    width: 100%;
    padding: var(--spacing-4) var(--spacing-8);

    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-button);

    color: var(--color-white);
    background: var(--color-primary-black);
    border: none;
    border-radius: var(--radius-full);

    min-height: var(--touch-target-comfortable);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);

    cursor: pointer;
    transition: all var(--transition-base);

    margin-top: var(--spacing-6);
}

.btn-submit:hover:not(:disabled)[b-usahwp5zw0] {
    background: #2A2A2A;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-submit:active:not(:disabled)[b-usahwp5zw0] {
    background: #0A0A0A;
    transform: scale(0.98);
}

.btn-submit:focus-visible[b-usahwp5zw0] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.btn-submit:disabled[b-usahwp5zw0] {
    background: var(--color-ui-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ==========================================================================
   Spinner
   ========================================================================== */

.spinner-border[b-usahwp5zw0] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate-b-usahwp5zw0 0.75s linear infinite;
}

@keyframes spinner-rotate-b-usahwp5zw0 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Back Link
   ========================================================================== */

.back-link-container[b-usahwp5zw0] {
    text-align: center;
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-ui-border);
}

.back-link[b-usahwp5zw0] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);

    color: var(--color-primary-blue);
    text-decoration: none;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);

    transition: color var(--transition-base);
}

.back-link i[b-usahwp5zw0] {
    font-size: 16px;
}

.back-link:hover[b-usahwp5zw0] {
    color: var(--color-secondary-blue);
    text-decoration: underline;
}

.back-link:focus-visible[b-usahwp5zw0] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes slideUpFadeIn-b-usahwp5zw0 {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .change-password-card[b-usahwp5zw0] {
        animation: none;
    }

    .btn-submit:hover:not(:disabled)[b-usahwp5zw0] {
        transform: none;
    }

    .btn-submit:active:not(:disabled)[b-usahwp5zw0] {
        transform: none;
    }
}

/* ==========================================================================
   Responsive Design (Mobile-First)
   ========================================================================== */

/* Small mobile devices (320px - 374px) */
@media (max-width: 374px) {
    .change-password-container[b-usahwp5zw0] {
        padding: var(--spacing-3);
    }

    .change-password-card[b-usahwp5zw0] {
        padding: var(--spacing-6);
    }

    .title[b-usahwp5zw0] {
        font-size: var(--font-size-h3);
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .change-password-container[b-usahwp5zw0] {
        padding: var(--spacing-8);
    }

    .change-password-card[b-usahwp5zw0] {
        padding: var(--spacing-12);
    }

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

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .change-password-card[b-usahwp5zw0] {
        max-width: 540px;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    .change-password-card[b-usahwp5zw0] {
        border: 2px solid var(--color-text-primary);
    }

    .form-control[b-usahwp5zw0] {
        border-width: 2px;
    }

    .btn-submit[b-usahwp5zw0] {
        border: 2px solid var(--color-white);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .change-password-container[b-usahwp5zw0] {
        background: white;
    }

    .btn-submit[b-usahwp5zw0] {
        display: none;
    }
}
/* /Pages/Auth/ConfirmEmail.razor.rz.scp.css */
.confirm-email-container[b-u8qrj373tb] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.confirm-email-card[b-u8qrj373tb] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 100%;
    max-width: 500px;
    text-align: center;
}

.confirm-email-header[b-u8qrj373tb] {
    margin-bottom: 2rem;
}

.confirm-email-logo[b-u8qrj373tb] {
    width: 120px;
    height: auto;
    margin-bottom: 1.5rem;
}

.confirm-email-title[b-u8qrj373tb] {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1a202c;
}

.confirm-email-subtitle[b-u8qrj373tb] {
    font-size: 1rem;
    color: #718096;
    margin-bottom: 1.5rem;
}

.success-icon[b-u8qrj373tb],
.error-icon[b-u8qrj373tb] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.success-icon i[b-u8qrj373tb] {
    color: #48bb78;
}

.error-icon i[b-u8qrj373tb] {
    color: #f56565;
}

.spinner-border[b-u8qrj373tb] {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.btn-block[b-u8qrj373tb] {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 1rem;
}

.action-buttons[b-u8qrj373tb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.action-buttons .btn[b-u8qrj373tb] {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 576px) {
    .confirm-email-card[b-u8qrj373tb] {
        padding: 1.5rem;
    }

    .confirm-email-title[b-u8qrj373tb] {
        font-size: 1.5rem;
    }

    .confirm-email-subtitle[b-u8qrj373tb] {
        font-size: 0.9rem;
    }
}
/* /Pages/Auth/ForgotPassword.razor.rz.scp.css */
/**
 * ATKV Mobile App - Forgot Password Page Styles
 * Design System: ATKV Brand (Blue gradient background)
 * Reference: /design/page-008, page-009
 * Mobile-first responsive design
 * WCAG 2.1 AA compliant
 */

/* ==========================================================================
   Container & Background
   ========================================================================== */

.forgot-password-container[b-18d5bxih8m] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);

    /* Blue gradient background (left to right: #5A8FC7 → #E8EDF5) */
    background: linear-gradient(
        to right,
        #5A8FC7 0%,
        #7BA4D5 50%,
        #E8EDF5 100%
    );

    overflow-x: hidden;
    overflow-y: auto;
}

/* ==========================================================================
   Forgot Password Card
   ========================================================================== */

.forgot-password-card[b-18d5bxih8m] {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-8);
    width: 100%;
    max-width: 480px;

    position: relative;
    z-index: 10;

    /* Smooth entrance animation */
    animation: slideUpFadeIn-b-18d5bxih8m 0.4s ease-out;
}

/* ==========================================================================
   Header
   ========================================================================== */

.forgot-password-header[b-18d5bxih8m] {
    text-align: center;
    margin-bottom: var(--spacing-6);
}

.logo[b-18d5bxih8m] {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto var(--spacing-4);
    display: block;
}

.title[b-18d5bxih8m] {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-heading);
    margin: 0 0 var(--spacing-2) 0;
}

.subtitle[b-18d5bxih8m] {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
    margin: 0;
}

/* ==========================================================================
   Alert Messages
   ========================================================================== */

.alert[b-18d5bxih8m] {
    border-radius: var(--radius-md);
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--font-size-body-sm);
}

.alert i[b-18d5bxih8m] {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-danger[b-18d5bxih8m] {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

.alert-success[b-18d5bxih8m] {
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.alert-success div[b-18d5bxih8m] {
    flex: 1;
}

.alert-success strong[b-18d5bxih8m] {
    display: block;
    margin-bottom: var(--spacing-1);
    font-weight: var(--font-weight-semibold);
}

.alert-success p[b-18d5bxih8m] {
    margin: 0;
    font-size: var(--font-size-body-sm);
    line-height: 1.5;
}

/* ==========================================================================
   Form Groups
   ========================================================================== */

.form-group[b-18d5bxih8m] {
    margin-bottom: var(--spacing-5);
}

.form-label[b-18d5bxih8m] {
    display: block;
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.form-label i[b-18d5bxih8m] {
    margin-right: var(--spacing-1);
    color: var(--color-text-secondary);
}

/* Inputs use design system styles from inputs.css */
.form-control[b-18d5bxih8m] {
    width: 100%;
}

/* ==========================================================================
   Validation Messages
   ========================================================================== */

.text-danger[b-18d5bxih8m] {
    display: block;
    color: var(--color-error);
    font-size: var(--font-size-caption);
    margin-top: var(--spacing-1);
    line-height: 1.4;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.btn-submit[b-18d5bxih8m] {
    /* Extends atkv-btn-primary from design system */
    width: 100%;
    padding: var(--spacing-4) var(--spacing-8);

    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-button);

    color: var(--color-white);
    background: var(--color-primary-black);
    border: none;
    border-radius: var(--radius-full);

    min-height: var(--touch-target-comfortable);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);

    cursor: pointer;
    transition: all var(--transition-base);

    margin-top: var(--spacing-4);
}

.btn-submit:hover:not(:disabled)[b-18d5bxih8m] {
    background: #2A2A2A;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-submit:active:not(:disabled)[b-18d5bxih8m] {
    background: #0A0A0A;
    transform: scale(0.98);
}

.btn-submit:focus-visible[b-18d5bxih8m] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.btn-submit:disabled[b-18d5bxih8m] {
    background: var(--color-ui-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ==========================================================================
   Spinner
   ========================================================================== */

.spinner-border[b-18d5bxih8m] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate-b-18d5bxih8m 0.75s linear infinite;
}

@keyframes spinner-rotate-b-18d5bxih8m {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Outline Button (Send Another Email)
   ========================================================================== */

.btn-outline-primary[b-18d5bxih8m] {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-8);

    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-button);

    color: var(--color-primary-black);
    background: transparent;
    border: 2px solid var(--color-primary-black);
    border-radius: var(--radius-full);

    min-height: var(--touch-target-comfortable);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all var(--transition-base);

    margin-top: var(--spacing-4);
}

.btn-outline-primary:hover[b-18d5bxih8m] {
    background: var(--color-ui-hover);
}

.btn-outline-primary:active[b-18d5bxih8m] {
    background: var(--color-ui-active);
    transform: scale(0.98);
}

.btn-outline-primary:focus-visible[b-18d5bxih8m] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

/* ==========================================================================
   Back to Login Link
   ========================================================================== */

.back-to-login[b-18d5bxih8m] {
    text-align: center;
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-ui-border);
}

.back-link[b-18d5bxih8m] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);

    color: var(--color-primary-blue);
    text-decoration: none;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);

    transition: color var(--transition-base);
}

.back-link i[b-18d5bxih8m] {
    font-size: 16px;
}

.back-link:hover[b-18d5bxih8m] {
    color: var(--color-secondary-blue);
    text-decoration: underline;
}

.back-link:focus-visible[b-18d5bxih8m] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes slideUpFadeIn-b-18d5bxih8m {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .forgot-password-card[b-18d5bxih8m] {
        animation: none;
    }

    .btn-submit:hover:not(:disabled)[b-18d5bxih8m],
    .btn-outline-primary:hover[b-18d5bxih8m] {
        transform: none;
    }

    .btn-submit:active:not(:disabled)[b-18d5bxih8m],
    .btn-outline-primary:active[b-18d5bxih8m] {
        transform: none;
    }
}

/* ==========================================================================
   Responsive Design (Mobile-First)
   ========================================================================== */

/* Small mobile devices (320px - 374px) */
@media (max-width: 374px) {
    .forgot-password-container[b-18d5bxih8m] {
        padding: var(--spacing-3);
    }

    .forgot-password-card[b-18d5bxih8m] {
        padding: var(--spacing-6);
    }

    .logo[b-18d5bxih8m] {
        width: 60px;
        height: 60px;
    }

    .title[b-18d5bxih8m] {
        font-size: var(--font-size-h3);
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .forgot-password-container[b-18d5bxih8m] {
        padding: var(--spacing-8);
    }

    .forgot-password-card[b-18d5bxih8m] {
        padding: var(--spacing-12);
    }

    .logo[b-18d5bxih8m] {
        width: 100px;
        height: 100px;
    }

    .title[b-18d5bxih8m] {
        font-size: 32px;
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .forgot-password-card[b-18d5bxih8m] {
        max-width: 540px;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    .forgot-password-card[b-18d5bxih8m] {
        border: 2px solid var(--color-text-primary);
    }

    .form-control[b-18d5bxih8m] {
        border-width: 2px;
    }

    .btn-submit[b-18d5bxih8m],
    .btn-outline-primary[b-18d5bxih8m] {
        border-width: 2px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .forgot-password-container[b-18d5bxih8m] {
        background: white;
    }

    .btn-submit[b-18d5bxih8m],
    .btn-outline-primary[b-18d5bxih8m] {
        display: none;
    }
}
/* /Pages/Auth/Landing.razor.rz.scp.css */
.atkv-landing-page[b-qhkkviycjs] {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.atkv-landing-background[b-qhkkviycjs] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/beach-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.atkv-landing-gradient[b-qhkkviycjs] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(135, 206, 235, 0.8) 0%,
        rgba(72, 184, 208, 0.85) 50%,
        rgba(244, 228, 193, 0.9) 100%
    );
}

.atkv-landing-content[b-qhkkviycjs] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
}

.atkv-landing-card[b-qhkkviycjs] {
    background: white;
    border-radius: var(--atkv-radius-xl);
    padding: 48px 32px;
    box-shadow: var(--atkv-shadow-xl);
}

.atkv-landing-logo[b-qhkkviycjs] {
    text-align: center;
    margin-bottom: 32px;
}

.atkv-landing-logo img[b-qhkkviycjs] {
    height: 64px;
    width: auto;
}

.atkv-landing-title[b-qhkkviycjs] {
    font-size: var(--atkv-font-size-h2);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.3;
}

.atkv-landing-actions[b-qhkkviycjs] {
    margin-bottom: 32px;
}

.form-divider[b-qhkkviycjs] {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
}

.form-divider[b-qhkkviycjs]::before,
.form-divider[b-qhkkviycjs]::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--atkv-border-color, #E5E7EB);
}

.form-divider span[b-qhkkviycjs] {
    padding: 0 16px;
    color: var(--atkv-text-secondary, #6B7280);
    font-size: 14px;
    font-weight: 500;
}

.atkv-landing-footer[b-qhkkviycjs] {
    text-align: center;
}

.atkv-landing-register-text[b-qhkkviycjs] {
    color: var(--atkv-text-secondary);
    font-size: var(--atkv-font-size-body);
    margin-bottom: 8px;
}

.atkv-landing-register-link[b-qhkkviycjs] {
    font-size: var(--atkv-font-size-body);
    font-weight: var(--atkv-font-weight-medium);
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .atkv-landing-page[b-qhkkviycjs] {
        padding: 0;
        align-items: stretch;
    }

    .atkv-landing-content[b-qhkkviycjs] {
        display: flex;
        align-items: center;
        min-height: 100vh;
    }

    .atkv-landing-card[b-qhkkviycjs] {
        border-radius: 0;
        padding: 32px 24px;
        box-shadow: none;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .atkv-landing-logo img[b-qhkkviycjs] {
        height: 56px;
    }

    .atkv-landing-title[b-qhkkviycjs] {
        font-size: 24px;
        margin-bottom: 32px;
    }
}

/* Tablet adjustments */
@media (min-width: 481px) and (max-width: 768px) {
    .atkv-landing-content[b-qhkkviycjs] {
        max-width: 480px;
    }

    .atkv-landing-card[b-qhkkviycjs] {
        padding: 40px 32px;
    }
}

/* Desktop adjustments */
@media (min-width: 1024px) {
    .atkv-landing-content[b-qhkkviycjs] {
        max-width: 480px;
    }

    .atkv-landing-card[b-qhkkviycjs] {
        padding: 56px 48px;
    }

    .atkv-landing-logo img[b-qhkkviycjs] {
        height: 72px;
    }
}

/* Fallback gradient if image fails to load */
.atkv-landing-background:not([style*="background-image"])[b-qhkkviycjs] {
    background: linear-gradient(
        180deg,
        #87CEEB 0%,
        #48B8D0 50%,
        #F4E4C1 100%
    );
}
/* /Pages/Auth/MemberSignIn.razor.rz.scp.css */
    .atkv-signin-page[b-phnh02fup1] {
        min-height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .atkv-signin-background[b-phnh02fup1] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('/images/beach-background.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .atkv-signin-gradient[b-phnh02fup1] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            180deg,
            rgba(135, 206, 235, 0.8) 0%,
            rgba(72, 184, 208, 0.85) 50%,
            rgba(244, 228, 193, 0.9) 100%
        );
    }

    .atkv-signin-content[b-phnh02fup1] {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 440px;
    }

    .atkv-signin-card[b-phnh02fup1] {
        background: white;
        border-radius: var(--atkv-radius-xl);
        padding: 48px 32px;
        box-shadow: var(--atkv-shadow-xl);
    }

    .atkv-signin-logo[b-phnh02fup1] {
        text-align: center;
        margin-bottom: 24px;
    }

    .atkv-signin-logo img[b-phnh02fup1] {
        height: 56px;
        width: auto;
    }

    .atkv-signin-title[b-phnh02fup1] {
        font-size: var(--atkv-font-size-h2);
        font-weight: var(--atkv-font-weight-bold);
        color: var(--atkv-text-primary);
        text-align: center;
        margin-bottom: 32px;
        line-height: 1.3;
    }

    .atkv-signin-form[b-phnh02fup1] {
        margin-bottom: 24px;
    }

    .form-group[b-phnh02fup1] {
        margin-bottom: 20px;
    }

    .form-group label[b-phnh02fup1] {
        display: block;
        margin-bottom: 8px;
        color: var(--atkv-text-primary);
        font-size: 14px;
        font-weight: 500;
    }

    .form-input[b-phnh02fup1] {
        width: 100%;
        padding: 12px 20px;
        border: 2px solid #E5E7EB;
        border-radius: 9999px;
        min-height: 48px;
        font-size: 16px;
        transition: all 0.2s ease;
    }

    .form-input:focus[b-phnh02fup1] {
        outline: none;
        border-color: var(--atkv-primary-blue);
        box-shadow: 0 0 0 3px rgba(74, 122, 184, 0.1);
    }

    .form-input:disabled[b-phnh02fup1] {
        background-color: #F3F4F6;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .form-input.has-error[b-phnh02fup1] {
        border-color: var(--atkv-error, #EF4444);
    }

    .form-error[b-phnh02fup1] {
        color: var(--atkv-error, #EF4444);
        font-size: 13px;
        margin-top: 6px;
        padding-left: 12px;
    }

    .form-divider[b-phnh02fup1] {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 24px 0;
    }

    .form-divider[b-phnh02fup1]::before,
    .form-divider[b-phnh02fup1]::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid var(--atkv-border-color, #E5E7EB);
    }

    .form-divider span[b-phnh02fup1] {
        padding: 0 16px;
        color: var(--atkv-text-secondary, #6B7280);
        font-size: 14px;
        font-weight: 500;
    }

    .atkv-signin-error[b-phnh02fup1] {
        background: rgba(244, 67, 54, 0.1);
        border: 1px solid var(--atkv-error);
        border-radius: var(--atkv-radius-md);
        padding: 12px 16px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--atkv-error);
        font-size: var(--atkv-font-size-body-sm);
    }

    .atkv-signin-error i[b-phnh02fup1] {
        font-size: 18px;
    }

    .atkv-signin-remember[b-phnh02fup1] {
        margin-bottom: 24px;
    }

    .atkv-signin-links[b-phnh02fup1] {
        text-align: center;
        margin-top: 16px;
    }

    .atkv-signin-forgot[b-phnh02fup1] {
        font-size: var(--atkv-font-size-body);
    }

    .atkv-signin-footer[b-phnh02fup1] {
        border-top: 1px solid var(--atkv-border-divider);
        padding-top: 24px;
        margin-top: 24px;
    }

    .atkv-signin-alternative[b-phnh02fup1] {
        margin-bottom: 24px;
    }

    .atkv-signin-visitor-text[b-phnh02fup1] {
        text-align: center;
        color: var(--atkv-text-secondary);
        font-size: var(--atkv-font-size-body-sm);
        margin-bottom: 12px;
    }

    .atkv-signin-register[b-phnh02fup1] {
        text-align: center;
    }

    .atkv-signin-register-text[b-phnh02fup1] {
        color: var(--atkv-text-secondary);
        font-size: var(--atkv-font-size-body-sm);
        margin-bottom: 8px;
    }

    .atkv-signin-register-link[b-phnh02fup1] {
        font-size: var(--atkv-font-size-body);
        font-weight: var(--atkv-font-weight-medium);
    }

    /* Mobile adjustments */
    @media (max-width: 480px) {
        .atkv-signin-page[b-phnh02fup1] {
            padding: 0;
            align-items: stretch;
        }

        .atkv-signin-content[b-phnh02fup1] {
            display: flex;
            align-items: center;
            min-height: 100vh;
        }

        .atkv-signin-card[b-phnh02fup1] {
            border-radius: 0;
            padding: 32px 24px;
            box-shadow: none;
            flex: 1;
        }

        .atkv-signin-logo img[b-phnh02fup1] {
            height: 48px;
        }

        .atkv-signin-title[b-phnh02fup1] {
            font-size: 24px;
            margin-bottom: 24px;
        }
    }

    /* Tablet adjustments */
    @media (min-width: 481px) and (max-width: 768px) {
        .atkv-signin-content[b-phnh02fup1] {
            max-width: 480px;
        }
    }

    /* Loading state overlay */
    .atkv-signin-form[data-loading="true"][b-phnh02fup1]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.7);
        z-index: 10;
    }
/* /Pages/Auth/PasswordChange.razor.rz.scp.css */
    .atkv-password-page[b-qizt1uxfn8] {
        min-height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .atkv-password-background[b-qizt1uxfn8] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            135deg,
            #5A8FC7 0%,
            #4A7AB8 50%,
            #E8EDF5 100%
        );
    }

    .atkv-password-content[b-qizt1uxfn8] {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 480px;
    }

    .atkv-password-card[b-qizt1uxfn8] {
        background: white;
        border-radius: var(--atkv-radius-xl);
        padding: 40px 32px;
        box-shadow: var(--atkv-shadow-xl);
    }

    .atkv-password-header[b-qizt1uxfn8] {
        position: relative;
        margin-bottom: 24px;
    }

    .atkv-password-back[b-qizt1uxfn8] {
        position: absolute;
        left: 0;
        top: 0;
        background: transparent;
        border: none;
        color: var(--atkv-text-secondary);
        cursor: pointer;
        padding: 8px;
        border-radius: var(--atkv-radius-sm);
        transition: background-color var(--atkv-transition-base);
    }

    .atkv-password-back:hover[b-qizt1uxfn8] {
        background: var(--atkv-bg-light);
        color: var(--atkv-text-primary);
    }

    .atkv-password-back i[b-qizt1uxfn8] {
        font-size: 20px;
    }

    .atkv-password-logo[b-qizt1uxfn8] {
        text-align: center;
    }

    .atkv-password-logo img[b-qizt1uxfn8] {
        height: 48px;
        width: auto;
    }

    .atkv-password-title[b-qizt1uxfn8] {
        font-size: var(--atkv-font-size-h2);
        font-weight: var(--atkv-font-weight-bold);
        color: var(--atkv-text-primary);
        text-align: center;
        margin-bottom: 32px;
        line-height: 1.3;
    }

    .atkv-password-form[b-qizt1uxfn8] {
        margin-bottom: 0;
    }

    .form-group[b-qizt1uxfn8] {
        margin-bottom: 20px;
    }

    .form-group label[b-qizt1uxfn8] {
        display: block;
        margin-bottom: 8px;
        color: var(--atkv-text-primary);
        font-size: 14px;
        font-weight: 500;
    }

    .form-input[b-qizt1uxfn8] {
        width: 100%;
        padding: 12px 20px;
        border: 2px solid #E5E7EB;
        border-radius: 9999px;
        min-height: 48px;
        font-size: 16px;
        transition: all 0.2s ease;
    }

    .form-input:focus[b-qizt1uxfn8] {
        outline: none;
        border-color: var(--atkv-primary-blue);
        box-shadow: 0 0 0 3px rgba(74, 122, 184, 0.1);
    }

    .form-input:disabled[b-qizt1uxfn8] {
        background-color: #F3F4F6;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .form-input.has-error[b-qizt1uxfn8] {
        border-color: var(--atkv-error, #EF4444);
    }

    .form-error[b-qizt1uxfn8] {
        color: var(--atkv-error, #EF4444);
        font-size: 13px;
        margin-top: 6px;
        padding-left: 12px;
    }

    .atkv-password-error[b-qizt1uxfn8],
    .atkv-password-success[b-qizt1uxfn8] {
        border-radius: var(--atkv-radius-md);
        padding: 12px 16px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: var(--atkv-font-size-body-sm);
    }

    .atkv-password-error[b-qizt1uxfn8] {
        background: rgba(244, 67, 54, 0.1);
        border: 1px solid var(--atkv-error);
        color: var(--atkv-error);
    }

    .atkv-password-success[b-qizt1uxfn8] {
        background: rgba(76, 175, 80, 0.1);
        border: 1px solid var(--atkv-success);
        color: var(--atkv-success);
    }

    .atkv-password-error i[b-qizt1uxfn8],
    .atkv-password-success i[b-qizt1uxfn8] {
        font-size: 18px;
    }

    .atkv-password-actions[b-qizt1uxfn8] {
        margin-top: 32px;
    }

    .atkv-password-actions > * + *[b-qizt1uxfn8] {
        margin-top: 12px;
    }

    /* Mobile adjustments */
    @media (max-width: 480px) {
        .atkv-password-page[b-qizt1uxfn8] {
            padding: 0;
            align-items: stretch;
        }

        .atkv-password-content[b-qizt1uxfn8] {
            display: flex;
            align-items: center;
            min-height: 100vh;
        }

        .atkv-password-card[b-qizt1uxfn8] {
            border-radius: 0;
            padding: 24px 20px;
            box-shadow: none;
            flex: 1;
        }

        .atkv-password-title[b-qizt1uxfn8] {
            font-size: 22px;
            margin-bottom: 24px;
        }

        .atkv-password-logo img[b-qizt1uxfn8] {
            height: 40px;
        }
    }

    /* Tablet adjustments */
    @media (min-width: 481px) and (max-width: 768px) {
        .atkv-password-content[b-qizt1uxfn8] {
            max-width: 520px;
        }
    }
/* /Pages/Auth/Register.razor.rz.scp.css */
/**
 * ATKV Mobile App - Register Page Styles
 * Design System: ATKV Brand (Beach theme with fully rounded inputs)
 * Reference: /design/page-004 to page-007
 * Mobile-first responsive design
 * WCAG 2.1 AA compliant
 */

/* ==========================================================================
   Container & Background
   ========================================================================== */

.register-container[b-tc0ff1x02c] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    /* Beach hero gradient background - fallback */
    background: linear-gradient(
        to bottom,
        var(--color-beach-sky) 0%,
        var(--color-beach-turquoise) 50%,
        var(--color-beach-sand) 100%
    );

    /* Actual beach image if available */
    background-image: url('/images/beach-hero.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ==========================================================================
   Register Card
   ========================================================================== */

.register-card[b-tc0ff1x02c] {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-8);
    width: 100%;
    max-width: 480px;

    /* Position card to overlap hero background */
    margin-top: 20vh; /* Less overlap due to longer form */
    margin-bottom: var(--spacing-8);
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);

    position: relative;
    z-index: 10;

    /* Smooth entrance animation */
    animation: slideUpFadeIn-b-tc0ff1x02c 0.4s ease-out;

    /* Enable scrolling within card if content is tall */
    max-height: calc(100vh - 24vh);
    overflow-y: auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

.register-header[b-tc0ff1x02c] {
    text-align: center;
    margin-bottom: var(--spacing-6);
}

.register-logo[b-tc0ff1x02c] {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto var(--spacing-4);
    display: block;
}

.register-title[b-tc0ff1x02c] {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-heading);
    margin: 0 0 var(--spacing-2) 0;
}

.register-subtitle[b-tc0ff1x02c] {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
    margin: 0;
}

/* ==========================================================================
   Alert Messages
   ========================================================================== */

.alert[b-tc0ff1x02c] {
    border-radius: var(--radius-md);
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-body-sm);
}

.alert i[b-tc0ff1x02c] {
    font-size: 20px;
    flex-shrink: 0;
}

.alert-danger[b-tc0ff1x02c] {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

.alert-success[b-tc0ff1x02c] {
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.alert-info[b-tc0ff1x02c] {
    background-color: var(--color-info-bg);
    border: 1px solid var(--color-info);
    color: var(--color-info);
}

/* ==========================================================================
   Form Groups
   ========================================================================== */

.form-group[b-tc0ff1x02c] {
    margin-bottom: var(--spacing-4);
}

.form-label[b-tc0ff1x02c] {
    display: block;
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.form-label i[b-tc0ff1x02c] {
    margin-right: var(--spacing-1);
    color: var(--color-text-secondary);
}

/* Inputs use design system styles from inputs.css */
.form-control[b-tc0ff1x02c] {
    /* Base styles inherited from design system */
    width: 100%;
}

/* ==========================================================================
   Password Input Wrapper
   ========================================================================== */

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

.password-input-wrapper .form-control[b-tc0ff1x02c] {
    padding-right: 48px; /* Space for toggle button */
}

.btn-password-toggle[b-tc0ff1x02c] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);

    /* Styling */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;
    border-radius: 50%;

    color: var(--color-text-secondary);
    cursor: pointer;

    transition: all var(--transition-base);
}

.btn-password-toggle:hover[b-tc0ff1x02c] {
    background: var(--color-ui-hover);
    color: var(--color-primary-blue);
}

.btn-password-toggle:focus-visible[b-tc0ff1x02c] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

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

/* ==========================================================================
   Password Requirements
   ========================================================================== */

.password-requirements[b-tc0ff1x02c] {
    margin-top: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-ui-background);
    border: 1px solid var(--color-ui-border);
    border-radius: var(--radius-md);
}

.password-requirements small[b-tc0ff1x02c] {
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.password-requirements ul[b-tc0ff1x02c] {
    list-style: none;
    padding: 0;
    margin: var(--spacing-2) 0 0 0;
}

.password-requirements li[b-tc0ff1x02c] {
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
    padding: var(--spacing-1) 0;
    padding-left: var(--spacing-5);
    position: relative;
}

.password-requirements li[b-tc0ff1x02c]::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
}

.password-requirements li.valid[b-tc0ff1x02c] {
    color: var(--color-success);
}

.password-requirements li.valid[b-tc0ff1x02c]::before {
    content: '✓';
    color: var(--color-success);
}

/* ==========================================================================
   Validation Messages
   ========================================================================== */

.text-danger[b-tc0ff1x02c] {
    display: block;
    color: var(--color-error);
    font-size: var(--font-size-caption);
    margin-top: var(--spacing-1);
    line-height: 1.4;
}

/* ==========================================================================
   Form Check (Checkbox for Terms)
   ========================================================================== */

.form-check[b-tc0ff1x02c] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-ui-background);
    border-radius: var(--radius-md);
}

.form-check-input[b-tc0ff1x02c] {
    /* Use design system checkbox styles */
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    cursor: pointer;
}

.form-check-label[b-tc0ff1x02c] {
    font-size: var(--font-size-body-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
    cursor: pointer;
}

.form-check-label a[b-tc0ff1x02c] {
    color: var(--color-primary-blue);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.form-check-label a:hover[b-tc0ff1x02c] {
    text-decoration: underline;
}

.form-check-label a:focus-visible[b-tc0ff1x02c] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Register Button
   ========================================================================== */

.btn-register[b-tc0ff1x02c] {
    /* Extends atkv-btn-primary from design system */
    width: 100%;
    padding: var(--spacing-4) var(--spacing-8);

    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-button);

    color: var(--color-white);
    background: var(--color-primary-black);
    border: none;
    border-radius: var(--radius-full);

    min-height: var(--touch-target-comfortable);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);

    cursor: pointer;
    transition: all var(--transition-base);

    margin-top: var(--spacing-6);
}

.btn-register:hover:not(:disabled)[b-tc0ff1x02c] {
    background: #2A2A2A;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-register:active:not(:disabled)[b-tc0ff1x02c] {
    background: #0A0A0A;
    transform: scale(0.98);
}

.btn-register:focus-visible[b-tc0ff1x02c] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.btn-register:disabled[b-tc0ff1x02c] {
    background: var(--color-ui-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ==========================================================================
   Spinner
   ========================================================================== */

.spinner-border[b-tc0ff1x02c] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate-b-tc0ff1x02c 0.75s linear infinite;
}

@keyframes spinner-rotate-b-tc0ff1x02c {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Login Prompt
   ========================================================================== */

.login-prompt[b-tc0ff1x02c] {
    text-align: center;
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-ui-border);
}

.login-prompt p[b-tc0ff1x02c] {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin: 0;
}

.login-link[b-tc0ff1x02c] {
    color: var(--color-primary-blue);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: color var(--transition-base);
}

.login-link:hover[b-tc0ff1x02c] {
    color: var(--color-secondary-blue);
    text-decoration: underline;
}

.login-link:focus-visible[b-tc0ff1x02c] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes slideUpFadeIn-b-tc0ff1x02c {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .register-card[b-tc0ff1x02c] {
        animation: none;
    }

    .btn-register:hover:not(:disabled)[b-tc0ff1x02c] {
        transform: none;
    }

    .btn-register:active:not(:disabled)[b-tc0ff1x02c] {
        transform: none;
    }
}

/* ==========================================================================
   Scrollbar Styling (Webkit)
   ========================================================================== */

.register-card[b-tc0ff1x02c]::-webkit-scrollbar {
    width: 6px;
}

.register-card[b-tc0ff1x02c]::-webkit-scrollbar-track {
    background: var(--color-ui-background);
    border-radius: 10px;
}

.register-card[b-tc0ff1x02c]::-webkit-scrollbar-thumb {
    background: var(--color-primary-blue);
    border-radius: 10px;
}

.register-card[b-tc0ff1x02c]::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary-blue);
}

/* ==========================================================================
   Responsive Design (Mobile-First)
   ========================================================================== */

/* Small mobile devices (320px - 374px) */
@media (max-width: 374px) {
    .register-card[b-tc0ff1x02c] {
        margin-top: 15vh;
        margin-left: var(--spacing-3);
        margin-right: var(--spacing-3);
        padding: var(--spacing-6);
        max-height: calc(100vh - 18vh);
    }

    .register-logo[b-tc0ff1x02c] {
        width: 60px;
        height: 60px;
    }

    .register-title[b-tc0ff1x02c] {
        font-size: 20px;
    }

    .form-group[b-tc0ff1x02c] {
        margin-bottom: var(--spacing-3);
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .register-container[b-tc0ff1x02c] {
        padding: var(--spacing-8);
    }

    .register-card[b-tc0ff1x02c] {
        padding: var(--spacing-12);
        margin-top: 25vh;
        max-height: calc(100vh - 28vh);
    }

    .register-logo[b-tc0ff1x02c] {
        width: 100px;
        height: 100px;
    }

    .register-title[b-tc0ff1x02c] {
        font-size: var(--font-size-h2);
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .register-card[b-tc0ff1x02c] {
        max-width: 540px;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    .register-card[b-tc0ff1x02c] {
        border: 2px solid var(--color-text-primary);
    }

    .form-control[b-tc0ff1x02c] {
        border-width: 2px;
    }

    .btn-register[b-tc0ff1x02c] {
        border: 2px solid var(--color-white);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .register-container[b-tc0ff1x02c] {
        background: white;
    }

    .btn-password-toggle[b-tc0ff1x02c],
    .btn-register[b-tc0ff1x02c] {
        display: none;
    }
}
/* /Pages/Auth/VisitorSignIn.razor.rz.scp.css */
.auth-page[b-sda4tj56ro] {
    background: url('https://www.figma.com/api/mcp/asset/a8b755ed-cb86-4ea6-83b9-85c75620062e') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    width: 100%;
}

.auth-container[b-sda4tj56ro] {
    background: var(--color-white);
    border-radius: 60px 60px 0 0;
    width: 100%;
    max-width: 393px;
    height: 698px;
    margin-top: auto;
    padding: var(--spacing-2xl) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.auth-content[b-sda4tj56ro] {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    width: 350px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    padding-top: 48px;
}

.logo-title-container[b-sda4tj56ro] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
}

.logo[b-sda4tj56ro] {
    width: 113.43px;
    height: 113.43px;
}

.title-container[b-sda4tj56ro] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.title[b-sda4tj56ro] {
    font-size: 28px;
    font-weight: var(--font-weight-medium);
    text-align: center;
    color: var(--color-black);
    line-height: var(--line-height-tight);
    width: 100%;
}

.input-fields-container[b-sda4tj56ro] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.input-group[b-sda4tj56ro] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.input-label[b-sda4tj56ro] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.input-field-container[b-sda4tj56ro] {
    background: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 20px;
    height: 55px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 12px;
}

.input-icon[b-sda4tj56ro] {
    width: 24px;
    height: 24px;
}

.input-field[b-sda4tj56ro] {
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    background: transparent;
    flex: 1;
}

.input-field[b-sda4tj56ro]::placeholder {
    color: var(--color-text-secondary);
}

.sign-in-container[b-sda4tj56ro] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.button[b-sda4tj56ro] {
    background: var(--color-black);
    border: none;
    border-radius: 16px;
    padding: 16px 76px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    width: 100%;
}

.button:hover[b-sda4tj56ro] {
    opacity: var(--opacity-hover);
}

.forgot-password-link[b-sda4tj56ro] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-black);
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

.forgot-password-link:hover[b-sda4tj56ro] {
    text-decoration: underline;
}

.user-icon[b-sda4tj56ro] {
    width: 24px;
    height: 24px;
}

.lock-icon[b-sda4tj56ro] {
    width: 24px;
    height: 24px;
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .auth-page[b-sda4tj56ro] {
        align-items: stretch;
        justify-content: flex-end;
    }

    .auth-container[b-sda4tj56ro] {
        max-width: none;
        margin-top: auto;
    }
}
/* /Pages/Bookings/MyBookings.razor.rz.scp.css */
.bookings-page[b-i1q50xnd71] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xl);
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.bookings-header[b-i1q50xnd71] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/93fe779f-2491-4579-b585-9801a073dd60');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.bookings-header[b-i1q50xnd71]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.bookings-header-title[b-i1q50xnd71] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
    padding-left: 22px;
}

.bookings-navigation[b-i1q50xnd71] {
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 70px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xl) var(--spacing-lg);
    max-width: 694px;
}

.bookings-nav-button[b-i1q50xnd71] {
    height: 71px;
    padding: 0 var(--spacing-xl);
    border-radius: 360px;
    border: none;
    background: transparent;
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-black);
}

.bookings-nav-button--active[b-i1q50xnd71] {
    background: var(--color-white);
    color: var(--color-primary-blue);
    width: 264px;
}

.bookings-nav-button--inactive[b-i1q50xnd71] {
    background: var(--color-primary-blue);
    color: var(--color-white);
    flex: 1;
    max-width: 398px;
}

.bookings-nav-button:hover[b-i1q50xnd71] {
    opacity: var(--opacity-hover);
}

.bookings-grid[b-i1q50xnd71] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: var(--spacing-xl);
    width: 100%;
    max-width: 1780px;
}

.booking-card[b-i1q50xnd71] {
    background: var(--color-card-background);
    border: 1px solid var(--color-card-border);
    border-radius: 20px;
    padding: var(--spacing-5xl) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xl);
    transition: all var(--transition-base);
}

.booking-card:hover[b-i1q50xnd71] {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.booking-row[b-i1q50xnd71] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.booking-label[b-i1q50xnd71] {
    flex: 1;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-blue);
    line-height: 1.3;
}

.booking-value[b-i1q50xnd71] {
    flex: 1;
    font-size: 24px;
    color: var(--color-black);
    line-height: 1.7;
    text-align: right;
}

.booking-value--normal[b-i1q50xnd71] {
    font-family: 'Montserrat', sans-serif;
    font-weight: var(--font-weight-regular);
}

.booking-value--bold[b-i1q50xnd71] {
    font-family: 'Montserrat', sans-serif;
    font-weight: var(--font-weight-bold);
}

.booking-value--date[b-i1q50xnd71] {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.pagination[b-i1q50xnd71] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
    margin-top: var(--spacing-5xl);
}

.pagination-dot[b-i1q50xnd71] {
    width: 12px;
    height: 12px;
    background: var(--color-black);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-base);
}

.pagination-dot:hover[b-i1q50xnd71] {
    transform: scale(1.2);
}

.pagination-dot--active[b-i1q50xnd71] {
    background: var(--color-primary-blue);
    transform: scale(1.3);
}

/* Dropdown - Hidden on Desktop */
.bookings-dropdown[b-i1q50xnd71] {
    display: none;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .bookings-navigation[b-i1q50xnd71] {
        display: none;
    }

    .bookings-dropdown[b-i1q50xnd71] {
        display: flex;
        background: var(--color-primary-blue);
        border: 1px solid var(--color-grey);
        border-radius: 70px;
        height: 70px;
        padding: 0 var(--spacing-xl);
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 450px;
        cursor: pointer;
        transition: all var(--transition-base);
        margin: 0 auto;
    }

    .bookings-dropdown:hover[b-i1q50xnd71] {
        opacity: var(--opacity-hover);
    }

    .bookings-dropdown-text[b-i1q50xnd71] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-white);
    }

    .bookings-dropdown-icon[b-i1q50xnd71] {
        width: 34px;
        height: 29px;
    }

    .bookings-grid[b-i1q50xnd71] {
        grid-template-columns: repeat(2, 1fr);
    }

    .booking-label[b-i1q50xnd71],
    .booking-value[b-i1q50xnd71] {
        font-size: 20px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .bookings-page[b-i1q50xnd71] {
        padding: var(--spacing-4xl) var(--spacing-xl);
    }

    .bookings-dropdown[b-i1q50xnd71] {
        max-width: 350px;
    }

    .bookings-grid[b-i1q50xnd71] {
        grid-template-columns: 1fr;
    }

    .booking-label[b-i1q50xnd71],
    .booking-value[b-i1q50xnd71] {
        font-size: 24px;
    }
}
/* /Pages/Index.razor.rz.scp.css */
    .home-page[b-qtekka0t9m] {
        min-height: 100vh;
        background: #FAFAFA;
        display: flex;
        flex-direction: column;
    }

    .home-content[b-qtekka0t9m] {
        flex: 1;
        padding-bottom: 80px; /* Space for BottomNav */
    }

    /* Hero Section */
    .hero-section[b-qtekka0t9m] {
        background: linear-gradient(135deg, #1A3B47 0%, #2C5F71 100%);
        padding: 24px 16px 32px;
        color: white;
    }

    .welcome-container[b-qtekka0t9m] {
        margin-bottom: 24px;
    }

    .welcome-greeting[b-qtekka0t9m] {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 8px 0;
        line-height: 1.2;
    }

    .welcome-subtitle[b-qtekka0t9m] {
        font-size: 16px;
        opacity: 0.9;
        margin: 0;
        line-height: 1.5;
    }

    /* Wallet Section */
    .wallet-section[b-qtekka0t9m] {
        padding: 24px 16px 0;
        margin-top: -16px; /* Pull up slightly over hero */
        position: relative;
        z-index: 1;
    }

    /* Quick Actions Grid */
    .quick-actions-section[b-qtekka0t9m] {
        padding: 32px 16px;
        background: white;
        margin-top: 24px;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
    }

    .quick-actions-grid[b-qtekka0t9m] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .quick-action-button[b-qtekka0t9m] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px 8px;
        background: white;
        border: 1px solid #E0E0E0;
        border-radius: 16px;
        color: #1A1A1A;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        min-height: 80px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .quick-action-button i[b-qtekka0t9m] {
        font-size: 24px;
        color: #FFA726;
    }

    .quick-action-button:hover[b-qtekka0t9m] {
        background: #FFFBF5;
        border-color: #FFA726;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 167, 38, 0.15);
    }

    .quick-action-button:active[b-qtekka0t9m] {
        transform: translateY(0) scale(0.98);
    }

    .quick-action-button:focus-visible[b-qtekka0t9m] {
        outline: 2px solid #4A7AB8;
        outline-offset: 2px;
    }

    /* Responsive Design */
    @media (min-width: 768px) {
        .hero-section[b-qtekka0t9m] {
            padding: 32px 24px 40px;
        }

        .wallet-section[b-qtekka0t9m],
        .quick-actions-section[b-qtekka0t9m] {
            padding-left: 24px;
            padding-right: 24px;
        }

        .welcome-greeting[b-qtekka0t9m] {
            font-size: 32px;
        }

        .welcome-subtitle[b-qtekka0t9m] {
            font-size: 18px;
        }

        .quick-actions-grid[b-qtekka0t9m] {
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 600px;
            margin: 0 auto;
        }
    }

    @media (min-width: 1024px) {
        .home-content[b-qtekka0t9m] {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        .hero-section[b-qtekka0t9m] {
            padding: 40px 32px 48px;
            border-radius: 0 0 24px 24px;
        }

        .wallet-section[b-qtekka0t9m],
        .quick-actions-section[b-qtekka0t9m] {
            padding-left: 32px;
            padding-right: 32px;
        }

        .quick-actions-grid[b-qtekka0t9m] {
            max-width: 800px;
        }
    }

    @media (max-width: 480px) {
        .welcome-greeting[b-qtekka0t9m] {
            font-size: 24px;
        }

        .quick-actions-grid[b-qtekka0t9m] {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .quick-action-button[b-qtekka0t9m] {
            padding: 12px 8px;
        }
    }
/* /Pages/NFC/ArmbandList.razor.rz.scp.css */
/* ====================================================================================
   ARMBANDLIST PAGE - ATKV MOBILE APP
   Mobile-first, accessible NFC armband interface
   ==================================================================================== */

.armbands-container[b-hnonsj4tzm] { max-width: 800px; margin: 0 auto; padding: var(--atkv-space-lg); }
.page-header[b-hnonsj4tzm] { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--atkv-space-xl); }
.btn-back[b-hnonsj4tzm], .btn-add[b-hnonsj4tzm] { background: none; border: none; font-size: var(--atkv-font-size-h2-mobile); cursor: pointer; color: var(--atkv-primary-blue); padding: 5px 10px; }
.page-header h1[b-hnonsj4tzm] { margin: 0; font-size: var(--atkv-font-size-h2-mobile); color: var(--atkv-primary-blue); }
.loading-container[b-hnonsj4tzm] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; }
.spinner[b-hnonsj4tzm] { width: 50px; height: 50px; border: 4px solid var(--atkv-bg-light); border-top: 4px solid var(--atkv-primary-blue); border-radius: 50%; animation: spin-b-hnonsj4tzm 1s linear infinite; }
@keyframes spin-b-hnonsj4tzm { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.armbands-list[b-hnonsj4tzm] { display: flex; flex-direction: column; gap: var(--atkv-space-md); }
.armband-card[b-hnonsj4tzm] { display: flex; align-items: center; gap: var(--atkv-space-lg); padding: var(--atkv-space-lg); background: var(--atkv-bg-card); border-radius: var(--atkv-radius-sm); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.armband-icon[b-hnonsj4tzm] { width: 60px; height: 60px; background: linear-gradient(135deg, var(--atkv-primary-blue) 0%, var(--atkv-primary-blue) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
.armband-info[b-hnonsj4tzm] { flex: 1; }
.armband-info h3[b-hnonsj4tzm] { margin: 0 0 5px; color: #333; }
.armband-id[b-hnonsj4tzm] { margin: 0 0 5px; color: #666; font-size: var(--atkv-font-size-body-sm); font-family: monospace; }
.armband-status[b-hnonsj4tzm] { margin: 0 0 5px; }
.status-badge[b-hnonsj4tzm] { padding: 4px 12px; border-radius: var(--atkv-radius-md); font-size: var(--atkv-font-size-caption); font-weight: 600; }
.status-active[b-hnonsj4tzm] { background-color: #4caf50; color: white; }
.status-inactive[b-hnonsj4tzm] { background-color: #9e9e9e; color: white; }
.status-lost[b-hnonsj4tzm] { background-color: #f44336; color: white; }
.status-damaged[b-hnonsj4tzm] { background-color: #ff9800; color: white; }
.last-used[b-hnonsj4tzm] { margin: 0; color: #666; font-size: var(--atkv-font-size-caption); }
.armband-actions[b-hnonsj4tzm] { display: flex; gap: var(--atkv-space-sm); }
.btn-icon[b-hnonsj4tzm] { background: none; border: none; font-size: var(--atkv-font-size-h2-mobile); cursor: pointer; padding: 5px; opacity: 0.7; transition: all var(--atkv-transition-base) var(--atkv-ease-in-out); old-transition: opacity 0.2s; }
.btn-icon:hover[b-hnonsj4tzm] { opacity: 1; }
.empty-state[b-hnonsj4tzm] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; padding: 40px; }
.empty-icon[b-hnonsj4tzm] { font-size: 80px; margin-bottom: var(--atkv-space-lg); }
.empty-state h3[b-hnonsj4tzm] { margin: 0 0 10px; color: #333; }
.empty-state p[b-hnonsj4tzm] { margin: 0 0 20px; color: #666; max-width: 400px; }
.btn-primary[b-hnonsj4tzm] { padding: 12px 24px; background-color: var(--atkv-primary-blue); color: white; border: none; border-radius: var(--atkv-radius-sm); font-size: var(--atkv-font-size-body); cursor: pointer; }
.btn-primary:hover[b-hnonsj4tzm] { background-color: var(--atkv-primary-blue); }
.modal-overlay[b-hnonsj4tzm] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content[b-hnonsj4tzm] { background: var(--atkv-bg-card); border-radius: var(--atkv-radius-md); max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.modal-header[b-hnonsj4tzm] { display: flex; justify-content: space-between; align-items: center; padding: var(--atkv-space-lg); border-bottom: 1px solid var(--atkv-border-divider); }
.modal-header h2[b-hnonsj4tzm] { margin: 0; font-size: var(--atkv-font-size-h3); color: var(--atkv-primary-blue); }
.btn-close[b-hnonsj4tzm] { background: none; border: none; font-size: var(--atkv-font-size-h2-mobile); cursor: pointer; color: #666; padding: 0; }
.modal-body[b-hnonsj4tzm] { padding: var(--atkv-space-lg); }
.modal-body p[b-hnonsj4tzm] { margin: 0 0 10px; color: #333; }
.modal-actions[b-hnonsj4tzm] { padding: var(--atkv-space-lg); border-top: 1px solid var(--atkv-border-divider); display: flex; gap: var(--atkv-space-md); justify-content: flex-end; }
.btn-secondary[b-hnonsj4tzm] { padding: 12px 24px; background-color: #f5f5f5; color: #666; border: 2px solid var(--atkv-border-divider); border-radius: var(--atkv-radius-sm); cursor: pointer; }
.btn-secondary:hover[b-hnonsj4tzm] { background-color: #eeeeee; }
.btn-danger[b-hnonsj4tzm] { padding: 12px 24px; background-color: #d32f2f; color: white; border: none; border-radius: var(--atkv-radius-sm); cursor: pointer; }
.btn-danger:hover:not(:disabled)[b-hnonsj4tzm] { background-color: #b71c1c; }
.btn-danger:disabled[b-hnonsj4tzm] { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 768px) { .armbands-container[b-hnonsj4tzm] { padding: var(--atkv-space-sm); } .armband-card[b-hnonsj4tzm] { flex-direction: column; text-align: center; } }

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *[b-hnonsj4tzm] {
        transition: none !important;
    }
}

@media (prefers-contrast: high) {
    .card[b-hnonsj4tzm], .btn[b-hnonsj4tzm] {
        border-width: 3px;
    }
}
/* /Pages/NFC/LinkArmband.razor.rz.scp.css */
/* ====================================================================================
   LINKARMBAND PAGE - ATKV MOBILE APP
   Mobile-first, accessible NFC armband interface
   ==================================================================================== */

.link-armband-container[b-k309m7kyn4] { max-width: 600px; margin: 0 auto; padding: var(--atkv-space-lg); }
.page-header[b-k309m7kyn4] { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--atkv-space-xl); }
.btn-back[b-k309m7kyn4] { background: none; border: none; font-size: var(--atkv-font-size-h2-mobile); cursor: pointer; color: var(--atkv-primary-blue); padding: 5px 10px; }
.page-header h1[b-k309m7kyn4] { margin: 0; font-size: var(--atkv-font-size-h2-mobile); color: var(--atkv-primary-blue); }
.spacer[b-k309m7kyn4] { width: 44px; }
.link-methods[b-k309m7kyn4] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--atkv-space-md); margin-bottom: var(--atkv-space-xl); }
.method-card[b-k309m7kyn4] { padding: 30px 20px; background: var(--atkv-bg-card); border: 2px solid var(--atkv-border-divider); border-radius: var(--atkv-radius-sm); text-align: center; cursor: pointer; transition: all var(--atkv-transition-base) var(--atkv-ease-in-out); old-transition: all 0.2s; }
.method-card:hover[b-k309m7kyn4] { border-color: var(--atkv-primary-blue); }
.method-card.active[b-k309m7kyn4] { border-color: var(--atkv-primary-blue); background-color: #e8f5e9; }
.method-icon[b-k309m7kyn4] { font-size: 48px; display: block; margin-bottom: var(--atkv-space-md); }
.method-card h3[b-k309m7kyn4] { margin: 0 0 10px; color: var(--atkv-primary-blue); font-size: var(--atkv-font-size-h4); }
.method-card p[b-k309m7kyn4] { margin: 0; color: #666; font-size: var(--atkv-font-size-body-sm); }
.link-form[b-k309m7kyn4] { background: var(--atkv-bg-card); padding: 30px; border-radius: var(--atkv-radius-sm); margin-bottom: var(--atkv-space-lg); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.form-group[b-k309m7kyn4] { margin-bottom: var(--atkv-space-lg); }
.form-group label[b-k309m7kyn4] { display: block; margin-bottom: 8px; font-weight: 600; color: #333; }
.form-control[b-k309m7kyn4] { width: 100%; padding: 12px; border: 2px solid var(--atkv-border-divider); border-radius: var(--atkv-radius-sm); font-size: var(--atkv-font-size-body); }
.form-control:focus[b-k309m7kyn4] { outline: none; border-color: var(--atkv-primary-blue); }
.qr-scanner[b-k309m7kyn4] { background: var(--atkv-bg-card); padding: 40px; border-radius: var(--atkv-radius-sm); margin-bottom: var(--atkv-space-lg); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.scanner-placeholder[b-k309m7kyn4] { text-align: center; padding: 60px 20px; background-color: #f5f5f5; border: 2px dashed #ccc; border-radius: var(--atkv-radius-sm); }
.scanner-placeholder p[b-k309m7kyn4] { color: #666; margin-bottom: var(--atkv-space-lg); }
.scanner-placeholder .btn-secondary[b-k309m7kyn4] { margin-top: var(--atkv-space-md); padding: 12px 24px; background: #fff; color: var(--atkv-primary-blue); border: 2px solid var(--atkv-primary-blue); border-radius: var(--atkv-radius-sm); font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.scanner-placeholder .btn-secondary:hover[b-k309m7kyn4] { background: var(--atkv-primary-blue); color: #fff; }
.scanner-icon[b-k309m7kyn4] { font-size: 64px; display: block; margin-bottom: var(--atkv-space-md); }
.scanner-active[b-k309m7kyn4] { position: relative; width: 100%; padding-top: 75%; background: #000; border-radius: var(--atkv-radius-sm); overflow: hidden; }
.scanner-active video[b-k309m7kyn4] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.scanner-overlay[b-k309m7kyn4] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.scanner-frame[b-k309m7kyn4] { width: 250px; height: 250px; border: 3px solid rgba(255, 255, 255, 0.8); border-radius: 16px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); animation: pulse-b-k309m7kyn4 2s ease-in-out infinite; }
@keyframes pulse-b-k309m7kyn4 { 0%, 100% { transform: scale(1); border-color: rgba(255, 255, 255, 0.8); } 50% { transform: scale(1.05); border-color: rgba(251, 185, 19, 0.9); } }
.scanner-hint[b-k309m7kyn4] { color: #fff; background: rgba(0, 0, 0, 0.7); padding: 8px 16px; border-radius: 20px; margin-top: 24px; font-size: 14px; }
.alert[b-k309m7kyn4] { padding: var(--atkv-space-md); border-radius: var(--atkv-radius-sm); margin-bottom: var(--atkv-space-lg); }
.alert-error[b-k309m7kyn4] { background-color: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.btn-primary[b-k309m7kyn4] { width: 100%; padding: var(--atkv-space-md); background-color: var(--atkv-primary-blue); color: white; border: none; border-radius: var(--atkv-radius-sm); font-size: var(--atkv-font-size-h4); font-weight: 600; cursor: pointer; }
.btn-primary:hover:not(:disabled)[b-k309m7kyn4] { background-color: var(--atkv-primary-blue); }
.btn-primary:disabled[b-k309m7kyn4] { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 768px) { .link-armband-container[b-k309m7kyn4] { padding: var(--atkv-space-sm); } }

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *[b-k309m7kyn4] {
        transition: none !important;
    }
}

@media (prefers-contrast: high) {
    .card[b-k309m7kyn4], .btn[b-k309m7kyn4] {
        border-width: 3px;
    }
}
/* /Pages/NFC/NFCTransactions.razor.rz.scp.css */
/* ====================================================================================
   NFCTRANSACTIONS PAGE - ATKV MOBILE APP
   Mobile-first, accessible NFC armband interface
   ==================================================================================== */

.nfc-transactions-container[b-tc6j96getc] { max-width: 800px; margin: 0 auto; padding: var(--atkv-space-lg); }
.page-header[b-tc6j96getc] { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--atkv-space-lg); }
.btn-back[b-tc6j96getc] { background: none; border: none; font-size: var(--atkv-font-size-h2-mobile); cursor: pointer; color: var(--atkv-primary-blue); padding: 5px 10px; }
.page-header h1[b-tc6j96getc] { margin: 0; font-size: var(--atkv-font-size-h2-mobile); color: var(--atkv-primary-blue); }
.spacer[b-tc6j96getc] { width: 44px; }
.armband-info-card[b-tc6j96getc] { background: linear-gradient(135deg, var(--atkv-primary-blue) 0%, var(--atkv-primary-blue) 100%); color: white; padding: var(--atkv-space-lg); border-radius: var(--atkv-radius-sm); margin-bottom: var(--atkv-space-lg); text-align: center; }
.armband-info-card h3[b-tc6j96getc] { margin: 0 0 5px; font-size: var(--atkv-font-size-h3); }
.armband-info-card p[b-tc6j96getc] { margin: 0; opacity: 0.9; font-size: var(--atkv-font-size-body-sm); font-family: monospace; }
.loading-container[b-tc6j96getc] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; }
.spinner[b-tc6j96getc] { width: 50px; height: 50px; border: 4px solid var(--atkv-bg-light); border-top: 4px solid var(--atkv-primary-blue); border-radius: 50%; animation: spin-b-tc6j96getc 1s linear infinite; }
@keyframes spin-b-tc6j96getc { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.transactions-list[b-tc6j96getc] { display: flex; flex-direction: column; gap: var(--atkv-space-sm); }
.transaction-item[b-tc6j96getc] { display: flex; align-items: center; gap: var(--atkv-space-md); padding: var(--atkv-space-lg); background: var(--atkv-bg-card); border-radius: var(--atkv-radius-sm); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.transaction-icon[b-tc6j96getc] { width: 48px; height: 48px; background-color: #fff3e0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--atkv-font-size-h2-mobile); flex-shrink: 0; }
.transaction-details[b-tc6j96getc] { flex: 1; }
.transaction-details h4[b-tc6j96getc] { margin: 0 0 5px; font-size: var(--atkv-font-size-body); color: #333; }
.transaction-date[b-tc6j96getc], .transaction-ref[b-tc6j96getc] { margin: 0; font-size: var(--atkv-font-size-caption); color: #666; }
.transaction-amount[b-tc6j96getc] { font-size: var(--atkv-font-size-h4); font-weight: bold; }
.transaction-amount.negative[b-tc6j96getc] { color: #d32f2f; }
.empty-state[b-tc6j96getc] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; }
.empty-icon[b-tc6j96getc] { font-size: 80px; margin-bottom: var(--atkv-space-lg); }
.empty-state h3[b-tc6j96getc] { margin: 0 0 10px; color: #333; }
.empty-state p[b-tc6j96getc] { margin: 0; color: #666; max-width: 400px; }
@media (max-width: 768px) { .nfc-transactions-container[b-tc6j96getc] { padding: var(--atkv-space-sm); } .transaction-item[b-tc6j96getc] { padding: var(--atkv-space-md); } }

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *[b-tc6j96getc] {
        transition: none !important;
    }
}

@media (prefers-contrast: high) {
    .card[b-tc6j96getc], .btn[b-tc6j96getc] {
        border-width: 3px;
    }
}
/* /Pages/NPO/Benefits.razor.rz.scp.css */
.npo-page[b-eocdcurwqw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-5xl);
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.npo-header[b-eocdcurwqw] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/efc06fb7-7fd0-4cc3-b9a0-45c6bb32fc55');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.npo-header[b-eocdcurwqw]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.npo-header-title[b-eocdcurwqw] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.npo-navigation[b-eocdcurwqw] {
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 70px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-md);
}

.npo-nav-button[b-eocdcurwqw] {
    padding: 0 32px;
    height: 70px;
    border-radius: 46px;
    border: none;
    background: transparent;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.npo-nav-button--active[b-eocdcurwqw] {
    background: var(--color-white);
    border: 1px solid var(--color-white);
}

.npo-nav-button:hover[b-eocdcurwqw] {
    opacity: var(--opacity-hover);
}

.intro-section[b-eocdcurwqw] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.intro-title[b-eocdcurwqw] {
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.intro-description[b-eocdcurwqw] {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: var(--line-height-normal);
}

.benefits-grid[b-eocdcurwqw] {
    display: flex;
    flex-wrap: wrap;
    gap: 70px;
    width: 100%;
    justify-content: space-between;
}

.benefit-card[b-eocdcurwqw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    padding: 12px;
    border-radius: 20px;
    width: 280px;
    text-align: center;
}

.benefit-icon[b-eocdcurwqw] {
    width: 60px;
    height: 60px;
    background: var(--color-primary-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon-img[b-eocdcurwqw] {
    width: 32px;
    height: 32px;
}

.benefit-title[b-eocdcurwqw] {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.benefit-description[b-eocdcurwqw] {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: var(--line-height-normal);
}

.faq-section[b-eocdcurwqw] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.faq-title[b-eocdcurwqw] {
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

/* NPO Dropdown - Hidden on Desktop */
.npo-dropdown[b-eocdcurwqw] {
    display: none;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .npo-navigation[b-eocdcurwqw] {
        display: none;
    }

    .npo-dropdown[b-eocdcurwqw] {
        display: flex;
        background: var(--color-primary-yellow);
        border: 1px solid var(--color-grey);
        border-radius: 70px;
        height: 70px;
        padding: 0 var(--spacing-xl);
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 386px;
        margin: 0 auto;
        cursor: pointer;
        transition: all var(--transition-base);
    }

    .npo-dropdown:hover[b-eocdcurwqw] {
        opacity: var(--opacity-hover);
    }

    .npo-dropdown-text[b-eocdcurwqw] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-black);
    }

    .npo-dropdown-icon[b-eocdcurwqw] {
        width: 34px;
        height: 29px;
    }

    .benefits-grid[b-eocdcurwqw] {
        gap: 70px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .npo-page[b-eocdcurwqw] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .npo-dropdown[b-eocdcurwqw] {
        max-width: 350px;
    }

    .benefits-grid[b-eocdcurwqw] {
        flex-direction: column;
        align-items: center;
        gap: 70px;
    }

    .benefit-card[b-eocdcurwqw] {
        max-width: 353px;
        width: 100%;
    }
}
/* /Pages/NPO/Index.razor.rz.scp.css */
.npo-page[b-khjls573s2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-5xl);
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.npo-header[b-khjls573s2] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/d60c2586-cf95-4303-97d1-0d1b37d7c2e4');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.npo-header[b-khjls573s2]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.npo-header-title[b-khjls573s2] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.npo-navigation[b-khjls573s2] {
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 70px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-md);
}

.npo-nav-button[b-khjls573s2] {
    padding: 0 32px;
    height: 70px;
    border-radius: 46px;
    border: none;
    background: transparent;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.npo-nav-button--active[b-khjls573s2] {
    background: var(--color-white);
    border: 1px solid var(--color-white);
}

.npo-nav-button:hover[b-khjls573s2] {
    opacity: var(--opacity-hover);
}

.intro-section[b-khjls573s2] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.intro-title[b-khjls573s2] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
}

.intro-description[b-khjls573s2] {
    font-size: 24px;
    color: var(--color-black);
    line-height: var(--line-height-normal);
}

.section-header[b-khjls573s2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: var(--spacing-5xl);
}

.section-title[b-khjls573s2] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
}

.projects-grid[b-khjls573s2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    width: 100%;
}

.project-card[b-khjls573s2] {
    background: var(--color-card-background);
    border: 1.5px solid var(--color-grey);
    border-radius: 20px;
    padding: var(--spacing-xl) 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    height: 362px;
    transition: all var(--transition-base);
    cursor: pointer;
}

.project-card:hover[b-khjls573s2] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.project-card-title[b-khjls573s2] {
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    text-align: center;
}

.project-card-image[b-khjls573s2] {
    width: 246px;
    flex: 1;
    border-radius: 16px;
    object-fit: cover;
}

.news-section[b-khjls573s2] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xl);
}

.news-header[b-khjls573s2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.news-title[b-khjls573s2] {
    font-size: 32px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.filter-button[b-khjls573s2] {
    background: var(--color-white);
    border: 2px solid var(--color-card-border);
    border-radius: 20px;
    height: 50px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.filter-button:hover[b-khjls573s2] {
    background: var(--color-background-secondary);
}

.filter-icon[b-khjls573s2] {
    width: 26px;
    height: 26px;
}

.filter-text[b-khjls573s2] {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.news-grid[b-khjls573s2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 11px;
    width: 100%;
}

.news-card[b-khjls573s2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-card__image[b-khjls573s2] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 16px;
}

.news-card__content[b-khjls573s2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-card__title[b-khjls573s2] {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
}

.news-card__date[b-khjls573s2] {
    font-size: 14px;
    color: var(--color-gray-500);
}

.news-card__tags[b-khjls573s2] {
    display: flex;
    gap: 8px;
}

.news-card__tag[b-khjls573s2] {
    background: var(--color-gray-100);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* NPO Dropdown - Hidden on Desktop */
.npo-dropdown[b-khjls573s2] {
    display: none;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .npo-navigation[b-khjls573s2] {
        display: none;
    }

    .npo-dropdown[b-khjls573s2] {
        display: flex;
        background: var(--color-primary-yellow);
        border: 1px solid var(--color-grey);
        border-radius: 70px;
        height: 70px;
        padding: 0 var(--spacing-xl);
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 386px;
        margin: 0 auto;
        cursor: pointer;
        transition: all var(--transition-base);
    }

    .npo-dropdown:hover[b-khjls573s2] {
        opacity: var(--opacity-hover);
    }

    .npo-dropdown-text[b-khjls573s2] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-black);
    }

    .npo-dropdown-icon[b-khjls573s2] {
        width: 34px;
        height: 29px;
    }

    .projects-grid[b-khjls573s2] {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-grid[b-khjls573s2] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .npo-page[b-khjls573s2] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .npo-dropdown[b-khjls573s2] {
        max-width: 350px;
    }

    .intro-title[b-khjls573s2] {
        font-size: 32px;
    }

    .projects-grid[b-khjls573s2] {
        grid-template-columns: 1fr;
    }

    .news-grid[b-khjls573s2] {
        grid-template-columns: 1fr;
    }

    .news-title[b-khjls573s2] {
        font-size: 28px;
    }
}
/* /Pages/NPO/IndividualProjects.razor.rz.scp.css */
.npo-page[b-to4afzf0nz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-5xl);
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.npo-header[b-to4afzf0nz] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/c0c1299c-3fff-49c1-9a14-da137839fefa');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.npo-header[b-to4afzf0nz]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.npo-header-title[b-to4afzf0nz] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.intro-section[b-to4afzf0nz] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.intro-title[b-to4afzf0nz] {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
}

.intro-description[b-to4afzf0nz] {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: var(--line-height-normal);
}

.projects-grid[b-to4afzf0nz] {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    width: 100%;
    justify-content: space-between;
}

.projects-column[b-to4afzf0nz] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.project-card[b-to4afzf0nz] {
    background: var(--color-card-background);
    border: 1.5px solid var(--color-grey);
    border-radius: 20px;
    padding: var(--spacing-xl) 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    width: 286px;
    height: 362px;
    transition: all var(--transition-base);
    cursor: pointer;
}

.project-card:hover[b-to4afzf0nz] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.project-card-title[b-to4afzf0nz] {
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    text-align: center;
}

.project-card-image[b-to4afzf0nz] {
    width: 246px;
    flex: 1;
    border-radius: 16px;
    object-fit: cover;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .npo-page[b-to4afzf0nz] {
        padding: var(--spacing-5xl) var(--spacing-lg);
    }

    .projects-grid[b-to4afzf0nz] {
        gap: 30px 50px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .npo-page[b-to4afzf0nz] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .intro-title[b-to4afzf0nz] {
        font-size: 32px;
    }

    .projects-grid[b-to4afzf0nz] {
        flex-direction: column;
        align-items: center;
        gap: 30px 50px;
    }

    .projects-column[b-to4afzf0nz] {
        width: 100%;
        align-items: center;
    }

    .project-card[b-to4afzf0nz] {
        max-width: 353px;
        width: 100%;
    }
}
/* /Pages/NPO/Nuusgenoot.razor.rz.scp.css */
.npo-page[b-g8rulxw8vr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-5xl);
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.npo-header[b-g8rulxw8vr] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/9a4afe96-24c6-40c2-9861-e690ed6410ac');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.npo-header[b-g8rulxw8vr]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.npo-header-title[b-g8rulxw8vr] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.npo-navigation[b-g8rulxw8vr] {
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    width: 100%;
    max-width: 1245px;
}

.npo-nav-button[b-g8rulxw8vr] {
    padding: 0 var(--spacing-lg);
    height: 56px;
    border-radius: 46px;
    border: none;
    background: transparent;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-black);
    white-space: nowrap;
}

.npo-nav-button:hover[b-g8rulxw8vr] {
    opacity: var(--opacity-hover);
}

.npo-nav-button--active[b-g8rulxw8vr] {
    border: 1px solid var(--color-white);
    height: 70px;
}

.npo-dropdown[b-g8rulxw8vr] {
    display: none;
}

.newspapers-container[b-g8rulxw8vr] {
    display: flex;
    gap: 47px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.newspaper-card[b-g8rulxw8vr] {
    position: relative;
    width: 615px;
    height: 796px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.newspaper-image[b-g8rulxw8vr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    border-radius: 16px;
}

.newspaper-download-button[b-g8rulxw8vr] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-primary-yellow);
    border: none;
    border-radius: 16px;
    padding: 16px 76px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    cursor: pointer;
    transition: all var(--transition-base);
    width: 345px;
}

.newspaper-download-button:hover[b-g8rulxw8vr] {
    opacity: var(--opacity-hover);
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .npo-navigation[b-g8rulxw8vr] {
        display: none;
    }

    .npo-dropdown[b-g8rulxw8vr] {
        display: flex;
        background: var(--color-primary-yellow);
        border: 1px solid var(--color-grey);
        border-radius: 70px;
        height: 70px;
        padding: 0 var(--spacing-xl);
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 350px;
        cursor: pointer;
        transition: all var(--transition-base);
    }

    .npo-dropdown:hover[b-g8rulxw8vr] {
        opacity: var(--opacity-hover);
    }

    .npo-dropdown-text[b-g8rulxw8vr] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-black);
    }

    .npo-dropdown-icon[b-g8rulxw8vr] {
        width: 34px;
        height: 29px;
    }

    .newspapers-container[b-g8rulxw8vr] {
        gap: 47px;
    }

    .newspaper-card[b-g8rulxw8vr] {
        width: 354px;
        height: 483px;
    }

    .newspaper-download-button[b-g8rulxw8vr] {
        width: 322px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .npo-page[b-g8rulxw8vr] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .newspapers-container[b-g8rulxw8vr] {
        flex-direction: column;
        align-items: center;
        gap: 47px;
    }

    .newspaper-card[b-g8rulxw8vr] {
        width: 100%;
        max-width: 354px;
        height: 483px;
    }
}
/* /Pages/NPO/Projects.razor.rz.scp.css */
.npo-page[b-zadm1e8yf8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-5xl);
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.npo-header[b-zadm1e8yf8] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/3d259b7c-7c51-4f3b-9054-6b2b40685569');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.npo-header[b-zadm1e8yf8]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.npo-header-title[b-zadm1e8yf8] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.intro-section[b-zadm1e8yf8] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.intro-title[b-zadm1e8yf8] {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
}

.intro-description[b-zadm1e8yf8] {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: var(--line-height-normal);
}

.projects-container[b-zadm1e8yf8] {
    display: flex;
    gap: 43px;
    width: 100%;
    flex-wrap: wrap;
}

.upcoming-projects-card[b-zadm1e8yf8] {
    background: var(--color-card-background);
    border: 1.5px solid var(--color-card-border);
    border-radius: 20px;
    padding: var(--spacing-xl) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 267px;
    height: 764px;
    gap: var(--spacing-xl);
}

.upcoming-projects-title[b-zadm1e8yf8] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    text-align: center;
    width: 246px;
}

.project-info-group[b-zadm1e8yf8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 246px;
    text-align: center;
}

.project-info-title[b-zadm1e8yf8] {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.project-info-date[b-zadm1e8yf8] {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    height: 38px;
}

.enter-now-button[b-zadm1e8yf8] {
    background: var(--color-primary-yellow);
    border: none;
    border-radius: 20px;
    height: 55px;
    width: 246px;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    cursor: pointer;
    transition: all var(--transition-base);
}

.enter-now-button:hover[b-zadm1e8yf8] {
    opacity: var(--opacity-hover);
}

.projects-grid[b-zadm1e8yf8] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 40px;
    align-content: flex-start;
}

.projects-column[b-zadm1e8yf8] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.project-card[b-zadm1e8yf8] {
    background: var(--color-card-background);
    border: 1.5px solid var(--color-grey);
    border-radius: 20px;
    padding: var(--spacing-xl) 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    width: 286px;
    height: 362px;
    transition: all var(--transition-base);
    cursor: pointer;
}

.project-card:hover[b-zadm1e8yf8] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.project-card-title[b-zadm1e8yf8] {
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    text-align: center;
}

.project-card-image[b-zadm1e8yf8] {
    width: 246px;
    flex: 1;
    border-radius: 16px;
    object-fit: cover;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .projects-grid[b-zadm1e8yf8] {
        justify-content: space-between;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .npo-page[b-zadm1e8yf8] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .intro-title[b-zadm1e8yf8] {
        font-size: 32px;
    }

    .projects-container[b-zadm1e8yf8] {
        flex-direction: column;
        align-items: center;
    }

    .projects-grid[b-zadm1e8yf8] {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .projects-column[b-zadm1e8yf8] {
        width: 100%;
        align-items: center;
    }

    .project-card[b-zadm1e8yf8] {
        max-width: 353px;
        width: 100%;
    }

    .upcoming-projects-card[b-zadm1e8yf8] {
        max-width: 353px;
        width: 100%;
    }
}
/* /Pages/NPO/Woekerfonds.razor.rz.scp.css */
.npo-page[b-6r68e2csa0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-5xl);
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.npo-header[b-6r68e2csa0] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/5525574c-2431-4f30-9d5b-7f1ae3ced094');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.npo-header[b-6r68e2csa0]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.npo-header-title[b-6r68e2csa0] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.npo-navigation[b-6r68e2csa0] {
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    width: 100%;
    max-width: 1245px;
}

.npo-nav-button[b-6r68e2csa0] {
    padding: 0 var(--spacing-lg);
    height: 56px;
    border-radius: 46px;
    border: none;
    background: transparent;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-black);
    white-space: nowrap;
}

.npo-nav-button:hover[b-6r68e2csa0] {
    opacity: var(--opacity-hover);
}

.npo-nav-button--active[b-6r68e2csa0] {
    border: 1px solid var(--color-white);
    height: 70px;
}

.npo-dropdown[b-6r68e2csa0] {
    display: none;
}

.faq-container[b-6r68e2csa0] {
    display: flex;
    flex-direction: column;
    gap: 49px;
    width: 100%;
    max-width: 1336px;
}

.faq-item[b-6r68e2csa0] {
    background: var(--color-white);
    border: 1.5px solid var(--color-grey);
    border-radius: 20px;
    padding: var(--spacing-xl);
    width: 100%;
    transition: all var(--transition-base);
}

.faq-item--collapsed[b-6r68e2csa0] {
    min-height: 132px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-item--expanded[b-6r68e2csa0] {
    padding: var(--spacing-xl);
}

.faq-question[b-6r68e2csa0] {
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    line-height: 1.2;
}

.faq-content[b-6r68e2csa0] {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.faq-header[b-6r68e2csa0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
}

.faq-text[b-6r68e2csa0] {
    font-size: 20px;
    font-weight: var(--font-weight-regular);
    color: var(--color-black);
    line-height: 1.5;
}

.faq-question--expanded[b-6r68e2csa0] {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
}

.faq-icon[b-6r68e2csa0] {
    width: 48px;
    height: 48px;
    background: var(--color-primary-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: all var(--transition-base);
}

.faq-icon:hover[b-6r68e2csa0] {
    opacity: var(--opacity-hover);
}

.faq-icon img[b-6r68e2csa0] {
    width: 24px;
    height: 24px;
}

.donate-button[b-6r68e2csa0] {
    background: var(--color-primary-yellow);
    border: none;
    border-radius: 20px;
    padding: 10px 76px;
    font-size: 23px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    cursor: pointer;
    transition: all var(--transition-base);
    width: 256px;
}

.donate-button:hover[b-6r68e2csa0] {
    opacity: var(--opacity-hover);
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .npo-navigation[b-6r68e2csa0] {
        display: none;
    }

    .npo-dropdown[b-6r68e2csa0] {
        display: flex;
        background: var(--color-primary-yellow);
        border: 1px solid var(--color-grey);
        border-radius: 70px;
        height: 70px;
        padding: 0 var(--spacing-xl);
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 350px;
        cursor: pointer;
        transition: all var(--transition-base);
    }

    .npo-dropdown:hover[b-6r68e2csa0] {
        opacity: var(--opacity-hover);
    }

    .npo-dropdown-text[b-6r68e2csa0] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-black);
    }

    .npo-dropdown-icon[b-6r68e2csa0] {
        width: 34px;
        height: 29px;
    }

    .faq-container[b-6r68e2csa0] {
        max-width: 100%;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .npo-page[b-6r68e2csa0] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .faq-question[b-6r68e2csa0] {
        font-size: 28px;
    }

    .faq-question--expanded[b-6r68e2csa0] {
        font-size: 28px;
    }
}
/* /Pages/Profile/Benefits.razor.rz.scp.css */
.benefits-container[b-cdqu35s39a] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--atkv-space-lg);
}

.page-header[b-cdqu35s39a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--atkv-space-xl);
}

.btn-back[b-cdqu35s39a] {
    background: none;
    border: none;
    font-size: var(--atkv-font-size-h2-mobile);
    cursor: pointer;
    color: var(--atkv-primary-blue);
    padding: 5px 10px;
}

.page-header h1[b-cdqu35s39a] {
    margin: 0;
    font-size: var(--atkv-font-size-h2-mobile);
    color: var(--atkv-primary-blue);
}

.spacer[b-cdqu35s39a] {
    width: 44px;
}

.loading-container[b-cdqu35s39a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.spinner[b-cdqu35s39a] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--atkv-bg-light);
    border-top: 4px solid var(--atkv-primary-blue);
    border-radius: 50%;
    animation: spin-b-cdqu35s39a 1s linear infinite;
}

@keyframes spin-b-cdqu35s39a {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.benefits-header[b-cdqu35s39a] {
    background: linear-gradient(135deg, var(--atkv-primary-blue) 0%, var(--atkv-primary-blue) 100%);
    color: white;
    padding: 40px;
    border-radius: var(--atkv-radius-md);
    text-align: center;
    margin-bottom: var(--atkv-space-xl);
}

.benefits-header h2[b-cdqu35s39a] {
    margin: 0 0 10px;
    font-size: 28px;
}

.benefits-header p[b-cdqu35s39a] {
    margin: 0;
    opacity: 0.9;
}

.benefits-list[b-cdqu35s39a] {
    display: flex;
    flex-direction: column;
    gap: var(--atkv-space-md);
}

.benefit-category[b-cdqu35s39a] {
    background: white;
    border-radius: var(--atkv-radius-sm);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.category-header[b-cdqu35s39a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--atkv-space-lg);
    cursor: pointer;
    background-color: #f5f5f5;
    transition: background-color 0.2s;
}

.category-header:hover[b-cdqu35s39a] {
    background-color: #eeeeee;
}

.category-title[b-cdqu35s39a] {
    display: flex;
    align-items: center;
    gap: var(--atkv-space-md);
}

.category-icon[b-cdqu35s39a] {
    font-size: 32px;
}

.category-title h3[b-cdqu35s39a] {
    margin: 0;
    color: var(--atkv-primary-blue);
    font-size: 20px;
}

.expand-icon[b-cdqu35s39a] {
    color: var(--atkv-primary-blue);
    font-size: 20px;
}

.category-content[b-cdqu35s39a] {
    padding: var(--atkv-space-lg);
    border-top: 1px solid #e0e0e0;
}

.benefit-item[b-cdqu35s39a] {
    display: flex;
    gap: var(--atkv-space-md);
    padding: var(--atkv-space-md) 0;
    border-bottom: 1px solid #f0f0f0;
}

.benefit-item:last-child[b-cdqu35s39a] {
    border-bottom: none;
}

.check-icon[b-cdqu35s39a] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: #4caf50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.benefit-details h4[b-cdqu35s39a] {
    margin: 0 0 5px;
    color: #333;
    font-size: var(--atkv-font-size-body);
}

.benefit-details p[b-cdqu35s39a] {
    margin: 0;
    color: #666;
    font-size: var(--atkv-font-size-body-sm);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .benefits-container[b-cdqu35s39a] {
        padding: 10px;
    }

    .benefits-header[b-cdqu35s39a] {
        padding: 30px 20px;
    }

    .category-header[b-cdqu35s39a] {
        padding: var(--atkv-space-md);
    }

    .category-icon[b-cdqu35s39a] {
        font-size: var(--atkv-font-size-h2-mobile);
    }

    .category-title h3[b-cdqu35s39a] {
        font-size: var(--atkv-font-size-h4);
    }
}
/* /Pages/Profile/EditAddress.razor.rz.scp.css */
/* ============================================
   EDIT ADDRESS INFO PAGE - ATKV MOBILE APP
   Mobile-first, accessible address edit form
   ============================================ */

.edit-profile-container[b-53hu7i7kt0] {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--atkv-space-lg);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-53hu7i7kt0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--atkv-space-xl);
    padding-bottom: var(--atkv-space-md);
    border-bottom: 2px solid var(--atkv-border-divider);
}

.btn-back[b-53hu7i7kt0] {
    background: none;
    border: none;
    font-size: var(--atkv-font-size-h3);
    cursor: pointer;
    color: var(--atkv-primary-blue);
    padding: var(--atkv-space-xs) var(--atkv-space-sm);
    min-width: var(--atkv-touch-target-min);
    min-height: var(--atkv-touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--atkv-radius-sm);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-back:hover[b-53hu7i7kt0] {
    background-color: var(--atkv-bg-light);
}

.btn-back:focus-visible[b-53hu7i7kt0] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.page-header h1[b-53hu7i7kt0] {
    margin: 0;
    font-size: var(--atkv-font-size-h2-mobile);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
}

.spacer[b-53hu7i7kt0] {
    width: var(--atkv-touch-target-min);
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-53hu7i7kt0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: var(--atkv-space-lg);
}

.spinner[b-53hu7i7kt0] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--atkv-bg-light);
    border-top: 4px solid var(--atkv-primary-blue);
    border-radius: 50%;
    animation: spin-b-53hu7i7kt0 1s linear infinite;
}

@keyframes spin-b-53hu7i7kt0 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ============================================
   EDIT FORM
   ============================================ */

.edit-form[b-53hu7i7kt0] {
    background: var(--atkv-bg-card);
    border-radius: var(--atkv-radius-md);
    padding: var(--atkv-space-xl);
    box-shadow: var(--atkv-shadow-md);
}

.form-section[b-53hu7i7kt0] {
    margin-bottom: var(--atkv-space-2xl);
}

.form-section:last-of-type[b-53hu7i7kt0] {
    margin-bottom: 0;
}

.form-section h3[b-53hu7i7kt0] {
    margin: 0 0 var(--atkv-space-lg);
    font-size: var(--atkv-font-size-h4);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
    padding-bottom: var(--atkv-space-sm);
    border-bottom: 1px solid var(--atkv-border-divider);
}

.form-group[b-53hu7i7kt0] {
    margin-bottom: var(--atkv-space-lg);
}

.form-group:last-child[b-53hu7i7kt0] {
    margin-bottom: 0;
}

.form-label[b-53hu7i7kt0] {
    display: block;
    margin-bottom: var(--atkv-space-sm);
    font-size: var(--atkv-font-size-label);
    font-weight: var(--atkv-font-weight-semibold);
    color: var(--atkv-text-primary);
}

.form-label-required[b-53hu7i7kt0]::after {
    content: ' *';
    color: var(--atkv-error);
}

.form-control[b-53hu7i7kt0] {
    width: 100%;
    padding: var(--atkv-space-md);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-input);
    font-family: var(--atkv-font-family);
    min-height: var(--atkv-touch-target-min);
    transition: border-color var(--atkv-transition-base) var(--atkv-ease-in-out);
    background-color: var(--atkv-bg-white);
}

.form-control[b-53hu7i7kt0]::placeholder {
    color: var(--atkv-text-placeholder);
}

.form-control:focus[b-53hu7i7kt0] {
    outline: none;
    border-color: var(--atkv-primary-blue);
}

.form-control:disabled[b-53hu7i7kt0] {
    background-color: var(--atkv-bg-light);
    color: var(--atkv-text-disabled);
    cursor: not-allowed;
}

.form-control.invalid[b-53hu7i7kt0] {
    border-color: var(--atkv-error);
}

textarea.form-control[b-53hu7i7kt0] {
    min-height: 120px;
    resize: vertical;
}

select.form-control[b-53hu7i7kt0] {
    appearance: none;
    background-image: 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 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--atkv-space-md) center;
    padding-right: var(--atkv-space-2xl);
}

/* ============================================
   FORM HELPERS
   ============================================ */

.form-help[b-53hu7i7kt0] {
    display: block;
    margin-top: var(--atkv-space-xs);
    font-size: var(--atkv-font-size-caption);
    color: var(--atkv-text-tertiary);
    line-height: var(--atkv-line-height-body);
}

.form-error[b-53hu7i7kt0] {
    display: block;
    margin-top: var(--atkv-space-xs);
    font-size: var(--atkv-font-size-caption);
    color: var(--atkv-error);
    line-height: var(--atkv-line-height-body);
}

.form-error[b-53hu7i7kt0]::before {
    content: '⚠ ';
}

/* ============================================
   FORM ROW (Two column layout)
   ============================================ */

.form-row[b-53hu7i7kt0] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--atkv-space-md);
    margin-bottom: var(--atkv-space-lg);
}

@media (min-width: 768px) {
    .form-row[b-53hu7i7kt0] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   PHOTO UPLOAD
   ============================================ */

.photo-upload[b-53hu7i7kt0] {
    display: flex;
    align-items: center;
    gap: var(--atkv-space-lg);
    padding: var(--atkv-space-lg);
    background-color: var(--atkv-bg-light);
    border-radius: var(--atkv-radius-sm);
}

.photo-preview[b-53hu7i7kt0] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--atkv-border-divider);
    flex-shrink: 0;
}

.photo-preview img[b-53hu7i7kt0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview-fallback[b-53hu7i7kt0] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--atkv-primary-blue);
    color: var(--atkv-text-white);
    font-size: var(--atkv-font-size-h3);
    font-weight: var(--atkv-font-weight-bold);
}

.photo-actions[b-53hu7i7kt0] {
    display: flex;
    flex-direction: column;
    gap: var(--atkv-space-sm);
}

.btn-upload[b-53hu7i7kt0],
.btn-remove[b-53hu7i7kt0] {
    padding: var(--atkv-space-sm) var(--atkv-space-md);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-semibold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-min);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-upload[b-53hu7i7kt0] {
    background-color: var(--atkv-primary-blue);
    color: var(--atkv-text-white);
}

.btn-upload:hover[b-53hu7i7kt0] {
    background-color: var(--atkv-primary-black);
}

.btn-upload:focus-visible[b-53hu7i7kt0] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.btn-remove[b-53hu7i7kt0] {
    background-color: var(--atkv-bg-white);
    color: var(--atkv-error);
    border: 2px solid var(--atkv-error);
}

.btn-remove:hover[b-53hu7i7kt0] {
    background-color: var(--atkv-error);
    color: var(--atkv-text-white);
}

.btn-remove:focus-visible[b-53hu7i7kt0] {
    outline: 2px solid var(--atkv-error);
    outline-offset: 2px;
}

input[type="file"][b-53hu7i7kt0] {
    display: none;
}

/* ============================================
   ALERTS
   ============================================ */

.alert[b-53hu7i7kt0] {
    padding: var(--atkv-space-md);
    border-radius: var(--atkv-radius-sm);
    margin-bottom: var(--atkv-space-lg);
    font-size: var(--atkv-font-size-body-sm);
    line-height: var(--atkv-line-height-body);
}

.alert-success[b-53hu7i7kt0] {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 2px solid #81c784;
}

.alert-error[b-53hu7i7kt0] {
    background-color: #ffebee;
    color: #c62828;
    border: 2px solid #ef9a9a;
}

.alert-info[b-53hu7i7kt0] {
    background-color: #e3f2fd;
    color: #1565c0;
    border: 2px solid #64b5f6;
}

/* ============================================
   FORM ACTIONS
   ============================================ */

.form-actions[b-53hu7i7kt0] {
    display: flex;
    gap: var(--atkv-space-md);
    margin-top: var(--atkv-space-2xl);
    padding-top: var(--atkv-space-xl);
    border-top: 2px solid var(--atkv-border-divider);
}

.btn-primary[b-53hu7i7kt0] {
    flex: 1;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-primary-black);
    color: var(--atkv-text-white);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-button-mobile);
    font-weight: var(--atkv-font-weight-bold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-primary:hover:not(:disabled)[b-53hu7i7kt0] {
    background-color: var(--atkv-primary-blue);
    transform: translateY(-1px);
    box-shadow: var(--atkv-shadow-lg);
}

.btn-primary:active:not(:disabled)[b-53hu7i7kt0] {
    transform: translateY(0);
}

.btn-primary:focus-visible[b-53hu7i7kt0] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.btn-primary:disabled[b-53hu7i7kt0] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-53hu7i7kt0] {
    flex: 1;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-bg-white);
    color: var(--atkv-text-secondary);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-button-mobile);
    font-weight: var(--atkv-font-weight-semibold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-secondary:hover[b-53hu7i7kt0] {
    border-color: var(--atkv-text-secondary);
    background-color: var(--atkv-bg-light);
}

.btn-secondary:focus-visible[b-53hu7i7kt0] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 767px) {
    .edit-profile-container[b-53hu7i7kt0] {
        padding: var(--atkv-space-md);
    }

    .edit-form[b-53hu7i7kt0] {
        padding: var(--atkv-space-lg);
    }

    .form-actions[b-53hu7i7kt0] {
        flex-direction: column-reverse;
    }

    .photo-upload[b-53hu7i7kt0] {
        flex-direction: column;
        text-align: center;
    }
}

/* Tablet and larger */
@media (min-width: 768px) {
    .page-header h1[b-53hu7i7kt0] {
        font-size: var(--atkv-font-size-h2);
    }

    .btn-primary[b-53hu7i7kt0],
    .btn-secondary[b-53hu7i7kt0] {
        font-size: var(--atkv-font-size-button);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .form-control[b-53hu7i7kt0],
    .btn-primary[b-53hu7i7kt0],
    .btn-secondary[b-53hu7i7kt0],
    .btn-upload[b-53hu7i7kt0],
    .btn-remove[b-53hu7i7kt0],
    .btn-back[b-53hu7i7kt0] {
        transition: none;
    }

    .btn-primary:hover:not(:disabled)[b-53hu7i7kt0] {
        transform: none;
    }

    .spinner[b-53hu7i7kt0] {
        animation: none;
        border-top-color: transparent;
    }
}

@media (prefers-contrast: high) {
    .form-control[b-53hu7i7kt0],
    .btn-primary[b-53hu7i7kt0],
    .btn-secondary[b-53hu7i7kt0],
    .btn-upload[b-53hu7i7kt0],
    .btn-remove[b-53hu7i7kt0] {
        border-width: 3px;
    }
}
/* /Pages/Profile/EditContact.razor.rz.scp.css */
/* ============================================
   EDIT CONTACT INFO PAGE - ATKV MOBILE APP
   Mobile-first, accessible contact info edit form
   ============================================ */

.edit-profile-container[b-ims3f9ye6t] {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--atkv-space-lg);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-ims3f9ye6t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--atkv-space-xl);
    padding-bottom: var(--atkv-space-md);
    border-bottom: 2px solid var(--atkv-border-divider);
}

.btn-back[b-ims3f9ye6t] {
    background: none;
    border: none;
    font-size: var(--atkv-font-size-h3);
    cursor: pointer;
    color: var(--atkv-primary-blue);
    padding: var(--atkv-space-xs) var(--atkv-space-sm);
    min-width: var(--atkv-touch-target-min);
    min-height: var(--atkv-touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--atkv-radius-sm);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-back:hover[b-ims3f9ye6t] {
    background-color: var(--atkv-bg-light);
}

.btn-back:focus-visible[b-ims3f9ye6t] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.page-header h1[b-ims3f9ye6t] {
    margin: 0;
    font-size: var(--atkv-font-size-h2-mobile);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
}

.spacer[b-ims3f9ye6t] {
    width: var(--atkv-touch-target-min);
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-ims3f9ye6t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: var(--atkv-space-lg);
}

.spinner[b-ims3f9ye6t] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--atkv-bg-light);
    border-top: 4px solid var(--atkv-primary-blue);
    border-radius: 50%;
    animation: spin-b-ims3f9ye6t 1s linear infinite;
}

@keyframes spin-b-ims3f9ye6t {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ============================================
   EDIT FORM
   ============================================ */

.edit-form[b-ims3f9ye6t] {
    background: var(--atkv-bg-card);
    border-radius: var(--atkv-radius-md);
    padding: var(--atkv-space-xl);
    box-shadow: var(--atkv-shadow-md);
}

.form-section[b-ims3f9ye6t] {
    margin-bottom: var(--atkv-space-2xl);
}

.form-section:last-of-type[b-ims3f9ye6t] {
    margin-bottom: 0;
}

.form-section h3[b-ims3f9ye6t] {
    margin: 0 0 var(--atkv-space-lg);
    font-size: var(--atkv-font-size-h4);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
    padding-bottom: var(--atkv-space-sm);
    border-bottom: 1px solid var(--atkv-border-divider);
}

.form-group[b-ims3f9ye6t] {
    margin-bottom: var(--atkv-space-lg);
}

.form-group:last-child[b-ims3f9ye6t] {
    margin-bottom: 0;
}

.form-label[b-ims3f9ye6t] {
    display: block;
    margin-bottom: var(--atkv-space-sm);
    font-size: var(--atkv-font-size-label);
    font-weight: var(--atkv-font-weight-semibold);
    color: var(--atkv-text-primary);
}

.form-label-required[b-ims3f9ye6t]::after {
    content: ' *';
    color: var(--atkv-error);
}

.form-control[b-ims3f9ye6t] {
    width: 100%;
    padding: var(--atkv-space-md);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-input);
    font-family: var(--atkv-font-family);
    min-height: var(--atkv-touch-target-min);
    transition: border-color var(--atkv-transition-base) var(--atkv-ease-in-out);
    background-color: var(--atkv-bg-white);
}

.form-control[b-ims3f9ye6t]::placeholder {
    color: var(--atkv-text-placeholder);
}

.form-control:focus[b-ims3f9ye6t] {
    outline: none;
    border-color: var(--atkv-primary-blue);
}

.form-control:disabled[b-ims3f9ye6t] {
    background-color: var(--atkv-bg-light);
    color: var(--atkv-text-disabled);
    cursor: not-allowed;
}

.form-control.invalid[b-ims3f9ye6t] {
    border-color: var(--atkv-error);
}

textarea.form-control[b-ims3f9ye6t] {
    min-height: 120px;
    resize: vertical;
}

select.form-control[b-ims3f9ye6t] {
    appearance: none;
    background-image: 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 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--atkv-space-md) center;
    padding-right: var(--atkv-space-2xl);
}

/* ============================================
   FORM HELPERS
   ============================================ */

.form-help[b-ims3f9ye6t] {
    display: block;
    margin-top: var(--atkv-space-xs);
    font-size: var(--atkv-font-size-caption);
    color: var(--atkv-text-tertiary);
    line-height: var(--atkv-line-height-body);
}

.form-error[b-ims3f9ye6t] {
    display: block;
    margin-top: var(--atkv-space-xs);
    font-size: var(--atkv-font-size-caption);
    color: var(--atkv-error);
    line-height: var(--atkv-line-height-body);
}

.form-error[b-ims3f9ye6t]::before {
    content: '⚠ ';
}

/* ============================================
   FORM ROW (Two column layout)
   ============================================ */

.form-row[b-ims3f9ye6t] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--atkv-space-md);
    margin-bottom: var(--atkv-space-lg);
}

@media (min-width: 768px) {
    .form-row[b-ims3f9ye6t] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   PHOTO UPLOAD
   ============================================ */

.photo-upload[b-ims3f9ye6t] {
    display: flex;
    align-items: center;
    gap: var(--atkv-space-lg);
    padding: var(--atkv-space-lg);
    background-color: var(--atkv-bg-light);
    border-radius: var(--atkv-radius-sm);
}

.photo-preview[b-ims3f9ye6t] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--atkv-border-divider);
    flex-shrink: 0;
}

.photo-preview img[b-ims3f9ye6t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview-fallback[b-ims3f9ye6t] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--atkv-primary-blue);
    color: var(--atkv-text-white);
    font-size: var(--atkv-font-size-h3);
    font-weight: var(--atkv-font-weight-bold);
}

.photo-actions[b-ims3f9ye6t] {
    display: flex;
    flex-direction: column;
    gap: var(--atkv-space-sm);
}

.btn-upload[b-ims3f9ye6t],
.btn-remove[b-ims3f9ye6t] {
    padding: var(--atkv-space-sm) var(--atkv-space-md);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-semibold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-min);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-upload[b-ims3f9ye6t] {
    background-color: var(--atkv-primary-blue);
    color: var(--atkv-text-white);
}

.btn-upload:hover[b-ims3f9ye6t] {
    background-color: var(--atkv-primary-black);
}

.btn-upload:focus-visible[b-ims3f9ye6t] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.btn-remove[b-ims3f9ye6t] {
    background-color: var(--atkv-bg-white);
    color: var(--atkv-error);
    border: 2px solid var(--atkv-error);
}

.btn-remove:hover[b-ims3f9ye6t] {
    background-color: var(--atkv-error);
    color: var(--atkv-text-white);
}

.btn-remove:focus-visible[b-ims3f9ye6t] {
    outline: 2px solid var(--atkv-error);
    outline-offset: 2px;
}

input[type="file"][b-ims3f9ye6t] {
    display: none;
}

/* ============================================
   ALERTS
   ============================================ */

.alert[b-ims3f9ye6t] {
    padding: var(--atkv-space-md);
    border-radius: var(--atkv-radius-sm);
    margin-bottom: var(--atkv-space-lg);
    font-size: var(--atkv-font-size-body-sm);
    line-height: var(--atkv-line-height-body);
}

.alert-success[b-ims3f9ye6t] {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 2px solid #81c784;
}

.alert-error[b-ims3f9ye6t] {
    background-color: #ffebee;
    color: #c62828;
    border: 2px solid #ef9a9a;
}

.alert-info[b-ims3f9ye6t] {
    background-color: #e3f2fd;
    color: #1565c0;
    border: 2px solid #64b5f6;
}

/* ============================================
   FORM ACTIONS
   ============================================ */

.form-actions[b-ims3f9ye6t] {
    display: flex;
    gap: var(--atkv-space-md);
    margin-top: var(--atkv-space-2xl);
    padding-top: var(--atkv-space-xl);
    border-top: 2px solid var(--atkv-border-divider);
}

.btn-primary[b-ims3f9ye6t] {
    flex: 1;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-primary-black);
    color: var(--atkv-text-white);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-button-mobile);
    font-weight: var(--atkv-font-weight-bold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-primary:hover:not(:disabled)[b-ims3f9ye6t] {
    background-color: var(--atkv-primary-blue);
    transform: translateY(-1px);
    box-shadow: var(--atkv-shadow-lg);
}

.btn-primary:active:not(:disabled)[b-ims3f9ye6t] {
    transform: translateY(0);
}

.btn-primary:focus-visible[b-ims3f9ye6t] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.btn-primary:disabled[b-ims3f9ye6t] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-ims3f9ye6t] {
    flex: 1;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-bg-white);
    color: var(--atkv-text-secondary);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-button-mobile);
    font-weight: var(--atkv-font-weight-semibold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-secondary:hover[b-ims3f9ye6t] {
    border-color: var(--atkv-text-secondary);
    background-color: var(--atkv-bg-light);
}

.btn-secondary:focus-visible[b-ims3f9ye6t] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 767px) {
    .edit-profile-container[b-ims3f9ye6t] {
        padding: var(--atkv-space-md);
    }

    .edit-form[b-ims3f9ye6t] {
        padding: var(--atkv-space-lg);
    }

    .form-actions[b-ims3f9ye6t] {
        flex-direction: column-reverse;
    }

    .photo-upload[b-ims3f9ye6t] {
        flex-direction: column;
        text-align: center;
    }
}

/* Tablet and larger */
@media (min-width: 768px) {
    .page-header h1[b-ims3f9ye6t] {
        font-size: var(--atkv-font-size-h2);
    }

    .btn-primary[b-ims3f9ye6t],
    .btn-secondary[b-ims3f9ye6t] {
        font-size: var(--atkv-font-size-button);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .form-control[b-ims3f9ye6t],
    .btn-primary[b-ims3f9ye6t],
    .btn-secondary[b-ims3f9ye6t],
    .btn-upload[b-ims3f9ye6t],
    .btn-remove[b-ims3f9ye6t],
    .btn-back[b-ims3f9ye6t] {
        transition: none;
    }

    .btn-primary:hover:not(:disabled)[b-ims3f9ye6t] {
        transform: none;
    }

    .spinner[b-ims3f9ye6t] {
        animation: none;
        border-top-color: transparent;
    }
}

@media (prefers-contrast: high) {
    .form-control[b-ims3f9ye6t],
    .btn-primary[b-ims3f9ye6t],
    .btn-secondary[b-ims3f9ye6t],
    .btn-upload[b-ims3f9ye6t],
    .btn-remove[b-ims3f9ye6t] {
        border-width: 3px;
    }
}
/* /Pages/Profile/EditPersonal.razor.rz.scp.css */
/* ============================================
   EDIT PERSONAL INFO PAGE - ATKV MOBILE APP
   Mobile-first, accessible profile edit form
   ============================================ */

.edit-profile-container[b-3vpyaef8ro] {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--atkv-space-lg);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-3vpyaef8ro] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--atkv-space-xl);
    padding-bottom: var(--atkv-space-md);
    border-bottom: 2px solid var(--atkv-border-divider);
}

.btn-back[b-3vpyaef8ro] {
    background: none;
    border: none;
    font-size: var(--atkv-font-size-h3);
    cursor: pointer;
    color: var(--atkv-primary-blue);
    padding: var(--atkv-space-xs) var(--atkv-space-sm);
    min-width: var(--atkv-touch-target-min);
    min-height: var(--atkv-touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--atkv-radius-sm);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-back:hover[b-3vpyaef8ro] {
    background-color: var(--atkv-bg-light);
}

.btn-back:focus-visible[b-3vpyaef8ro] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.page-header h1[b-3vpyaef8ro] {
    margin: 0;
    font-size: var(--atkv-font-size-h2-mobile);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
}

.spacer[b-3vpyaef8ro] {
    width: var(--atkv-touch-target-min);
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-3vpyaef8ro] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: var(--atkv-space-lg);
}

.spinner[b-3vpyaef8ro] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--atkv-bg-light);
    border-top: 4px solid var(--atkv-primary-blue);
    border-radius: 50%;
    animation: spin-b-3vpyaef8ro 1s linear infinite;
}

@keyframes spin-b-3vpyaef8ro {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ============================================
   EDIT FORM
   ============================================ */

.edit-form[b-3vpyaef8ro] {
    background: var(--atkv-bg-card);
    border-radius: var(--atkv-radius-md);
    padding: var(--atkv-space-xl);
    box-shadow: var(--atkv-shadow-md);
}

.form-section[b-3vpyaef8ro] {
    margin-bottom: var(--atkv-space-2xl);
}

.form-section:last-of-type[b-3vpyaef8ro] {
    margin-bottom: 0;
}

.form-section h3[b-3vpyaef8ro] {
    margin: 0 0 var(--atkv-space-lg);
    font-size: var(--atkv-font-size-h4);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
    padding-bottom: var(--atkv-space-sm);
    border-bottom: 1px solid var(--atkv-border-divider);
}

.form-group[b-3vpyaef8ro] {
    margin-bottom: var(--atkv-space-lg);
}

.form-group:last-child[b-3vpyaef8ro] {
    margin-bottom: 0;
}

.form-label[b-3vpyaef8ro] {
    display: block;
    margin-bottom: var(--atkv-space-sm);
    font-size: var(--atkv-font-size-label);
    font-weight: var(--atkv-font-weight-semibold);
    color: var(--atkv-text-primary);
}

.form-label-required[b-3vpyaef8ro]::after {
    content: ' *';
    color: var(--atkv-error);
}

.form-control[b-3vpyaef8ro] {
    width: 100%;
    padding: var(--atkv-space-md);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-input);
    font-family: var(--atkv-font-family);
    min-height: var(--atkv-touch-target-min);
    transition: border-color var(--atkv-transition-base) var(--atkv-ease-in-out);
    background-color: var(--atkv-bg-white);
}

.form-control[b-3vpyaef8ro]::placeholder {
    color: var(--atkv-text-placeholder);
}

.form-control:focus[b-3vpyaef8ro] {
    outline: none;
    border-color: var(--atkv-primary-blue);
}

.form-control:disabled[b-3vpyaef8ro] {
    background-color: var(--atkv-bg-light);
    color: var(--atkv-text-disabled);
    cursor: not-allowed;
}

.form-control.invalid[b-3vpyaef8ro] {
    border-color: var(--atkv-error);
}

textarea.form-control[b-3vpyaef8ro] {
    min-height: 120px;
    resize: vertical;
}

select.form-control[b-3vpyaef8ro] {
    appearance: none;
    background-image: 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 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--atkv-space-md) center;
    padding-right: var(--atkv-space-2xl);
}

/* ============================================
   FORM HELPERS
   ============================================ */

.form-help[b-3vpyaef8ro] {
    display: block;
    margin-top: var(--atkv-space-xs);
    font-size: var(--atkv-font-size-caption);
    color: var(--atkv-text-tertiary);
    line-height: var(--atkv-line-height-body);
}

.form-error[b-3vpyaef8ro] {
    display: block;
    margin-top: var(--atkv-space-xs);
    font-size: var(--atkv-font-size-caption);
    color: var(--atkv-error);
    line-height: var(--atkv-line-height-body);
}

.form-error[b-3vpyaef8ro]::before {
    content: '⚠ ';
}

/* ============================================
   FORM ROW (Two column layout)
   ============================================ */

.form-row[b-3vpyaef8ro] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--atkv-space-md);
    margin-bottom: var(--atkv-space-lg);
}

@media (min-width: 768px) {
    .form-row[b-3vpyaef8ro] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   PHOTO UPLOAD
   ============================================ */

.photo-upload[b-3vpyaef8ro] {
    display: flex;
    align-items: center;
    gap: var(--atkv-space-lg);
    padding: var(--atkv-space-lg);
    background-color: var(--atkv-bg-light);
    border-radius: var(--atkv-radius-sm);
}

.photo-preview[b-3vpyaef8ro] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--atkv-border-divider);
    flex-shrink: 0;
}

.photo-preview img[b-3vpyaef8ro] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview-fallback[b-3vpyaef8ro] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--atkv-primary-blue);
    color: var(--atkv-text-white);
    font-size: var(--atkv-font-size-h3);
    font-weight: var(--atkv-font-weight-bold);
}

.photo-actions[b-3vpyaef8ro] {
    display: flex;
    flex-direction: column;
    gap: var(--atkv-space-sm);
}

.btn-upload[b-3vpyaef8ro],
.btn-remove[b-3vpyaef8ro] {
    padding: var(--atkv-space-sm) var(--atkv-space-md);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-semibold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-min);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-upload[b-3vpyaef8ro] {
    background-color: var(--atkv-primary-blue);
    color: var(--atkv-text-white);
}

.btn-upload:hover[b-3vpyaef8ro] {
    background-color: var(--atkv-primary-black);
}

.btn-upload:focus-visible[b-3vpyaef8ro] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.btn-remove[b-3vpyaef8ro] {
    background-color: var(--atkv-bg-white);
    color: var(--atkv-error);
    border: 2px solid var(--atkv-error);
}

.btn-remove:hover[b-3vpyaef8ro] {
    background-color: var(--atkv-error);
    color: var(--atkv-text-white);
}

.btn-remove:focus-visible[b-3vpyaef8ro] {
    outline: 2px solid var(--atkv-error);
    outline-offset: 2px;
}

input[type="file"][b-3vpyaef8ro] {
    display: none;
}

/* ============================================
   ALERTS
   ============================================ */

.alert[b-3vpyaef8ro] {
    padding: var(--atkv-space-md);
    border-radius: var(--atkv-radius-sm);
    margin-bottom: var(--atkv-space-lg);
    font-size: var(--atkv-font-size-body-sm);
    line-height: var(--atkv-line-height-body);
}

.alert-success[b-3vpyaef8ro] {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 2px solid #81c784;
}

.alert-error[b-3vpyaef8ro] {
    background-color: #ffebee;
    color: #c62828;
    border: 2px solid #ef9a9a;
}

.alert-info[b-3vpyaef8ro] {
    background-color: #e3f2fd;
    color: #1565c0;
    border: 2px solid #64b5f6;
}

/* ============================================
   FORM ACTIONS
   ============================================ */

.form-actions[b-3vpyaef8ro] {
    display: flex;
    gap: var(--atkv-space-md);
    margin-top: var(--atkv-space-2xl);
    padding-top: var(--atkv-space-xl);
    border-top: 2px solid var(--atkv-border-divider);
}

.btn-primary[b-3vpyaef8ro] {
    flex: 1;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-primary-black);
    color: var(--atkv-text-white);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-button-mobile);
    font-weight: var(--atkv-font-weight-bold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-primary:hover:not(:disabled)[b-3vpyaef8ro] {
    background-color: var(--atkv-primary-blue);
    transform: translateY(-1px);
    box-shadow: var(--atkv-shadow-lg);
}

.btn-primary:active:not(:disabled)[b-3vpyaef8ro] {
    transform: translateY(0);
}

.btn-primary:focus-visible[b-3vpyaef8ro] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.btn-primary:disabled[b-3vpyaef8ro] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-3vpyaef8ro] {
    flex: 1;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-bg-white);
    color: var(--atkv-text-secondary);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-button-mobile);
    font-weight: var(--atkv-font-weight-semibold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-secondary:hover[b-3vpyaef8ro] {
    border-color: var(--atkv-text-secondary);
    background-color: var(--atkv-bg-light);
}

.btn-secondary:focus-visible[b-3vpyaef8ro] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 767px) {
    .edit-profile-container[b-3vpyaef8ro] {
        padding: var(--atkv-space-md);
    }

    .edit-form[b-3vpyaef8ro] {
        padding: var(--atkv-space-lg);
    }

    .form-actions[b-3vpyaef8ro] {
        flex-direction: column-reverse;
    }

    .photo-upload[b-3vpyaef8ro] {
        flex-direction: column;
        text-align: center;
    }
}

/* Tablet and larger */
@media (min-width: 768px) {
    .page-header h1[b-3vpyaef8ro] {
        font-size: var(--atkv-font-size-h2);
    }

    .btn-primary[b-3vpyaef8ro],
    .btn-secondary[b-3vpyaef8ro] {
        font-size: var(--atkv-font-size-button);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .form-control[b-3vpyaef8ro],
    .btn-primary[b-3vpyaef8ro],
    .btn-secondary[b-3vpyaef8ro],
    .btn-upload[b-3vpyaef8ro],
    .btn-remove[b-3vpyaef8ro],
    .btn-back[b-3vpyaef8ro] {
        transition: none;
    }

    .btn-primary:hover:not(:disabled)[b-3vpyaef8ro] {
        transform: none;
    }

    .spinner[b-3vpyaef8ro] {
        animation: none;
        border-top-color: transparent;
    }
}

@media (prefers-contrast: high) {
    .form-control[b-3vpyaef8ro],
    .btn-primary[b-3vpyaef8ro],
    .btn-secondary[b-3vpyaef8ro],
    .btn-upload[b-3vpyaef8ro],
    .btn-remove[b-3vpyaef8ro] {
        border-width: 3px;
    }
}
/* /Pages/Profile/Family.razor.rz.scp.css */
.family-container[b-h50j4xe23i] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--atkv-space-lg);
}

.page-header[b-h50j4xe23i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--atkv-space-xl);
}

.btn-back[b-h50j4xe23i] {
    background: none;
    border: none;
    font-size: var(--atkv-font-size-h2-mobile);
    cursor: pointer;
    color: var(--atkv-primary-blue);
    padding: 5px 10px;
}

.page-header h1[b-h50j4xe23i] {
    margin: 0;
    font-size: var(--atkv-font-size-h2-mobile);
    color: var(--atkv-primary-blue);
}

.spacer[b-h50j4xe23i] {
    width: 44px;
}

.loading-container[b-h50j4xe23i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.spinner[b-h50j4xe23i] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--atkv-bg-light);
    border-top: 4px solid var(--atkv-primary-blue);
    border-radius: 50%;
    animation: spin-b-h50j4xe23i 1s linear infinite;
}

@keyframes spin-b-h50j4xe23i {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.family-list[b-h50j4xe23i] {
    display: flex;
    flex-direction: column;
    gap: var(--atkv-space-md);
}

.family-card[b-h50j4xe23i] {
    display: flex;
    align-items: center;
    gap: var(--atkv-space-lg);
    padding: var(--atkv-space-lg);
    background: white;
    border-radius: var(--atkv-radius-sm);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s;
}

.family-card:hover[b-h50j4xe23i] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.family-avatar[b-h50j4xe23i] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--atkv-primary-blue) 0%, var(--atkv-primary-blue) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--atkv-font-size-h2-mobile);
    font-weight: bold;
    flex-shrink: 0;
}

.family-info[b-h50j4xe23i] {
    flex: 1;
}

.family-info h3[b-h50j4xe23i] {
    margin: 0 0 5px;
    color: #333;
    font-size: var(--atkv-font-size-h4);
}

.relationship[b-h50j4xe23i] {
    margin: 0 0 3px;
    color: var(--atkv-primary-blue);
    font-weight: 600;
    font-size: var(--atkv-font-size-body-sm);
}

.age[b-h50j4xe23i] {
    margin: 0;
    color: #666;
    font-size: var(--atkv-font-size-body-sm);
}

.arrow-icon[b-h50j4xe23i] {
    color: var(--atkv-primary-blue);
    font-size: var(--atkv-font-size-h2-mobile);
}

.empty-state[b-h50j4xe23i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 40px;
}

.empty-icon[b-h50j4xe23i] {
    font-size: 80px;
    margin-bottom: var(--atkv-space-lg);
}

.empty-state h3[b-h50j4xe23i] {
    margin: 0 0 10px;
    color: #333;
}

.empty-state p[b-h50j4xe23i] {
    margin: 0 0 20px;
    color: #666;
    max-width: 400px;
}

.btn-primary[b-h50j4xe23i] {
    padding: 12px 24px;
    background-color: var(--atkv-primary-blue);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--atkv-font-size-body);
    transition: background-color 0.2s;
}

.btn-primary:hover[b-h50j4xe23i] {
    background-color: var(--atkv-primary-blue);
}

.modal-overlay[b-h50j4xe23i] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-h50j4xe23i] {
    background: white;
    border-radius: var(--atkv-radius-md);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.modal-header[b-h50j4xe23i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--atkv-space-lg);
    border-bottom: 1px solid #e0e0e0;
}

.modal-header h2[b-h50j4xe23i] {
    margin: 0;
    font-size: 20px;
    color: var(--atkv-primary-blue);
}

.btn-close[b-h50j4xe23i] {
    background: none;
    border: none;
    font-size: var(--atkv-font-size-h2-mobile);
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover[b-h50j4xe23i] {
    color: #333;
}

.modal-body[b-h50j4xe23i] {
    padding: var(--atkv-space-lg);
}

.detail-row[b-h50j4xe23i] {
    display: flex;
    justify-content: space-between;
    padding: var(--atkv-space-md) 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-row:last-child[b-h50j4xe23i] {
    border-bottom: none;
}

.label[b-h50j4xe23i] {
    font-weight: 600;
    color: #666;
}

.value[b-h50j4xe23i] {
    color: #333;
    text-align: right;
}

.modal-actions[b-h50j4xe23i] {
    padding: var(--atkv-space-lg);
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
}

.btn-secondary[b-h50j4xe23i] {
    padding: 12px 24px;
    background-color: #f5f5f5;
    color: #666;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--atkv-font-size-body);
    transition: background-color 0.2s;
}

.btn-secondary:hover[b-h50j4xe23i] {
    background-color: #eeeeee;
}

@media (max-width: 768px) {
    .family-container[b-h50j4xe23i] {
        padding: 10px;
    }

    .family-card[b-h50j4xe23i] {
        padding: var(--atkv-space-md);
    }

    .family-avatar[b-h50j4xe23i] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .modal-content[b-h50j4xe23i] {
        width: 95%;
    }
}
/* /Pages/Profile/Membership.razor.rz.scp.css */
.membership-container[b-cr34nyk1h1] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--atkv-space-lg);
}

.page-header[b-cr34nyk1h1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--atkv-space-xl);
}

.btn-back[b-cr34nyk1h1] {
    background: none;
    border: none;
    font-size: var(--atkv-font-size-h2-mobile);
    cursor: pointer;
    color: var(--atkv-primary-blue);
    padding: 5px 10px;
}

.page-header h1[b-cr34nyk1h1] {
    margin: 0;
    font-size: var(--atkv-font-size-h2-mobile);
    color: var(--atkv-primary-blue);
}

.spacer[b-cr34nyk1h1] {
    width: 44px;
}

.loading-container[b-cr34nyk1h1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.spinner[b-cr34nyk1h1] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--atkv-bg-light);
    border-top: 4px solid var(--atkv-primary-blue);
    border-radius: 50%;
    animation: spin-b-cr34nyk1h1 1s linear infinite;
}

@keyframes spin-b-cr34nyk1h1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.membership-card[b-cr34nyk1h1] {
    background: linear-gradient(135deg, var(--atkv-primary-blue) 0%, var(--atkv-primary-blue) 100%);
    color: white;
    border-radius: var(--atkv-radius-md);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--atkv-space-xl);
}

.card-header[b-cr34nyk1h1] {
    padding: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header h2[b-cr34nyk1h1] {
    margin: 0 0 10px;
    font-size: var(--atkv-font-size-h2-mobile);
}

.membership-tier[b-cr34nyk1h1] {
    display: inline-block;
    padding: 6px 12px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: var(--atkv-font-size-body-sm);
    font-weight: 600;
}

.card-body[b-cr34nyk1h1] {
    padding: 30px;
}

.detail-row[b-cr34nyk1h1] {
    display: flex;
    justify-content: space-between;
    padding: var(--atkv-space-md) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-row:last-child[b-cr34nyk1h1] {
    border-bottom: none;
}

.label[b-cr34nyk1h1] {
    font-weight: 500;
    opacity: 0.9;
}

.value[b-cr34nyk1h1] {
    font-weight: 600;
}

.member-number[b-cr34nyk1h1] {
    font-family: monospace;
    font-size: var(--atkv-font-size-h4);
}

.status-badge[b-cr34nyk1h1] {
    padding: 4px 12px;
    border-radius: var(--atkv-radius-md);
    font-size: var(--atkv-font-size-body-sm);
    font-weight: 600;
}

.status-active[b-cr34nyk1h1] {
    background-color: #4caf50;
    color: white;
}

.status-expired[b-cr34nyk1h1] {
    background-color: #f44336;
    color: white;
}

.status-suspended[b-cr34nyk1h1] {
    background-color: #ff9800;
    color: white;
}

.membership-benefits-preview[b-cr34nyk1h1] {
    background: white;
    border-radius: var(--atkv-radius-sm);
    padding: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: var(--atkv-space-lg);
}

.membership-benefits-preview h3[b-cr34nyk1h1] {
    margin: 0 0 15px;
    color: var(--atkv-primary-blue);
}

.membership-benefits-preview p[b-cr34nyk1h1] {
    margin: 0 0 20px;
    color: #666;
}

.renewal-notice[b-cr34nyk1h1] {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: var(--atkv-radius-sm);
    padding: 25px;
    text-align: center;
}

.renewal-notice h3[b-cr34nyk1h1] {
    margin: 0 0 15px;
    color: #856404;
}

.renewal-notice p[b-cr34nyk1h1] {
    margin: 0 0 20px;
    color: #856404;
}

.btn-primary[b-cr34nyk1h1],
.btn-secondary[b-cr34nyk1h1] {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: var(--atkv-font-size-body);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}

.btn-primary[b-cr34nyk1h1] {
    background-color: var(--atkv-primary-blue);
    color: white;
}

.btn-primary:hover[b-cr34nyk1h1] {
    background-color: var(--atkv-primary-blue);
}

.btn-secondary[b-cr34nyk1h1] {
    background-color: #ff9800;
    color: white;
}

.btn-secondary:hover[b-cr34nyk1h1] {
    background-color: #f57c00;
}

@media (max-width: 768px) {
    .membership-container[b-cr34nyk1h1] {
        padding: 10px;
    }

    .card-header[b-cr34nyk1h1],
    .card-body[b-cr34nyk1h1] {
        padding: var(--atkv-space-lg);
    }

    .detail-row[b-cr34nyk1h1] {
        flex-direction: column;
        gap: 5px;
    }
}
/* /Pages/Resorts/AccommodationOverview.razor.rz.scp.css */
.resort-page[b-y08o10mpjd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-5xl);
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.resort-header[b-y08o10mpjd] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/a90885ca-5705-4990-b1b1-eb8a40bbc099');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.resort-header[b-y08o10mpjd]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.resort-header-logo[b-y08o10mpjd] {
    position: relative;
    width: 150px;
    height: 68px;
    z-index: 1;
}

.resort-navigation[b-y08o10mpjd] {
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px var(--spacing-xl);
    width: 100%;
}

.resort-nav-button[b-y08o10mpjd] {
    padding: 0 10px;
    height: 56px;
    border-radius: 46px;
    border: 1px solid var(--color-white);
    background: transparent;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-primary-blue);
    white-space: nowrap;
}

.resort-nav-button:hover[b-y08o10mpjd] {
    opacity: var(--opacity-hover);
}

.resort-nav-button--active[b-y08o10mpjd] {
    border-color: var(--color-primary-blue);
}

.resort-dropdown[b-y08o10mpjd] {
    display: none;
}

.accommodation-section[b-y08o10mpjd] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xl);
}

.accommodation-heading[b-y08o10mpjd] {
    font-size: 32px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.accommodation-description[b-y08o10mpjd] {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: 48px;
}

.accommodation-grid[b-y08o10mpjd] {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    width: 100%;
}

.accommodation-card[b-y08o10mpjd] {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base);
}

.accommodation-card:hover[b-y08o10mpjd] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.accommodation-card--large[b-y08o10mpjd] {
    width: 725px;
    height: 462px;
}

.accommodation-card--small[b-y08o10mpjd] {
    width: 298px;
    height: 224px;
}

.accommodation-card__image[b-y08o10mpjd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.accommodation-card__overlay[b-y08o10mpjd] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 105px;
    display: flex;
    align-items: center;
    padding-left: 23px;
}

.accommodation-card__overlay--cyan[b-y08o10mpjd] {
    background: linear-gradient(to top, #00a8e6, rgba(0, 0, 0, 0));
}

.accommodation-card__overlay--light-blue[b-y08o10mpjd] {
    background: linear-gradient(to top, #9bc8d4, rgba(0, 0, 0, 0));
}

.accommodation-card__overlay--blue-grey[b-y08o10mpjd] {
    background: linear-gradient(to top, #a0b1ca, rgba(0, 0, 0, 0));
}

.accommodation-card__overlay--navy[b-y08o10mpjd] {
    background: linear-gradient(to top, #0c2a6e, rgba(0, 0, 0, 0));
}

.accommodation-card__overlay--purple[b-y08o10mpjd] {
    background: linear-gradient(to top, #2f2769, rgba(0, 0, 0, 0));
}

.accommodation-card__title[b-y08o10mpjd] {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.accommodation-cards-column[b-y08o10mpjd] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .resort-navigation[b-y08o10mpjd] {
        display: none;
    }

    .resort-dropdown[b-y08o10mpjd] {
        display: flex;
        background: var(--color-primary-blue);
        border: 1px solid var(--color-grey);
        border-radius: 70px;
        height: 70px;
        padding: 0 var(--spacing-xl);
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 350px;
        cursor: pointer;
        transition: all var(--transition-base);
    }

    .resort-dropdown:hover[b-y08o10mpjd] {
        opacity: var(--opacity-hover);
    }

    .resort-dropdown-text[b-y08o10mpjd] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-white);
    }

    .resort-dropdown-icon[b-y08o10mpjd] {
        width: 34px;
        height: 29px;
    }

    .accommodation-card--large[b-y08o10mpjd] {
        width: 612px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .resort-page[b-y08o10mpjd] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .accommodation-grid[b-y08o10mpjd] {
        flex-direction: column;
        align-items: center;
    }

    .accommodation-card--large[b-y08o10mpjd] {
        width: 100%;
        max-width: 353px;
    }

    .accommodation-cards-column[b-y08o10mpjd] {
        width: 100%;
        align-items: center;
    }

    .accommodation-card--small[b-y08o10mpjd] {
        width: 100%;
        max-width: 298px;
    }
}
/* /Pages/Resorts/BookResort.razor.rz.scp.css */
/* ============================================
   BOOK RESORT PAGE - ATKV MOBILE APP
   Reservation form and confirmation
   ============================================ */

.booking-container[b-cjbiqiuty5] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--atkv-space-lg);
}

.page-header[b-cjbiqiuty5] {
    margin-bottom: var(--atkv-space-xl);
}

.page-header h1[b-cjbiqiuty5] {
    margin: 0;
    font-size: var(--atkv-font-size-h2-mobile);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
}

.booking-form[b-cjbiqiuty5] {
    background: var(--atkv-bg-card);
    padding: var(--atkv-space-xl);
    border-radius: var(--atkv-radius-md);
    box-shadow: var(--atkv-shadow-md);
}

.form-section[b-cjbiqiuty5] {
    margin-bottom: var(--atkv-space-2xl);
}

.form-section h3[b-cjbiqiuty5] {
    margin: 0 0 var(--atkv-space-lg);
    font-size: var(--atkv-font-size-h4);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
    padding-bottom: var(--atkv-space-sm);
    border-bottom: 1px solid var(--atkv-border-divider);
}

.form-group[b-cjbiqiuty5] {
    margin-bottom: var(--atkv-space-lg);
}

.form-label[b-cjbiqiuty5] {
    display: block;
    margin-bottom: var(--atkv-space-sm);
    font-size: var(--atkv-font-size-label);
    font-weight: var(--atkv-font-weight-semibold);
    color: var(--atkv-text-primary);
}

.form-control[b-cjbiqiuty5] {
    width: 100%;
    padding: var(--atkv-space-md);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-input);
    min-height: var(--atkv-touch-target-min);
}

.form-control:focus[b-cjbiqiuty5] {
    outline: none;
    border-color: var(--atkv-primary-blue);
}

.booking-summary[b-cjbiqiuty5] {
    background: var(--atkv-bg-light);
    padding: var(--atkv-space-lg);
    border-radius: var(--atkv-radius-md);
    margin-bottom: var(--atkv-space-xl);
}

.summary-row[b-cjbiqiuty5] {
    display: flex;
    justify-content: space-between;
    padding: var(--atkv-space-sm) 0;
    border-bottom: 1px solid var(--atkv-border-divider);
}

.summary-row:last-child[b-cjbiqiuty5] {
    border-bottom: none;
}

.summary-row.total[b-cjbiqiuty5] {
    font-size: var(--atkv-font-size-h4);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
    padding-top: var(--atkv-space-md);
    margin-top: var(--atkv-space-sm);
    border-top: 2px solid var(--atkv-border-divider);
}

.btn-confirm[b-cjbiqiuty5] {
    width: 100%;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-primary-black);
    color: var(--atkv-text-white);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-button-mobile);
    font-weight: var(--atkv-font-weight-bold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-confirm:hover[b-cjbiqiuty5] {
    background-color: var(--atkv-primary-blue);
    transform: translateY(-1px);
    box-shadow: var(--atkv-shadow-lg);
}

@media (min-width: 768px) {
    .page-header h1[b-cjbiqiuty5] {
        font-size: var(--atkv-font-size-h2);
    }

    .btn-confirm[b-cjbiqiuty5] {
        font-size: var(--atkv-font-size-button);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-confirm:hover[b-cjbiqiuty5] {
        transform: none;
    }
}
/* /Pages/Resorts/CheckAvailability.razor.rz.scp.css */
/* ============================================
   CHECK AVAILABILITY PAGE - ATKV MOBILE APP
   Date and room selection interface
   ============================================ */

.availability-container[b-1xpnd7olm1] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--atkv-space-lg);
}

.page-header[b-1xpnd7olm1] {
    margin-bottom: var(--atkv-space-xl);
}

.page-header h1[b-1xpnd7olm1] {
    margin: 0;
    font-size: var(--atkv-font-size-h2-mobile);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
}

.availability-form[b-1xpnd7olm1] {
    background: var(--atkv-bg-card);
    padding: var(--atkv-space-xl);
    border-radius: var(--atkv-radius-md);
    box-shadow: var(--atkv-shadow-md);
}

.form-group[b-1xpnd7olm1] {
    margin-bottom: var(--atkv-space-lg);
}

.form-label[b-1xpnd7olm1] {
    display: block;
    margin-bottom: var(--atkv-space-sm);
    font-size: var(--atkv-font-size-label);
    font-weight: var(--atkv-font-weight-semibold);
    color: var(--atkv-text-primary);
}

.form-control[b-1xpnd7olm1] {
    width: 100%;
    padding: var(--atkv-space-md);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-input);
    min-height: var(--atkv-touch-target-min);
}

.form-control:focus[b-1xpnd7olm1] {
    outline: none;
    border-color: var(--atkv-primary-blue);
}

.date-range[b-1xpnd7olm1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--atkv-space-md);
}

.btn-search[b-1xpnd7olm1] {
    width: 100%;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-primary-black);
    color: var(--atkv-text-white);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-button-mobile);
    font-weight: var(--atkv-font-weight-bold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    margin-top: var(--atkv-space-xl);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-search:hover[b-1xpnd7olm1] {
    background-color: var(--atkv-primary-blue);
    transform: translateY(-1px);
    box-shadow: var(--atkv-shadow-lg);
}

.availability-results[b-1xpnd7olm1] {
    margin-top: var(--atkv-space-xl);
}

.room-card[b-1xpnd7olm1] {
    background: var(--atkv-bg-card);
    padding: var(--atkv-space-lg);
    border-radius: var(--atkv-radius-md);
    box-shadow: var(--atkv-shadow-md);
    margin-bottom: var(--atkv-space-lg);
}

@media (max-width: 767px) {
    .date-range[b-1xpnd7olm1] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    .page-header h1[b-1xpnd7olm1] {
        font-size: var(--atkv-font-size-h2);
    }

    .btn-search[b-1xpnd7olm1] {
        font-size: var(--atkv-font-size-button);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-search:hover[b-1xpnd7olm1] {
        transform: none;
    }
}
/* /Pages/Resorts/Entertainment.razor.rz.scp.css */
.resort-page[b-d62nb9my8r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.page-header[b-d62nb9my8r] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/7a518d94-c5f6-4ba9-98eb-4f4877701fd3');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.page-header[b-d62nb9my8r]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.page-header__title[b-d62nb9my8r] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.resort-navigation[b-d62nb9my8r] {
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px var(--spacing-xl);
    width: 100%;
}

.resort-nav-button[b-d62nb9my8r] {
    padding: 0 10px;
    height: 56px;
    border-radius: 46px;
    border: 1px solid var(--color-white);
    background: transparent;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-primary-blue);
    white-space: nowrap;
}

.resort-nav-button:hover[b-d62nb9my8r] {
    opacity: var(--opacity-hover);
}

.resort-nav-button--active[b-d62nb9my8r] {
    background: var(--color-primary-blue);
    color: var(--color-white);
}

.resort-dropdown[b-d62nb9my8r] {
    display: none;
}

.entertainment-cards[b-d62nb9my8r] {
    display: flex;
    gap: 101px;
    width: 100%;
    justify-content: center;
}

.entertainment-card[b-d62nb9my8r] {
    width: 606px;
    height: 771px;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.entertainment-card__image[b-d62nb9my8r] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .resort-navigation[b-d62nb9my8r] {
        display: none;
    }

    .resort-dropdown[b-d62nb9my8r] {
        display: flex;
        background: var(--color-primary-blue);
        border: 1px solid var(--color-grey);
        border-radius: 70px;
        height: 70px;
        padding: 0 var(--spacing-xl);
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 350px;
        cursor: pointer;
        transition: all var(--transition-base);
    }

    .resort-dropdown:hover[b-d62nb9my8r] {
        opacity: var(--opacity-hover);
    }

    .resort-dropdown-text[b-d62nb9my8r] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-white);
    }

    .resort-dropdown-icon[b-d62nb9my8r] {
        width: 34px;
        height: 29px;
    }

    .entertainment-cards[b-d62nb9my8r] {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

    .entertainment-card[b-d62nb9my8r] {
        width: 100%;
        max-width: 606px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .resort-page[b-d62nb9my8r] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }
}
/* /Pages/Resorts/Index.razor.rz.scp.css */
    .resorts-page[b-944vm2gyok] {
        min-height: 100vh;
        background: var(--color-background-secondary);
    }

    .page-content[b-944vm2gyok] {
        padding-top: 64px; /* Account for TopNavBar */
        padding-bottom: 80px; /* Account for BottomNav */
    }

    /* Page Header */
    .page-header[b-944vm2gyok] {
        background: var(--color-background-primary);
        padding: 24px 20px;
        text-align: center;
        border-bottom: 1px solid var(--color-border-secondary);
    }

    .page-title[b-944vm2gyok] {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 8px 0;
        color: var(--color-text-primary);
    }

    .page-subtitle[b-944vm2gyok] {
        font-size: 16px;
        color: var(--color-text-secondary);
        margin: 0;
    }

    /* Search and Filter Bar */
    .search-filter-bar[b-944vm2gyok] {
        background: var(--color-background-primary);
        padding: 16px 20px;
        display: flex;
        gap: 12px;
        align-items: center;
        border-bottom: 1px solid var(--color-border-secondary);
    }

    .search-wrapper[b-944vm2gyok] {
        flex: 1;
    }

    .filter-sort-wrapper[b-944vm2gyok] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .sort-dropdown[b-944vm2gyok] {
        padding: 10px 12px;
        border: 1px solid var(--color-border-primary);
        border-radius: 20px;
        background: white;
        font-size: 14px;
        cursor: pointer;
    }

    /* Active filters */
    .active-filters[b-944vm2gyok] {
        background: var(--color-background-primary);
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--color-border-secondary);
    }

    .filter-count[b-944vm2gyok] {
        font-size: 14px;
        color: var(--color-primary);
        font-weight: 500;
    }

    .clear-filters-btn[b-944vm2gyok] {
        padding: 6px 12px;
        background: transparent;
        border: 1px solid var(--color-border-secondary);
        border-radius: 16px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .clear-filters-btn:hover[b-944vm2gyok] {
        background: var(--color-background-secondary);
    }

    /* Results count */
    .results-count[b-944vm2gyok] {
        padding: 16px 20px;
        font-size: 14px;
        color: var(--color-text-secondary);
    }

    /* Resort Grid */
    .resorts-grid[b-944vm2gyok] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 20px 20px;
    }

    /* Loading state */
    .loading-container[b-944vm2gyok] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
    }

    .loading-spinner[b-944vm2gyok] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--color-border-secondary);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @@keyframes spin {
        to[b-944vm2gyok] {
            transform: rotate(360deg);
        }
    }

    .loading-container p[b-944vm2gyok] {
        margin-top: 16px;
        color: var(--color-text-secondary);
    }

    /* No results */
    .no-results[b-944vm2gyok] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        text-align: center;
    }

    .no-results svg[b-944vm2gyok] {
        color: var(--color-text-placeholder);
        margin-bottom: 16px;
    }

    .no-results h2[b-944vm2gyok] {
        font-size: 20px;
        font-weight: 600;
        margin: 0 0 8px 0;
        color: var(--color-text-primary);
    }

    .no-results p[b-944vm2gyok] {
        font-size: 14px;
        color: var(--color-text-secondary);
        margin: 0 0 24px 0;
    }

    /* Load more */
    .load-more-container[b-944vm2gyok] {
        display: flex;
        justify-content: center;
        padding: 20px;
    }

    .load-more-btn[b-944vm2gyok] {
        padding: 12px 32px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 24px;
        background: var(--color-primary);
        color: white;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .load-more-btn:hover[b-944vm2gyok] {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Tablet */
    @@media (min-width: 768px) {
        .page-header[b-944vm2gyok] {
            padding: 32px;
        }

        .page-title[b-944vm2gyok] {
            font-size: 32px;
        }

        .page-subtitle[b-944vm2gyok] {
            font-size: 18px;
        }

        .search-filter-bar[b-944vm2gyok] {
            padding: 20px 32px;
        }

        .resorts-grid[b-944vm2gyok] {
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            padding: 0 32px 32px;
        }
    }

    /* Desktop */
    @@media (min-width: 1024px) {
        .page-content[b-944vm2gyok] {
            padding-top: 64px;
            padding-bottom: 20px; /* No bottom nav on desktop */
        }

        .resorts-grid[b-944vm2gyok] {
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
            padding: 0 40px 40px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .search-filter-bar[b-944vm2gyok] {
            max-width: 1400px;
            margin: 0 auto;
        }

        .page-header[b-944vm2gyok] {
            padding: 40px;
        }
    }
/* /Pages/Resorts/Rates.razor.rz.scp.css */
.resort-page[b-e3ylrdv391] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.page-header[b-e3ylrdv391] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/e271bd59-fba6-4e36-9d52-43bc4b9a70fb');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.page-header[b-e3ylrdv391]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.page-header__title[b-e3ylrdv391] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.resort-navigation[b-e3ylrdv391] {
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px var(--spacing-xl);
    width: 100%;
}

.resort-nav-button[b-e3ylrdv391] {
    padding: 0 10px;
    height: 56px;
    border-radius: 46px;
    border: 1px solid var(--color-white);
    background: transparent;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-primary-blue);
    white-space: nowrap;
}

.resort-nav-button:hover[b-e3ylrdv391] {
    opacity: var(--opacity-hover);
}

.resort-nav-button--active[b-e3ylrdv391] {
    background: var(--color-primary-blue);
    color: var(--color-white);
}

.resort-dropdown[b-e3ylrdv391] {
    display: none;
}

.filter-buttons[b-e3ylrdv391] {
    display: flex;
    flex-wrap: wrap;
    gap: 19px;
    width: 100%;
}

.filter-button[b-e3ylrdv391] {
    width: 202px;
    height: 50px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
}

.filter-button--outlined[b-e3ylrdv391] {
    background: #e1e0e1;
    border: 2px solid var(--color-primary-blue);
    color: var(--color-primary-blue);
}

.filter-button--filled[b-e3ylrdv391] {
    background: var(--color-primary-blue);
    border: none;
    color: var(--color-white);
}

.filter-button:hover[b-e3ylrdv391] {
    opacity: var(--opacity-hover);
}

.rate-card[b-e3ylrdv391] {
    width: 606px;
    height: 771px;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.rate-card__image[b-e3ylrdv391] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .resort-navigation[b-e3ylrdv391] {
        display: none;
    }

    .resort-dropdown[b-e3ylrdv391] {
        display: flex;
        background: var(--color-primary-blue);
        border: 1px solid var(--color-grey);
        border-radius: 70px;
        height: 70px;
        padding: 0 var(--spacing-xl);
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 350px;
        cursor: pointer;
        transition: all var(--transition-base);
    }

    .resort-dropdown:hover[b-e3ylrdv391] {
        opacity: var(--opacity-hover);
    }

    .resort-dropdown-text[b-e3ylrdv391] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-white);
    }

    .resort-dropdown-icon[b-e3ylrdv391] {
        width: 34px;
        height: 29px;
    }

    .rate-card[b-e3ylrdv391] {
        width: 100%;
        max-width: 606px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .resort-page[b-e3ylrdv391] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .filter-buttons[b-e3ylrdv391] {
        flex-direction: column;
        max-width: 350px;
    }

    .filter-button[b-e3ylrdv391] {
        width: 100%;
    }
}
/* /Pages/Resorts/ResortDetail.razor.rz.scp.css */
/* ============================================
   RESORT DETAIL PAGE - ATKV MOBILE APP
   Comprehensive resort information display
   ============================================ */

.detail-container[b-zuvbptzdr0] {
    max-width: 1024px;
    margin: 0 auto;
    padding: var(--atkv-space-lg);
}

.resort-hero[b-zuvbptzdr0] {
    position: relative;
    height: 300px;
    border-radius: var(--atkv-radius-lg);
    overflow: hidden;
    margin-bottom: var(--atkv-space-xl);
}

.hero-image[b-zuvbptzdr0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay[b-zuvbptzdr0] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    padding: var(--atkv-space-xl) var(--atkv-space-lg);
    color: var(--atkv-text-white);
}

.resort-title[b-zuvbptzdr0] {
    margin: 0 0 var(--atkv-space-sm);
    font-size: var(--atkv-font-size-h2-mobile);
    font-weight: var(--atkv-font-weight-bold);
}

.resort-subtitle[b-zuvbptzdr0] {
    margin: 0;
    font-size: var(--atkv-font-size-body);
    opacity: 0.9;
}

.detail-content[b-zuvbptzdr0] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--atkv-space-lg);
}

.info-section[b-zuvbptzdr0] {
    background: var(--atkv-bg-card);
    padding: var(--atkv-space-lg);
    border-radius: var(--atkv-radius-md);
    box-shadow: var(--atkv-shadow-md);
}

.section-title[b-zuvbptzdr0] {
    margin: 0 0 var(--atkv-space-md);
    font-size: var(--atkv-font-size-h4);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
}

.amenities-grid[b-zuvbptzdr0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--atkv-space-md);
}

.amenity-item[b-zuvbptzdr0] {
    display: flex;
    align-items: center;
    gap: var(--atkv-space-sm);
    padding: var(--atkv-space-md);
    background-color: var(--atkv-bg-light);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body-sm);
}

.btn-book[b-zuvbptzdr0] {
    width: 100%;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-primary-black);
    color: var(--atkv-text-white);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-button-mobile);
    font-weight: var(--atkv-font-weight-bold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    margin-top: var(--atkv-space-xl);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-book:hover[b-zuvbptzdr0] {
    background-color: var(--atkv-primary-blue);
    transform: translateY(-1px);
    box-shadow: var(--atkv-shadow-lg);
}

@media (min-width: 768px) {
    .resort-hero[b-zuvbptzdr0] {
        height: 400px;
    }

    .resort-title[b-zuvbptzdr0] {
        font-size: var(--atkv-font-size-h1);
    }

    .detail-content[b-zuvbptzdr0] {
        grid-template-columns: 2fr 1fr;
    }

    .btn-book[b-zuvbptzdr0] {
        font-size: var(--atkv-font-size-button);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-book:hover[b-zuvbptzdr0] {
        transform: none;
    }
}
/* /Pages/Resorts/UnitFacilities.razor.rz.scp.css */
.resort-page[b-nft11lmnpp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.page-header[b-nft11lmnpp] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/19fa5564-f3b6-4424-9505-222afec2373d');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.page-header[b-nft11lmnpp]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.page-header__title[b-nft11lmnpp] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.section-navigation[b-nft11lmnpp] {
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px var(--spacing-xl);
    width: 100%;
    height: 90px;
}

.section-nav-button[b-nft11lmnpp] {
    padding: 0 var(--spacing-xl);
    height: 56px;
    border-radius: 46px;
    border: 1px solid var(--color-white);
    background: transparent;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-primary-blue);
    white-space: nowrap;
}

.section-nav-button:hover[b-nft11lmnpp] {
    opacity: var(--opacity-hover);
}

.section-nav-button--active[b-nft11lmnpp] {
    background: var(--color-primary-blue);
    color: var(--color-white);
    height: 60px;
}

.section-dropdown[b-nft11lmnpp] {
    display: none;
}

.facilities-grid[b-nft11lmnpp] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 43px;
}

.facility-card[b-nft11lmnpp] {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base);
}

.facility-card:hover[b-nft11lmnpp] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.facility-card__image[b-nft11lmnpp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.facility-card__overlay[b-nft11lmnpp] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 116px;
    background: linear-gradient(to top, var(--color-primary-blue), rgba(0, 0, 0, 0));
    display: flex;
    align-items: flex-end;
    padding: 24px;
}

.facility-card__name[b-nft11lmnpp] {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .section-navigation[b-nft11lmnpp] {
        display: none;
    }

    .section-dropdown[b-nft11lmnpp] {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        max-width: 352px;
        background: var(--color-white);
        border: 1px solid var(--color-grey);
        border-radius: var(--radius-card);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        margin: 0 auto;
    }

    .section-dropdown__selected[b-nft11lmnpp] {
        background: var(--color-white);
        border-bottom: 1px solid var(--color-grey);
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        padding: var(--spacing-xl) 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .section-dropdown__text[b-nft11lmnpp] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary-blue);
    }

    .section-dropdown__icon[b-nft11lmnpp] {
        width: 34px;
        height: 29px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .resort-page[b-nft11lmnpp] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .facilities-grid[b-nft11lmnpp] {
        flex-direction: column;
        align-items: center;
    }

    .facility-card[b-nft11lmnpp] {
        width: 100%;
        max-width: 352px;
    }
}
/* /Pages/Resorts/UnitOverview.razor.rz.scp.css */
.resort-page[b-uxg1u1v8oc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.resort-header[b-uxg1u1v8oc] {
    width: 100%;
    height: 265px;
    background-image: url('https://www.figma.com/api/mcp/asset/8a512cec-a529-491c-8c24-90c5e848431f');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-3xl);
    position: relative;
}

.resort-header[b-uxg1u1v8oc]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 142px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
    border-radius: var(--radius-card);
}

.resort-header-logo[b-uxg1u1v8oc] {
    position: relative;
    width: 150px;
    height: 68px;
    z-index: 1;
}

.page-intro[b-uxg1u1v8oc] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.page-title[b-uxg1u1v8oc] {
    font-size: 30px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.page-description[b-uxg1u1v8oc] {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: normal;
}

.filter-section[b-uxg1u1v8oc] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.date-inputs[b-uxg1u1v8oc] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.date-input[b-uxg1u1v8oc] {
    width: 345px;
    height: 55px;
    background: #fcfcfa;
    border: 1px solid #d2d6d0;
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    cursor: pointer;
}

.date-input__icon[b-uxg1u1v8oc] {
    width: 24px;
    height: 24px;
}

.date-input__text[b-uxg1u1v8oc] {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
}

.book-button[b-uxg1u1v8oc] {
    width: 345px;
    height: 55px;
    background: var(--color-black);
    border: none;
    border-radius: 15px;
    font-size: 26px;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    cursor: pointer;
    transition: all var(--transition-base);
}

.book-button:hover[b-uxg1u1v8oc] {
    opacity: var(--opacity-hover);
}

.unit-type-dropdown[b-uxg1u1v8oc] {
    width: 345px;
    height: 70px;
    background: #fcfcfa;
    border: 1px solid var(--color-grey);
    border-radius: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.unit-type-dropdown:hover[b-uxg1u1v8oc] {
    opacity: var(--opacity-hover);
}

.unit-type-dropdown__text[b-uxg1u1v8oc] {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-blue);
}

.unit-type-dropdown__icon[b-uxg1u1v8oc] {
    width: 34px;
    height: 29px;
}

.units-list[b-uxg1u1v8oc] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.unit-card[b-uxg1u1v8oc] {
    display: flex;
    gap: 28px;
    width: 100%;
}

.unit-info[b-uxg1u1v8oc] {
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-card);
    padding: var(--spacing-xl);
    width: 654px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.unit-info__header[b-uxg1u1v8oc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.unit-info__title[b-uxg1u1v8oc] {
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.unit-info__rating[b-uxg1u1v8oc] {
    display: flex;
    gap: 12px;
}

.star-icon[b-uxg1u1v8oc] {
    width: 24px;
    height: 24px;
}

.unit-info__specs[b-uxg1u1v8oc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.unit-spec[b-uxg1u1v8oc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.unit-spec__icon[b-uxg1u1v8oc] {
    width: 25px;
    height: 25px;
}

.unit-spec__text[b-uxg1u1v8oc] {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
}

.unit-info__read-more[b-uxg1u1v8oc] {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-blue);
    cursor: pointer;
}

.unit-gallery[b-uxg1u1v8oc] {
    position: relative;
    width: 654px;
    height: 358px;
    border: 1px solid var(--color-grey);
    border-radius: 14px;
    overflow: hidden;
}

.unit-gallery__image[b-uxg1u1v8oc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.unit-gallery__nav[b-uxg1u1v8oc] {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    background: var(--color-white);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
}

.unit-gallery__nav:hover[b-uxg1u1v8oc] {
    opacity: var(--opacity-hover);
}

.unit-gallery__nav-icon[b-uxg1u1v8oc] {
    width: 26px;
    height: 26px;
}

.unit-gallery__dots[b-uxg1u1v8oc] {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 9px;
    background: linear-gradient(to top, #00a8e6, rgba(0, 0, 0, 0));
    padding: 20px;
    border-radius: 10px;
}

.gallery-dot[b-uxg1u1v8oc] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-white);
    cursor: pointer;
}

.gallery-dot--active[b-uxg1u1v8oc] {
    background: var(--color-primary-blue);
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .filter-section[b-uxg1u1v8oc] {
        flex-direction: column;
        align-items: flex-start;
        max-width: 350px;
    }

    .date-inputs[b-uxg1u1v8oc] {
        flex-direction: column;
        width: 100%;
    }

    .date-input[b-uxg1u1v8oc],
    .book-button[b-uxg1u1v8oc],
    .unit-type-dropdown[b-uxg1u1v8oc] {
        width: 100%;
        max-width: 345px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .resort-page[b-uxg1u1v8oc] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
        align-items: center;
    }

    .page-intro[b-uxg1u1v8oc],
    .filter-section[b-uxg1u1v8oc],
    .units-list[b-uxg1u1v8oc] {
        max-width: 353px;
    }

    .unit-card[b-uxg1u1v8oc] {
        flex-direction: column;
        align-items: center;
        gap: 46px;
    }

    .unit-info[b-uxg1u1v8oc] {
        width: 100%;
        max-width: 353px;
    }

    .unit-gallery[b-uxg1u1v8oc] {
        width: 100%;
        max-width: 353px;
    }
}
/* /Pages/Wallet/Index.razor.rz.scp.css */
.wallet-page[b-gt4ixvf60o] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
}

.wallet-content[b-gt4ixvf60o] {
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Balance Section */
.balance-section[b-gt4ixvf60o] {
    margin-bottom: 2rem;
}

.balance-card[b-gt4ixvf60o] {
    padding: 2rem;
    border-radius: 20px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.balance-card.atkv-gradient[b-gt4ixvf60o] {
    background: linear-gradient(135deg, #00a651 0%, #00d168 100%);
}

.balance-card.bonus-gradient[b-gt4ixvf60o] {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
}

.balance-label[b-gt4ixvf60o] {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.balance-amount[b-gt4ixvf60o] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.balance-amount .currency-symbol[b-gt4ixvf60o] {
    font-size: 1.5rem;
    font-weight: 500;
}

.balance-amount .amount[b-gt4ixvf60o] {
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: -1px;
}

.balance-amount .currency[b-gt4ixvf60o] {
    font-size: 1.125rem;
    opacity: 0.9;
    margin-left: 0.5rem;
}

/* Wallet Tabs */
.wallet-tabs[b-gt4ixvf60o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.wallet-tab[b-gt4ixvf60o] {
    padding: 1rem;
    background: white;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.wallet-tab:hover[b-gt4ixvf60o] {
    border-color: #00a651;
    background: #f9fff9;
}

.wallet-tab.active[b-gt4ixvf60o] {
    background: #00a651;
    border-color: #00a651;
    color: white;
}

.wallet-tab i[b-gt4ixvf60o] {
    font-size: 1.125rem;
}

/* Quick Actions */
.quick-actions[b-gt4ixvf60o] {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.quick-actions > :deep(button)[b-gt4ixvf60o] {
    flex: 1;
    min-width: 120px;
}

/* Filter Section */
.filter-section[b-gt4ixvf60o] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-row[b-gt4ixvf60o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.filter-item label[b-gt4ixvf60o] {
    display: block;
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.date-inputs[b-gt4ixvf60o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-inputs input[b-gt4ixvf60o] {
    flex: 1;
}

.form-input[b-gt4ixvf60o],
.form-select[b-gt4ixvf60o] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 0.9375rem;
    background: white;
    transition: border-color 0.2s;
}

.form-input:focus[b-gt4ixvf60o],
.form-select:focus[b-gt4ixvf60o] {
    outline: none;
    border-color: #00a651;
}

.filter-actions[b-gt4ixvf60o] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* Transaction Section */
.transaction-section[b-gt4ixvf60o] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-header[b-gt4ixvf60o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-header h3[b-gt4ixvf60o] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.export-buttons[b-gt4ixvf60o] {
    display: flex;
    gap: 0.5rem;
}

/* Loading Skeleton */
.loading-skeleton[b-gt4ixvf60o] {
    padding: 1rem 0;
}

.skeleton-item[b-gt4ixvf60o] {
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.skeleton-line[b-gt4ixvf60o] {
    height: 12px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-gt4ixvf60o 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.skeleton-line.short[b-gt4ixvf60o] {
    width: 30%;
}

.skeleton-line.medium[b-gt4ixvf60o] {
    width: 60%;
}

@keyframes loading-b-gt4ixvf60o {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Empty State */
.empty-state[b-gt4ixvf60o] {
    text-align: center;
    padding: 3rem 1rem;
    color: #999;
}

.empty-icon[b-gt4ixvf60o] {
    font-size: 4rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-state p[b-gt4ixvf60o] {
    font-size: 1rem;
    margin: 0;
}

/* Transaction List */
.transaction-list[b-gt4ixvf60o] {
    margin: -1rem;
}

.transaction-item[b-gt4ixvf60o] {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.transaction-item:hover[b-gt4ixvf60o] {
    background-color: #f9f9f9;
}

.transaction-item:last-child[b-gt4ixvf60o] {
    border-bottom: none;
}

.transaction-date[b-gt4ixvf60o] {
    text-align: center;
    margin-right: 1rem;
    min-width: 50px;
}

.date-day[b-gt4ixvf60o] {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    line-height: 1;
}

.date-month[b-gt4ixvf60o] {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
}

.transaction-details[b-gt4ixvf60o] {
    flex: 1;
    min-width: 0;
}

.transaction-description[b-gt4ixvf60o] {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-merchant[b-gt4ixvf60o] {
    font-size: 0.875rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-amount[b-gt4ixvf60o] {
    font-weight: 600;
    margin-right: 1rem;
    white-space: nowrap;
}

.transaction-amount.positive[b-gt4ixvf60o] {
    color: #00a651;
}

.transaction-amount.negative[b-gt4ixvf60o] {
    color: #e74c3c;
}

.transaction-status[b-gt4ixvf60o] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    background: #f0f0f0;
    white-space: nowrap;
}

.status-dot[b-gt4ixvf60o] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #999;
}

.transaction-status.completed .status-dot[b-gt4ixvf60o] {
    background: #00a651;
}

.transaction-status.pending .status-dot[b-gt4ixvf60o] {
    background: #ff9800;
}

.transaction-status.failed .status-dot[b-gt4ixvf60o] {
    background: #e74c3c;
}

/* Load More */
.load-more[b-gt4ixvf60o] {
    text-align: center;
    padding: 2rem 1rem 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .wallet-content[b-gt4ixvf60o] {
        padding: 0.75rem;
    }

    .balance-amount .amount[b-gt4ixvf60o] {
        font-size: 2rem;
    }

    .filter-row[b-gt4ixvf60o] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .quick-actions[b-gt4ixvf60o] {
        flex-direction: column;
    }

    .quick-actions > :deep(button)[b-gt4ixvf60o] {
        width: 100%;
    }

    .transaction-item[b-gt4ixvf60o] {
        padding: 0.75rem;
    }

    .transaction-date[b-gt4ixvf60o] {
        margin-right: 0.75rem;
    }

    .transaction-amount[b-gt4ixvf60o] {
        font-size: 0.875rem;
    }

    .transaction-status[b-gt4ixvf60o] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
}

@media (max-width: 480px) {
    .section-header[b-gt4ixvf60o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .export-buttons[b-gt4ixvf60o] {
        align-self: flex-end;
    }
}
/* /Pages/Wallet/TopUp.razor.rz.scp.css */
/* ============================================
   TOPUP PAGE - ATKV MOBILE APP
   Mobile-first, accessible wallet top-up interface
   ============================================ */

.topup-container[b-frvf736wlu] {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--atkv-space-lg);
}

.page-header[b-frvf736wlu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--atkv-space-xl);
}

.btn-back[b-frvf736wlu] {
    background: none;
    border: none;
    font-size: var(--atkv-font-size-h3);
    cursor: pointer;
    color: var(--atkv-primary-blue);
    padding: var(--atkv-space-xs) var(--atkv-space-sm);
    min-width: var(--atkv-touch-target-min);
    min-height: var(--atkv-touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--atkv-radius-sm);
    transition: background-color var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-back:hover[b-frvf736wlu] {
    background-color: var(--atkv-bg-light);
}

.btn-back:focus-visible[b-frvf736wlu] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.page-header h1[b-frvf736wlu] {
    margin: 0;
    font-size: var(--atkv-font-size-h2-mobile);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
}

.spacer[b-frvf736wlu] {
    width: var(--atkv-touch-target-min);
}

.current-balance-card[b-frvf736wlu] {
    background: var(--atkv-gradient-wallet);
    color: var(--atkv-text-primary);
    padding: var(--atkv-space-xl);
    border-radius: var(--atkv-radius-lg);
    text-align: center;
    margin-bottom: var(--atkv-space-xl);
    box-shadow: var(--atkv-shadow-md);
}

.balance-label[b-frvf736wlu] {
    margin: 0 0 var(--atkv-space-sm);
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-medium);
    opacity: 0.85;
}

.balance-amount[b-frvf736wlu] {
    margin: 0;
    font-size: var(--atkv-font-size-h1-mobile);
    font-weight: var(--atkv-font-weight-bold);
    line-height: var(--atkv-line-height-tight);
}

.topup-form[b-frvf736wlu] {
    background: var(--atkv-bg-card);
    border-radius: var(--atkv-radius-md);
    padding: var(--atkv-space-xl);
    box-shadow: var(--atkv-shadow-md);
}

.topup-form h3[b-frvf736wlu] {
    margin: 0 0 var(--atkv-space-lg);
    font-size: var(--atkv-font-size-h3);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
}

.quick-amounts[b-frvf736wlu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--atkv-space-md);
    margin-bottom: var(--atkv-space-xl);
}

.amount-btn[b-frvf736wlu] {
    padding: var(--atkv-space-lg);
    background: var(--atkv-bg-white);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body-lg);
    font-weight: var(--atkv-font-weight-semibold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.amount-btn:hover[b-frvf736wlu] {
    border-color: var(--atkv-primary-blue);
    background-color: var(--atkv-bg-light);
}

.amount-btn:focus-visible[b-frvf736wlu] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.amount-btn.selected[b-frvf736wlu] {
    background-color: var(--atkv-primary-blue);
    color: var(--atkv-text-white);
    border-color: var(--atkv-primary-blue);
}

.custom-amount[b-frvf736wlu] {
    margin-bottom: var(--atkv-space-lg);
}

.custom-amount label[b-frvf736wlu] {
    display: block;
    margin-bottom: var(--atkv-space-sm);
    font-size: var(--atkv-font-size-label);
    font-weight: var(--atkv-font-weight-semibold);
    color: var(--atkv-text-primary);
}

.input-group[b-frvf736wlu] {
    display: flex;
    align-items: center;
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    overflow: hidden;
    transition: border-color var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.input-group:focus-within[b-frvf736wlu] {
    border-color: var(--atkv-primary-blue);
}

.input-prefix[b-frvf736wlu] {
    padding: var(--atkv-space-md) var(--atkv-space-md);
    background-color: var(--atkv-bg-light);
    font-weight: var(--atkv-font-weight-semibold);
    font-size: var(--atkv-font-size-input);
    color: var(--atkv-text-secondary);
}

.amount-input[b-frvf736wlu] {
    flex: 1;
    padding: var(--atkv-space-md);
    border: none;
    font-size: var(--atkv-font-size-input);
    min-height: var(--atkv-touch-target-min);
}

.amount-input:focus[b-frvf736wlu] {
    outline: none;
}

.bonus-notice[b-frvf736wlu] {
    background-color: #fff3cd;
    border: 2px solid var(--atkv-warning);
    border-radius: var(--atkv-radius-sm);
    padding: var(--atkv-space-md);
    display: flex;
    align-items: center;
    gap: var(--atkv-space-sm);
    margin: var(--atkv-space-lg) 0;
}

.bonus-icon[b-frvf736wlu] {
    font-size: var(--atkv-font-size-h3);
    flex-shrink: 0;
}

.bonus-notice p[b-frvf736wlu] {
    margin: 0;
    color: #856404;
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-semibold);
    line-height: var(--atkv-line-height-body);
}

.payment-summary[b-frvf736wlu] {
    border-top: 2px solid var(--atkv-border-divider);
    padding-top: var(--atkv-space-lg);
    margin: var(--atkv-space-lg) 0;
}

.summary-row[b-frvf736wlu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--atkv-space-sm) 0;
    font-size: var(--atkv-font-size-body);
}

.summary-row.bonus[b-frvf736wlu] {
    color: var(--atkv-warning);
    font-weight: var(--atkv-font-weight-semibold);
}

.summary-row.total[b-frvf736wlu] {
    font-size: var(--atkv-font-size-h4);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
    border-top: 2px solid var(--atkv-border-divider);
    padding-top: var(--atkv-space-md);
    margin-top: var(--atkv-space-sm);
}

.alert[b-frvf736wlu] {
    padding: var(--atkv-space-md);
    border-radius: var(--atkv-radius-sm);
    margin-bottom: var(--atkv-space-lg);
    font-size: var(--atkv-font-size-body-sm);
    line-height: var(--atkv-line-height-body);
}

.alert-error[b-frvf736wlu] {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.btn-primary[b-frvf736wlu] {
    width: 100%;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-primary-black);
    color: var(--atkv-text-white);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-button-mobile);
    font-weight: var(--atkv-font-weight-bold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-primary:hover:not(:disabled)[b-frvf736wlu] {
    background-color: var(--atkv-primary-blue);
    transform: translateY(-1px);
    box-shadow: var(--atkv-shadow-lg);
}

.btn-primary:active:not(:disabled)[b-frvf736wlu] {
    transform: translateY(0);
    box-shadow: var(--atkv-shadow-md);
}

.btn-primary:focus-visible[b-frvf736wlu] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.btn-primary:disabled[b-frvf736wlu] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 767px) {
    .topup-container[b-frvf736wlu] {
        padding: var(--atkv-space-md);
    }

    .topup-form[b-frvf736wlu] {
        padding: var(--atkv-space-lg);
    }

    .quick-amounts[b-frvf736wlu] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tablet and larger */
@media (min-width: 768px) {
    .page-header h1[b-frvf736wlu] {
        font-size: var(--atkv-font-size-h2);
    }

    .balance-amount[b-frvf736wlu] {
        font-size: var(--atkv-font-size-h1);
    }

    .btn-primary[b-frvf736wlu] {
        font-size: var(--atkv-font-size-button);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .quick-amounts[b-frvf736wlu] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .amount-btn[b-frvf736wlu],
    .btn-primary[b-frvf736wlu],
    .btn-back[b-frvf736wlu],
    .input-group[b-frvf736wlu] {
        transition: none;
    }

    .btn-primary:hover:not(:disabled)[b-frvf736wlu] {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    .amount-btn[b-frvf736wlu] {
        border-width: 3px;
    }

    .input-group[b-frvf736wlu] {
        border-width: 3px;
    }
}
/* /Pages/Wallet/TransactionHistory.razor.rz.scp.css */
/* ============================================
   TRANSACTION HISTORY PAGE - ATKV MOBILE APP
   Mobile-first, accessible transaction list interface
   ============================================ */

.transactions-container[b-5qo17qr69q] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--atkv-space-lg);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-5qo17qr69q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--atkv-space-lg);
}

.btn-back[b-5qo17qr69q],
.btn-filter[b-5qo17qr69q] {
    background: none;
    border: none;
    font-size: var(--atkv-font-size-h3);
    cursor: pointer;
    color: var(--atkv-primary-blue);
    padding: var(--atkv-space-xs) var(--atkv-space-sm);
    min-width: var(--atkv-touch-target-min);
    min-height: var(--atkv-touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--atkv-radius-sm);
    transition: background-color var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-back:hover[b-5qo17qr69q],
.btn-filter:hover[b-5qo17qr69q] {
    background-color: var(--atkv-bg-light);
}

.btn-back:focus-visible[b-5qo17qr69q],
.btn-filter:focus-visible[b-5qo17qr69q] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.page-header h1[b-5qo17qr69q] {
    margin: 0;
    font-size: var(--atkv-font-size-h2-mobile);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
}

/* ============================================
   FILTERS PANEL
   ============================================ */

.filters-panel[b-5qo17qr69q] {
    background: var(--atkv-bg-card);
    padding: var(--atkv-space-lg);
    border-radius: var(--atkv-radius-md);
    margin-bottom: var(--atkv-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--atkv-space-md);
    box-shadow: var(--atkv-shadow-md);
}

.filters-panel.collapsed[b-5qo17qr69q] {
    display: none;
}

.filter-group[b-5qo17qr69q] {
    display: flex;
    flex-direction: column;
    gap: var(--atkv-space-sm);
}

.filter-label[b-5qo17qr69q] {
    font-size: var(--atkv-font-size-label);
    font-weight: var(--atkv-font-weight-semibold);
    color: var(--atkv-text-primary);
}

.filter-select[b-5qo17qr69q] {
    padding: var(--atkv-space-md);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body-sm);
    font-family: var(--atkv-font-family);
    min-height: var(--atkv-touch-target-min);
    background-color: var(--atkv-bg-white);
    transition: border-color var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.filter-select:focus[b-5qo17qr69q] {
    outline: none;
    border-color: var(--atkv-primary-blue);
}

.filter-actions[b-5qo17qr69q] {
    display: flex;
    gap: var(--atkv-space-md);
    margin-top: var(--atkv-space-sm);
}

.btn-apply-filters[b-5qo17qr69q] {
    flex: 1;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-primary-black);
    color: var(--atkv-text-white);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-semibold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-min);
    transition: background-color var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-apply-filters:hover[b-5qo17qr69q] {
    background-color: var(--atkv-primary-blue);
}

.btn-apply-filters:focus-visible[b-5qo17qr69q] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.btn-clear-filters[b-5qo17qr69q] {
    flex: 1;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-bg-white);
    color: var(--atkv-text-secondary);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-medium);
    cursor: pointer;
    min-height: var(--atkv-touch-target-min);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-clear-filters:hover[b-5qo17qr69q] {
    border-color: var(--atkv-text-secondary);
    background-color: var(--atkv-bg-light);
}

.btn-clear-filters:focus-visible[b-5qo17qr69q] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-5qo17qr69q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: var(--atkv-space-lg);
}

.spinner[b-5qo17qr69q] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--atkv-bg-light);
    border-top: 4px solid var(--atkv-primary-blue);
    border-radius: 50%;
    animation: spin-b-5qo17qr69q 1s linear infinite;
}

@keyframes spin-b-5qo17qr69q {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-5qo17qr69q] {
    font-size: var(--atkv-font-size-body);
    color: var(--atkv-text-secondary);
}

/* ============================================
   TRANSACTIONS LIST
   ============================================ */

.transactions-list[b-5qo17qr69q] {
    display: flex;
    flex-direction: column;
    gap: var(--atkv-space-md);
    margin-bottom: var(--atkv-space-xl);
}

.transaction-item[b-5qo17qr69q] {
    display: flex;
    align-items: center;
    gap: var(--atkv-space-md);
    padding: var(--atkv-space-lg);
    background: var(--atkv-bg-card);
    border-radius: var(--atkv-radius-md);
    box-shadow: var(--atkv-shadow-md);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
    cursor: pointer;
}

.transaction-item:hover[b-5qo17qr69q] {
    box-shadow: var(--atkv-shadow-lg);
    transform: translateY(-2px);
}

.transaction-item:active[b-5qo17qr69q] {
    transform: translateY(0);
    box-shadow: var(--atkv-shadow-md);
}

.transaction-icon[b-5qo17qr69q] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--atkv-font-size-h3);
    flex-shrink: 0;
}

.icon-topup[b-5qo17qr69q] {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.icon-payment[b-5qo17qr69q] {
    background-color: #fff3e0;
    color: #f57c00;
}

.icon-transfer[b-5qo17qr69q] {
    background-color: #e3f2fd;
    color: #1565c0;
}

.icon-refund[b-5qo17qr69q] {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.icon-default[b-5qo17qr69q] {
    background-color: var(--atkv-bg-light);
    color: var(--atkv-text-secondary);
}

.transaction-details[b-5qo17qr69q] {
    flex: 1;
    min-width: 0;
}

.transaction-details h4[b-5qo17qr69q] {
    margin: 0 0 var(--atkv-space-xs);
    font-size: var(--atkv-font-size-body);
    font-weight: var(--atkv-font-weight-semibold);
    color: var(--atkv-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-date[b-5qo17qr69q] {
    margin: 0;
    font-size: var(--atkv-font-size-caption);
    color: var(--atkv-text-secondary);
}

.transaction-ref[b-5qo17qr69q] {
    margin: var(--atkv-space-xs) 0 0;
    font-size: var(--atkv-font-size-caption);
    color: var(--atkv-text-tertiary);
    font-family: 'Courier New', monospace;
}

.transaction-amount[b-5qo17qr69q] {
    font-size: var(--atkv-font-size-body-lg);
    font-weight: var(--atkv-font-weight-bold);
    white-space: nowrap;
}

.amount-positive[b-5qo17qr69q] {
    color: var(--atkv-success);
}

.amount-negative[b-5qo17qr69q] {
    color: var(--atkv-error);
}

.amount-neutral[b-5qo17qr69q] {
    color: var(--atkv-text-primary);
}

/* ============================================
   TRANSACTION STATUS BADGES
   ============================================ */

.transaction-status[b-5qo17qr69q] {
    display: inline-block;
    padding: var(--atkv-space-xs) var(--atkv-space-sm);
    border-radius: var(--atkv-radius-full);
    font-size: var(--atkv-font-size-caption);
    font-weight: var(--atkv-font-weight-semibold);
    margin-top: var(--atkv-space-xs);
}

.status-completed[b-5qo17qr69q] {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.status-pending[b-5qo17qr69q] {
    background-color: #fff3e0;
    color: #f57c00;
}

.status-failed[b-5qo17qr69q] {
    background-color: #ffebee;
    color: #c62828;
}

.status-cancelled[b-5qo17qr69q] {
    background-color: var(--atkv-bg-light);
    color: var(--atkv-text-secondary);
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination[b-5qo17qr69q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--atkv-space-lg) 0;
    gap: var(--atkv-space-md);
}

.btn-page[b-5qo17qr69q] {
    padding: var(--atkv-space-md) var(--atkv-space-lg);
    background-color: var(--atkv-bg-white);
    color: var(--atkv-text-primary);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-medium);
    cursor: pointer;
    min-height: var(--atkv-touch-target-min);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-page:hover:not(:disabled)[b-5qo17qr69q] {
    background-color: var(--atkv-primary-blue);
    color: var(--atkv-text-white);
    border-color: var(--atkv-primary-blue);
}

.btn-page:focus-visible[b-5qo17qr69q] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.btn-page:disabled[b-5qo17qr69q] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--atkv-bg-light);
}

.page-info[b-5qo17qr69q] {
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-semibold);
    color: var(--atkv-text-primary);
}

/* ============================================
   EXPORT BUTTON
   ============================================ */

.btn-export[b-5qo17qr69q] {
    width: 100%;
    padding: var(--atkv-space-md);
    background-color: var(--atkv-bg-white);
    color: var(--atkv-primary-blue);
    border: 2px solid var(--atkv-primary-blue);
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body);
    font-weight: var(--atkv-font-weight-semibold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    margin-top: var(--atkv-space-xl);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--atkv-space-sm);
}

.btn-export:hover[b-5qo17qr69q] {
    background-color: var(--atkv-primary-blue);
    color: var(--atkv-text-white);
}

.btn-export:focus-visible[b-5qo17qr69q] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.btn-export-icon[b-5qo17qr69q] {
    font-size: var(--atkv-font-size-h4);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-5qo17qr69q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: var(--atkv-space-2xl);
}

.empty-icon[b-5qo17qr69q] {
    font-size: 80px;
    margin-bottom: var(--atkv-space-lg);
    color: var(--atkv-text-disabled);
}

.empty-title[b-5qo17qr69q] {
    font-size: var(--atkv-font-size-h3);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
    margin: 0 0 var(--atkv-space-sm);
}

.empty-message[b-5qo17qr69q] {
    font-size: var(--atkv-font-size-body);
    color: var(--atkv-text-secondary);
    margin: 0 0 var(--atkv-space-xl);
    max-width: 400px;
}

.empty-action[b-5qo17qr69q] {
    padding: var(--atkv-space-md) var(--atkv-space-xl);
    background-color: var(--atkv-primary-black);
    color: var(--atkv-text-white);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body);
    font-weight: var(--atkv-font-weight-semibold);
    cursor: pointer;
    min-height: var(--atkv-touch-target-comfortable);
    transition: background-color var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.empty-action:hover[b-5qo17qr69q] {
    background-color: var(--atkv-primary-blue);
}

.empty-action:focus-visible[b-5qo17qr69q] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

/* ============================================
   DATE SECTION HEADERS
   ============================================ */

.date-section-header[b-5qo17qr69q] {
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: var(--atkv-space-xl) 0 var(--atkv-space-md);
    padding-bottom: var(--atkv-space-sm);
    border-bottom: 1px solid var(--atkv-border-divider);
}

.date-section-header:first-child[b-5qo17qr69q] {
    margin-top: 0;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 767px) {
    .transactions-container[b-5qo17qr69q] {
        padding: var(--atkv-space-md);
    }

    .filters-panel[b-5qo17qr69q] {
        padding: var(--atkv-space-md);
    }

    .transaction-item[b-5qo17qr69q] {
        padding: var(--atkv-space-md);
    }

    .transaction-icon[b-5qo17qr69q] {
        width: 40px;
        height: 40px;
        font-size: var(--atkv-font-size-h4);
    }

    .filter-actions[b-5qo17qr69q] {
        flex-direction: column;
    }

    .pagination[b-5qo17qr69q] {
        flex-wrap: wrap;
    }
}

/* Tablet and larger */
@media (min-width: 768px) {
    .page-header h1[b-5qo17qr69q] {
        font-size: var(--atkv-font-size-h2);
    }

    .filters-panel[b-5qo17qr69q] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .filter-group[b-5qo17qr69q] {
        flex: 1;
        min-width: 200px;
    }

    .filter-actions[b-5qo17qr69q] {
        flex: 0 0 auto;
        margin-top: 0;
    }

    .transaction-item[b-5qo17qr69q] {
        gap: var(--atkv-space-lg);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .transactions-list[b-5qo17qr69q] {
        gap: var(--atkv-space-lg);
    }

    .filter-group[b-5qo17qr69q] {
        min-width: 250px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .transaction-item[b-5qo17qr69q],
    .btn-page[b-5qo17qr69q],
    .btn-export[b-5qo17qr69q],
    .btn-apply-filters[b-5qo17qr69q],
    .btn-clear-filters[b-5qo17qr69q],
    .btn-back[b-5qo17qr69q],
    .btn-filter[b-5qo17qr69q],
    .filter-select[b-5qo17qr69q],
    .empty-action[b-5qo17qr69q] {
        transition: none;
    }

    .transaction-item:hover[b-5qo17qr69q] {
        transform: none;
    }

    .spinner[b-5qo17qr69q] {
        animation: none;
        border-top-color: transparent;
    }
}

@media (prefers-contrast: high) {
    .transaction-item[b-5qo17qr69q],
    .filter-select[b-5qo17qr69q],
    .btn-page[b-5qo17qr69q],
    .btn-export[b-5qo17qr69q],
    .btn-apply-filters[b-5qo17qr69q],
    .btn-clear-filters[b-5qo17qr69q] {
        border-width: 3px;
    }

    .transaction-icon[b-5qo17qr69q] {
        border: 2px solid currentColor;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .filters-panel[b-5qo17qr69q],
    .btn-back[b-5qo17qr69q],
    .btn-filter[b-5qo17qr69q],
    .pagination[b-5qo17qr69q],
    .btn-export[b-5qo17qr69q] {
        display: none;
    }

    .transaction-item[b-5qo17qr69q] {
        box-shadow: none;
        border: 1px solid var(--atkv-border-divider);
        break-inside: avoid;
    }

    .transactions-container[b-5qo17qr69q] {
        max-width: 100%;
    }
}
/* /Pages/Wallet/Transfer.razor.rz.scp.css */
.transfer-container[b-wsqjfgbw67] { max-width: 600px; margin: 0 auto; padding: 20px; }
.page-header[b-wsqjfgbw67] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.btn-back[b-wsqjfgbw67] { background: none; border: none; font-size: 24px; cursor: pointer; color: #004d40; padding: 5px 10px; }
.page-header h1[b-wsqjfgbw67] { margin: 0; font-size: 24px; color: #004d40; }
.spacer[b-wsqjfgbw67] { width: 44px; }
.transfer-form[b-wsqjfgbw67] { background: white; border-radius: 8px; padding: 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.form-section[b-wsqjfgbw67] { margin-bottom: 25px; }
.form-section h3[b-wsqjfgbw67] { margin: 0 0 15px; color: #004d40; font-size: 16px; }
.form-control[b-wsqjfgbw67] { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 4px; font-size: 16px; }
.form-control:focus[b-wsqjfgbw67] { outline: none; border-color: #00796b; }
.transfer-arrow[b-wsqjfgbw67] { text-align: center; font-size: 32px; color: #00796b; margin: 20px 0; }
.input-group[b-wsqjfgbw67] { display: flex; align-items: center; border: 2px solid #e0e0e0; border-radius: 4px; overflow: hidden; }
.input-group:focus-within[b-wsqjfgbw67] { border-color: #00796b; }
.input-prefix[b-wsqjfgbw67] { padding: 12px 15px; background-color: #f5f5f5; font-weight: 600; color: #666; }
.input-group input[b-wsqjfgbw67] { flex: 1; padding: 12px; border: none; font-size: 16px; }
.input-group input:focus[b-wsqjfgbw67] { outline: none; }
.alert[b-wsqjfgbw67] { padding: 15px; border-radius: 4px; margin-bottom: 20px; }
.alert-error[b-wsqjfgbw67] { background-color: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.btn-primary[b-wsqjfgbw67] { width: 100%; padding: 15px; background-color: #00796b; color: white; border: none; border-radius: 4px; font-size: 18px; font-weight: 600; cursor: pointer; margin-top: 10px; }
.btn-primary:hover:not(:disabled)[b-wsqjfgbw67] { background-color: #004d40; }
.btn-primary:disabled[b-wsqjfgbw67] { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 768px) { .transfer-container[b-wsqjfgbw67] { padding: 10px; } .transfer-form[b-wsqjfgbw67] { padding: 20px; } }
/* /Pages/Wallet/WalletDetails.razor.rz.scp.css */
/**
 * ATKV Mobile App - Wallet Details Page Styles
 * Design System: ATKV Brand
 * Mobile-first responsive design
 * WCAG 2.1 AA compliant
 */

/* ==========================================================================
   Container
   ========================================================================== */

.wallet-details-container[b-bc4lt7mgjv] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-4);
    min-height: calc(100vh - var(--nav-height-mobile) * 2);
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-bc4lt7mgjv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
}

.btn-back[b-bc4lt7mgjv] {
    /* Sizing for touch target */
    width: 44px;
    height: 44px;
    min-width: 44px;

    /* Remove default button styles */
    background: none;
    border: none;
    padding: 0;

    /* Icon styling */
    font-size: 24px;
    color: var(--color-primary-blue);

    /* Center the arrow */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Interaction */
    cursor: pointer;
    border-radius: 50%;
    transition: all var(--transition-base);
}

.btn-back:hover[b-bc4lt7mgjv] {
    background: var(--color-ui-hover);
}

.btn-back:focus-visible[b-bc4lt7mgjv] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.btn-back:active[b-bc4lt7mgjv] {
    transform: scale(0.95);
}

.page-header h1[b-bc4lt7mgjv] {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-align: center;
}

.spacer[b-bc4lt7mgjv] {
    width: 44px;
    flex-shrink: 0;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-container[b-bc4lt7mgjv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: var(--spacing-4);
}

.spinner[b-bc4lt7mgjv] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--color-ui-border);
    border-top: 4px solid var(--color-primary-blue);
    border-radius: 50%;
    animation: spin-b-bc4lt7mgjv 1s linear infinite;
}

@keyframes spin-b-bc4lt7mgjv {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-container p[b-bc4lt7mgjv] {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ==========================================================================
   Wallet Card
   ========================================================================== */

.wallet-card[b-bc4lt7mgjv] {
    /* Light blue gradient matching home page wallet card */
    background: linear-gradient(135deg, #B3D7F0 0%, #A8CDE8 100%);

    /* Rounded corners and elevation */
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);

    /* Spacing */
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-6);

    /* Center content */
    text-align: center;
}

.wallet-type[b-bc4lt7mgjv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

.type-icon[b-bc4lt7mgjv] {
    font-size: 32px;
}

.wallet-type h2[b-bc4lt7mgjv] {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.balance-label[b-bc4lt7mgjv] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.balance-amount[b-bc4lt7mgjv] {
    margin: 0;
    font-size: 48px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.2;
}

/* ==========================================================================
   Quick Actions
   ========================================================================== */

.quick-actions[b-bc4lt7mgjv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.action-card[b-bc4lt7mgjv] {
    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);

    /* Sizing */
    padding: var(--spacing-5);
    min-height: 100px;

    /* Styling */
    background: var(--color-white);
    border: 2px solid var(--color-ui-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);

    /* Interaction */
    cursor: pointer;
    transition: all var(--transition-base);
}

.action-card:hover[b-bc4lt7mgjv] {
    border-color: var(--color-primary-blue);
    background-color: var(--color-ui-hover);
    box-shadow: var(--shadow-sm);
}

.action-card:focus-visible[b-bc4lt7mgjv] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.action-card:active[b-bc4lt7mgjv] {
    transform: scale(0.95);
}

.action-icon[b-bc4lt7mgjv] {
    font-size: 32px;
}

.action-card span:last-child[b-bc4lt7mgjv] {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* ==========================================================================
   Recent Transactions
   ========================================================================== */

.recent-transactions[b-bc4lt7mgjv] {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.recent-transactions h3[b-bc4lt7mgjv] {
    margin: 0 0 var(--spacing-5) 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.transactions-list[b-bc4lt7mgjv] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

.transaction-item[b-bc4lt7mgjv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4);
    background-color: var(--color-ui-background);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base);
}

.transaction-item:hover[b-bc4lt7mgjv] {
    background-color: var(--color-ui-hover);
}

.transaction-info[b-bc4lt7mgjv] {
    flex: 1;
}

.transaction-info h4[b-bc4lt7mgjv] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.transaction-info p[b-bc4lt7mgjv] {
    margin: 0;
    font-size: var(--font-size-body-sm);
    color: var(--color-text-secondary);
}

.transaction-amount[b-bc4lt7mgjv] {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    margin-left: var(--spacing-3);
}

.transaction-amount.positive[b-bc4lt7mgjv] {
    color: var(--color-success);
}

.transaction-amount.negative[b-bc4lt7mgjv] {
    color: var(--color-error);
}

.btn-view-all[b-bc4lt7mgjv] {
    /* Full width button */
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);

    /* Styling - outlined style */
    background-color: var(--color-white);
    color: var(--color-primary-blue);
    border: 2px solid var(--color-primary-blue);
    border-radius: var(--radius-full);

    /* Typography */
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);

    /* Interaction */
    cursor: pointer;
    transition: all var(--transition-base);

    /* Minimum touch target */
    min-height: var(--touch-target-minimum);
}

.btn-view-all:hover[b-bc4lt7mgjv] {
    background-color: var(--color-primary-blue);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.btn-view-all:focus-visible[b-bc4lt7mgjv] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.btn-view-all:active[b-bc4lt7mgjv] {
    transform: scale(0.98);
}

.empty-transactions[b-bc4lt7mgjv] {
    text-align: center;
    padding: var(--spacing-10) var(--spacing-4);
    color: var(--color-text-secondary);
}

.empty-transactions p[b-bc4lt7mgjv] {
    margin: 0;
    font-size: var(--font-size-body);
}

/* ==========================================================================
   Responsive Design (Mobile-First)
   ========================================================================== */

/* Small mobile devices (320px - 374px) */
@media (max-width: 374px) {
    .wallet-details-container[b-bc4lt7mgjv] {
        padding: var(--spacing-3);
    }

    .wallet-card[b-bc4lt7mgjv] {
        padding: var(--spacing-5);
    }

    .balance-amount[b-bc4lt7mgjv] {
        font-size: 36px;
    }

    .quick-actions[b-bc4lt7mgjv] {
        grid-template-columns: 1fr 1fr;
    }

    .action-card:last-child[b-bc4lt7mgjv] {
        grid-column: 1 / -1;
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .wallet-details-container[b-bc4lt7mgjv] {
        padding: var(--spacing-6);
    }

    .wallet-card[b-bc4lt7mgjv] {
        padding: var(--spacing-10);
    }

    .balance-amount[b-bc4lt7mgjv] {
        font-size: 56px;
    }

    .recent-transactions[b-bc4lt7mgjv] {
        padding: var(--spacing-8);
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .wallet-details-container[b-bc4lt7mgjv] {
        padding: var(--spacing-8);
    }
}

/* ==========================================================================
   Accessibility Features
   ========================================================================== */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .spinner[b-bc4lt7mgjv],
    .action-card[b-bc4lt7mgjv],
    .btn-back[b-bc4lt7mgjv],
    .btn-view-all[b-bc4lt7mgjv],
    .transaction-item[b-bc4lt7mgjv] {
        transition: none;
        animation: none;
    }

    .action-card:active[b-bc4lt7mgjv],
    .btn-back:active[b-bc4lt7mgjv],
    .btn-view-all:active[b-bc4lt7mgjv] {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wallet-card[b-bc4lt7mgjv],
    .action-card[b-bc4lt7mgjv],
    .recent-transactions[b-bc4lt7mgjv],
    .transaction-item[b-bc4lt7mgjv] {
        border: 2px solid var(--color-text-primary);
    }

    .btn-view-all[b-bc4lt7mgjv] {
        border-width: 2px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .btn-back[b-bc4lt7mgjv],
    .quick-actions[b-bc4lt7mgjv],
    .btn-view-all[b-bc4lt7mgjv] {
        display: none;
    }

    .wallet-card[b-bc4lt7mgjv],
    .recent-transactions[b-bc4lt7mgjv] {
        box-shadow: none;
        border: 1px solid #000;
    }

    .transaction-item[b-bc4lt7mgjv] {
        page-break-inside: avoid;
    }
}
/* /Shared/Components/ResortCard.razor.rz.scp.css */
/* ============================================
   RESORT CARD COMPONENT - ATKV MOBILE APP
   Reusable resort card for catalog display
   ============================================ */

.resort-card[b-hxhyjd3isq] {
    background: var(--atkv-bg-card);
    border-radius: var(--atkv-radius-lg);
    box-shadow: var(--atkv-shadow-md);
    overflow: hidden;
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
    cursor: pointer;
}

.resort-card:hover[b-hxhyjd3isq] {
    box-shadow: var(--atkv-shadow-xl);
    transform: translateY(-4px);
}

.resort-card:active[b-hxhyjd3isq] {
    transform: translateY(-2px);
}

.resort-card:focus-visible[b-hxhyjd3isq] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.resort-image[b-hxhyjd3isq] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: var(--atkv-bg-light);
}

.resort-content[b-hxhyjd3isq] {
    padding: var(--atkv-space-lg);
}

.resort-header[b-hxhyjd3isq] {
    margin-bottom: var(--atkv-space-md);
}

.resort-name[b-hxhyjd3isq] {
    margin: 0 0 var(--atkv-space-xs);
    font-size: var(--atkv-font-size-h4);
    font-weight: var(--atkv-font-weight-bold);
    color: var(--atkv-text-primary);
}

.resort-location[b-hxhyjd3isq] {
    display: flex;
    align-items: center;
    gap: var(--atkv-space-xs);
    font-size: var(--atkv-font-size-body-sm);
    color: var(--atkv-text-secondary);
}

.resort-description[b-hxhyjd3isq] {
    margin: 0 0 var(--atkv-space-md);
    font-size: var(--atkv-font-size-body-sm);
    color: var(--atkv-text-secondary);
    line-height: var(--atkv-line-height-body);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.resort-amenities[b-hxhyjd3isq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atkv-space-xs);
    margin-bottom: var(--atkv-space-md);
}

.amenity-tag[b-hxhyjd3isq] {
    padding: var(--atkv-space-xs) var(--atkv-space-sm);
    background-color: var(--atkv-bg-light);
    border-radius: var(--atkv-radius-full);
    font-size: var(--atkv-font-size-caption);
    color: var(--atkv-text-secondary);
}

.resort-footer[b-hxhyjd3isq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--atkv-space-md);
    border-top: 1px solid var(--atkv-border-divider);
}

.resort-rating[b-hxhyjd3isq] {
    display: flex;
    align-items: center;
    gap: var(--atkv-space-xs);
}

.rating-stars[b-hxhyjd3isq] {
    color: #FFA726;
    font-size: var(--atkv-font-size-body);
}

.rating-value[b-hxhyjd3isq] {
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-semibold);
    color: var(--atkv-text-primary);
}

.btn-view[b-hxhyjd3isq] {
    padding: var(--atkv-space-sm) var(--atkv-space-md);
    background-color: var(--atkv-primary-blue);
    color: var(--atkv-text-white);
    border: none;
    border-radius: var(--atkv-radius-sm);
    font-size: var(--atkv-font-size-body-sm);
    font-weight: var(--atkv-font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.btn-view:hover[b-hxhyjd3isq] {
    background-color: var(--atkv-primary-black);
}

.btn-view:focus-visible[b-hxhyjd3isq] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .resort-card[b-hxhyjd3isq] {
        transition: none;
    }

    .resort-card:hover[b-hxhyjd3isq] {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    .resort-card[b-hxhyjd3isq] {
        border: 2px solid var(--atkv-border-divider);
    }
}
/* /Shared/Components/TjiengWalletWidget.razor.rz.scp.css */
.tjieng-wallet[b-0wv6vaabg1] {
    background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
}

.members-only-badge[b-0wv6vaabg1] {
    margin-left: auto;
    padding: 4px 8px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.wallet-locked[b-0wv6vaabg1] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    opacity: 0.8;
    text-align: center;
}

.lock-icon[b-0wv6vaabg1] {
    font-size: 48px;
    margin-bottom: 10px;
}

.wallet-locked p[b-0wv6vaabg1] {
    margin: 0;
    font-size: 14px;
}
/* /Shared/Components/ZarWalletWidget.razor.rz.scp.css */
.wallet-widget[b-quh9aj4o3g] {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: white;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wallet-widget:hover[b-quh9aj4o3g] {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.zar-wallet[b-quh9aj4o3g] {
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
}

.wallet-header[b-quh9aj4o3g] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.wallet-icon[b-quh9aj4o3g] {
    font-size: 24px;
}

.wallet-header h3[b-quh9aj4o3g] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    opacity: 0.95;
}

.wallet-loading[b-quh9aj4o3g] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.loading-spinner[b-quh9aj4o3g] {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-quh9aj4o3g 1s linear infinite;
}

@keyframes spin-b-quh9aj4o3g {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.wallet-balance[b-quh9aj4o3g] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 20px 0;
}

.currency[b-quh9aj4o3g] {
    font-size: 24px;
    font-weight: 600;
}

.amount[b-quh9aj4o3g] {
    font-size: 36px;
    font-weight: bold;
    letter-spacing: -0.5px;
}

.wallet-footer[b-quh9aj4o3g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    opacity: 0.9;
    margin-top: 15px;
}

.last-updated[b-quh9aj4o3g] {
    font-style: italic;
}

.tap-hint[b-quh9aj4o3g] {
    font-weight: 600;
}

.wallet-error[b-quh9aj4o3g] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    opacity: 0.8;
}

.wallet-error p[b-quh9aj4o3g] {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 768px) {
    .wallet-widget[b-quh9aj4o3g] {
        min-height: 140px;
        padding: 15px;
    }

    .amount[b-quh9aj4o3g] {
        font-size: 28px;
    }

    .currency[b-quh9aj4o3g] {
        font-size: 20px;
    }
}