/* /Components/Admin/QuillEditor.razor.rz.scp.css */
/* QuillEditor - scoped styles for the WYSIWYG wrapper */

.quill-editor-wrapper[b-nq49cu2pao] {
    border: 1px solid #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

/* Toolbar styling to match admin panel */
.quill-editor-wrapper[b-nq49cu2pao]  .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 8px 12px;
    font-family: 'Montserrat', sans-serif;
}

/* Editor area */
.quill-editor-wrapper[b-nq49cu2pao]  .ql-container.ql-snow {
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}

.quill-editor-wrapper[b-nq49cu2pao]  .ql-editor {
    min-height: 200px;
    padding: 16px;
    line-height: 1.6;
    color: #333;
}

.quill-editor-wrapper[b-nq49cu2pao]  .ql-editor.ql-blank::before {
    color: #9ca3af;
    font-style: italic;
}

/* Inline figure (image with caption) styling inside the editor */
.quill-editor-wrapper[b-nq49cu2pao]  figure.article-inline-image {
    margin: 16px 0;
    text-align: center;
}

.quill-editor-wrapper[b-nq49cu2pao]  figure.article-inline-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.quill-editor-wrapper[b-nq49cu2pao]  figure.article-inline-image figcaption {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
    font-style: italic;
}
/* /Components/Cards/BenefitCard.razor.rz.scp.css */
/* BenefitCard Styles
 * Aligned to Figma npo-benefits-rewards.html design patterns
 * Benefit icon uses yellow (#fdb913) background
 */

/* Card container (Figma: 280px width, column layout, centered, 20px radius) */
.benefit-card[b-2ibovmgdxe] {
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);
    padding: var(--spacing-md);
    text-align: center;
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--color-white);
    border: 1px solid transparent;
}

.benefit-card:hover[b-2ibovmgdxe] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--card-border);
}

.benefit-card:focus-visible[b-2ibovmgdxe] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

/* Icon container (Figma: 60x60px, yellow bg, circle) */
.benefit-icon-container[b-2ibovmgdxe] {
    width: 60px;
    height: 60px;
    background: var(--color-primary-yellow) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    color: var(--color-black);
    flex-shrink: 0;
}

.benefit-emoji[b-2ibovmgdxe] {
    font-size: var(--font-size-2xl);
    line-height: 1;
}

/* Content section */
.benefit-content[b-2ibovmgdxe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

/* Title (Figma: 28px semibold black, scaled for component) */
.benefit-title[b-2ibovmgdxe] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-tight);
}

/* Description */
.benefit-description[b-2ibovmgdxe] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: #666666;
    margin: 0;
    line-height: var(--line-height-normal);
}

/* Badge */
.benefit-badge[b-2ibovmgdxe] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: var(--card-background);
    color: var(--color-text-primary);
    border: 1px solid var(--card-border);
}

.benefit-badge.discount[b-2ibovmgdxe] {
    background: #E3F2FD;
    color: var(--color-primary-blue);
    border-color: var(--color-primary-blue);
}

.benefit-badge.exclusive[b-2ibovmgdxe] {
    background: #FFF3E0;
    color: #E65100;
    border-color: #E65100;
}

.benefit-badge.new[b-2ibovmgdxe] {
    background: #E8F5E9;
    color: #2E7D32;
    border-color: #2E7D32;
}

.benefit-badge.popular[b-2ibovmgdxe] {
    background: #FCE4EC;
    color: #C62828;
    border-color: #C62828;
}

/* Action button */
.benefit-action[b-2ibovmgdxe] {
    width: 100%;
}

.benefit-cta[b-2ibovmgdxe] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: none;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-button);
    color: var(--color-primary-blue);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-base);
}

.benefit-cta:hover[b-2ibovmgdxe] {
    background: var(--color-primary-blue);
    color: var(--color-white);
    border-color: var(--color-primary-blue);
}

/* Responsive: cards become full-width on mobile */
@media (max-width: 480px) {
    .benefit-card[b-2ibovmgdxe] {
        width: 100%;
    }
}
/* /Components/Cards/ExperienceCard.razor.rz.scp.css */
/* Below-image title - hidden by default; chrome.css shows it on the home
   page where the overlay variant is hidden. Prevents duplicate titles
   on resort detail / other contexts that still use the overlay. */
.accommodation-title--below[b-7scfaf6ooy] {
    display: none;
}

/* Accommodation Card - matches Figma home-desktop.html */
.accommodation-card[b-7scfaf6ooy] {
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    border: none;
    flex-shrink: 0;
}

/* V6/V9: per-resort coloured border driven by the data-resort palette.
   !important to beat a generic 1px grey card border applied globally. */
.accommodation-card[data-resort][b-7scfaf6ooy] {
    border: 2px solid var(--resort-primary, #2a63af) !important;
}

.accommodation-card:hover[b-7scfaf6ooy] {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.accommodation-card:focus[b-7scfaf6ooy] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

/* Image section - 250px height */
.accommodation-image-wrap[b-7scfaf6ooy] {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    flex-shrink: 0;
}

.accommodation-image[b-7scfaf6ooy] {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.accommodation-image-placeholder[b-7scfaf6ooy] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
    color: #b0b0b0;
    font-size: 48px;
}

/* Teal gradient overlay at bottom of image */
.accommodation-overlay[b-7scfaf6ooy] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 116px;
    background: linear-gradient(to top, rgba(0, 138, 161, 0.8) 0%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.accommodation-title[b-7scfaf6ooy] {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

/* Details section below image */
.accommodation-details[b-7scfaf6ooy] {
    padding: 20px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* Amenities row */
.accommodation-amenities[b-7scfaf6ooy] {
    display: flex;
    gap: 20px;
}

.amenity[b-7scfaf6ooy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #333;
}

.amenity-icon[b-7scfaf6ooy] {
    font-size: 22px;
    color: #555;
}

/* Footer: price left, button right */
.accommodation-footer[b-7scfaf6ooy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.price[b-7scfaf6ooy] {
    font-size: 20px;
    font-weight: 500;
}

.price-large[b-7scfaf6ooy] {
    font-size: 24px;
    font-weight: 700;
    color: #000;
}

.price-small[b-7scfaf6ooy] {
    font-size: 12px;
    color: #666;
}

/* Book Now button - yellow CTA */
.button--booking[b-7scfaf6ooy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 36px;
    /* V7/V11: per-resort gradient instead of a flat yellow box */
    background: linear-gradient(135deg, var(--resort-primary, #2a63af), var(--resort-secondary, #1d3f6f));
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.button--booking:hover[b-7scfaf6ooy] {
    filter: brightness(1.08);
}

/* Tablet */
@media (max-width: 744px) {
    .accommodation-card[b-7scfaf6ooy] {
        width: 330px;
        min-width: 330px;
        max-width: 330px;
        height: 380px;
    }
}

/* Mobile */
@media (max-width: 393px) {
    .accommodation-card[b-7scfaf6ooy] {
        width: 300px;
        min-width: 300px;
        max-width: 300px;
        height: 360px;
    }

    .accommodation-image-wrap[b-7scfaf6ooy],
    .accommodation-image[b-7scfaf6ooy] {
        height: 220px;
    }

    .accommodation-details[b-7scfaf6ooy] {
        padding: 12px 16px;
    }

    .accommodation-amenities[b-7scfaf6ooy] {
        gap: 16px;
    }

    .price-large[b-7scfaf6ooy] {
        font-size: 20px;
    }
}
/* /Components/Cards/FamilyMemberCard.razor.rz.scp.css */
/* FamilyMemberCard Styles
 * Aligned to Figma card pattern: white bg, border, 20px radius, hover lift
 */

/* Card container (Figma: white bg, border, 20px radius, hover lift) */
.family-member-card[b-wftpksa4hf] {
    background: var(--color-white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: var(--spacing-2xl);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.family-member-card:hover[b-wftpksa4hf] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.family-member-card:focus-visible[b-wftpksa4hf] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

/* Primary member card variant */
.family-member-card.primary-member[b-wftpksa4hf] {
    border-color: var(--color-primary-blue);
    border-width: 2px;
}

/* Photo container */
.member-photo-container[b-wftpksa4hf] {
    position: relative;
    flex-shrink: 0;
}

.member-photo[b-wftpksa4hf] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.member-photo-placeholder[b-wftpksa4hf] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-ocean);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.member-initials[b-wftpksa4hf] {
    line-height: 1;
}

/* Primary member badge */
.primary-badge[b-wftpksa4hf] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    background: var(--color-primary-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-white);
    font-size: 10px;
    color: var(--color-black);
}

/* Member info section */
.member-info[b-wftpksa4hf] {
    flex: 1;
    min-width: 0;
}

.member-name[b-wftpksa4hf] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-details[b-wftpksa4hf] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* Relationship badges */
.relationship-badge[b-wftpksa4hf] {
    display: inline-block;
    padding: 2px 10px;
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: #666666;
}

.relationship-badge.primary[b-wftpksa4hf] {
    background: var(--color-primary-blue);
    border-color: var(--color-primary-blue);
    color: var(--color-white);
}

.member-number[b-wftpksa4hf] {
    font-size: var(--font-size-xs);
    color: #666666;
    font-family: 'Courier New', monospace;
}

.member-age[b-wftpksa4hf] {
    font-size: var(--font-size-xs);
    color: #666666;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Action buttons */
.member-actions[b-wftpksa4hf] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.action-button[b-wftpksa4hf] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    cursor: pointer;
    color: #666666;
    transition: all var(--transition-base);
    padding: 0;
}

.action-button:hover[b-wftpksa4hf] {
    background: var(--card-background);
    color: var(--color-text-primary);
}

.edit-button:hover[b-wftpksa4hf] {
    border-color: var(--color-primary-blue);
    color: var(--color-primary-blue);
}

.remove-button:hover[b-wftpksa4hf] {
    border-color: #d32f2f;
    color: #d32f2f;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .family-member-card[b-wftpksa4hf] {
        padding: var(--spacing-lg);
    }

    .member-photo[b-wftpksa4hf],
    .member-photo-placeholder[b-wftpksa4hf] {
        width: 48px;
        height: 48px;
        font-size: var(--font-size-base);
    }
}
/* /Components/Cards/NewsCard.razor.rz.scp.css */
/* News Card - matches Figma home-desktop.html .news-card */
.news-card[b-0o8amjijni] {
    background: #f9fafb;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 2px solid #e1e0e1;
    padding: 20px;
}

.news-card:hover[b-0o8amjijni] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: #2a63af;
}

.news-card:focus[b-0o8amjijni] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

/* Image - 152px fixed height with border-radius */
.news-card__image-wrap[b-0o8amjijni] {
    width: 100%;
    height: 152px;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
    border-radius: 16px;
    margin-bottom: 16px;
}

.news-card__image[b-0o8amjijni] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 16px;
}

.news-card:hover .news-card__image[b-0o8amjijni] {
    transform: scale(1.05);
}

.news-card__image-placeholder[b-0o8amjijni] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    color: #b0b0b0;
    font-size: 36px;
}

/* Card Body */
.news-card__body[b-0o8amjijni] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* Title */
.news-card__title[b-0o8amjijni] {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Date */
.news-card__date[b-0o8amjijni] {
    font-size: 20px;
    font-weight: 500;
    color: #000;
    margin: 0;
}

/* Tag pills */
.news-card__tags[b-0o8amjijni] {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.news-card__tag[b-0o8amjijni] {
    flex: 1;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: #ffffff;
    border: 1.5px solid #e1e0e1;
    border-radius: 20px;
}

.news-card__tag-text[b-0o8amjijni] {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    text-align: center;
    line-height: 1;
}

/* Responsive */
@media (max-width: 393px) {
    .news-card[b-0o8amjijni] {
        max-width: 345px;
        margin: 0 auto;
    }

    .news-card__image-wrap[b-0o8amjijni] {
        height: 130px;
    }

    .news-card__title[b-0o8amjijni] {
        font-size: 18px;
    }

    .news-card__date[b-0o8amjijni] {
        font-size: 16px;
    }

    .news-card__tags[b-0o8amjijni] {
        flex-direction: column;
    }
}
/* /Components/Cards/PartnerOfferCard.razor.rz.scp.css */
/* PartnerOfferCard Styles
 * Aligned to Figma card pattern: white bg, border, 20px radius, hover lift
 */

/* Card container */
.partner-offer-card[b-brixs90vcp] {
    background: var(--color-white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: var(--spacing-2xl);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.partner-offer-card:hover[b-brixs90vcp] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.partner-offer-card:focus-visible[b-brixs90vcp] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

/* Partner logo */
.partner-logo-container[b-brixs90vcp] {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.partner-logo[b-brixs90vcp] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.partner-logo-placeholder[b-brixs90vcp] {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-yellow);
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.partner-initial[b-brixs90vcp] {
    line-height: 1;
}

/* Content section */
.partner-content[b-brixs90vcp] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
}

.partner-name[b-brixs90vcp] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.offer-description[b-brixs90vcp] {
    font-size: var(--font-size-sm);
    color: #666666;
    margin: 0;
    line-height: var(--line-height-normal);
}

/* Discount badge */
.discount-badge[b-brixs90vcp] {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-primary-yellow);
    color: var(--color-black);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    align-self: flex-start;
}

/* Footer section */
.partner-footer[b-brixs90vcp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.expiry-info[b-brixs90vcp] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: #666666;
}

.expiry-text[b-brixs90vcp] {
    white-space: nowrap;
}

.terms-link[b-brixs90vcp] {
    font-size: var(--font-size-xs);
    color: var(--color-primary-blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.terms-link:hover[b-brixs90vcp] {
    text-decoration: underline;
}

/* Claim button */
.claim-button[b-brixs90vcp] {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-2xl);
    background: var(--color-primary-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-button);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.claim-button:hover[b-brixs90vcp] {
    background: var(--button-secondary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
/* /Components/Filters/FilterModal.razor.rz.scp.css */
.modal-overlay[b-il2cthqzpl] {
    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-il2cthqzpl 0.2s ease-out;
}

.modal-content[b-il2cthqzpl] {
    background: white;
    width: 100%;
    max-width: 600px;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    animation: slideUp-b-il2cthqzpl 0.3s ease-out;
}

.modal-header[b-il2cthqzpl] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border-secondary);
}

.modal-header h2[b-il2cthqzpl] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

.close-btn[b-il2cthqzpl] {
    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-il2cthqzpl] {
    background: var(--color-background-secondary);
}

.modal-body[b-il2cthqzpl] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.filter-section[b-il2cthqzpl] {
    margin-bottom: 24px;
}

.filter-section h3[b-il2cthqzpl] {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--color-text-primary);
}

/* Price Inputs */
.price-inputs[b-il2cthqzpl] {
    display: flex;
    gap: 16px;
}

.input-group[b-il2cthqzpl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label[b-il2cthqzpl] {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.input-group input[b-il2cthqzpl] {
    padding: 12px;
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    font-size: 16px;
}

/* Checkbox Groups */
.checkbox-group[b-il2cthqzpl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-label[b-il2cthqzpl] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 16px;
    color: var(--color-text-primary);
}

.checkbox-label input[type="checkbox"][b-il2cthqzpl] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
}

/* Footer */
.modal-footer[b-il2cthqzpl] {
    padding: 20px;
    border-top: 1px solid var(--color-border-secondary);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
}

.btn-clear[b-il2cthqzpl] {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding: 12px;
}

.btn-apply[b-il2cthqzpl] {
    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-il2cthqzpl] {
        align-items: center;
        /* Center on desktop */
    }

    .modal-content[b-il2cthqzpl] {
        border-radius: 20px;
        max-height: 80vh;
        animation: fadeIn-b-il2cthqzpl 0.2s ease-out;
    }
}

@keyframes slideUp-b-il2cthqzpl {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes fadeIn-b-il2cthqzpl {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/Home/FeaturedExperiences.razor.rz.scp.css */
/* Featured Experiences Section - matches Figma home-desktop.html */
.featured-section[b-t3qko5naoz] {
    margin-bottom: 16px;
}

/* Centred section title */
.section-title[b-t3qko5naoz] {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 32px 0;
    color: #000;
}

/* Carousel container */
.carousel-container[b-t3qko5naoz] {
    position: relative;
    overflow: hidden;
}

/* Horizontal carousel */
.carousel[b-t3qko5naoz] {
    display: flex;
    gap: 43px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 0 0 6px 0;
    scrollbar-width: thin;
    scrollbar-color: #b7beb5 transparent;
}

/* Each direct child card snaps to the start of the scroll container.
   ::deep crosses the component boundary so ExperienceCard's root is targeted. */
.carousel[b-t3qko5naoz]  > * {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.carousel[b-t3qko5naoz]::-webkit-scrollbar {
    height: 8px;
}

.carousel[b-t3qko5naoz]::-webkit-scrollbar-thumb {
    background: #b7beb5;
    border-radius: 8px;
}

.carousel[b-t3qko5naoz]::-webkit-scrollbar-track {
    background: transparent;
}

/* Carousel dots navigation */
.carousel-dots[b-t3qko5naoz] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/* V6/V9: dots ~1/3 the old size; active dot is a short pill */
.carousel-dot[b-t3qko5naoz] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cfd6df;
    cursor: pointer;
    transition: all 0.2s ease;
}

.carousel-dot.active[b-t3qko5naoz] {
    width: 14px;
    border-radius: 3px;
    background: #2a63af;
}

.carousel-dot:hover[b-t3qko5naoz] {
    opacity: 0.7;
}

/* Tablet (744px) */
@media (max-width: 744px) {
    .section-title[b-t3qko5naoz] {
        font-size: 28px;
    }

    .carousel[b-t3qko5naoz] {
        gap: 43px;
    }
}

/* Mobile (393px) */
@media (max-width: 393px) {
    .section-title[b-t3qko5naoz] {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .carousel[b-t3qko5naoz] {
        gap: 20px;
    }

    .carousel-dots[b-t3qko5naoz] {
        gap: 6px;
    }

    .carousel-dot[b-t3qko5naoz] {
        width: 5px;
        height: 5px;
    }
    .carousel-dot.active[b-t3qko5naoz] {
        width: 14px;
    }
}
/* /Components/Home/NewsEventsSection.razor.rz.scp.css */
/* News & Events Section - matches Figma home-desktop.html */
.news-section[b-jx394nbxd5] {
    margin-bottom: 48px;
}

/* Header: title left, filter button right */
.news-header[b-jx394nbxd5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.news-title[b-jx394nbxd5] {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin: 0;
}

/* Filter button - white with border, icon + text */
.button--filter[b-jx394nbxd5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #fff;
    border: 1px solid #b7beb5;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Montserrat', sans-serif;
}

.button--filter:hover[b-jx394nbxd5] {
    background: #f5f5f5;
    border-color: #999;
}

.button--filter svg[b-jx394nbxd5] {
    width: 20px;
    height: 20px;
}

/* 4-column card grid */
.card-grid--4-col[b-jx394nbxd5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Category filter pills */
.category-filters[b-jx394nbxd5] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    animation: slideDown-b-jx394nbxd5 0.3s ease-out;
}

.filter-pill[b-jx394nbxd5] {
    padding: 8px 16px;
    border: 1px solid #d0d0d0;
    border-radius: 20px;
    background: white;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Montserrat', sans-serif;
}

.filter-pill:hover[b-jx394nbxd5] {
    background: #f5f5f5;
    border-color: #b0b0b0;
}

.filter-pill.active[b-jx394nbxd5] {
    background: #fdb913;
    border-color: #fdb913;
    color: #000;
}

/* Mobile + tablet (<=744px) - 1 column, stacked vertically.
   No horizontal scroll: every news card is full-width and the user
   scrolls the page vertically to see more. */
@media (max-width: 744px) {
    .card-grid--4-col[b-jx394nbxd5] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .news-header[b-jx394nbxd5] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .news-title[b-jx394nbxd5] {
        font-size: 24px;
    }

    .button--filter[b-jx394nbxd5] {
        width: auto;
        align-self: flex-start;
    }
}

@keyframes slideDown-b-jx394nbxd5 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/LanguageSelector.razor.rz.scp.css */
.language-selector[b-gk0cxs6lin] {
    display: flex;
    align-items: center;
}

.language-btn[b-gk0cxs6lin] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-primary-blue, #2a63af);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.375rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.language-btn:hover[b-gk0cxs6lin] {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

.language-btn:active[b-gk0cxs6lin] {
    transform: scale(0.95);
}

.language-icon[b-gk0cxs6lin] {
    width: 1.125rem;
    height: 1.125rem;
    color: inherit;
    stroke: currentColor;
}

.language-text[b-gk0cxs6lin] {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    color: inherit;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .language-btn[b-gk0cxs6lin] {
        padding: 0.25rem 0.625rem;
    }

    .language-icon[b-gk0cxs6lin] {
        width: 1rem;
        height: 1rem;
    }

    .language-text[b-gk0cxs6lin] {
        font-size: 0.8125rem;
    }
}
/* /Components/Layout/BottomNav.razor.rz.scp.css */
/* FAB Container */
.fab-container[b-wbcpm1ibii] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: none;
}

/* Show on mobile and tablets */
@media (max-width: 1024px) {
    .fab-container[b-wbcpm1ibii] {
        display: block;
    }
}

/* Adjust for safe area on modern phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .fab-container[b-wbcpm1ibii] {
        bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* Overlay when menu is open - note: overlay element must be outside fab-container in HTML
   because transform on fab-container creates new containing block for fixed positioning */
.fab-overlay[b-wbcpm1ibii] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.fab-overlay--open[b-wbcpm1ibii] {
    opacity: 1;
    pointer-events: auto;
}

/* Main FAB trigger button */
.fab-trigger[b-wbcpm1ibii] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--atkv-primary-blue, #2a63af);
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(42, 99, 175, 0.4),
                0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s ease,
                box-shadow 0.2s ease;
    position: relative;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
}

.fab-trigger:focus[b-wbcpm1ibii] {
    outline: none;
    box-shadow: 0 4px 12px rgba(42, 99, 175, 0.4),
                0 2px 4px rgba(0, 0, 0, 0.1);
}

.fab-trigger:focus-visible[b-wbcpm1ibii] {
    outline: none;
}

.fab-trigger:hover[b-wbcpm1ibii] {
    background: var(--atkv-primary-blue-dark, #1e4d8a);
    box-shadow: 0 6px 16px rgba(42, 99, 175, 0.5),
                0 3px 6px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

.fab-trigger:active[b-wbcpm1ibii] {
    transform: scale(0.95);
}

.fab-trigger i[b-wbcpm1ibii] {
    font-size: 24px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-trigger--open[b-wbcpm1ibii] {
    background: var(--atkv-yellow, #fdb913);
    color: var(--atkv-black, #000000);
    box-shadow: 0 4px 12px rgba(253, 185, 19, 0.4),
                0 2px 4px rgba(0, 0, 0, 0.1);
}

.fab-trigger--open:focus[b-wbcpm1ibii] {
    outline: none;
    box-shadow: 0 4px 12px rgba(253, 185, 19, 0.4),
                0 2px 4px rgba(0, 0, 0, 0.1);
}

.fab-trigger--open:hover[b-wbcpm1ibii] {
    background: #e5a711;
}

.fab-trigger--open i[b-wbcpm1ibii] {
    transform: rotate(90deg);
}

/* FAB Menu container - radial layout */
.fab-menu[b-wbcpm1ibii] {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    pointer-events: none;
}

.fab-container--open .fab-menu[b-wbcpm1ibii] {
    pointer-events: auto;
}

/* Individual menu items - icon only, circular buttons */
.fab-menu-item[b-wbcpm1ibii] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: white;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
                0 1px 3px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                opacity 0.2s ease,
                box-shadow 0.2s ease,
                background-color 0.2s ease;
}

/* Radial positions when menu is open - evenly spaced from 10h to 2h */
/* 10h position - upper-left */
.fab-menu-item--9h[b-wbcpm1ibii] {
    left: 0;
    top: 0;
}
.fab-container--open .fab-menu-item--9h[b-wbcpm1ibii] {
    opacity: 1;
    transform: translate(calc(-50% - 65px), calc(-50% - 38px)) scale(1);
    transition-delay: 0s;
}

/* 11h position - upper-left-center */
.fab-menu-item--11h[b-wbcpm1ibii] {
    left: 0;
    top: 0;
}
.fab-container--open .fab-menu-item--11h[b-wbcpm1ibii] {
    opacity: 1;
    transform: translate(calc(-50% - 26px), calc(-50% - 70px)) scale(1);
    transition-delay: 0.05s;
}

/* 1h position - upper-right-center */
.fab-menu-item--1h[b-wbcpm1ibii] {
    left: 0;
    top: 0;
}
.fab-container--open .fab-menu-item--1h[b-wbcpm1ibii] {
    opacity: 1;
    transform: translate(calc(-50% + 26px), calc(-50% - 70px)) scale(1);
    transition-delay: 0.1s;
}

/* 2h position - upper-right */
.fab-menu-item--3h[b-wbcpm1ibii] {
    left: 0;
    top: 0;
}
.fab-container--open .fab-menu-item--3h[b-wbcpm1ibii] {
    opacity: 1;
    transform: translate(calc(-50% + 65px), calc(-50% - 38px)) scale(1);
    transition-delay: 0.15s;
}

.fab-menu-item:hover[b-wbcpm1ibii] {
    background: var(--atkv-gray-50, #f8f9fa);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
                0 2px 4px rgba(0, 0, 0, 0.1);
}

.fab-container--open .fab-menu-item:hover[b-wbcpm1ibii] {
    transform: translate(var(--hover-x), var(--hover-y)) scale(1.1);
}

/* Set hover transform values for each position */
.fab-menu-item--9h[b-wbcpm1ibii] { --hover-x: calc(-50% - 65px); --hover-y: calc(-50% - 38px); }
.fab-menu-item--11h[b-wbcpm1ibii] { --hover-x: calc(-50% - 26px); --hover-y: calc(-50% - 70px); }
.fab-menu-item--1h[b-wbcpm1ibii] { --hover-x: calc(-50% + 26px); --hover-y: calc(-50% - 70px); }
.fab-menu-item--3h[b-wbcpm1ibii] { --hover-x: calc(-50% + 65px); --hover-y: calc(-50% - 38px); }

.fab-menu-item:active[b-wbcpm1ibii] {
    transform: translate(var(--hover-x), var(--hover-y)) scale(0.95) !important;
}

.fab-menu-item i[b-wbcpm1ibii] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--atkv-primary-blue, #2a63af);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Active menu item */
.fab-menu-item--active[b-wbcpm1ibii] {
    background: var(--atkv-primary-blue, #2a63af);
}

.fab-menu-item--active i[b-wbcpm1ibii] {
    background: white;
    color: var(--atkv-primary-blue, #2a63af);
}

.fab-menu-item--active:hover[b-wbcpm1ibii] {
    background: var(--atkv-primary-blue-dark, #1e4d8a);
}

/* Landscape mobile adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    .fab-container[b-wbcpm1ibii] {
        bottom: 16px;
    }

    .fab-trigger[b-wbcpm1ibii] {
        width: 48px;
        height: 48px;
    }

    .fab-trigger i[b-wbcpm1ibii] {
        font-size: 20px;
    }

    .fab-menu[b-wbcpm1ibii] {
        bottom: 24px;
    }

    .fab-menu-item[b-wbcpm1ibii] {
        width: 40px;
        height: 40px;
    }

    .fab-menu-item i[b-wbcpm1ibii] {
        font-size: 16px;
    }

    /* Smaller radial distances for landscape - 10h to 2h */
    .fab-container--open .fab-menu-item--9h[b-wbcpm1ibii] {
        transform: translate(calc(-50% - 52px), calc(-50% - 30px)) scale(1);
    }
    .fab-container--open .fab-menu-item--11h[b-wbcpm1ibii] {
        transform: translate(calc(-50% - 21px), calc(-50% - 56px)) scale(1);
    }
    .fab-container--open .fab-menu-item--1h[b-wbcpm1ibii] {
        transform: translate(calc(-50% + 21px), calc(-50% - 56px)) scale(1);
    }
    .fab-container--open .fab-menu-item--3h[b-wbcpm1ibii] {
        transform: translate(calc(-50% + 52px), calc(-50% - 30px)) scale(1);
    }

    .fab-menu-item--9h[b-wbcpm1ibii] { --hover-x: calc(-50% - 52px); --hover-y: calc(-50% - 30px); }
    .fab-menu-item--11h[b-wbcpm1ibii] { --hover-x: calc(-50% - 21px); --hover-y: calc(-50% - 56px); }
    .fab-menu-item--1h[b-wbcpm1ibii] { --hover-x: calc(-50% + 21px); --hover-y: calc(-50% - 56px); }
    .fab-menu-item--3h[b-wbcpm1ibii] { --hover-x: calc(-50% + 52px); --hover-y: calc(-50% - 30px); }
}

/* iPad and tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .fab-container[b-wbcpm1ibii] {
        bottom: 32px;
    }

    .fab-trigger[b-wbcpm1ibii] {
        width: 64px;
        height: 64px;
    }

    .fab-trigger i[b-wbcpm1ibii] {
        font-size: 28px;
    }

    .fab-menu[b-wbcpm1ibii] {
        bottom: 32px;
    }

    .fab-menu-item[b-wbcpm1ibii] {
        width: 56px;
        height: 56px;
    }

    .fab-menu-item i[b-wbcpm1ibii] {
        font-size: 24px;
    }

    /* Larger radial distances for tablets - 10h to 2h */
    .fab-container--open .fab-menu-item--9h[b-wbcpm1ibii] {
        transform: translate(calc(-50% - 78px), calc(-50% - 45px)) scale(1);
    }
    .fab-container--open .fab-menu-item--11h[b-wbcpm1ibii] {
        transform: translate(calc(-50% - 31px), calc(-50% - 84px)) scale(1);
    }
    .fab-container--open .fab-menu-item--1h[b-wbcpm1ibii] {
        transform: translate(calc(-50% + 31px), calc(-50% - 84px)) scale(1);
    }
    .fab-container--open .fab-menu-item--3h[b-wbcpm1ibii] {
        transform: translate(calc(-50% + 78px), calc(-50% - 45px)) scale(1);
    }

    .fab-menu-item--9h[b-wbcpm1ibii] { --hover-x: calc(-50% - 78px); --hover-y: calc(-50% - 45px); }
    .fab-menu-item--11h[b-wbcpm1ibii] { --hover-x: calc(-50% - 31px); --hover-y: calc(-50% - 84px); }
    .fab-menu-item--1h[b-wbcpm1ibii] { --hover-x: calc(-50% + 31px); --hover-y: calc(-50% - 84px); }
    .fab-menu-item--3h[b-wbcpm1ibii] { --hover-x: calc(-50% + 78px); --hover-y: calc(-50% - 45px); }
}
/* /Components/Layout/TopNavBar.razor.rz.scp.css */
.atkv-top-nav[b-skrsnesfa9] {
    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-skrsnesfa9] {
    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-skrsnesfa9] {
    height: 36px;
    width: auto;
}

.atkv-top-nav-actions[b-skrsnesfa9] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.atkv-top-nav-icon[b-skrsnesfa9] {
    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-skrsnesfa9] {
    background: rgba(255, 255, 255, 0.1);
}

.atkv-top-nav-icon:focus-visible[b-skrsnesfa9] {
    outline: 2px solid white;
    outline-offset: 2px;
}

.atkv-notification-badge[b-skrsnesfa9] {
    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-skrsnesfa9] {
        height: 56px;
    }

    .atkv-top-nav-container[b-skrsnesfa9] {
        padding: 0 16px;
    }

    .atkv-top-nav-logo img[b-skrsnesfa9] {
        height: 32px;
    }

    .atkv-top-nav-icon[b-skrsnesfa9] {
        font-size: 20px;
        padding: 6px;
    }
}
/* /Components/News/ArticleCard.razor.rz.scp.css */
/* ArticleCard - Figma news card design */

.article-card[b-4atemmo5ar] {
    background: #f9fafb;
    border: 2px solid #e1e0e1;
    border-radius: 20px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.article-card:hover[b-4atemmo5ar] {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: #2a63af;
}

.article-card.featured[b-4atemmo5ar] {
    grid-column: span 2;
}

/* Card image */
.article-image-container[b-4atemmo5ar] {
    position: relative;
    width: 100%;
    height: 152px;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 16px;
}

.featured .article-image-container[b-4atemmo5ar] {
    height: 220px;
}

.article-image[b-4atemmo5ar] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* Featured badge overlay */
.featured-badge[b-4atemmo5ar] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #fdb913;
    color: black;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Card content area */
.article-content[b-4atemmo5ar] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Category badge */
.article-category[b-4atemmo5ar] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
    width: fit-content;
}

/* Category colour variants */
.category-community[b-4atemmo5ar] {
    background: #e8f5e9;
    color: #388e3c;
}

.category-events[b-4atemmo5ar] {
    background: #f3e5f5;
    color: #7b1fa2;
}

.category-post-matriculation[b-4atemmo5ar] {
    background: #e3f2fd;
    color: #1976d2;
}

.category-corporate-news[b-4atemmo5ar] {
    background: #fff3e0;
    color: #f57c00;
}

.category-resorts[b-4atemmo5ar] {
    background: #e0f7fa;
    color: #00838f;
}

.category-resortupdates[b-4atemmo5ar] {
    background: #2a63af;
    color: white;
}

.category-specialoffers[b-4atemmo5ar] {
    background: #fff3e0;
    color: #f57c00;
}

.category-membershipnews[b-4atemmo5ar] {
    background: #e8f5e9;
    color: #388e3c;
}

.category-tjiengrewards[b-4atemmo5ar] {
    background: #fdb913;
    color: black;
}

/* Afrikaans category colour variants */
.category-gemeenskap[b-4atemmo5ar] {
    background: #e8f5e9;
    color: #388e3c;
}

.category-geleenthede[b-4atemmo5ar] {
    background: #f3e5f5;
    color: #7b1fa2;
}

.category-namatrikulasie[b-4atemmo5ar] {
    background: #e3f2fd;
    color: #1976d2;
}

.category-korporatiewe-nuus[b-4atemmo5ar] {
    background: #fff3e0;
    color: #f57c00;
}

.category-oorde[b-4atemmo5ar] {
    background: #e0f7fa;
    color: #00838f;
}

/* Card title */
.article-title[b-4atemmo5ar] {
    font-size: 20px;
    font-weight: 700;
    color: black;
    margin: 0 0 12px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured .article-title[b-4atemmo5ar] {
    font-size: 24px;
}

/* Card summary text */
.article-summary[b-4atemmo5ar] {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card date row */
.article-meta[b-4atemmo5ar] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    flex-wrap: wrap;
}

.article-date[b-4atemmo5ar] {
    font-size: 20px;
    font-weight: 500;
    color: black;
}

.article-author[b-4atemmo5ar] {
    color: #999;
    font-size: 12px;
}

.article-author[b-4atemmo5ar]::before {
    content: "by ";
}

/* Mobile responsive */
@media (max-width: 768px) {
    .article-card.featured[b-4atemmo5ar] {
        grid-column: span 1;
    }

    .featured .article-image-container[b-4atemmo5ar] {
        height: 152px;
    }

    .featured .article-title[b-4atemmo5ar] {
        font-size: 20px;
    }

    .article-date[b-4atemmo5ar] {
        font-size: 16px;
    }
}
/* /Components/NPO/KeyAreaModal.razor.rz.scp.css */
/* KeyAreaModal - matches docs/ui-redesign/npo-projects-v3.html (.v3-modal-*).
 * Desktop: centred dialog, max width 520px, max-height 85vh, radius 20px.
 * Mobile (<=640px): anchored just below the top nav banner (overlay padding
 * 72px 12px 12px), radius 20px, max-height calc(100vh - 96px).
 * The body scroll-lock (body[data-npo-modal='open']) lives in a global
 * stylesheet - a scoped selector cannot target <body>.
 */

.v3-modal-overlay[b-4th7b5vw45] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.v3-modal[b-4th7b5vw45] {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    width: min(520px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    position: relative;
}

.v3-modal-close[b-4th7b5vw45] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v3-modal-close:hover[b-4th7b5vw45] {
    background: rgba(0, 0, 0, .75);
}

.v3-modal-close:focus-visible[b-4th7b5vw45] {
    outline: 3px solid #fdb913;
    outline-offset: 2px;
}

.v3-modal-image[b-4th7b5vw45] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.v3-modal-body[b-4th7b5vw45] {
    padding: 24px;
    overflow-y: auto;
}

.v3-modal-body h2[b-4th7b5vw45] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #1a1a1a;
    margin: 0 0 12px;
}

.v3-modal-body p[b-4th7b5vw45] {
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    line-height: 1.6;
    color: #444;
    margin: 0 0 20px;
}

.v3-modal-cta[b-4th7b5vw45] {
    display: inline-block;
    background: #2a63af;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    padding: 12px 24px;
    border-radius: 999px;
    text-decoration: none;
}

.v3-modal-cta:hover[b-4th7b5vw45] {
    background: #1d4a87;
    color: #fff;
}

/* Mobile: sheet anchored just below the top nav banner. */
@media (max-width: 640px) {
    .v3-modal-overlay[b-4th7b5vw45] {
        padding: 72px 12px 12px;
        align-items: flex-start;
    }

    .v3-modal[b-4th7b5vw45] {
        width: 100%;
        border-radius: 20px;
        max-height: calc(100vh - 96px);
    }

    .v3-modal-image[b-4th7b5vw45] {
        height: 160px;
    }
}
/* /Components/OfflineIndicator.razor.rz.scp.css */
.offline-indicator[b-xtavb2qse6] {
    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-xtavb2qse6] {
    transform: translateY(0);
}

.offline-indicator.online[b-xtavb2qse6] {
    background: #44ff44;
    color: #333;
}

.offline-indicator.online[b-xtavb2qse6]::before {
    content: "✓ ";
    margin-right: 5px;
}

.offline-content[b-xtavb2qse6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
}

.offline-content i[b-xtavb2qse6] {
    font-size: 18px;
}

.pending-badge[b-xtavb2qse6] {
    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-xtavb2qse6] {
        font-size: 13px;
        padding: 10px;
    }

    .offline-content[b-xtavb2qse6] {
        gap: 8px;
    }

    .offline-content i[b-xtavb2qse6] {
        font-size: 16px;
    }
}
/* /Components/Profile/ContentPreferencesModal.razor.rz.scp.css */
/* Shared modal shell — mirrors MembershipPaymentModal for visual consistency. */

.modal-backdrop[b-tiqom2duho] {
    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-tiqom2duho 0.25s ease-out;
    padding: 1rem;
}

.modal-backdrop.closing[b-tiqom2duho] {
    animation: fadeOut-b-tiqom2duho 0.25s ease-out;
}

.modal-content[b-tiqom2duho] {
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-tiqom2duho 0.25s ease-out;
    display: flex;
    flex-direction: column;
}

.modal-content.closing[b-tiqom2duho] {
    animation: slideDown-b-tiqom2duho 0.25s ease-out;
}

.modal-header[b-tiqom2duho] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-tiqom2duho] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-close-btn[b-tiqom2duho] {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 1rem;
    transition: background 0.15s ease;
}

.modal-close-btn:hover[b-tiqom2duho] {
    background: #f0f0f0;
    color: #333;
}

.modal-body[b-tiqom2duho] {
    padding: 1rem 1.5rem 1.5rem;
}

.modal-subtitle[b-tiqom2duho] {
    font-size: 0.875rem;
    color: #666;
    margin: 0 0 1.25rem 0;
    line-height: 1.5;
}

/* Preference list — same toggle-list pattern as the original LocationPreference / ContentPreference pages */
.pref-list[b-tiqom2duho] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pref-item[b-tiqom2duho] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: inherit;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.pref-item:hover[b-tiqom2duho] {
    border-color: #b0b0b0;
}

.pref-item.selected[b-tiqom2duho] {
    border-color: #2a63af;
    background: rgba(42, 99, 175, 0.04);
}

.pref-item:focus-visible[b-tiqom2duho] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.pref-item-text[b-tiqom2duho] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #000;
}

.pref-switch[b-tiqom2duho] {
    width: 44px;
    height: 24px;
    background: #e5e7eb;
    border-radius: 12px;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.pref-switch.active[b-tiqom2duho] {
    background: #2a63af;
}

.pref-knob[b-tiqom2duho] {
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pref-switch.active .pref-knob[b-tiqom2duho] {
    transform: translateX(20px);
}

.error-banner[b-tiqom2duho] {
    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;
}

.modal-footer[b-tiqom2duho] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
}

.modal-footer[b-tiqom2duho]  button {
    flex: 1;
}

@keyframes fadeIn-b-tiqom2duho  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut-b-tiqom2duho { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideUp-b-tiqom2duho   { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown-b-tiqom2duho { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: 0; } }
/* /Components/Profile/LocationPreferencesModal.razor.rz.scp.css */
/* Shared modal shell — mirrors MembershipPaymentModal for visual consistency. */

.modal-backdrop[b-qk2zi9x04n] {
    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-qk2zi9x04n 0.25s ease-out;
    padding: 1rem;
}

.modal-backdrop.closing[b-qk2zi9x04n] {
    animation: fadeOut-b-qk2zi9x04n 0.25s ease-out;
}

.modal-content[b-qk2zi9x04n] {
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-qk2zi9x04n 0.25s ease-out;
    display: flex;
    flex-direction: column;
}

.modal-content.closing[b-qk2zi9x04n] {
    animation: slideDown-b-qk2zi9x04n 0.25s ease-out;
}

.modal-header[b-qk2zi9x04n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-qk2zi9x04n] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-close-btn[b-qk2zi9x04n] {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 1rem;
    transition: background 0.15s ease;
}

.modal-close-btn:hover[b-qk2zi9x04n] {
    background: #f0f0f0;
    color: #333;
}

.modal-body[b-qk2zi9x04n] {
    padding: 1rem 1.5rem 1.5rem;
}

.modal-subtitle[b-qk2zi9x04n] {
    font-size: 0.875rem;
    color: #666;
    margin: 0 0 1.25rem 0;
    line-height: 1.5;
}

/* Preference list — same toggle-list pattern as the original LocationPreference / ContentPreference pages */
.pref-list[b-qk2zi9x04n] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pref-item[b-qk2zi9x04n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: inherit;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.pref-item:hover[b-qk2zi9x04n] {
    border-color: #b0b0b0;
}

.pref-item.selected[b-qk2zi9x04n] {
    border-color: #2a63af;
    background: rgba(42, 99, 175, 0.04);
}

.pref-item:focus-visible[b-qk2zi9x04n] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.pref-item-text[b-qk2zi9x04n] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #000;
}

.pref-switch[b-qk2zi9x04n] {
    width: 44px;
    height: 24px;
    background: #e5e7eb;
    border-radius: 12px;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.pref-switch.active[b-qk2zi9x04n] {
    background: #2a63af;
}

.pref-knob[b-qk2zi9x04n] {
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pref-switch.active .pref-knob[b-qk2zi9x04n] {
    transform: translateX(20px);
}

.error-banner[b-qk2zi9x04n] {
    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;
}

.modal-footer[b-qk2zi9x04n] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
}

.modal-footer[b-qk2zi9x04n]  button {
    flex: 1;
}

@keyframes fadeIn-b-qk2zi9x04n  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut-b-qk2zi9x04n { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideUp-b-qk2zi9x04n   { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown-b-qk2zi9x04n { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: 0; } }
/* /Components/Profile/MembershipPaymentModal.razor.rz.scp.css */
.modal-backdrop[b-3britatoh5] {
    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-3britatoh5 0.25s ease-out;
    padding: 1rem;
}

.modal-backdrop.closing[b-3britatoh5] {
    animation: fadeOut-b-3britatoh5 0.25s ease-out;
}

.modal-content[b-3britatoh5] {
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-3britatoh5 0.25s ease-out;
}

.modal-content.closing[b-3britatoh5] {
    animation: slideDown-b-3britatoh5 0.25s ease-out;
}

.modal-header[b-3britatoh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-3britatoh5] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-body[b-3britatoh5] {
    padding: 1.5rem;
}

/* Member Info Card */
.member-info-card[b-3britatoh5] {
    background: linear-gradient(135deg, #2a63af 0%, #1a4a8f 100%);
    color: white;
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.member-info-label[b-3britatoh5] {
    font-size: 0.75rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.member-info-name[b-3britatoh5] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.125rem;
}

.member-info-number[b-3britatoh5] {
    font-size: 0.875rem;
    opacity: 0.85;
    font-family: 'Courier New', monospace;
}

/* Fee Section */
.fee-section[b-3britatoh5] {
    margin-bottom: 1.5rem;
}

.section-label[b-3britatoh5] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.75rem;
}

.fee-display[b-3britatoh5] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 1rem;
    background: #f9fafb;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
}

.fee-amount[b-3britatoh5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #333;
}

.fee-amount .currency-symbol[b-3britatoh5] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #666;
}

.fee-period[b-3britatoh5] {
    font-size: 0.875rem;
    color: #999;
}

/* Payment Info */
.payment-info[b-3britatoh5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f0f7ff;
    border-radius: 12px;
}

.info-item[b-3britatoh5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #555;
}

.info-item i[b-3britatoh5] {
    font-size: 1rem;
    color: #2a63af;
    flex-shrink: 0;
}

/* Invoice Description (below fee display) */
.invoice-desc[b-3britatoh5] {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.5rem;
}

/* Invoice Selection List */
.invoice-select-list[b-3britatoh5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.invoice-select-item[b-3britatoh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.invoice-select-item:hover[b-3britatoh5] {
    border-color: #b0b0b0;
}

.invoice-select-item.selected[b-3britatoh5] {
    border-color: #2a63af;
    background: rgba(42, 99, 175, 0.04);
}

.invoice-select-item .invoice-check[b-3britatoh5] {
    font-size: 1.125rem;
    color: #b0b0b0;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.invoice-select-item.selected .invoice-check[b-3britatoh5] {
    color: #2a63af;
}

.invoice-select-item .invoice-info[b-3britatoh5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.invoice-total-row[b-3britatoh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem 0;
    margin-top: 0.25rem;
    border-top: 1px solid #e5e5e5;
}

.invoice-total-label[b-3britatoh5] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
}

.invoice-total-amount[b-3britatoh5] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2a63af;
}

.invoice-select-item .invoice-description[b-3britatoh5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
}

.invoice-select-item .invoice-number[b-3britatoh5] {
    font-size: 0.75rem;
    color: #999;
}

.invoice-select-item .invoice-amount[b-3britatoh5] {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}

/* No Invoices State */
.no-invoices[b-3britatoh5] {
    text-align: center;
    padding: 2rem 1rem;
    color: #999;
}

.no-invoices i[b-3britatoh5] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
}

.no-invoices p[b-3britatoh5] {
    font-size: 0.875rem;
    margin: 0;
}

/* Error Banner */
.error-banner[b-3britatoh5] {
    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;
}

/* Modal Footer */
.modal-footer[b-3britatoh5] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
}

.modal-footer :deep(button)[b-3britatoh5] {
    flex: 1;
}

/* Success View */
.success-view[b-3britatoh5] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.success-icon[b-3britatoh5] {
    margin-bottom: 1.5rem;
}

.success-icon i[b-3britatoh5] {
    font-size: 4rem;
    color: #2a63af;
}

.success-title[b-3britatoh5] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.success-message[b-3britatoh5] {
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.redirect-actions[b-3britatoh5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Error View */
.error-view[b-3britatoh5] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.error-icon[b-3britatoh5] {
    margin-bottom: 1.5rem;
}

.error-icon i[b-3britatoh5] {
    font-size: 4rem;
    color: #e74c3c;
}

.error-title[b-3britatoh5] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.error-message[b-3britatoh5] {
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.error-actions[b-3britatoh5] {
    display: flex;
    gap: 1rem;
}

.error-actions :deep(button)[b-3britatoh5] {
    flex: 1;
}

/* Animations */
@keyframes fadeIn-b-3britatoh5 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut-b-3britatoh5 {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideUp-b-3britatoh5 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown-b-3britatoh5 {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modal-content[b-3britatoh5] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        animation: slideUpMobile-b-3britatoh5 0.25s ease-out;
    }

    .modal-content.closing[b-3britatoh5] {
        animation: slideDownMobile-b-3britatoh5 0.25s ease-out;
    }

    @keyframes slideUpMobile-b-3britatoh5 {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    @keyframes slideDownMobile-b-3britatoh5 {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }

    .modal-footer[b-3britatoh5] {
        flex-direction: column;
    }

    .modal-footer :deep(button)[b-3britatoh5] {
        width: 100%;
    }

    .error-actions[b-3britatoh5] {
        flex-direction: column;
    }
}

/* Pending-payment state
 *
 * When ?payment=success brings the member back from Sticitt but the
 * webhook has not yet confirmed the local PaymentRequestDetails as Paid,
 * the invoice row shows dimmed with a Pending badge and the checkbox is
 * rendered non-interactive. The row is never selectable while pending
 * (ToggleInvoice guards the click path too).
 */
.invoice-select-item.pending[b-3britatoh5] {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--color-neutral-50, #f7f7f8);
}

.invoice-select-item.pending:hover[b-3britatoh5] {
    background: var(--color-neutral-50, #f7f7f8);
}

.invoice-select-item.pending .invoice-check[b-3britatoh5] {
    color: var(--color-neutral-400, #a0a0a8);
}

.invoice-status-badge[b-3britatoh5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    width: fit-content;
}

.invoice-status-badge.pending[b-3britatoh5] {
    background: var(--color-warning-bg, #fff4d6);
    color: var(--color-warning-fg, #8a5a00);
}

.fee-display.pending[b-3britatoh5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    opacity: 0.75;
}

/* /Components/PWA/InstallPrompt.razor.rz.scp.css */
.install-prompt[b-ax9vrtqra3] {
    position: fixed;
    bottom: 80px; /* Above bottom navigation */
    left: 16px;
    right: 16px;
    z-index: 1000;
    animation: slideUp-b-ax9vrtqra3 0.3s ease-out;
}

.install-prompt-content[b-ax9vrtqra3] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
}

.close-button[b-ax9vrtqra3] {
    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-ax9vrtqra3] {
    color: #000;
}

.close-button:focus-visible[b-ax9vrtqra3] {
    outline: 2px solid #4A7AB8;
    outline-offset: 2px;
    border-radius: 4px;
}

.install-icon[b-ax9vrtqra3] {
    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-ax9vrtqra3] {
    font-size: 28px;
    color: white;
}

.install-title[b-ax9vrtqra3] {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin: 0 0 8px 0;
}

.install-description[b-ax9vrtqra3] {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.install-buttons[b-ax9vrtqra3] {
    display: flex;
    gap: 12px;
}

.install-buttons .btn[b-ax9vrtqra3] {
    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-ax9vrtqra3] {
    background: #000;
    color: white;
}

.install-buttons .btn-primary:hover[b-ax9vrtqra3] {
    background: #2A2A2A;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.install-buttons .btn-secondary[b-ax9vrtqra3] {
    background: white;
    color: #000;
    border: 1px solid #E0E0E0;
}

.install-buttons .btn-secondary:hover[b-ax9vrtqra3] {
    background: #F5F5F5;
}

.install-buttons .btn:focus-visible[b-ax9vrtqra3] {
    outline: 2px solid #4A7AB8;
    outline-offset: 2px;
}

@keyframes slideUp-b-ax9vrtqra3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tablet and Desktop */
@media (min-width: 768px) {
    .install-prompt[b-ax9vrtqra3] {
        max-width: 400px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 24px;
    }
}
/* /Components/Resorts/ResortGallery.razor.rz.scp.css */
/* =========================================================================
   ResortGallery - active-highlight hero carousel.
   Theming: inherits --resort-primary / --resort-secondary from the
   ancestor [data-resort] section (CSS custom properties cascade through
   scoped-CSS boundaries).
   ========================================================================= */
.rdg[b-g8ndndbpuw] {
    margin-top: 4px;
}

.rdg__hero[b-g8ndndbpuw] {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--resort-primary, #2a63af), var(--resort-secondary, #1d3f6f));
}

.rdg__hero img[b-g8ndndbpuw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* prev / next arrows */
.rdg__nav[b-g8ndndbpuw] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
}

.rdg__nav:hover[b-g8ndndbpuw] {
    transform: translateY(-50%) scale(1.07);
    background: #fff;
}

.rdg__nav svg[b-g8ndndbpuw] {
    width: 18px;
    height: 18px;
    stroke: var(--resort-primary, #2a63af);
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rdg__nav--prev[b-g8ndndbpuw] { left: 10px; }
.rdg__nav--next[b-g8ndndbpuw] { right: 10px; }

.rdg__counter[b-g8ndndbpuw] {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
}

/* Fixed-height caption box: locked size (title + up to 4 description lines)
   so the layout never grows/shrinks with the amount of text. Resort Admin
   caps the title/description length so text always fits this box. */
.rdg__textbox[b-g8ndndbpuw] {
    text-align: center;
    padding: 14px 10px 4px;
    min-height: 104px;
}

.rdg__title[b-g8ndndbpuw] {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}

.rdg__desc[b-g8ndndbpuw] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--atkv-muted, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Thumbnail strip - swipeable, snap, hidden scrollbar (contained; never
   triggers page-level horizontal scroll). */
.rdg__thumbs[b-g8ndndbpuw] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rdg__thumbs[b-g8ndndbpuw]::-webkit-scrollbar {
    display: none;
}

.rdg__thumb[b-g8ndndbpuw] {
    position: relative;
    flex: 0 0 88px;
    height: 66px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    background: linear-gradient(135deg, var(--resort-primary, #2a63af), var(--resort-secondary, #1d3f6f));
    transition: border-color 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
    padding: 0;
    scroll-snap-align: center;
    opacity: 0.62;
}

.rdg__thumb img[b-g8ndndbpuw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rdg__thumb:hover[b-g8ndndbpuw] {
    opacity: 0.85;
}

.rdg__thumb:active[b-g8ndndbpuw] {
    transform: scale(0.97);
}

.rdg__thumb.is-active[b-g8ndndbpuw] {
    opacity: 1;
    border-color: var(--resort-primary, #2a63af);
    box-shadow: 0 2px 10px rgba(42, 99, 175, 0.32);
    transform: translateY(-1px);
}

@media (min-width: 1024px) {
    .rdg__thumb[b-g8ndndbpuw] { flex: 0 0 104px; height: 72px; }
    .rdg__title[b-g8ndndbpuw] { font-size: 20px; }
    .rdg__desc[b-g8ndndbpuw] { font-size: 14px; }
    .rdg__textbox[b-g8ndndbpuw] { min-height: 112px; }
}
/* /Components/StepUpAuthModal.razor.rz.scp.css */
/*
 * StepUpAuthModal scoped styles
 * Step-up authentication modal for sensitive operations
 *
 * Key design tokens:
 *   Primary blue: #2a63af
 *   Primary hover: #234f8e
 *   Security blue: #1565c0
 *   Error red: #d32f2f
 *   Text dark: #333
 *   Text muted: #666
 *   Border: #e0e0e0
 */

/* -- Slide-in animation --------------------------------------------------- */

@keyframes modalSlideIn-b-17i3scgrrh {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-b-17i3scgrrh {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes spin-b-17i3scgrrh {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* -- Overlay -------------------------------------------------------------- */

.modal-overlay[b-17i3scgrrh] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* -- Modal container ------------------------------------------------------ */

.modal-content[b-17i3scgrrh] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: modalSlideIn-b-17i3scgrrh 0.3s ease-out;
}

/* -- Header --------------------------------------------------------------- */

.modal-header--security[b-17i3scgrrh] {
    background: linear-gradient(135deg, #1565c0, #2a63af);
    color: white;
    padding: 24px;
    text-align: center;
    position: relative;
}

.modal-close[b-17i3scgrrh] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
}

.modal-close:hover[b-17i3scgrrh] {
    background: rgba(255, 255, 255, 0.3);
}

.modal-icon--security[b-17i3scgrrh] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 24px;
}

.modal-title[b-17i3scgrrh] {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px;
}

.modal-subtitle[b-17i3scgrrh] {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
}

/* -- Body ----------------------------------------------------------------- */

.modal-body[b-17i3scgrrh] {
    padding: 24px;
}

/* -- Error banner --------------------------------------------------------- */

.error-banner[b-17i3scgrrh] {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

/* -- Loading state -------------------------------------------------------- */

.stepup-loading[b-17i3scgrrh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 0;
}

.stepup-loading p[b-17i3scgrrh] {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.stepup-spinner[b-17i3scgrrh] {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: #2a63af;
    border-radius: 50%;
    animation: spin-b-17i3scgrrh 0.8s linear infinite;
}

/* -- Biometric mode ------------------------------------------------------- */

.stepup-biometric[b-17i3scgrrh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.stepup-biometric-icon[b-17i3scgrrh] {
    width: 72px;
    height: 72px;
    background: #e3f2fd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #1565c0;
    animation: pulse-b-17i3scgrrh 2s ease-in-out infinite;
}

.stepup-prompt[b-17i3scgrrh] {
    color: #333;
    font-size: 15px;
    text-align: center;
    margin: 0;
}

/* -- Password mode -------------------------------------------------------- */

.stepup-password[b-17i3scgrrh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stepup-input-container[b-17i3scgrrh] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 0 12px;
    height: 48px;
    transition: border-color 0.2s;
}

.stepup-input-container:focus-within[b-17i3scgrrh] {
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.stepup-input-container--error[b-17i3scgrrh] {
    border-color: #d32f2f;
}

.stepup-input-icon[b-17i3scgrrh] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #666;
}

.stepup-input[b-17i3scgrrh] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: inherit;
    background: transparent;
    height: 100%;
}

.stepup-input[b-17i3scgrrh]::placeholder {
    color: #9e9e9e;
}

.stepup-toggle-password[b-17i3scgrrh] {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    font-size: 18px;
}

.stepup-toggle-password:hover[b-17i3scgrrh] {
    color: #2a63af;
}

/* -- Buttons -------------------------------------------------------------- */

.stepup-btn-primary[b-17i3scgrrh] {
    width: 100%;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.stepup-btn-primary:hover:not(:disabled)[b-17i3scgrrh] {
    background: #234f8e;
}

.stepup-btn-primary:disabled[b-17i3scgrrh] {
    background: #b0bec5;
    cursor: not-allowed;
}

.stepup-btn-fallback[b-17i3scgrrh] {
    width: 100%;
    background: transparent;
    color: #2a63af;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.stepup-btn-fallback:hover[b-17i3scgrrh] {
    background: #f5f5f5;
    border-color: #2a63af;
}

/* -- Focus states --------------------------------------------------------- */

.stepup-btn-primary:focus-visible[b-17i3scgrrh],
.stepup-btn-fallback:focus-visible[b-17i3scgrrh] {
    outline: 3px solid #2a63af;
    outline-offset: 2px;
}

/* -- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .modal-content[b-17i3scgrrh],
    .stepup-biometric-icon[b-17i3scgrrh],
    .stepup-spinner[b-17i3scgrrh] {
        animation: none;
    }
    .stepup-btn-primary[b-17i3scgrrh],
    .stepup-btn-fallback[b-17i3scgrrh],
    .stepup-input-container[b-17i3scgrrh],
    .modal-close[b-17i3scgrrh] {
        transition: none;
    }
}
/* /Components/UI/SearchInput.razor.rz.scp.css */
/* Search Bar - matches Figma home-desktop.html .search-bar */
.search-bar[b-q3c08538xs] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Input wrapper with search icon */
.search-input-wrapper[b-q3c08538xs] {
    flex: 1;
    position: relative;
    max-width: 289px;
}

.search-input[b-q3c08538xs] {
    width: 100%;
    padding: 12px 16px 12px 52px;
    border: 1px solid #9ca3af;
    border-radius: 20px;
    background: #f9fafb;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    color: #000;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.search-input:focus[b-q3c08538xs] {
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.search-input[b-q3c08538xs]::placeholder {
    color: #9ca3af;
}

.search-icon[b-q3c08538xs] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    color: #9ca3af;
    pointer-events: none;
}

.search-clear-btn[b-q3c08538xs] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    padding: 4px;
}

.search-clear-btn:hover[b-q3c08538xs] {
    color: #666;
}

/* Circular filter button */
.filter-button[b-q3c08538xs] {
    width: 52px;
    height: 52px;
    border: 1px solid #9ca3af;
    border-radius: 50%;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.filter-button:hover[b-q3c08538xs] {
    background: #e5e7eb;
}

.filter-button svg[b-q3c08538xs] {
    width: 24px;
    height: 24px;
    stroke: #666;
}

/* Tablet */
@media (max-width: 744px) {
    .search-bar[b-q3c08538xs] {
        height: 55px;
    }

    .search-input[b-q3c08538xs] {
        height: 55px;
    }

    .filter-button[b-q3c08538xs] {
        width: 48px;
        height: 48px;
    }
}

/* Mobile */
@media (max-width: 393px) {
    .search-input-wrapper[b-q3c08538xs] {
        max-width: 100%;
    }

    .search-input[b-q3c08538xs] {
        height: 48px;
        font-size: 14px;
    }

    .filter-button[b-q3c08538xs] {
        width: 44px;
        height: 44px;
    }
}
/* /Components/Wallet/AddArmbandModal.razor.rz.scp.css */
/*
 * AddArmbandModal scoped styles
 * Aligned to Figma design: add-armband-modal.html
 *
 * Key design tokens:
 *   Primary blue: #2a63af
 *   Primary hover: #234f8e
 *   Text dark: #333
 *   Text muted: #666
 *   Border: #e0e0e0
 *   Info bg: #e3f2fd
 *   Info text: #1565c0
 */

/* ── Slide-in animation ───────────────────────────────────────────────── */

@keyframes modalSlideIn-b-i3e2xkqo8s {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Overlay ──────────────────────────────────────────────────────────── */

.aam-overlay[b-i3e2xkqo8s] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ── Modal container ──────────────────────────────────────────────────── */

.aam-content[b-i3e2xkqo8s] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: modalSlideIn-b-i3e2xkqo8s 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.aam-header[b-i3e2xkqo8s] {
    background: #2a63af;
    padding: 32px 32px 24px;
    text-align: center;
    position: relative;
}

/* Close button (top-right) */
.aam-close[b-i3e2xkqo8s] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
    padding: 0;
}

.aam-close:hover[b-i3e2xkqo8s] {
    background: rgba(255, 255, 255, 0.35);
}

/* Icon circle in header */
.aam-icon[b-i3e2xkqo8s] {
    width: 64px;
    height: 64px;
    background: white;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a63af;
    font-size: 28px;
}

/* Title and subtitle */
.aam-title[b-i3e2xkqo8s] {
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 4px;
}

.aam-subtitle[b-i3e2xkqo8s] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin: 0;
}

/* ── Body ─────────────────────────────────────────────────────────────── */

/*
    AB#95870: .aam-body must scroll when the modal is taller than the viewport
    (typical on phones in landscape or on the "duplicate link" flow where the
    error banner adds height above the form). Before this fix the parent
    .aam-content set overflow: hidden and .aam-body had no overflow-y, so the
    error banner at the top of the form could be physically off-screen while
    the Link button in the footer was still visible - the member saw the button
    react but no message.
*/
.aam-body[b-i3e2xkqo8s] {
    padding: 32px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* Error banner */
.error-banner[b-i3e2xkqo8s] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #b71c1c;
    font-size: 14px;
    margin-bottom: 16px;
}

.error-banner i[b-i3e2xkqo8s] {
    flex-shrink: 0;
}

/* ── Form elements ────────────────────────────────────────────────────── */

.form-group[b-i3e2xkqo8s] {
    margin-bottom: 20px;
}

.form-label[b-i3e2xkqo8s] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

/* ::deep is required: InputText / InputNumber are child components, so the
   <input> they render does NOT inherit this component's CSS-isolation scope
   attribute. Without ::deep these rules would match nothing and the inputs
   (including the currency field's left padding) would render unstyled. */
[b-i3e2xkqo8s] .form-input {
    width: 100%;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    color: #333;
    background: white;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[b-i3e2xkqo8s] .form-input:focus {
    outline: none;
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.form-hint[b-i3e2xkqo8s] {
    font-size: 12px;
    color: #666;
    margin: 4px 0 0;
}

/* Currency prefix wrapper */
.currency-input-wrapper[b-i3e2xkqo8s] {
    position: relative;
}

.currency-prefix[b-i3e2xkqo8s] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-weight: 500;
    font-size: 16px;
    z-index: 1;
    pointer-events: none;
}

[b-i3e2xkqo8s] .currency-input {
    padding-left: 36px;
}

/* Validation messages (Blazor) */
[b-i3e2xkqo8s] .validation-message {
    font-size: 12px;
    color: #e53935;
    margin-top: 4px;
}

/* ── Daily spend presets ─────────────────────────────────────────────── */

.spend-presets[b-i3e2xkqo8s] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.spend-preset-btn[b-i3e2xkqo8s] {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #d0d7e3;
    background: white;
    color: #2a63af;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
}

.spend-preset-btn:hover[b-i3e2xkqo8s] {
    background: #e8f0fb;
    border-color: #2a63af;
}

.spend-preset-btn.active[b-i3e2xkqo8s] {
    background: #2a63af;
    border-color: #2a63af;
    color: white;
}

/* ── Daily spend preview ─────────────────────────────────────────────── */

.spend-preview-box[b-i3e2xkqo8s] {
    margin-top: 12px;
    background: rgba(42, 99, 175, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
}

.spend-preview-label[b-i3e2xkqo8s] {
    font-size: 11px;
    font-weight: 600;
    color: #2a63af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    opacity: 0.85;
}

.spend-preview-amounts[b-i3e2xkqo8s] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}

.spend-preview-current[b-i3e2xkqo8s] {
    font-size: 18px;
    font-weight: 700;
    color: #2a63af;
}

.spend-preview-limit[b-i3e2xkqo8s] {
    font-size: 13px;
    color: #555;
}

.spend-preview-track[b-i3e2xkqo8s] {
    height: 6px;
    background: rgba(42, 99, 175, 0.2);
    border-radius: 999px;
    overflow: hidden;
}

.spend-preview-bar[b-i3e2xkqo8s] {
    height: 100%;
    background: #2a63af;
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* ── Info box ─────────────────────────────────────────────────────────── */

.info-box[b-i3e2xkqo8s] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #e3f2fd;
    border-radius: 6px;
    margin-bottom: 24px;
}

.info-box-icon[b-i3e2xkqo8s] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: #2a63af;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-box-text[b-i3e2xkqo8s] {
    font-size: 14px;
    color: #1565c0;
    line-height: 1.5;
    margin: 0;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.aam-footer[b-i3e2xkqo8s] {
    display: flex;
    gap: 16px;
    padding: 0 32px 32px;
}

/* Buttons */
.btn[b-i3e2xkqo8s] {
    flex: 1;
    padding: 16px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-cancel[b-i3e2xkqo8s] {
    background: white;
    color: #666;
    border: 1px solid #e0e0e0;
}

.btn-cancel:hover[b-i3e2xkqo8s] {
    background: #f5f5f5;
}

.btn-primary[b-i3e2xkqo8s] {
    background: #2a63af;
    color: white;
}

.btn-primary:hover[b-i3e2xkqo8s] {
    background: #234f8e;
}

.btn-primary:disabled[b-i3e2xkqo8s] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spinner for loading state */
.spinner-sm[b-i3e2xkqo8s] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-i3e2xkqo8s 0.6s linear infinite;
}

@keyframes spin-b-i3e2xkqo8s {
    to {
        transform: rotate(360deg);
    }
}

/* ── Mobile responsive (max-width: 480px) ─────────────────────────────── */

@media (max-width: 480px) {
    .aam-overlay[b-i3e2xkqo8s] {
        align-items: flex-end;
        padding: 0;
    }

    .aam-content[b-i3e2xkqo8s] {
        border-radius: 16px 16px 0 0;
        max-width: 100%;
    }

    .aam-footer[b-i3e2xkqo8s] {
        flex-direction: column-reverse;
    }
}
/* /Components/Wallet/AddPaymentMethodModal.razor.rz.scp.css */
.modal-backdrop[b-qni8hvr10z] {
    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-qni8hvr10z 0.25s ease-out;
    padding: 1rem;
}

.modal-backdrop.closing[b-qni8hvr10z] {
    animation: fadeOut-b-qni8hvr10z 0.25s ease-out;
}

.modal-content[b-qni8hvr10z] {
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-qni8hvr10z 0.25s ease-out;
}

.modal-content.closing[b-qni8hvr10z] {
    animation: slideDown-b-qni8hvr10z 0.25s ease-out;
}

.modal-header[b-qni8hvr10z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-qni8hvr10z] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-body[b-qni8hvr10z] {
    padding: 1.5rem;
}

/* Form Styles */
.form-group[b-qni8hvr10z] {
    margin-bottom: 1.25rem;
}

.form-group label[b-qni8hvr10z] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #666;
    margin-bottom: 0.5rem;
}

.form-input[b-qni8hvr10z],
.form-select[b-qni8hvr10z] {
    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-qni8hvr10z],
.form-select:focus[b-qni8hvr10z] {
    outline: none;
    border-color: #00a651;
}

.form-input.invalid[b-qni8hvr10z] {
    border-color: #e74c3c;
}

.form-row[b-qni8hvr10z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Card Input */
.card-input-wrapper[b-qni8hvr10z] {
    position: relative;
}

.card-type-icon[b-qni8hvr10z] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: #666;
}

/* CVV Input */
.cvv-wrapper[b-qni8hvr10z] {
    position: relative;
}

.cvv-toggle[b-qni8hvr10z] {
    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-qni8hvr10z] {
    color: #333;
}

/* Error Messages */
.error-message[b-qni8hvr10z] {
    color: #e74c3c;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.error-banner[b-qni8hvr10z] {
    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-qni8hvr10z] {
    margin: 1.5rem 0;
}

.checkbox-label[b-qni8hvr10z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-qni8hvr10z] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-label span[b-qni8hvr10z] {
    font-size: 0.875rem;
    color: #333;
}

/* Security Info */
.security-info[b-qni8hvr10z] {
    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-qni8hvr10z] {
    color: #00a651;
}

/* Billing Section */
.billing-section[b-qni8hvr10z] {
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
    margin-top: 1.5rem;
}

.section-toggle[b-qni8hvr10z] {
    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-qni8hvr10z] {
    color: #00a651;
}

.optional-label[b-qni8hvr10z] {
    margin-left: auto;
    margin-right: 0.5rem;
    font-size: 0.8125rem;
    color: #999;
}

.section-toggle i[b-qni8hvr10z] {
    color: #666;
    transition: transform 0.3s ease;
}

.billing-fields[b-qni8hvr10z] {
    animation: expandDown-b-qni8hvr10z 0.3s ease-out;
    padding-top: 0.5rem;
}

/* Modal Footer */
.modal-footer[b-qni8hvr10z] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
}

.modal-footer :deep(button)[b-qni8hvr10z] {
    flex: 1;
}

/* Animations */
@keyframes fadeIn-b-qni8hvr10z {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut-b-qni8hvr10z {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideUp-b-qni8hvr10z {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown-b-qni8hvr10z {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

@keyframes expandDown-b-qni8hvr10z {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modal-content[b-qni8hvr10z] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        animation: slideUpMobile-b-qni8hvr10z 0.25s ease-out;
    }

    .modal-content.closing[b-qni8hvr10z] {
        animation: slideDownMobile-b-qni8hvr10z 0.25s ease-out;
    }

    @keyframes slideUpMobile-b-qni8hvr10z {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    @keyframes slideDownMobile-b-qni8hvr10z {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }

    .form-row[b-qni8hvr10z] {
        grid-template-columns: 1fr;
    }

    .modal-footer[b-qni8hvr10z] {
        flex-direction: column;
    }

    .modal-footer :deep(button)[b-qni8hvr10z] {
        width: 100%;
    }
}
/* /Components/Wallet/ArmbandTransactionHistoryModal.razor.rz.scp.css */
/*
 * ArmbandTransactionHistoryModal scoped styles
 * Aligned to Figma design: transaction-history-modal.html
 *
 * Key design tokens:
 *   Primary blue: #2a63af
 *   Primary hover: #234f8e
 *   Debit red: #e53935
 *   Credit green: #43a047
 *   Text dark: #333
 *   Text muted: #999
 *   Border light: #f0f0f0
 */

/* ── Slide-in animation ───────────────────────────────────────────────── */

@keyframes modalSlideIn-b-fwuuqsie0i {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Overlay ──────────────────────────────────────────────────────────── */

.modal-overlay[b-fwuuqsie0i] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ── Modal container ──────────────────────────────────────────────────── */

.modal-content[b-fwuuqsie0i] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: modalSlideIn-b-fwuuqsie0i 0.3s ease-out;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.modal-header[b-fwuuqsie0i] {
    background: #2a63af;
    padding: 24px 32px;
    position: relative;
    flex-shrink: 0;
}

/* Close button */
.modal-close[b-fwuuqsie0i] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
    padding: 0;
}

.modal-close:hover[b-fwuuqsie0i] {
    background: rgba(255, 255, 255, 0.35);
}

/* Label above title */
.modal-label[b-fwuuqsie0i] {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* Title */
.modal-title[b-fwuuqsie0i] {
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 4px;
}

/* Subtitle */
.modal-subtitle[b-fwuuqsie0i] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin: 0;
}

/* ── Body ─────────────────────────────────────────────────────────────── */

.modal-body[b-fwuuqsie0i] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Custom scrollbar */
.modal-body[b-fwuuqsie0i]::-webkit-scrollbar {
    width: 6px;
}

.modal-body[b-fwuuqsie0i]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.modal-body[b-fwuuqsie0i]::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.modal-body[b-fwuuqsie0i]::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* ── Loading, error, and empty states ─────────────────────────────────── */

.loading-state[b-fwuuqsie0i],
.error-state[b-fwuuqsie0i],
.empty-state[b-fwuuqsie0i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    gap: 16px;
    text-align: center;
    color: #999;
}

.loading-state .spinner[b-fwuuqsie0i] {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #2a63af;
    border-radius: 50%;
    animation: spin-b-fwuuqsie0i 0.6s linear infinite;
}

.error-state i[b-fwuuqsie0i],
.empty-state i[b-fwuuqsie0i] {
    font-size: 32px;
    color: #ccc;
}

.error-state p[b-fwuuqsie0i],
.empty-state p[b-fwuuqsie0i] {
    font-size: 14px;
    margin: 0;
    color: #999;
}

@keyframes spin-b-fwuuqsie0i {
    to {
        transform: rotate(360deg);
    }
}

/* ── Transaction list ─────────────────────────────────────────────────── */

.transaction-list[b-fwuuqsie0i] {
    display: flex;
    flex-direction: column;
}

.transaction-item[b-fwuuqsie0i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.transaction-item:hover[b-fwuuqsie0i] {
    background: #fafafa;
}

.transaction-item:last-child[b-fwuuqsie0i] {
    border-bottom: none;
}

/* Left side: location and date */
.transaction-info[b-fwuuqsie0i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.transaction-location[b-fwuuqsie0i] {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.transaction-date[b-fwuuqsie0i] {
    font-size: 14px;
    color: #999;
}

/* Right side: amount */
.transaction-amount[b-fwuuqsie0i] {
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
}

.transaction-amount--debit[b-fwuuqsie0i] {
    color: #e53935;
}

.transaction-amount--credit[b-fwuuqsie0i] {
    color: #43a047;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.modal-footer[b-fwuuqsie0i] {
    padding: 24px 32px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.btn-download[b-fwuuqsie0i] {
    width: 100%;
    padding: 16px 24px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.btn-download:hover[b-fwuuqsie0i] {
    background: #234f8e;
}

/* ── Mobile responsive (max-width: 480px) ─────────────────────────────── */

@media (max-width: 480px) {
    .modal-overlay[b-fwuuqsie0i] {
        align-items: flex-end;
        padding: 0;
    }

    .modal-content[b-fwuuqsie0i] {
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        max-height: 85vh;
    }
}
/* /Components/Wallet/JoinMembershipModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-7z9y6ovjua] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn-b-7z9y6ovjua 0.2s ease;
}

@keyframes fadeIn-b-7z9y6ovjua {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Content */
.modal-content[b-7z9y6ovjua] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-7z9y6ovjua 0.3s ease;
}

@keyframes slideUp-b-7z9y6ovjua {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-7z9y6ovjua] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #E0E0E0;
}

.modal-header h3[b-7z9y6ovjua] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1A3B47;
}

.modal-close[b-7z9y6ovjua] {
    width: 36px;
    height: 36px;
    border: none;
    background: #F5F5F5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
}

.modal-close:hover[b-7z9y6ovjua] {
    background: #E0E0E0;
    color: #333;
}

.modal-body[b-7z9y6ovjua] {
    padding: 24px;
}

.modal-description[b-7z9y6ovjua] {
    margin: 0 0 24px;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

/* Benefits List */
.benefits-list[b-7z9y6ovjua] {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.benefits-list li[b-7z9y6ovjua] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;
}

.benefits-list li:last-child[b-7z9y6ovjua] {
    border-bottom: none;
}

.benefit-icon[b-7z9y6ovjua] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    color: #F57C00;
    font-size: 16px;
    flex-shrink: 0;
}

.benefit-content[b-7z9y6ovjua] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.benefit-title[b-7z9y6ovjua] {
    font-size: 14px;
    font-weight: 600;
    color: #1A3B47;
}

.benefit-desc[b-7z9y6ovjua] {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* Join Button */
.join-btn[b-7z9y6ovjua] {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #FFA726 0%, #FF9800 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.join-btn:hover:not(:disabled)[b-7z9y6ovjua] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}

.join-btn:active:not(:disabled)[b-7z9y6ovjua] {
    transform: translateY(0);
}

.join-btn:disabled[b-7z9y6ovjua] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Spinner */
.spinner[b-7z9y6ovjua] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-7z9y6ovjua 0.8s linear infinite;
}

@keyframes spin-b-7z9y6ovjua {
    to { transform: rotate(360deg); }
}

/* Error Message */
.error-message[b-7z9y6ovjua] {
    margin-top: 16px;
    padding: 12px 16px;
    background: #FEE2E2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    color: #DC2626;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-message i[b-7z9y6ovjua] {
    font-size: 16px;
}

/* Responsive Design */
@media (max-width: 480px) {
    .modal-content[b-7z9y6ovjua] {
        max-width: 100%;
        margin: 0 16px;
        border-radius: 16px;
    }

    .modal-header[b-7z9y6ovjua] {
        padding: 16px 20px;
    }

    .modal-body[b-7z9y6ovjua] {
        padding: 20px;
    }

    .benefit-icon[b-7z9y6ovjua] {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .benefit-title[b-7z9y6ovjua] {
        font-size: 13px;
    }

    .benefit-desc[b-7z9y6ovjua] {
        font-size: 11px;
    }

    .join-btn[b-7z9y6ovjua] {
        padding: 14px 20px;
        font-size: 15px;
    }
}
/* /Components/Wallet/LinkSticittWalletCta.razor.rz.scp.css */
/* The single canonical "Link Sticitt wallet" button. White pill on the blue wallet hero,
   identical on the home card and the wallet page because there is only one component. */
.link-sticitt-cta[b-id75y98t47] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    min-height: 46px;
    margin-top: 6px;
    padding: 0 18px;
    background: #fff;
    color: var(--atkv-blue, #2a63af);
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease, transform 0.1s ease;
}

.link-sticitt-cta:hover[b-id75y98t47] {
    background: #f3f6fb;
}

.link-sticitt-cta:active[b-id75y98t47] {
    transform: translateY(1px);
}

.link-sticitt-cta:disabled[b-id75y98t47] {
    opacity: 0.75;
    cursor: default;
}

.link-sticitt-cta i[b-id75y98t47] {
    font-size: 16px;
}

.link-sticitt-cta__hint[b-id75y98t47] {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
}

.link-sticitt-cta__spinner[b-id75y98t47] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(42, 99, 175, 0.3);
    border-top-color: var(--atkv-blue, #2a63af);
    border-radius: 50%;
    animation: link-sticitt-spin-b-id75y98t47 0.7s linear infinite;
}

@keyframes link-sticitt-spin-b-id75y98t47 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Wallet/LinkWalletPrompt.razor.rz.scp.css */
/* Link Wallet Prompt - Displayed when Sticitt wallet is not linked */
.link-wallet-prompt[b-o0f41100x2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 167, 38, 0.15) 0%, rgba(255, 152, 0, 0.1) 100%);
    border: 1px dashed #FFA726;
    border-radius: 12px;
    margin-top: 16px;
}

.prompt-icon[b-o0f41100x2] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFA726 0%, #FF9800 100%);
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

.prompt-content[b-o0f41100x2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.prompt-text[b-o0f41100x2] {
    font-size: 14px;
    color: #1A3B47;
    line-height: 1.4;
}

.link-wallet-btn[b-o0f41100x2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #FFA726 0%, #FF9800 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
}

.link-wallet-btn:hover[b-o0f41100x2] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.link-wallet-btn:active[b-o0f41100x2] {
    transform: translateY(0);
}

.link-wallet-btn i[b-o0f41100x2] {
    font-size: 16px;
}

/* Modal Overlay */
.modal-overlay[b-o0f41100x2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn-b-o0f41100x2 0.2s ease;
}

@keyframes fadeIn-b-o0f41100x2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Content */
.modal-content[b-o0f41100x2] {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-o0f41100x2 0.3s ease;
    overflow: hidden;
}

@keyframes slideUp-b-o0f41100x2 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-o0f41100x2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #E0E0E0;
}

.modal-header h3[b-o0f41100x2] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1A3B47;
}

.modal-close[b-o0f41100x2] {
    width: 36px;
    height: 36px;
    border: none;
    background: #F5F5F5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
}

.modal-close:hover[b-o0f41100x2] {
    background: #E0E0E0;
    color: #333;
}

.modal-body[b-o0f41100x2] {
    padding: 24px;
}

.modal-description[b-o0f41100x2] {
    margin: 0 0 24px;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

/* Link Options */
.link-options[b-o0f41100x2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.link-option[b-o0f41100x2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #F8F9FA;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.link-option:hover[b-o0f41100x2] {
    background: #EEF7FF;
    border-color: #2A63AF;
}

.link-option:active[b-o0f41100x2] {
    transform: scale(0.98);
}

.option-icon[b-o0f41100x2] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.option-icon.existing[b-o0f41100x2] {
    background: linear-gradient(135deg, #2A63AF 0%, #1E4A8C 100%);
    color: white;
}

.option-icon.new-account[b-o0f41100x2] {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: white;
}

.option-content[b-o0f41100x2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.option-title[b-o0f41100x2] {
    font-size: 16px;
    font-weight: 600;
    color: #1A3B47;
}

.option-description[b-o0f41100x2] {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.option-arrow[b-o0f41100x2] {
    font-size: 18px;
    color: #999;
    transition: transform 0.2s ease;
}

.link-option:hover .option-arrow[b-o0f41100x2] {
    transform: translateX(4px);
    color: #2A63AF;
}

/* Responsive Design */
@media (max-width: 480px) {
    .link-wallet-prompt[b-o0f41100x2] {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .prompt-content[b-o0f41100x2] {
        align-items: center;
    }

    .modal-content[b-o0f41100x2] {
        max-width: 100%;
        margin: 0 16px;
        border-radius: 16px;
    }

    .modal-header[b-o0f41100x2] {
        padding: 16px 20px;
    }

    .modal-body[b-o0f41100x2] {
        padding: 20px;
    }

    .link-option[b-o0f41100x2] {
        padding: 14px;
    }

    .option-icon[b-o0f41100x2] {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
}
/* /Components/Wallet/QrPayConfirmModal.razor.rz.scp.css */
.modal-backdrop[b-8ymsmltkv8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-8ymsmltkv8] {
    background: white;
    border-radius: 20px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: qrpay-slideup-b-8ymsmltkv8 0.25s ease-out;
}

.modal-header[b-8ymsmltkv8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-8ymsmltkv8] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-close[b-8ymsmltkv8] {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: #666;
    font-size: 1.1rem;
}

.modal-body[b-8ymsmltkv8] {
    padding: 1.25rem 1.5rem;
}

.modal-footer[b-8ymsmltkv8] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem 1.25rem;
    border-top: 1px solid #f0f0f0;
}

.modal-footer .btn[b-8ymsmltkv8] {
    flex: 1;
}

.qrpay-amount[b-8ymsmltkv8] {
    background: linear-gradient(135deg, #2a63af 0%, #4b83cf 100%);
    color: white;
    padding: 1.25rem;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 1.25rem;
}

.qrpay-amount-label[b-8ymsmltkv8] {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 0.25rem;
}

.qrpay-amount-value[b-8ymsmltkv8] {
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.qrpay-source[b-8ymsmltkv8] {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    opacity: 0.85;
}

.qrpay-detail-list[b-8ymsmltkv8] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
}

.qrpay-detail-list dt[b-8ymsmltkv8] {
    color: #666;
    font-size: 0.9rem;
}

.qrpay-detail-list dd[b-8ymsmltkv8] {
    margin: 0;
    color: #222;
    font-size: 0.95rem;
    word-break: break-word;
}

.qrpay-error[b-8ymsmltkv8] {
    background: #fff2f2;
    border: 1px solid #f5c2c7;
    color: #842029;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

.spinner[b-8ymsmltkv8] {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: white;
    border-radius: 50%;
    animation: qrpay-spin-b-8ymsmltkv8 0.7s linear infinite;
    margin-right: 0.4rem;
    vertical-align: -2px;
}

@keyframes qrpay-slideup-b-8ymsmltkv8 {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes qrpay-spin-b-8ymsmltkv8 {
    to { transform: rotate(360deg); }
}
/* /Components/Wallet/TopUpModal.razor.rz.scp.css */
.modal-backdrop[b-xk823u0a7f] {
    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-xk823u0a7f 0.25s ease-out;
    padding: 1rem;
}

.modal-backdrop.closing[b-xk823u0a7f] {
    animation: fadeOut-b-xk823u0a7f 0.25s ease-out;
}

.modal-content[b-xk823u0a7f] {
    background: white;
    border-radius: 20px;
    max-width: 550px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-xk823u0a7f 0.25s ease-out;
}

.modal-content.closing[b-xk823u0a7f] {
    animation: slideDown-b-xk823u0a7f 0.25s ease-out;
}

.modal-header[b-xk823u0a7f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-xk823u0a7f] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-body[b-xk823u0a7f] {
    padding: 1.5rem;
}

/* Current Balance Card */
.current-balance-card[b-xk823u0a7f] {
    background: linear-gradient(135deg, #00a651 0%, #00d168 100%);
    color: white;
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.balance-label[b-xk823u0a7f] {
    font-size: 0.75rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.balance-value[b-xk823u0a7f] {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.wallet-type[b-xk823u0a7f] {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Amount Section */
.amount-section[b-xk823u0a7f] {
    margin-bottom: 2rem;
}

.section-label[b-xk823u0a7f] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 1rem;
}

.preset-amounts[b-xk823u0a7f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.preset-button[b-xk823u0a7f] {
    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-xk823u0a7f] {
    border-color: #00a651;
    background: #f9fff9;
}

.preset-button.selected[b-xk823u0a7f] {
    background: #00a651;
    border-color: #00a651;
    color: white;
}

.custom-amount label[b-xk823u0a7f] {
    display: block;
    font-size: 0.8125rem;
    color: #999;
    margin-bottom: 0.5rem;
}

.amount-input-wrapper[b-xk823u0a7f] {
    display: flex;
    align-items: center;
    position: relative;
}

.currency-prefix[b-xk823u0a7f] {
    position: absolute;
    left: 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #666;
}

.amount-input[b-xk823u0a7f] {
    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-xk823u0a7f] {
    outline: none;
    border-color: #00a651;
}

.amount-hint[b-xk823u0a7f] {
    font-size: 0.75rem;
    color: #999;
    margin-top: 0.5rem;
}

.error-message[b-xk823u0a7f] {
    color: #e74c3c;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* Payment Section */
.payment-section[b-xk823u0a7f] {
    margin-bottom: 1.5rem;
}

.saved-cards[b-xk823u0a7f] {
    margin-bottom: 0.75rem;
}

.payment-option[b-xk823u0a7f] {
    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-xk823u0a7f] {
    border-color: #00a651;
    background: #f9fff9;
}

.payment-option.selected[b-xk823u0a7f] {
    border-color: #00a651;
    background: #f0fff5;
}

.payment-option input[type="radio"][b-xk823u0a7f] {
    margin: 0;
}

.payment-option i[b-xk823u0a7f] {
    font-size: 1.25rem;
    color: #666;
}

.card-details[b-xk823u0a7f] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-number[b-xk823u0a7f] {
    font-weight: 500;
    color: #333;
}

.card-expiry[b-xk823u0a7f] {
    font-size: 0.875rem;
    color: #999;
}

/* Terms Section */
.terms-section[b-xk823u0a7f] {
    margin-bottom: 1.5rem;
}

.checkbox-label[b-xk823u0a7f] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-xk823u0a7f] {
    margin-top: 0.125rem;
}

.checkbox-label span[b-xk823u0a7f] {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.4;
}

.checkbox-label a[b-xk823u0a7f] {
    color: #00a651;
    text-decoration: none;
}

.checkbox-label a:hover[b-xk823u0a7f] {
    text-decoration: underline;
}

/* Error Banner */
.error-banner[b-xk823u0a7f] {
    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-xk823u0a7f] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.success-icon[b-xk823u0a7f] {
    margin-bottom: 1.5rem;
}

.success-icon i[b-xk823u0a7f] {
    font-size: 4rem;
    color: #00a651;
}

.success-title[b-xk823u0a7f] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.success-amount[b-xk823u0a7f] {
    font-size: 2rem;
    font-weight: bold;
    color: #00a651;
    margin-bottom: 0.5rem;
}

.success-message[b-xk823u0a7f] {
    color: #666;
    margin-bottom: 1.5rem;
}

.new-balance[b-xk823u0a7f] {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-balance .balance-label[b-xk823u0a7f] {
    color: #666;
    text-transform: none;
    opacity: 1;
}

.new-balance .balance-value[b-xk823u0a7f] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.transaction-reference[b-xk823u0a7f] {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 2rem;
}

.transaction-reference .mono[b-xk823u0a7f] {
    font-family: 'Monaco', 'Courier New', monospace;
    background: #f5f5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.success-actions[b-xk823u0a7f] {
    display: flex;
    gap: 1rem;
}

.success-actions :deep(button)[b-xk823u0a7f] {
    flex: 1;
}

/* Modal Footer */
.modal-footer[b-xk823u0a7f] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
}

.modal-footer :deep(button)[b-xk823u0a7f] {
    flex: 1;
}

/* Animations */
@keyframes fadeIn-b-xk823u0a7f {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut-b-xk823u0a7f {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideUp-b-xk823u0a7f {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown-b-xk823u0a7f {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modal-content[b-xk823u0a7f] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        animation: slideUpMobile-b-xk823u0a7f 0.25s ease-out;
    }

    .modal-content.closing[b-xk823u0a7f] {
        animation: slideDownMobile-b-xk823u0a7f 0.25s ease-out;
    }

    @keyframes slideUpMobile-b-xk823u0a7f {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    @keyframes slideDownMobile-b-xk823u0a7f {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }

    .preset-amounts[b-xk823u0a7f] {
        grid-template-columns: repeat(3, 1fr);
    }

    .modal-footer[b-xk823u0a7f] {
        flex-direction: column;
    }

    .modal-footer :deep(button)[b-xk823u0a7f] {
        width: 100%;
    }

    .success-actions[b-xk823u0a7f] {
        flex-direction: column;
    }
}
/* /Components/Wallet/TransactionDetailModal.razor.rz.scp.css */
.modal-backdrop[b-91nojult9d] {
    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-91nojult9d 0.25s ease-out;
    padding: 1rem;
}

.modal-backdrop.closing[b-91nojult9d] {
    animation: fadeOut-b-91nojult9d 0.25s ease-out;
}

.modal-content[b-91nojult9d] {
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-91nojult9d 0.25s ease-out;
}

.modal-content.closing[b-91nojult9d] {
    animation: slideDown-b-91nojult9d 0.25s ease-out;
}

.modal-header[b-91nojult9d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-91nojult9d] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-body[b-91nojult9d] {
    padding: 1.5rem;
}

/* Transaction Status Badge */
.transaction-status-badge[b-91nojult9d] {
    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-91nojult9d] {
    background: #e8f5e9;
    color: #2e7d32;
}

.transaction-status-badge.pending[b-91nojult9d] {
    background: #fff3e0;
    color: #f57c00;
}

.transaction-status-badge.failed[b-91nojult9d] {
    background: #ffebee;
    color: #c62828;
}

/* Detail Sections */
.detail-section[b-91nojult9d] {
    margin-bottom: 2rem;
}

.detail-section:last-child[b-91nojult9d] {
    margin-bottom: 0;
}

.section-title[b-91nojult9d] {
    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-91nojult9d] {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.detail-amount.positive[b-91nojult9d] {
    color: #00a651;
}

.detail-amount.negative[b-91nojult9d] {
    color: #e74c3c;
}

.amount-sign[b-91nojult9d] {
    font-size: 1.5rem;
}

.amount-currency[b-91nojult9d] {
    font-size: 1.25rem;
    opacity: 0.8;
}

.detail-description[b-91nojult9d] {
    font-size: 1.125rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
}

.detail-merchant[b-91nojult9d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9375rem;
}

/* Detail Rows */
.detail-row[b-91nojult9d] {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f8f8f8;
}

.detail-row:last-child[b-91nojult9d] {
    border-bottom: none;
}

.detail-label[b-91nojult9d] {
    color: #999;
    font-size: 0.875rem;
}

.detail-value[b-91nojult9d] {
    color: #333;
    font-weight: 500;
    font-size: 0.875rem;
    text-align: right;
}

.detail-value.mono[b-91nojult9d] {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.8125rem;
}

/* Collapsible Section */
.section-toggle[b-91nojult9d] {
    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-91nojult9d] {
    margin-bottom: 0;
}

.section-toggle i[b-91nojult9d] {
    color: #666;
    transition: transform 0.3s ease;
}

.additional-info[b-91nojult9d] {
    animation: expandDown-b-91nojult9d 0.3s ease-out;
}

/* Modal Footer */
.modal-footer[b-91nojult9d] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.modal-footer :deep(button)[b-91nojult9d] {
    flex: 1;
    min-width: 120px;
}

/* Animations */
@keyframes fadeIn-b-91nojult9d {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut-b-91nojult9d {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideUp-b-91nojult9d {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown-b-91nojult9d {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

@keyframes expandDown-b-91nojult9d {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modal-content[b-91nojult9d] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        animation: slideUpMobile-b-91nojult9d 0.25s ease-out;
    }

    .modal-content.closing[b-91nojult9d] {
        animation: slideDownMobile-b-91nojult9d 0.25s ease-out;
    }

    @keyframes slideUpMobile-b-91nojult9d {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    @keyframes slideDownMobile-b-91nojult9d {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(100%);
        }
    }

    .modal-footer[b-91nojult9d] {
        flex-direction: column;
    }

    .modal-footer :deep(button)[b-91nojult9d] {
        width: 100%;
    }
}
/* /Components/Wallet/TransferModal.razor.rz.scp.css */
.modal-backdrop[b-izl7pskinc] {
    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-izl7pskinc 0.25s ease-out;
    padding: 1rem;
}

.modal-backdrop.closing[b-izl7pskinc] {
    animation: fadeOut-b-izl7pskinc 0.25s ease-out;
}

.modal-content[b-izl7pskinc] {
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-izl7pskinc 0.25s ease-out;
}

.modal-content.closing[b-izl7pskinc] {
    animation: slideDown-b-izl7pskinc 0.25s ease-out;
}

.modal-header[b-izl7pskinc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-izl7pskinc] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-body[b-izl7pskinc] {
    padding: 1.5rem;
}

/* Wallet Selection */
.wallet-selection[b-izl7pskinc] {
    margin-bottom: 1rem;
}

.section-label[b-izl7pskinc] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.75rem;
}

.wallet-options[b-izl7pskinc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wallet-option[b-izl7pskinc] {
    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-izl7pskinc] {
    border-color: #00a651;
    background: #f9fff9;
}

.wallet-option.selected[b-izl7pskinc] {
    border-color: #00a651;
    background: #f0fff5;
}

.wallet-icon[b-izl7pskinc] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
}

.wallet-icon.atkv[b-izl7pskinc] {
    background: linear-gradient(135deg, #00a651 0%, #00d168 100%);
    color: white;
}

.wallet-icon.bonus[b-izl7pskinc] {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
    color: white;
}

.wallet-details[b-izl7pskinc] {
    flex: 1;
}

.wallet-name[b-izl7pskinc] {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.25rem;
}

.wallet-balance[b-izl7pskinc] {
    font-size: 0.875rem;
    color: #666;
}

.wallet-option input[type="radio"][b-izl7pskinc] {
    margin: 0;
}

/* Transfer Arrow */
.transfer-arrow[b-izl7pskinc] {
    text-align: center;
    padding: 0.5rem;
    color: #00a651;
    font-size: 1.5rem;
}

/* Amount Section */
.amount-section[b-izl7pskinc] {
    margin-bottom: 1.5rem;
}

.amount-input-wrapper[b-izl7pskinc] {
    display: flex;
    align-items: center;
    position: relative;
}

.currency-prefix[b-izl7pskinc] {
    position: absolute;
    left: 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #666;
}

.currency-suffix[b-izl7pskinc] {
    position: absolute;
    right: 1rem;
    font-size: 0.875rem;
    color: #666;
}

.amount-input[b-izl7pskinc] {
    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-izl7pskinc] {
    outline: none;
    border-color: #00a651;
}

.available-balance[b-izl7pskinc] {
    font-size: 0.8125rem;
    color: #666;
    margin-top: 0.5rem;
}

.error-message[b-izl7pskinc] {
    color: #e74c3c;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* Note Section */
.note-section[b-izl7pskinc] {
    margin-bottom: 1.5rem;
}

.optional-label[b-izl7pskinc] {
    font-size: 0.75rem;
    color: #999;
    margin-left: 0.5rem;
}

.form-input[b-izl7pskinc] {
    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-izl7pskinc] {
    outline: none;
    border-color: #00a651;
}

/* Error Banner */
.error-banner[b-izl7pskinc] {
    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-izl7pskinc] {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 1.5rem;
}

.summary-section[b-izl7pskinc] {
    padding: 1rem 0;
    border-bottom: 1px solid #e5e5e5;
}

.summary-section:last-child[b-izl7pskinc] {
    border-bottom: none;
}

.summary-label[b-izl7pskinc] {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.summary-value[b-izl7pskinc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
}

.summary-amount[b-izl7pskinc] {
    font-size: 1.25rem;
    font-weight: bold;
}

.summary-amount.positive[b-izl7pskinc] {
    color: #00a651;
}

.summary-amount.negative[b-izl7pskinc] {
    color: #e74c3c;
}

.transfer-arrow-small[b-izl7pskinc] {
    text-align: center;
    padding: 0.5rem;
    color: #999;
}

.fee-section[b-izl7pskinc] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-top: 1px solid #e5e5e5;
}

.fee-label[b-izl7pskinc] {
    color: #666;
    font-size: 0.875rem;
}

.fee-amount[b-izl7pskinc] {
    font-weight: 500;
    color: #ff9800;
}

.note-display[b-izl7pskinc] {
    padding: 0.75rem 0;
    border-top: 1px solid #e5e5e5;
}

.note-label[b-izl7pskinc] {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 0.25rem;
}

.note-text[b-izl7pskinc] {
    color: #333;
    font-size: 0.875rem;
}

/* Success View */
.success-view[b-izl7pskinc] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.success-icon[b-izl7pskinc] {
    margin-bottom: 1.5rem;
}

.success-icon i[b-izl7pskinc] {
    font-size: 4rem;
    color: #00a651;
}

.success-title[b-izl7pskinc] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 2rem;
}

.updated-balances[b-izl7pskinc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.balance-card[b-izl7pskinc] {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 8px;
}

.balance-card .balance-label[b-izl7pskinc] {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.balance-card .balance-value[b-izl7pskinc] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
}

.transaction-reference[b-izl7pskinc] {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 2rem;
}

.transaction-reference .mono[b-izl7pskinc] {
    font-family: 'Monaco', 'Courier New', monospace;
    background: #f5f5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.success-actions[b-izl7pskinc] {
    display: flex;
    gap: 1rem;
}

.success-actions :deep(button)[b-izl7pskinc] {
    flex: 1;
}

/* Modal Footer */
.modal-footer[b-izl7pskinc] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
}

.modal-footer :deep(button)[b-izl7pskinc] {
    flex: 1;
}

/* Animations */
@keyframes fadeIn-b-izl7pskinc {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut-b-izl7pskinc {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideUp-b-izl7pskinc {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown-b-izl7pskinc {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modal-content[b-izl7pskinc] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        animation: slideUpMobile-b-izl7pskinc 0.25s ease-out;
    }

    .modal-content.closing[b-izl7pskinc] {
        animation: slideDownMobile-b-izl7pskinc 0.25s ease-out;
    }

    @keyframes slideUpMobile-b-izl7pskinc {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    @keyframes slideDownMobile-b-izl7pskinc {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }

    .updated-balances[b-izl7pskinc] {
        grid-template-columns: 1fr;
    }

    .modal-footer[b-izl7pskinc] {
        flex-direction: column;
    }

    .modal-footer :deep(button)[b-izl7pskinc] {
        width: 100%;
    }
}
/* /Components/Wallet/UnlinkArmbandModal.razor.rz.scp.css */
/*
 * UnlinkArmbandModal scoped styles
 * Aligned to Figma design: unlink-armband-modal.html
 *
 * Key design tokens:
 *   Danger coral: #e57373
 *   Warning orange: #f9a825
 *   Primary blue: #2a63af
 *   Primary hover: #234f8e
 *   Error red: #e53935
 *   Text dark: #333
 *   Text muted: #666
 *   Border: #e0e0e0
 */

/* -- Slide-in animation --------------------------------------------------- */

@keyframes modalSlideIn-b-18t0pyt2o9 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake-b-18t0pyt2o9 {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
}

/* -- Overlay -------------------------------------------------------------- */

.modal-overlay[b-18t0pyt2o9] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* -- Modal container ------------------------------------------------------ */

.modal-content[b-18t0pyt2o9] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: modalSlideIn-b-18t0pyt2o9 0.3s ease-out;
}

/* -- Header (danger / coral-red variant) ---------------------------------- */

.modal-header[b-18t0pyt2o9] {
    padding: 32px 32px 24px;
    text-align: center;
    position: relative;
}

.modal-header--danger[b-18t0pyt2o9] {
    background: #e57373;
}

/* Close button */
.modal-close[b-18t0pyt2o9] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
    padding: 0;
}

.modal-close:hover[b-18t0pyt2o9] {
    background: rgba(255, 255, 255, 0.35);
}

/* Icon circle (orange warning inside white circle) */
.modal-icon[b-18t0pyt2o9] {
    width: 64px;
    height: 64px;
    background: white;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.modal-icon--danger[b-18t0pyt2o9] {
    color: #f9a825;
}

/* Title and subtitle */
.modal-title[b-18t0pyt2o9] {
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 4px;
}

.modal-subtitle[b-18t0pyt2o9] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin: 0;
}

/* -- Body ----------------------------------------------------------------- */

.modal-body[b-18t0pyt2o9] {
    padding: 32px;
}

/* Error banner */
.error-banner[b-18t0pyt2o9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #b71c1c;
    font-size: 14px;
    margin-bottom: 16px;
}

.error-banner i[b-18t0pyt2o9] {
    flex-shrink: 0;
}

/* -- PIN instructions ----------------------------------------------------- */

.pin-instructions[b-18t0pyt2o9] {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin: 0 0 24px;
}

/* -- PIN display ---------------------------------------------------------- */

.pin-display[b-18t0pyt2o9] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}

.pin-dot[b-18t0pyt2o9] {
    width: 48px;
    height: 48px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #333;
    background: white;
    transition: all 0.2s;
}

.pin-dot--filled[b-18t0pyt2o9] {
    border-color: #2a63af;
    background: #f5f9ff;
}

.pin-dot--active[b-18t0pyt2o9] {
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.15);
}

.pin-dot--error[b-18t0pyt2o9] {
    border-color: #e53935;
    animation: shake-b-18t0pyt2o9 0.3s;
}

/* -- Number pad ----------------------------------------------------------- */

.numpad[b-18t0pyt2o9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 280px;
    margin: 0 auto 24px;
}

.numpad-btn[b-18t0pyt2o9] {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.numpad-btn:hover[b-18t0pyt2o9] {
    background: #f5f5f5;
    border-color: #ccc;
}

.numpad-btn:active[b-18t0pyt2o9] {
    background: #eee;
    transform: scale(0.95);
}

.numpad-btn:disabled[b-18t0pyt2o9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.numpad-btn--action[b-18t0pyt2o9] {
    background: #f5f5f5;
    color: #666;
}

.numpad-btn--confirm[b-18t0pyt2o9] {
    background: #2a63af;
    color: white;
    border-color: #2a63af;
}

.numpad-btn--confirm:hover[b-18t0pyt2o9] {
    background: #234f8e;
}

.numpad-btn--confirm:disabled[b-18t0pyt2o9] {
    background: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
    opacity: 1;
}

/* -- Cancel button -------------------------------------------------------- */

.btn-cancel[b-18t0pyt2o9] {
    width: 100%;
    padding: 16px 24px;
    background: white;
    color: #666;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-cancel:hover[b-18t0pyt2o9] {
    background: #f5f5f5;
    border-color: #ccc;
}

.btn-cancel:disabled[b-18t0pyt2o9] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* -- Spinner -------------------------------------------------------------- */

.spinner-sm[b-18t0pyt2o9] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-18t0pyt2o9 0.6s linear infinite;
}

@keyframes spin-b-18t0pyt2o9 {
    to {
        transform: rotate(360deg);
    }
}

/* -- Mobile responsive (max-width: 480px) --------------------------------- */

@media (max-width: 480px) {
    .modal-overlay[b-18t0pyt2o9] {
        align-items: flex-end;
        padding: 0;
    }

    .modal-content[b-18t0pyt2o9] {
        border-radius: 16px 16px 0 0;
        max-width: 100%;
    }

    .numpad[b-18t0pyt2o9] {
        max-width: 100%;
    }

    .numpad-btn[b-18t0pyt2o9] {
        aspect-ratio: auto;
        height: 60px;
    }
}
/* /Components/Wallet/WalletCard.razor.rz.scp.css */
/* =========================================================================
   Wallet hero carousel - two hero cards (Sticitt + Tjieng) in a swipeable
   horizontal carousel with a dot indicator below. Replaces the older
   single combined wallet card that buried one wallet on a sub-line.
   ========================================================================= */
.wallet-hero-carousel[b-pe2naxjkjr] {
    width: 100%;
}

.wallet-heroes[b-pe2naxjkjr] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 16px;
    margin: 0 -16px;
    scroll-padding-left: 16px;
}

.wallet-heroes[b-pe2naxjkjr]::-webkit-scrollbar {
    display: none;
}

/* Each card snaps to viewport width minus the side gutters; a sliver of
   the next card peeks at the trailing edge as the swipe affordance. */
.wallet-hero[b-pe2naxjkjr] {
    flex: 0 0 calc(100% - 24px);
    max-width: 520px;
    scroll-snap-align: start;
    background: linear-gradient(135deg, #2a63af 0%, #1d3f6f 100%);
    color: #fff;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 140px;
    /* Pin the label to the top so the Sticitt and Tjieng labels align across
       both cards. The value row below is a fixed-height band (see
       .wallet-hero__amount) so the Tjieng amount lines up with the Sticitt
       card's primary element: the white "link" button when unlinked, the ZAR
       value when linked. Applies on mobile carousel cards and desktop grid
       cards (the desktop block below does not override display/justify-content). */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.wallet-hero[b-pe2naxjkjr]::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(253, 185, 19, 0.25) 0%, rgba(253, 185, 19, 0) 70%);
    pointer-events: none;
}

.wallet-hero:hover[b-pe2naxjkjr] {
    box-shadow: 0 4px 16px rgba(42, 99, 175, 0.18);
    transform: translateY(-1px);
}

.wallet-hero:focus[b-pe2naxjkjr] {
    outline: 2px solid #fdb913;
    outline-offset: 2px;
}

.wallet-hero--tjieng[b-pe2naxjkjr] {
    background: linear-gradient(135deg, #fdb913 0%, #c2870a 100%);
    color: #1a1a1a;
}

.wallet-hero--tjieng[b-pe2naxjkjr]::after {
    background: radial-gradient(circle, rgba(42, 99, 175, 0.18) 0%, rgba(42, 99, 175, 0) 70%);
}

.wallet-hero__label[b-pe2naxjkjr] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.wallet-hero__amount[b-pe2naxjkjr] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    /* Fixed value-band height matching the link button (.link-wallet-btn--cta
       is 48px). Content is vertically centred in this band so the Tjieng
       "0 Punte" aligns with the white button's middle (unlinked) and with the
       ZAR value (linked). */
    min-height: 48px;
}

.wallet-hero__currency[b-pe2naxjkjr] {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.85;
    margin-right: 2px;
}

/* Member with no Tjieng wallet: a subdued "Not linked" label rather than a
   bold "0" amount, so the missing-account state reads as informational. */
.wallet-hero__not-linked[b-pe2naxjkjr] {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.85;
}

.wallet-hero__currency--right[b-pe2naxjkjr] {
    margin-left: 4px;
    margin-right: 0;
}

.wallet-hero__arrow[b-pe2naxjkjr] {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet-hero--tjieng .wallet-hero__arrow[b-pe2naxjkjr] {
    background: rgba(26, 26, 26, 0.18);
}

.wallet-hero__arrow svg[b-pe2naxjkjr] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Loading spinner inside the amount slot */
.wallet-spinner[b-pe2naxjkjr] {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: wallet-spin-b-pe2naxjkjr 0.8s linear infinite;
}

@keyframes wallet-spin-b-pe2naxjkjr {
    to { transform: rotate(360deg); }
}

/* Link / Join buttons used when a wallet is not yet linked or the user
   is not yet an ATKV member. Sits in place of the balance amount. */
.link-wallet-btn[b-pe2naxjkjr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px dashed rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.link-wallet-btn:hover[b-pe2naxjkjr] {
    background: rgba(255, 255, 255, 0.25);
    border-style: solid;
}

.wallet-hero--tjieng .link-wallet-btn[b-pe2naxjkjr] {
    background: rgba(26, 26, 26, 0.1);
    color: #1a1a1a;
    border-color: rgba(26, 26, 26, 0.4);
}

.link-wallet-btn.join-btn[b-pe2naxjkjr] {
    background: #1a1a1a;
    color: #fff;
    border: none;
}

.link-wallet-btn.join-btn:hover[b-pe2naxjkjr] {
    background: #000;
}

/* Sticitt "Link wallet" CTA - prominent, mobile-friendly primary action
   (proposal approved 2026-06-04). Scoped to --cta so the Tjieng Join button
   keeps its own treatment. */
.wallet-hero__amount--cta[b-pe2naxjkjr] {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    font-size: 15px;          /* reset from the 28px balance size */
    font-weight: 600;
}

.link-wallet-btn--cta[b-pe2naxjkjr] {
    width: 100%;
    min-height: 48px;
    gap: 8px;
    padding: 0 18px;
    background: #fff;
    color: var(--color-primary-blue, #2a63af);
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.link-wallet-btn--cta:hover[b-pe2naxjkjr] {
    background: #f3f6fb;
    border: none;
}

.link-wallet-btn--cta:active[b-pe2naxjkjr] {
    transform: translateY(1px);
}

.link-wallet-btn--cta svg[b-pe2naxjkjr] {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.wallet-hero__cta-hint[b-pe2naxjkjr] {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
}

/* Carousel position dots (mobile + tablet only; hidden on wide screens
   where both cards can sit side-by-side via the hero-section layout). */
.wallet-hero-dots[b-pe2naxjkjr] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 0;
}

.wallet-hero-dot[b-pe2naxjkjr] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--card-border, #d8dde6);
    display: inline-block;
    transition: width 0.2s ease, background 0.2s ease;
}

.wallet-hero-dot--active.wallet-hero-dot--sticitt[b-pe2naxjkjr] {
    width: 22px;
    background: #2a63af;
}

.wallet-hero-dot--active.wallet-hero-dot--tjieng[b-pe2naxjkjr] {
    width: 22px;
    background: #fdb913;
}

/* Responsive */
@media (min-width: 1024px) {
    /* V8: wallet sits full-width below the greeting; two cards fill the row
       as a 2-col grid. Internal layout matched to
       docs/ui-redesign/desktop-wallet-cards-proposal.html. */
    .wallet-heroes[b-pe2naxjkjr] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: visible;
        gap: 24px;
        padding: 0;
        margin: 0;
    }

    .wallet-hero[b-pe2naxjkjr] {
        flex: initial;
        width: 100%;
        max-width: none;
        /* Hug the content instead of forcing a tall 200px card; the grid
           equalises both cards to the taller one (the Sticitt CTA card), so
           there is no wasted empty band below the content - matching the
           compact mobile cards. */
        min-height: 0;
        display: flex;
        flex-direction: column;
        /* Pin labels to the top so the Sticitt and Tjieng labels align across
           both cards on desktop too (not centred per card). The value-band
           (.wallet-hero__amount, min-height 48px) keeps "0 Punte" aligned with
           the link button / ZAR value. */
        justify-content: flex-start;
        gap: 14px;
        padding: 26px 28px;
    }

    /* mock-matched type scale + spacing */
    .wallet-hero__label[b-pe2naxjkjr] {
        font-size: 13px;
        letter-spacing: 0.07em;
        margin-bottom: 0;
    }
    .wallet-hero__amount[b-pe2naxjkjr] {
        font-size: 44px;
        line-height: 1.1;
    }
    .wallet-hero__currency[b-pe2naxjkjr] {
        font-size: 18px;
    }
    .wallet-hero__cta-hint[b-pe2naxjkjr] {
        font-size: 13.5px;
        margin-top: 10px;
    }
    /* keep the Link CTA a sensible width on the wide card, not full 688px */
    .wallet-hero__amount--cta[b-pe2naxjkjr] {
        gap: 0;
    }
    .link-wallet-btn--cta[b-pe2naxjkjr] {
        max-width: 340px;
    }

    .wallet-hero-dots[b-pe2naxjkjr] {
        display: none;
    }
}

@media (max-width: 393px) {
    .wallet-hero[b-pe2naxjkjr] {
        min-height: 130px;
        padding: 18px;
    }

    .wallet-hero__amount[b-pe2naxjkjr] {
        font-size: 24px;
    }
}

/* Modal Overlay */
.modal-overlay[b-pe2naxjkjr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.link-wallet-modal[b-pe2naxjkjr],
.modal-content[b-pe2naxjkjr] {
    background: white;
    border-radius: 20px;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn-b-pe2naxjkjr 0.3s ease;
}

@keyframes modalSlideIn-b-pe2naxjkjr {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-pe2naxjkjr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-header h3[b-pe2naxjkjr] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.modal-close[b-pe2naxjkjr] {
    background: none;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.modal-close:hover[b-pe2naxjkjr] {
    color: #333;
    background: #f0f0f0;
}

.modal-body[b-pe2naxjkjr] {
    padding: 24px;
}

.modal-description[b-pe2naxjkjr] {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #666;
    text-align: center;
}

.link-options[b-pe2naxjkjr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.link-option-btn[b-pe2naxjkjr] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    font-family: inherit;
}

.link-option-btn:hover[b-pe2naxjkjr] {
    border-color: #fdb913;
    background: #fffde7;
}

.option-icon[b-pe2naxjkjr] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.option-icon.icon-existing[b-pe2naxjkjr] {
    background: #2a63af;
    color: white;
}

.option-icon.icon-create[b-pe2naxjkjr] {
    background: #4caf50;
    color: white;
}

.option-text[b-pe2naxjkjr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.option-title[b-pe2naxjkjr] {
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.option-desc[b-pe2naxjkjr] {
    font-size: 13px;
    color: #666;
}

.link-option-btn > .bi-chevron-right[b-pe2naxjkjr] {
    color: #999;
    font-size: 16px;
}

.link-option-btn:hover > .bi-chevron-right[b-pe2naxjkjr] {
    color: #fdb913;
}
/* /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-0hgv0wszfl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background: #FAFAFA;
}

/* Skip navigation link for accessibility */
.skip-navigation[b-0hgv0wszfl] {
    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-0hgv0wszfl] {
    top: 0;
}

/* ==========================================================================
   Top Navigation Header
   ========================================================================== */

.mobile-header[b-0hgv0wszfl] {
    /* 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-0hgv0wszfl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    max-width: 100%;
    height: 100%;
}

.header-left[b-0hgv0wszfl] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 1;
}

.header-right[b-0hgv0wszfl] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Logo styling per design (40-48px height) */
.header-logo[b-0hgv0wszfl] {
    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-0hgv0wszfl] {
    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-0hgv0wszfl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #FAFAFA;
    padding-top: 101px; /* Account for fixed top navigation on mobile */
}

.content-body[b-0hgv0wszfl] {
    min-height: calc(100vh - 101px); /* Account for top nav only - FAB floats over content */
    padding-bottom: 24px; /* Minimal padding since FAB floats in corner */
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .content-body[b-0hgv0wszfl] {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* ==========================================================================
   Bottom Navigation Container
   ========================================================================== */

.mobile-bottom-nav[b-0hgv0wszfl] {
    /* 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-0hgv0wszfl] {
        display: block;
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .mobile-header[b-0hgv0wszfl] {
        height: var(--nav-height-desktop);
        padding: 0 var(--spacing-6);
    }

    .header-logo[b-0hgv0wszfl] {
        height: 48px;
    }

    .header-title[b-0hgv0wszfl] {
        font-size: var(--font-size-h3);
    }

    .mobile-content[b-0hgv0wszfl] {
        padding-top: 102px; /* Account for fixed top navigation on desktop */
    }

    .content-body[b-0hgv0wszfl] {
        padding: var(--spacing-6);
        max-width: 1200px;
        margin: 0 auto;
    }

    .mobile-bottom-nav[b-0hgv0wszfl] {
        height: var(--nav-height-desktop);
    }
}

/* Large Desktop (1024px and up) */
@media (min-width: 1024px) {
    .mobile-header[b-0hgv0wszfl] {
        padding: 0 var(--spacing-8);
    }

    .content-body[b-0hgv0wszfl] {
        padding: var(--spacing-8) var(--spacing-12);
    }
}

/* Extra Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    .content-body[b-0hgv0wszfl] {
        max-width: 1440px;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    .mobile-header[b-0hgv0wszfl],
    .mobile-bottom-nav[b-0hgv0wszfl] {
        border: 2px solid var(--color-white);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .mobile-header[b-0hgv0wszfl],
    .mobile-bottom-nav[b-0hgv0wszfl] {
        display: none;
    }

    .mobile-content[b-0hgv0wszfl] {
        padding-bottom: 0;
        overflow: visible;
    }

    .content-body[b-0hgv0wszfl] {
        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-pma8zdsxl0] {
    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-pma8zdsxl0] {
    /* 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-pma8zdsxl0] {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

/* Active state - full white, with background circle */
.nav-item.active[b-pma8zdsxl0] {
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
}

.nav-item.active[b-pma8zdsxl0]::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-pma8zdsxl0] {
    transform: scale(1.1);
}

/* Focus visible state for keyboard navigation */
.nav-item:focus-visible[b-pma8zdsxl0] {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   Navigation Icons
   ========================================================================== */

.nav-icon[b-pma8zdsxl0] {
    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-pma8zdsxl0] {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ==========================================================================
   Navigation Labels
   ========================================================================== */

.nav-label[b-pma8zdsxl0] {
    /* 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-pma8zdsxl0] {
        min-width: 80px;
        max-width: 140px;
        padding: var(--spacing-3) var(--spacing-2);
        gap: var(--spacing-2);
    }

    .nav-icon[b-pma8zdsxl0] {
        width: 28px;
        height: 28px;
    }

    .nav-label[b-pma8zdsxl0] {
        font-size: 13px;
    }
}

/* Desktop (1024px and up) - Horizontal layout option */
@media (min-width: 1024px) {
    /* Keep bottom nav, but allow more space */
    .nav-item[b-pma8zdsxl0] {
        flex-direction: row;
        gap: var(--spacing-3);
        padding: var(--spacing-3) var(--spacing-4);
        max-width: 160px;
    }

    .nav-label[b-pma8zdsxl0] {
        font-size: 14px;
    }
}

/* ==========================================================================
   Touch Feedback (Mobile Devices)
   ========================================================================== */

/* Active touch state (tap feedback) */
.nav-item:active[b-pma8zdsxl0] {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

/* Prevent highlight on tap */
.nav-item[b-pma8zdsxl0] {
    -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-pma8zdsxl0] {
        color: var(--color-white);
        border: 1px solid transparent;
    }

    .nav-item:hover[b-pma8zdsxl0],
    .nav-item:focus-visible[b-pma8zdsxl0] {
        border-color: var(--color-white);
    }

    .nav-item.active[b-pma8zdsxl0] {
        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-pma8zdsxl0],
    .nav-icon[b-pma8zdsxl0] {
        transition: none;
    }

    .nav-item:hover[b-pma8zdsxl0],
    .nav-item:active[b-pma8zdsxl0],
    .nav-item.active .nav-icon[b-pma8zdsxl0] {
        transform: none;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .bottom-nav-container[b-pma8zdsxl0] {
        display: none;
    }
}
/* /Pages/Admin/CiMSOInstances.razor.rz.scp.css */
/**
 * ATKV CiMSO Instance Admin Page Styles
 * Matches existing admin page patterns (ContentAdmin, ResortAdmin)
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.cimso-admin[b-8zewve9wm0] {
    min-height: 100vh;
    background: var(--color-white, #fff);
    max-width: 1280px;
    padding: 48px 24px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-8zewve9wm0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header h1[b-8zewve9wm0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary[b-8zewve9wm0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary-blue, #2a63af);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover[b-8zewve9wm0] {
    background: #1d4f8a;
}

.btn-primary:disabled[b-8zewve9wm0] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-8zewve9wm0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--color-text-secondary, #4b5563);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 12px;
    padding: 12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-secondary:hover[b-8zewve9wm0] {
    background: var(--card-background, #f9fafb);
}

.btn-danger[b-8zewve9wm0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-danger:hover[b-8zewve9wm0] {
    background: #b91c1c;
}

.btn-danger:disabled[b-8zewve9wm0] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   Table
   ========================================================================== */

.content-table-container[b-8zewve9wm0] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    overflow: hidden;
}

.content-table[b-8zewve9wm0] {
    width: 100%;
    border-collapse: collapse;
}

.content-table th[b-8zewve9wm0] {
    text-align: left;
    padding: 16px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary, #4b5563);
    background: var(--card-background, #f9fafb);
    border-bottom: 1px solid var(--card-border, #e1e0e1);
}

.content-table td[b-8zewve9wm0] {
    padding: 16px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-black, #000);
    border-bottom: 1px solid var(--card-border, #e1e0e1);
    vertical-align: middle;
}

.content-table tr:last-child td[b-8zewve9wm0] {
    border-bottom: none;
}

.content-table tr:hover td[b-8zewve9wm0] {
    background: rgba(42, 99, 175, 0.03);
}

.title-cell .title-text[b-8zewve9wm0] {
    font-weight: 600;
    color: var(--color-black, #000);
}

.url-cell[b-8zewve9wm0] {
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge[b-8zewve9wm0] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.badge-published[b-8zewve9wm0] {
    background: #dcfce7;
    color: #16a34a;
}

.badge-draft[b-8zewve9wm0] {
    background: #f3f4f6;
    color: #6b7280;
}

.badge-key[b-8zewve9wm0] {
    background: #e0e7ff;
    color: #4338ca;
    font-family: monospace;
    font-size: 13px;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.actions-cell[b-8zewve9wm0] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.action-btn[b-8zewve9wm0] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    color: var(--color-text-secondary, #4b5563);
}

.action-btn:hover[b-8zewve9wm0] {
    border-color: var(--color-primary-blue, #2a63af);
    color: var(--color-primary-blue, #2a63af);
}

.action-btn.delete:hover[b-8zewve9wm0] {
    border-color: #dc2626;
    color: #dc2626;
}

.action-btn.test:hover[b-8zewve9wm0] {
    border-color: #16a34a;
    color: #16a34a;
}

.action-btn.testing[b-8zewve9wm0] {
    border-color: #d97706;
    color: #d97706;
}

.action-btn:disabled[b-8zewve9wm0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner-sm[b-8zewve9wm0] {
    width: 14px;
    height: 14px;
    border: 2px solid #e5e7eb;
    border-top: 2px solid #d97706;
    border-radius: 50%;
    animation: spin-b-8zewve9wm0 0.8s linear infinite;
}

/* ==========================================================================
   Test Result Banner
   ========================================================================== */

.test-result[b-8zewve9wm0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.test-result p[b-8zewve9wm0] {
    margin: 0;
}

.test-success[b-8zewve9wm0] {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.test-failure[b-8zewve9wm0] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.test-dismiss[b-8zewve9wm0] {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: inherit;
    padding: 0 4px;
    opacity: 0.7;
}

.test-dismiss:hover[b-8zewve9wm0] {
    opacity: 1;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state[b-8zewve9wm0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    color: var(--color-text-secondary, #4b5563);
}

.empty-state svg[b-8zewve9wm0] {
    margin-bottom: 16px;
    opacity: 0.4;
}

.empty-state h3[b-8zewve9wm0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0 0 8px;
}

.empty-state p[b-8zewve9wm0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    margin: 0 0 24px;
}

/* ==========================================================================
   Loading
   ========================================================================== */

.loading-spinner[b-8zewve9wm0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    color: var(--color-text-secondary, #4b5563);
}

.spinner[b-8zewve9wm0] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid var(--color-primary-blue, #2a63af);
    border-radius: 50%;
    animation: spin-b-8zewve9wm0 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-8zewve9wm0 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Error
   ========================================================================== */

.error-message[b-8zewve9wm0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    text-align: center;
    color: #991b1b;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.content-modal-backdrop[b-8zewve9wm0] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.content-modal[b-8zewve9wm0] {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.content-modal-sm[b-8zewve9wm0] {
    max-width: 440px;
}

.content-modal-header[b-8zewve9wm0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0;
}

.content-modal-header h2[b-8zewve9wm0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0;
}

.content-modal-close[b-8zewve9wm0] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-secondary, #4b5563);
    padding: 4px 8px;
    border-radius: 8px;
}

.content-modal-close:hover[b-8zewve9wm0] {
    background: var(--card-background, #f9fafb);
}

.content-modal-body[b-8zewve9wm0] {
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.content-modal-footer[b-8zewve9wm0] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--card-border, #e1e0e1);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

.form-group[b-8zewve9wm0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-8zewve9wm0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black, #000);
}

.form-group input[b-8zewve9wm0],
.form-group textarea[b-8zewve9wm0] {
    padding: 10px 14px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-black, #000);
    background: white;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.form-group input:focus[b-8zewve9wm0],
.form-group textarea:focus[b-8zewve9wm0] {
    outline: none;
    border-color: var(--color-primary-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.form-group textarea[b-8zewve9wm0] {
    resize: vertical;
    min-height: 60px;
    font-family: monospace;
    font-size: 13px;
}

.form-hint[b-8zewve9wm0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--color-text-secondary, #4b5563);
    margin: 0;
}

.form-row.checkboxes[b-8zewve9wm0] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.checkbox-label[b-8zewve9wm0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-8zewve9wm0] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary-blue, #2a63af);
}

.form-error[b-8zewve9wm0] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
}

.text-muted[b-8zewve9wm0] {
    color: var(--color-text-secondary, #4b5563);
    font-size: 13px;
}

/* ==========================================================================
   Button Spinner
   ========================================================================== */

.btn-spinner[b-8zewve9wm0] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-8zewve9wm0 0.8s linear infinite;
    display: inline-block;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .cimso-admin[b-8zewve9wm0] {
        padding: 24px 16px;
    }

    .page-header h1[b-8zewve9wm0] {
        font-size: 24px;
    }

    .content-table th[b-8zewve9wm0],
    .content-table td[b-8zewve9wm0] {
        padding: 12px 14px;
    }

    .url-cell[b-8zewve9wm0] {
        max-width: 150px;
    }

    .content-modal[b-8zewve9wm0] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 16px;
    }
}
/* /Pages/Admin/ContentAdmin.razor.rz.scp.css */
/**
 * ATKV Content Admin Page Styles
 * Aligned to profile info-grid design pattern
 * Breakpoints: 393px (mobile), 744px (tablet), desktop (default)
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.content-admin[b-algipcctzw] {
    min-height: 100vh;
    background: var(--color-white, #fff);
    max-width: 1280px;
    padding: 48px 24px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-algipcctzw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header h1[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0;
}

/* ==========================================================================
   Stats Grid (metric cards matching profile sections)
   ========================================================================== */

.stats-grid[b-algipcctzw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card[b-algipcctzw] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    padding: 24px;
}

.stat-number[b-algipcctzw] {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary-blue, #2a63af);
    line-height: 1;
}

.stat-number.published[b-algipcctzw] {
    color: #16a34a;
}

.stat-number.draft[b-algipcctzw] {
    color: var(--color-text-secondary, #4b5563);
}

.stat-number.featured[b-algipcctzw] {
    color: var(--color-primary-yellow, #fdb913);
}

.stat-label[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
    margin-top: 8px;
}

/* ==========================================================================
   Filter Section (matches profile-section card pattern)
   ========================================================================== */

.filter-section[b-algipcctzw] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    padding: 24px;
}

.filter-row[b-algipcctzw] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group[b-algipcctzw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

.filter-group.search[b-algipcctzw] {
    flex: 1;
    min-width: 200px;
}

.filter-group label[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
    text-transform: uppercase;
}

.filter-group select[b-algipcctzw],
.filter-group input[b-algipcctzw] {
    padding: 12px 16px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: var(--color-white, #fff);
    height: 48px;
}

.filter-group select:focus[b-algipcctzw],
.filter-group input:focus[b-algipcctzw] {
    outline: none;
    border-color: var(--color-primary-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

/* ==========================================================================
   Content Table (card-wrapped with alternating rows)
   ========================================================================== */

.content-table-container[b-algipcctzw] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    overflow: hidden;
}

.content-table[b-algipcctzw] {
    width: 100%;
    border-collapse: collapse;
}

.content-table th[b-algipcctzw] {
    background: var(--color-white, #fff);
    padding: 16px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
    text-transform: uppercase;
    border-bottom: 1px solid var(--card-border, #e1e0e1);
}

.content-table td[b-algipcctzw] {
    padding: 16px;
    border-bottom: 1px solid var(--card-border, #e1e0e1);
    vertical-align: middle;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.content-table tr:last-child td[b-algipcctzw] {
    border-bottom: none;
}

.content-table tbody tr:nth-child(even)[b-algipcctzw] {
    background: rgba(0, 0, 0, 0.02);
}

.content-table tr:hover[b-algipcctzw] {
    background: rgba(42, 99, 175, 0.03);
}

.title-cell[b-algipcctzw] {
    max-width: 300px;
}

.title-text[b-algipcctzw] {
    font-weight: 600;
    color: var(--color-black, #000);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-sub[b-algipcctzw] {
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-cell[b-algipcctzw] {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    white-space: nowrap;
}

.views-cell[b-algipcctzw] {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
}

/* ==========================================================================
   Badges (pill-shaped, matching design system)
   ========================================================================== */

.badge[b-algipcctzw] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.badge-published[b-algipcctzw] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.badge-draft[b-algipcctzw] {
    background: rgba(100, 116, 139, 0.1);
    color: var(--color-text-secondary, #4b5563);
}

.badge-featured[b-algipcctzw] {
    background: rgba(253, 185, 19, 0.15);
    color: #92400e;
    margin-left: 8px;
}

.badge-type[b-algipcctzw] {
    text-transform: capitalize;
}

.badge-type.type-news[b-algipcctzw] {
    background: rgba(42, 99, 175, 0.1);
    color: var(--color-primary-blue, #2a63af);
}

.badge-type.type-announcement[b-algipcctzw] {
    background: rgba(253, 185, 19, 0.15);
    color: #92400e;
}

.badge-type.type-promotional[b-algipcctzw] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.actions-cell[b-algipcctzw] {
    white-space: nowrap;
}

.action-btn[b-algipcctzw] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 10px;
    background: var(--color-white, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base, 200ms ease-in-out);
    margin-right: 4px;
}

.action-btn:last-child[b-algipcctzw] {
    margin-right: 0;
}

.action-btn:hover[b-algipcctzw] {
    opacity: var(--opacity-hover, 0.9);
}

.action-btn.preview[b-algipcctzw] {
    color: #16a34a;
}

.action-btn.preview:hover[b-algipcctzw] {
    background: rgba(34, 197, 94, 0.05);
    border-color: #16a34a;
}

.action-btn.edit[b-algipcctzw] {
    color: var(--color-primary-blue, #2a63af);
}

.action-btn.edit:hover[b-algipcctzw] {
    background: rgba(42, 99, 175, 0.05);
    border-color: var(--color-primary-blue, #2a63af);
}

.action-btn.publish[b-algipcctzw] {
    color: #16a34a;
}

.action-btn.publish:hover[b-algipcctzw] {
    background: rgba(34, 197, 94, 0.05);
    border-color: #16a34a;
}

.action-btn.unpublish[b-algipcctzw] {
    color: #d97706;
}

.action-btn.unpublish:hover[b-algipcctzw] {
    background: rgba(245, 158, 11, 0.05);
    border-color: #d97706;
}

.action-btn.delete[b-algipcctzw] {
    color: #dc2626;
}

.action-btn.delete:hover[b-algipcctzw] {
    background: rgba(239, 68, 68, 0.05);
    border-color: #dc2626;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination[b-algipcctzw] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-top: 1px solid var(--card-border, #e1e0e1);
}

.page-btn[b-algipcctzw] {
    padding: 10px 20px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    background: var(--color-white, #fff);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.page-btn:hover:not(:disabled)[b-algipcctzw] {
    background: var(--card-background, #f9fafb);
    border-color: var(--color-primary-blue, #2a63af);
}

.page-btn:disabled[b-algipcctzw] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
}

/* ==========================================================================
   Buttons (matches edit-btn / design system pattern)
   ========================================================================== */

.btn-primary[b-algipcctzw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 48px;
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white, #fff);
    border: none;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.btn-primary:hover[b-algipcctzw] {
    opacity: var(--opacity-hover, 0.9);
}

.btn-primary:disabled[b-algipcctzw] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-secondary[b-algipcctzw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 48px;
    background: var(--color-white, #fff);
    color: var(--color-text-secondary, #4b5563);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.btn-secondary:hover[b-algipcctzw] {
    opacity: var(--opacity-hover, 0.9);
    border-color: var(--color-primary-blue, #2a63af);
    color: var(--color-primary-blue, #2a63af);
}

.btn-danger[b-algipcctzw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 48px;
    background: #dc2626;
    color: var(--color-white, #fff);
    border: none;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.btn-danger:hover[b-algipcctzw] {
    opacity: var(--opacity-hover, 0.9);
}

.btn-danger:disabled[b-algipcctzw] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================================================
   Loading & Error States
   ========================================================================== */

.loading-spinner[b-algipcctzw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
}

.spinner[b-algipcctzw] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(42, 99, 175, 0.2);
    border-top-color: var(--color-primary-blue, #2a63af);
    border-radius: 50%;
    animation: spin-b-algipcctzw 1s linear infinite;
}

.loading-spinner p[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
    margin: 0;
}

.error-message[b-algipcctzw] {
    text-align: center;
    padding: 64px 24px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    color: #dc2626;
}

.error-message p[b-algipcctzw] {
    font-size: 14px;
    margin: 0 0 16px;
}

.empty-state[b-algipcctzw] {
    text-align: center;
    padding: 80px 24px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
}

.empty-state svg[b-algipcctzw] {
    color: var(--card-border, #e1e0e1);
    margin-bottom: 16px;
}

.empty-state h3[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0 0 8px;
}

.empty-state p[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
    margin: 0 0 24px;
}

/* ==========================================================================
   Modal (using content-modal prefix to avoid Bootstrap conflicts)
   ========================================================================== */

.content-modal-backdrop[b-algipcctzw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    padding: 20px;
}

.content-modal[b-algipcctzw] {
    background: var(--color-white, #fff);
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.content-modal.content-modal-sm[b-algipcctzw] {
    max-width: 400px;
}

.content-modal.content-modal-lg[b-algipcctzw] {
    max-width: 900px;
}

.content-modal-header[b-algipcctzw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--card-border, #e1e0e1);
}

.content-modal-header h2[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0;
}

.content-modal-close[b-algipcctzw] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--card-border, #e1e0e1);
    background: transparent;
    font-size: 24px;
    color: var(--color-text-secondary, #4b5563);
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.content-modal-close:hover[b-algipcctzw] {
    opacity: var(--opacity-hover, 0.9);
    background: var(--card-background, #f9fafb);
}

.content-modal-body[b-algipcctzw] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.content-modal-footer[b-algipcctzw] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--card-border, #e1e0e1);
    background: var(--card-background, #f9fafb);
}

/* ==========================================================================
   Modal Themes
   ========================================================================== */

.modal-header-news[b-algipcctzw] {
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white, #fff);
}

.modal-header-news h2[b-algipcctzw] {
    color: var(--color-white, #fff);
}

.modal-header-news .content-modal-close[b-algipcctzw] {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

.modal-header-news .content-modal-close:hover[b-algipcctzw] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white, #fff);
}

.modal-header-announcement[b-algipcctzw] {
    background: var(--color-primary-yellow, #fdb913);
    color: var(--color-black, #000);
}

.modal-header-announcement h2[b-algipcctzw] {
    color: var(--color-black, #000);
}

.modal-header-announcement .content-modal-close[b-algipcctzw] {
    color: rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.1);
}

.modal-header-announcement .content-modal-close:hover[b-algipcctzw] {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-black, #000);
}

.modal-header-promo[b-algipcctzw] {
    background: #16a34a;
    color: var(--color-white, #fff);
}

.modal-header-promo h2[b-algipcctzw] {
    color: var(--color-white, #fff);
}

.modal-header-promo .content-modal-close[b-algipcctzw] {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

.modal-header-promo .content-modal-close:hover[b-algipcctzw] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white, #fff);
}

/* Primary Button Themes */
.btn-primary.btn-news[b-algipcctzw] {
    background: var(--color-primary-blue, #2a63af);
}

.btn-primary.btn-announcement[b-algipcctzw] {
    background: var(--color-primary-yellow, #fdb913);
    color: var(--color-black, #000);
}

.btn-primary.btn-promo[b-algipcctzw] {
    background: #16a34a;
}

/* ==========================================================================
   Form Styles (aligned to design system inputs)
   ========================================================================== */

.form-row[b-algipcctzw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-row.checkboxes[b-algipcctzw] {
    display: flex;
    gap: 24px;
}

.form-row.triple[b-algipcctzw] {
    grid-template-columns: repeat(3, 1fr);
}

.form-group[b-algipcctzw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width[b-algipcctzw] {
    grid-column: 1 / -1;
}

.form-group label[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
}

.form-group input[b-algipcctzw],
.form-group select[b-algipcctzw],
.form-group textarea[b-algipcctzw] {
    padding: 12px 16px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: var(--color-white, #fff);
    transition: border-color var(--transition-base, 200ms ease-in-out);
}

.form-group input:focus[b-algipcctzw],
.form-group select:focus[b-algipcctzw],
.form-group textarea:focus[b-algipcctzw] {
    outline: none;
    border-color: var(--color-primary-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.form-group textarea[b-algipcctzw] {
    resize: vertical;
    min-height: 80px;
    border-radius: 16px;
}

.checkbox-label[b-algipcctzw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-black, #000);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-algipcctzw] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary-blue, #2a63af);
}

.form-section[b-algipcctzw] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 16px;
    padding: 16px;
    margin-top: 16px;
}

.form-section h4[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-error[b-algipcctzw] {
    background: rgba(220, 38, 38, 0.05);
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(220, 38, 38, 0.2);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    margin-top: 16px;
}

.btn-spinner[b-algipcctzw] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-white, #fff);
    border-radius: 50%;
    animation: spin-b-algipcctzw 0.8s linear infinite;
    margin-right: 4px;
}

.text-muted[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-secondary, #4b5563);
    font-size: 14px;
}

/* ==========================================================================
   Language Toggle
   ========================================================================== */

.language-toggle-container[b-algipcctzw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 16px;
}

.language-toggle[b-algipcctzw] {
    display: flex;
    background: var(--color-white, #fff);
    border-radius: 70px;
    padding: 4px;
    border: 1px solid var(--card-border, #e1e0e1);
}

.language-toggle button[b-algipcctzw] {
    padding: 8px 20px;
    border: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
    cursor: pointer;
    border-radius: 70px;
    transition: all var(--transition-base, 200ms ease-in-out);
}

.language-toggle button.active[b-algipcctzw] {
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white, #fff);
}

.language-toggle button:hover:not(.active)[b-algipcctzw] {
    background: var(--card-background, #f9fafb);
}

.language-indicator[b-algipcctzw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
}

.language-indicator .dot[b-algipcctzw] {
    width: 8px;
    height: 8px;
    background: #16a34a;
    border-radius: 50%;
}

/* ==========================================================================
   Title Input Container
   ========================================================================== */

.title-input-container[b-algipcctzw] {
    position: relative;
}

.title-input-container input[b-algipcctzw] {
    padding-right: 50px;
    width: 100%;
}

.title-lang-badge[b-algipcctzw] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white, #fff);
    padding: 2px 8px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
}

.title-lang-badge.af[b-algipcctzw] {
    background: var(--color-primary-yellow, #fdb913);
    color: var(--color-black, #000);
}

/* ==========================================================================
   Tags Input
   ========================================================================== */

.tags-input-container[b-algipcctzw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    background: var(--color-white, #fff);
    min-height: 48px;
    cursor: text;
}

.tags-input-container:focus-within[b-algipcctzw] {
    border-color: var(--color-primary-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.tag-item[b-algipcctzw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(42, 99, 175, 0.1);
    color: var(--color-primary-blue, #2a63af);
    padding: 4px 10px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.tag-remove[b-algipcctzw] {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--color-primary-blue, #2a63af);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.tag-remove:hover[b-algipcctzw] {
    background: rgba(42, 99, 175, 0.2);
}

.tags-input[b-algipcctzw] {
    border: none;
    outline: none;
    flex: 1;
    min-width: 100px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    padding: 0;
    background: transparent;
}

.tags-hint[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--color-text-secondary, #4b5563);
    margin-top: 4px;
}

/* ==========================================================================
   Province Chips
   ========================================================================== */

.province-chips[b-algipcctzw] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.province-chip[b-algipcctzw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(42, 99, 175, 0.1);
    color: var(--color-primary-blue, #2a63af);
    padding: 4px 10px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.province-chip-remove[b-algipcctzw] {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--color-primary-blue, #2a63af);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    padding: 0;
}

.province-chip-remove:hover[b-algipcctzw] {
    background: rgba(42, 99, 175, 0.2);
}

/* ==========================================================================
   Category Grid
   ========================================================================== */

.category-grid[b-algipcctzw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.category-checkbox[b-algipcctzw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-white, #fff);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 16px;
    cursor: pointer;
    transition: all var(--transition-base, 200ms ease-in-out);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
}

.category-checkbox:hover[b-algipcctzw] {
    border-color: var(--color-primary-blue, #2a63af);
}

.category-checkbox.selected[b-algipcctzw] {
    background: rgba(42, 99, 175, 0.05);
    border-color: var(--color-primary-blue, #2a63af);
}

.category-checkbox input[b-algipcctzw] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary-blue, #2a63af);
}

/* ==========================================================================
   Priority Section
   ========================================================================== */

.priority-section[b-algipcctzw] {
    background: rgba(253, 185, 19, 0.05);
    border: 1px solid rgba(253, 185, 19, 0.3);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 16px;
}

.priority-header[b-algipcctzw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 12px;
}

.priority-options[b-algipcctzw] {
    display: flex;
    gap: 12px;
}

.priority-option[b-algipcctzw] {
    flex: 1;
    padding: 12px;
    background: var(--color-white, #fff);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 16px;
    cursor: pointer;
    transition: all var(--transition-base, 200ms ease-in-out);
    text-align: center;
}

.priority-option:hover[b-algipcctzw] {
    border-color: var(--color-primary-yellow, #fdb913);
}

.priority-option.selected[b-algipcctzw] {
    border-color: var(--color-primary-yellow, #fdb913);
    background: rgba(253, 185, 19, 0.1);
}

.priority-option.urgent.selected[b-algipcctzw] {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.05);
}

.priority-label[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin-bottom: 4px;
}

.priority-desc[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--color-text-secondary, #4b5563);
}

/* ==========================================================================
   DateTime Section
   ========================================================================== */

.datetime-section[b-algipcctzw] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 16px;
}

.datetime-header[b-algipcctzw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--color-black, #000);
    margin-bottom: 12px;
}

/* ==========================================================================
   Content Section
   ========================================================================== */

.content-section[b-algipcctzw] {
    margin-bottom: 16px;
}

.content-section-title[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
    margin-bottom: 8px;
}

/* ==========================================================================
   Summary Editor
   ========================================================================== */

.summary-editor[b-algipcctzw] {
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 16px;
    overflow: hidden;
}

.summary-textarea[b-algipcctzw],
.content-textarea[b-algipcctzw] {
    width: 100%;
    border: none;
    padding: 12px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
}

.content-textarea[b-algipcctzw] {
    min-height: 200px;
}

.summary-textarea:focus[b-algipcctzw],
.content-textarea:focus[b-algipcctzw] {
    outline: none;
}

.summary-footer[b-algipcctzw] {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--card-background, #f9fafb);
    border-top: 1px solid var(--card-border, #e1e0e1);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--color-text-secondary, #4b5563);
}

.char-count[b-algipcctzw] {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

/* ==========================================================================
   Form Section Variants
   ========================================================================== */

.form-section.news-section[b-algipcctzw] {
    background: rgba(42, 99, 175, 0.03);
    border-color: rgba(42, 99, 175, 0.2);
}

.form-section.news-section h4[b-algipcctzw] {
    color: var(--color-primary-blue, #2a63af);
}

.form-section.announcement-section[b-algipcctzw] {
    background: rgba(253, 185, 19, 0.05);
    border-color: rgba(253, 185, 19, 0.3);
}

.form-section.announcement-section h4[b-algipcctzw] {
    color: #92400e;
}

.form-section.promo-section[b-algipcctzw] {
    background: rgba(34, 197, 94, 0.03);
    border-color: rgba(34, 197, 94, 0.2);
}

.form-section.promo-section h4[b-algipcctzw] {
    color: #16a34a;
}

/* ==========================================================================
   Image Upload Container
   ========================================================================== */

.image-upload-container[b-algipcctzw] {
    border: 2px dashed var(--card-border, #e1e0e1);
    border-radius: 20px;
    overflow: hidden;
    transition: all var(--transition-base, 200ms ease-in-out);
    background: var(--card-background, #f9fafb);
}

.image-upload-container:hover[b-algipcctzw] {
    border-color: var(--color-primary-blue, #2a63af);
}

.image-upload-container.dragging[b-algipcctzw] {
    border-color: var(--color-primary-blue, #2a63af);
    background: rgba(42, 99, 175, 0.03);
    border-style: solid;
}

.image-upload-container.uploading[b-algipcctzw] {
    border-color: #16a34a;
    background: rgba(34, 197, 94, 0.03);
}

/* Upload Placeholder */
.upload-placeholder[b-algipcctzw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    cursor: pointer;
    color: var(--color-text-secondary, #4b5563);
}

.upload-placeholder svg[b-algipcctzw] {
    margin-bottom: 12px;
    color: var(--card-border, #e1e0e1);
}

.upload-title[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin-bottom: 4px;
}

.upload-hint[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--color-text-secondary, #4b5563);
}

/* Upload Progress */
.upload-progress-container[b-algipcctzw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.upload-spinner[b-algipcctzw] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(34, 197, 94, 0.2);
    border-top-color: #16a34a;
    border-radius: 50%;
    animation: spin-b-algipcctzw 1s linear infinite;
    margin-bottom: 12px;
}

.upload-text[b-algipcctzw] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-black, #000);
}

.progress-bar[b-algipcctzw] {
    width: 200px;
    height: 6px;
    background: var(--card-border, #e1e0e1);
    border-radius: 3px;
    margin-top: 12px;
    overflow: hidden;
}

.progress-fill[b-algipcctzw] {
    height: 100%;
    background: #16a34a;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Image Preview */
.image-preview-container[b-algipcctzw] {
    position: relative;
    width: 100%;
}

.image-preview[b-algipcctzw] {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
}

.image-preview-overlay[b-algipcctzw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transition: all 0.3s ease;
}

.image-preview-container:hover .image-preview-overlay[b-algipcctzw] {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.remove-image-btn[b-algipcctzw],
.change-image-btn[b-algipcctzw] {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.remove-image-btn[b-algipcctzw] {
    background: #dc2626;
    color: var(--color-white, #fff);
}

.remove-image-btn:hover[b-algipcctzw] {
    opacity: var(--opacity-hover, 0.9);
}

.change-image-btn[b-algipcctzw] {
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white, #fff);
}

.change-image-btn:hover[b-algipcctzw] {
    opacity: var(--opacity-hover, 0.9);
}

/* Upload Error */
.upload-error[b-algipcctzw] {
    color: #dc2626;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(220, 38, 38, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

/* ==========================================================================
   Tablet Styles (744px)
   ========================================================================== */

@media (min-width: 744px) {
    .stats-grid[b-algipcctzw] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Mobile Styles (max 743px)
   ========================================================================== */

@media (max-width: 743px) {
    .content-admin[b-algipcctzw] {
        padding: 20px 16px;
        gap: 16px;
    }

    .page-header[b-algipcctzw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .page-header h1[b-algipcctzw] {
        font-size: 24px;
    }

    .btn-primary[b-algipcctzw] {
        width: 100%;
        justify-content: center;
    }

    .stats-grid[b-algipcctzw] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card[b-algipcctzw] {
        padding: 16px;
        border-radius: 16px;
    }

    .stat-number[b-algipcctzw] {
        font-size: 24px;
    }

    .filter-row[b-algipcctzw] {
        flex-direction: column;
    }

    .filter-section[b-algipcctzw] {
        padding: 16px;
        border-radius: 16px;
    }

    .content-table-container[b-algipcctzw] {
        overflow-x: auto;
        border-radius: 16px;
    }

    .content-table[b-algipcctzw] {
        min-width: 600px;
    }

    .form-row[b-algipcctzw] {
        grid-template-columns: 1fr;
    }

    .form-row.triple[b-algipcctzw] {
        grid-template-columns: 1fr;
    }

    .priority-options[b-algipcctzw] {
        flex-direction: column;
    }

    .language-toggle-container[b-algipcctzw] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .upload-placeholder[b-algipcctzw] {
        padding: 30px 16px;
    }

    .image-preview[b-algipcctzw] {
        max-height: 200px;
    }
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes spin-b-algipcctzw {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Admin/ContentEdit.razor.rz.scp.css */
/* Content edit page - adapted from prototype docs/ui-redesign/admin/content-edit.html.
   Same shape as the Resort Admin edit page: editor left, live phone preview right. */

.ce-root[b-qxgrk9c4h3] { background: var(--atkv-bg-alt, #f6f5f1); min-height: 100vh; }

.admin-bar[b-qxgrk9c4h3] {
    background: var(--atkv-blue, #2a63af);
    color: #fff;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.admin-bar .brand[b-qxgrk9c4h3] { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; color: #fff; text-decoration: none; }
.admin-bar .brand-mark[b-qxgrk9c4h3] { width: 40px; height: 40px; object-fit: contain; display: block; }
.admin-bar .crumbs[b-qxgrk9c4h3] { font-size: 13px; opacity: 0.9; display: flex; gap: 8px; align-items: center; }
.admin-bar .crumbs a[b-qxgrk9c4h3] { color: #fff; text-decoration: none; opacity: 0.7; }
.admin-bar .crumbs a:hover[b-qxgrk9c4h3] { opacity: 1; }
.admin-bar .who-pill[b-qxgrk9c4h3] { background: rgba(255, 255, 255, 0.15); border-radius: 999px; padding: 4px 12px; font-size: 13px; }

.ce-page[b-qxgrk9c4h3] {
    display: grid;
    grid-template-columns: minmax(560px, 1fr) 480px;
    gap: 28px;
    padding: 28px;
    max-width: 1640px;
    margin: 0 auto;
    align-items: start;
}

/* ===== Editor (left) ===== */
.editor[b-qxgrk9c4h3] { background: #fff; border: 1px solid var(--atkv-line, #e4e1d9); border-radius: 16px; overflow: hidden; }
.editor-head[b-qxgrk9c4h3] { padding: 20px 24px 0; }
.editor-head h1[b-qxgrk9c4h3] { margin: 0; font-size: 22px; color: var(--atkv-ink, #1a1a1a); }
.editor-head .sub[b-qxgrk9c4h3] { font-size: 13px; color: var(--atkv-muted, #6b7280); margin-top: 4px; }
.editor-head .row-meta[b-qxgrk9c4h3] { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--atkv-muted, #6b7280); align-items: center; }
.editor-head .row-meta strong[b-qxgrk9c4h3] { color: var(--atkv-ink, #1a1a1a); font-weight: 600; }
.editor-head .pill[b-qxgrk9c4h3] { background: var(--atkv-blue-50, #eaf1fb); color: var(--atkv-blue, #2a63af); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.pill-draft[b-qxgrk9c4h3] { background: #fef3c7; color: #92400e; }
.pill-pub[b-qxgrk9c4h3] { background: #dcfce7; color: #166534; }

.type-switcher[b-qxgrk9c4h3] { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 24px 0; margin-top: 12px; }
.type-btn[b-qxgrk9c4h3] {
    border: 1.5px solid var(--atkv-line, #e4e1d9); background: #fff; border-radius: 999px;
    padding: 6px 14px; font-weight: 600; font-size: 12px; color: var(--atkv-muted, #6b7280);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 120ms;
}
.type-btn .swatch[b-qxgrk9c4h3] { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.4; }
.type-btn:hover[b-qxgrk9c4h3] { color: var(--atkv-ink, #1a1a1a); border-color: var(--atkv-ink, #1a1a1a); }
.type-btn.active[b-qxgrk9c4h3] { color: #fff; }
.type-btn.active .swatch[b-qxgrk9c4h3] { opacity: 1; }
.type-btn[data-type="news"].active[b-qxgrk9c4h3] { background: #2a63af; border-color: #2a63af; }
.type-btn[data-type="announcement"].active[b-qxgrk9c4h3] { background: #d97706; border-color: #d97706; }
.type-btn[data-type="promotion"].active[b-qxgrk9c4h3] { background: #16a34a; border-color: #16a34a; }
.type-btn[data-type="event"].active[b-qxgrk9c4h3] { background: #ec4899; border-color: #ec4899; }

.lang-bar[b-qxgrk9c4h3] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 24px 0; margin-top: 4px; }
.lang-bar .label[b-qxgrk9c4h3] { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--atkv-muted, #6b7280); font-weight: 700; }
.lang-toggle[b-qxgrk9c4h3] { display: inline-flex; padding: 4px; border: 1.5px solid var(--atkv-line, #e4e1d9); border-radius: 999px; background: #fff; }
.lang-toggle button[b-qxgrk9c4h3] { border: 0; background: transparent; padding: 6px 18px; border-radius: 999px; font-weight: 700; font-size: 12px; color: var(--atkv-muted, #6b7280); cursor: pointer; transition: background 120ms, color 120ms; display: inline-flex; align-items: center; gap: 8px; }
.lang-toggle button.active[b-qxgrk9c4h3] { background: var(--atkv-blue, #2a63af); color: #fff; }
.lang-toggle button.active.af[b-qxgrk9c4h3] { background: #b45309; color: #fff; }
.lang-bar .lang-hint[b-qxgrk9c4h3] { font-size: 11px; color: var(--atkv-muted, #6b7280); }

.tabs-strip[b-qxgrk9c4h3] { display: flex; gap: 4px; padding: 14px 24px 0; border-bottom: 1px solid var(--atkv-line, #e4e1d9); overflow-x: auto; scrollbar-width: none; }
.tabs-strip[b-qxgrk9c4h3]::-webkit-scrollbar { display: none; }
.tabs-strip button[b-qxgrk9c4h3] { border: 0; background: transparent; padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--atkv-muted, #6b7280); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; transition: color 120ms, border-color 120ms; }
.tabs-strip button:hover[b-qxgrk9c4h3] { color: var(--atkv-ink, #1a1a1a); }
.tabs-strip button.active[b-qxgrk9c4h3] { color: var(--atkv-blue, #2a63af); border-bottom-color: var(--atkv-blue, #2a63af); }

.tab-pane[b-qxgrk9c4h3] { display: none; padding: 22px 24px; }
.tab-pane.active[b-qxgrk9c4h3] { display: block; }

.form-grid[b-qxgrk9c4h3] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .full[b-qxgrk9c4h3] { grid-column: 1 / -1; }
.field-block label[b-qxgrk9c4h3] { display: block; font-size: 12px; font-weight: 600; color: var(--atkv-ink, #1a1a1a); margin-bottom: 6px; }
.field-block input[b-qxgrk9c4h3], .field-block select[b-qxgrk9c4h3], .field-block textarea[b-qxgrk9c4h3] {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--atkv-line, #e4e1d9); border-radius: 10px;
    font-family: inherit; font-size: 14px; color: var(--atkv-ink, #1a1a1a); background: #fff;
    transition: border-color 120ms, box-shadow 120ms; box-sizing: border-box;
}
.field-block textarea[b-qxgrk9c4h3] { min-height: 100px; resize: vertical; line-height: 1.5; }
.field-block input:focus[b-qxgrk9c4h3], .field-block select:focus[b-qxgrk9c4h3], .field-block textarea:focus[b-qxgrk9c4h3] { outline: none; border-color: var(--atkv-blue, #2a63af); box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.15); }
.field-block .hint[b-qxgrk9c4h3] { font-size: 11px; color: var(--atkv-muted, #6b7280); margin-top: 4px; }

.section-title[b-qxgrk9c4h3] { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--atkv-muted, #6b7280); font-weight: 700; margin: 18px 0 12px; }
.section-title:first-child[b-qxgrk9c4h3] { margin-top: 0; }

.image-drop[b-qxgrk9c4h3] { border: 2px dashed var(--atkv-line, #e4e1d9); border-radius: 12px; padding: 18px; text-align: center; background: var(--atkv-bg-alt, #f6f5f1); }
.image-drop.with-image[b-qxgrk9c4h3] { background: var(--atkv-blue-50, #eaf1fb); border-style: solid; border-color: var(--atkv-blue, #2a63af); padding: 0; overflow: hidden; }
.image-drop .preview-img[b-qxgrk9c4h3] { width: 100%; height: 180px; object-fit: cover; display: block; }
.image-drop .preview-meta[b-qxgrk9c4h3] { padding: 10px 14px; background: #fff; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--atkv-muted, #6b7280); }

.checkbox-grid[b-qxgrk9c4h3] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.checkbox-grid.two[b-qxgrk9c4h3] { grid-template-columns: 1fr 1fr; }
.checkbox-grid label[b-qxgrk9c4h3] { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--atkv-line, #e4e1d9); border-radius: 8px; font-size: 13px; cursor: pointer; transition: background 120ms; }
.checkbox-grid label:hover[b-qxgrk9c4h3] { background: var(--atkv-bg-alt, #f6f5f1); }
.checkbox-grid input[b-qxgrk9c4h3] { accent-color: var(--atkv-blue, #2a63af); }

.toggle-row[b-qxgrk9c4h3] { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--atkv-line, #e4e1d9); border-radius: 10px; background: #fff; }
.toggle-row + .toggle-row[b-qxgrk9c4h3] { margin-top: 8px; }
.toggle-row .body .name[b-qxgrk9c4h3] { font-weight: 600; color: var(--atkv-ink, #1a1a1a); font-size: 13px; }
.toggle-row .body .meta[b-qxgrk9c4h3] { font-size: 11px; color: var(--atkv-muted, #6b7280); margin-top: 2px; }
.toggle[b-qxgrk9c4h3] { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--atkv-line, #e4e1d9); cursor: pointer; transition: background 120ms; flex-shrink: 0; border: 0; }
.toggle[b-qxgrk9c4h3]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: left 150ms; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.toggle.on[b-qxgrk9c4h3] { background: var(--atkv-blue, #2a63af); }
.toggle.on[b-qxgrk9c4h3]::after { left: 18px; }

.footer-bar[b-qxgrk9c4h3] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--atkv-line, #e4e1d9); background: var(--atkv-bg-alt, #f6f5f1); }
.footer-bar .status[b-qxgrk9c4h3] { font-size: 12px; color: var(--atkv-muted, #6b7280); display: flex; align-items: center; gap: 8px; }
.footer-bar .status .dot[b-qxgrk9c4h3] { width: 8px; height: 8px; border-radius: 50%; background: var(--atkv-yellow, #fdb913); box-shadow: 0 0 0 3px var(--atkv-yellow-50, #fff7e0); }
.footer-bar .actions[b-qxgrk9c4h3] { display: flex; gap: 10px; }
.footer-bar button[b-qxgrk9c4h3] { padding: 10px 22px; border-radius: 10px; border: 0; font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-ghost[b-qxgrk9c4h3] { background: transparent; color: var(--atkv-muted, #6b7280); }
.btn-ghost:hover[b-qxgrk9c4h3] { color: var(--atkv-ink, #1a1a1a); }
.btn-save[b-qxgrk9c4h3] { background: var(--atkv-blue, #2a63af); color: #fff; }
.btn-pub[b-qxgrk9c4h3] { background: #16a34a; color: #fff; }
.footer-bar button:disabled[b-qxgrk9c4h3] { opacity: 0.6; cursor: default; }

.form-error[b-qxgrk9c4h3] { margin: 0 24px 12px; padding: 10px 14px; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-size: 13px; border: 1px solid #fecaca; }

/* ===== Preview (right) ===== */
.preview[b-qxgrk9c4h3] { position: sticky; top: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.preview-head[b-qxgrk9c4h3] { width: 100%; background: #fff; border: 1px solid var(--atkv-line, #e4e1d9); border-radius: 12px; padding: 12px 16px; font-size: 12px; color: var(--atkv-muted, #6b7280); display: flex; justify-content: space-between; align-items: center; }
.preview-head .live-pill[b-qxgrk9c4h3] { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--atkv-ink, #1a1a1a); }
.preview-head .live-pill[b-qxgrk9c4h3]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 2px #d1fae5; }
.preview-phone[b-qxgrk9c4h3] { width: 393px; max-width: 100%; height: 800px; background: #fff; border-radius: 32px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.08); overflow: hidden; border: 6px solid #1f2937; }
.preview-iframe[b-qxgrk9c4h3] { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.preview-hint[b-qxgrk9c4h3] { font-size: 11px; color: var(--atkv-muted, #6b7280); }
.preview-empty[b-qxgrk9c4h3] { display: grid; place-items: center; height: 100%; padding: 24px; text-align: center; color: var(--atkv-muted, #6b7280); font-size: 13px; }

/* Afrikaans-mode page tint (matches prototype + ResortEdit affordance) */
.ce-root[data-lang="af"][b-qxgrk9c4h3] { background: #fff7e0; }
.ce-root[data-lang="af"] .editor[b-qxgrk9c4h3] { background: #fffdf2; }
.ce-root[data-lang="af"] .field-block input[b-qxgrk9c4h3],
.ce-root[data-lang="af"] .field-block textarea[b-qxgrk9c4h3],
.ce-root[data-lang="af"] .field-block select[b-qxgrk9c4h3] { background: #fffbe9; }
.ce-root[data-lang="af"] .footer-bar[b-qxgrk9c4h3] { background: #fef3c7; }

/* Quill body editors: keep both mounted, show only the active language */
.body-editor[hidden][b-qxgrk9c4h3] { display: none; }

@media (max-width: 1180px) {
    .ce-page[b-qxgrk9c4h3] { grid-template-columns: 1fr; }
    .preview[b-qxgrk9c4h3] { position: static; }
}
/* /Pages/Admin/ResortAdmin.razor.rz.scp.css */
/**
 * ATKV Resort Admin Page Styles
 * Based on ContentAdmin.razor.css design patterns
 * Breakpoints: 393px (mobile), 744px (tablet), desktop (default)
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.resort-admin[b-l8wl21sdqi] {
    min-height: 100vh;
    background: var(--color-white, #fff);
    max-width: 1280px;
    padding: 48px 24px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-l8wl21sdqi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header h1[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0;
}

/* ==========================================================================
   Stats Grid
   ========================================================================== */

.stats-grid[b-l8wl21sdqi] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card[b-l8wl21sdqi] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    padding: 24px;
}

.stat-number[b-l8wl21sdqi] {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary-blue, #2a63af);
    line-height: 1;
}

.stat-number.available[b-l8wl21sdqi] {
    color: #16a34a;
}

.stat-number.unavailable[b-l8wl21sdqi] {
    color: var(--color-text-secondary, #4b5563);
}

.stat-number.featured[b-l8wl21sdqi] {
    color: var(--color-primary-yellow, #fdb913);
}

.stat-label[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
    margin-top: 8px;
}

/* ==========================================================================
   Filter Section
   ========================================================================== */

.filter-section[b-l8wl21sdqi] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    padding: 24px;
}

.filter-row[b-l8wl21sdqi] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group[b-l8wl21sdqi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

.filter-group.search[b-l8wl21sdqi] {
    flex: 1;
    min-width: 200px;
}

.filter-group label[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
    text-transform: uppercase;
}

.filter-group select[b-l8wl21sdqi],
.filter-group input[b-l8wl21sdqi] {
    padding: 12px 16px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: var(--color-white, #fff);
    height: 48px;
}

.filter-group select:focus[b-l8wl21sdqi],
.filter-group input:focus[b-l8wl21sdqi] {
    outline: none;
    border-color: var(--color-primary-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

/* ==========================================================================
   Content Table
   ========================================================================== */

.content-table-container[b-l8wl21sdqi] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    overflow: hidden;
}

.content-table[b-l8wl21sdqi] {
    width: 100%;
    border-collapse: collapse;
}

.content-table th[b-l8wl21sdqi] {
    background: var(--color-white, #fff);
    padding: 16px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
    text-transform: uppercase;
    border-bottom: 1px solid var(--card-border, #e1e0e1);
}

.content-table td[b-l8wl21sdqi] {
    padding: 16px;
    border-bottom: 1px solid var(--card-border, #e1e0e1);
    vertical-align: middle;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.content-table tr:last-child td[b-l8wl21sdqi] {
    border-bottom: none;
}

.content-table tbody tr:nth-child(even)[b-l8wl21sdqi] {
    background: rgba(0, 0, 0, 0.02);
}

.content-table tr:hover[b-l8wl21sdqi] {
    background: rgba(42, 99, 175, 0.03);
}

.title-cell[b-l8wl21sdqi] {
    max-width: 300px;
}

.resort-name-row[b-l8wl21sdqi] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.resort-thumb[b-l8wl21sdqi] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
}

.title-text[b-l8wl21sdqi] {
    font-weight: 600;
    color: var(--color-black, #000);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-sub[b-l8wl21sdqi] {
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.price-cell[b-l8wl21sdqi] {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: var(--color-black, #000);
    white-space: nowrap;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge[b-l8wl21sdqi] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.badge-published[b-l8wl21sdqi] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.badge-draft[b-l8wl21sdqi] {
    background: rgba(100, 116, 139, 0.1);
    color: var(--color-text-secondary, #4b5563);
}

.badge-featured[b-l8wl21sdqi] {
    background: rgba(253, 185, 19, 0.15);
    color: #92400e;
    margin-left: 8px;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.actions-cell[b-l8wl21sdqi] {
    white-space: nowrap;
}

.action-btn[b-l8wl21sdqi] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 10px;
    background: var(--color-white, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base, 200ms ease-in-out);
    margin-right: 4px;
}

.action-btn:last-child[b-l8wl21sdqi] {
    margin-right: 0;
}

.action-btn:hover[b-l8wl21sdqi] {
    opacity: var(--opacity-hover, 0.9);
}

.action-btn.edit[b-l8wl21sdqi] {
    color: var(--color-primary-blue, #2a63af);
}

.action-btn.edit:hover[b-l8wl21sdqi] {
    background: rgba(42, 99, 175, 0.05);
    border-color: var(--color-primary-blue, #2a63af);
}

.action-btn.publish[b-l8wl21sdqi] {
    color: #16a34a;
}

.action-btn.publish:hover[b-l8wl21sdqi] {
    background: rgba(34, 197, 94, 0.05);
    border-color: #16a34a;
}

.action-btn.unpublish[b-l8wl21sdqi] {
    color: #d97706;
}

.action-btn.unpublish:hover[b-l8wl21sdqi] {
    background: rgba(245, 158, 11, 0.05);
    border-color: #d97706;
}

.action-btn.delete[b-l8wl21sdqi] {
    color: #dc2626;
}

.action-btn.delete:hover[b-l8wl21sdqi] {
    background: rgba(239, 68, 68, 0.05);
    border-color: #dc2626;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination[b-l8wl21sdqi] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-top: 1px solid var(--card-border, #e1e0e1);
}

.page-btn[b-l8wl21sdqi] {
    padding: 10px 20px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    background: var(--color-white, #fff);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.page-btn:hover:not(:disabled)[b-l8wl21sdqi] {
    background: var(--card-background, #f9fafb);
    border-color: var(--color-primary-blue, #2a63af);
}

.page-btn:disabled[b-l8wl21sdqi] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary[b-l8wl21sdqi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 48px;
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white, #fff);
    border: none;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.btn-primary:hover[b-l8wl21sdqi] {
    opacity: var(--opacity-hover, 0.9);
}

.btn-primary:disabled[b-l8wl21sdqi] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-secondary[b-l8wl21sdqi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 48px;
    background: var(--color-white, #fff);
    color: var(--color-text-secondary, #4b5563);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.btn-secondary:hover[b-l8wl21sdqi] {
    opacity: var(--opacity-hover, 0.9);
    border-color: var(--color-primary-blue, #2a63af);
    color: var(--color-primary-blue, #2a63af);
}

.btn-danger[b-l8wl21sdqi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 48px;
    background: #dc2626;
    color: var(--color-white, #fff);
    border: none;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.btn-danger:hover[b-l8wl21sdqi] {
    opacity: var(--opacity-hover, 0.9);
}

.btn-danger:disabled[b-l8wl21sdqi] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================================================
   Loading & Error States
   ========================================================================== */

.loading-spinner[b-l8wl21sdqi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
}

.spinner[b-l8wl21sdqi] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(42, 99, 175, 0.2);
    border-top-color: var(--color-primary-blue, #2a63af);
    border-radius: 50%;
    animation: spin-b-l8wl21sdqi 1s linear infinite;
}

.loading-spinner p[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
    margin: 0;
}

.error-message[b-l8wl21sdqi] {
    text-align: center;
    padding: 64px 24px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    color: #dc2626;
}

.error-message p[b-l8wl21sdqi] {
    font-size: 14px;
    margin: 0 0 16px;
}

.empty-state[b-l8wl21sdqi] {
    text-align: center;
    padding: 80px 24px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
}

.empty-state svg[b-l8wl21sdqi] {
    color: var(--card-border, #e1e0e1);
    margin-bottom: 16px;
}

.empty-state h3[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0 0 8px;
}

.empty-state p[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
    margin: 0 0 24px;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.content-modal-backdrop[b-l8wl21sdqi] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    padding: 20px;
}

.content-modal[b-l8wl21sdqi] {
    background: var(--color-white, #fff);
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.content-modal.content-modal-sm[b-l8wl21sdqi] {
    max-width: 400px;
}

.content-modal-header[b-l8wl21sdqi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--card-border, #e1e0e1);
}

.content-modal-header h2[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0;
}

.content-modal-close[b-l8wl21sdqi] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--card-border, #e1e0e1);
    background: transparent;
    font-size: 24px;
    color: var(--color-text-secondary, #4b5563);
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.content-modal-close:hover[b-l8wl21sdqi] {
    opacity: var(--opacity-hover, 0.9);
    background: var(--card-background, #f9fafb);
}

.content-modal-body[b-l8wl21sdqi] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.content-modal-footer[b-l8wl21sdqi] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--card-border, #e1e0e1);
    background: var(--card-background, #f9fafb);
}

/* ==========================================================================
   Spinner / Misc
   ========================================================================== */

.btn-spinner[b-l8wl21sdqi] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-white, #fff);
    border-radius: 50%;
    animation: spin-b-l8wl21sdqi 0.8s linear infinite;
    margin-right: 4px;
}

.text-muted[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-secondary, #4b5563);
    font-size: 14px;
}

/* ==========================================================================
   Tags/Chips Input
   ========================================================================== */

.tags-input-container[b-l8wl21sdqi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    background: var(--color-white, #fff);
    min-height: 48px;
    cursor: text;
}

.tags-input-container:focus-within[b-l8wl21sdqi] {
    border-color: var(--color-primary-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.tag-item[b-l8wl21sdqi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(42, 99, 175, 0.1);
    color: var(--color-primary-blue, #2a63af);
    padding: 4px 10px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.tag-item.highlight-tag[b-l8wl21sdqi] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.tag-remove[b-l8wl21sdqi] {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.tag-remove:hover[b-l8wl21sdqi] {
    background: rgba(42, 99, 175, 0.2);
}

.tag-item-af[b-l8wl21sdqi] {
    background: rgba(253, 185, 19, 0.12);
    color: #b88200;
    border-color: rgba(253, 185, 19, 0.4);
}

.tag-item-af .tag-remove:hover[b-l8wl21sdqi] {
    background: rgba(253, 185, 19, 0.3);
}

/* Language badges for bilingual form fields */
.lang-badge[b-l8wl21sdqi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 18px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-right: 4px;
}

.lang-en[b-l8wl21sdqi] {
    background: var(--color-primary-blue, #2a63af);
    color: #fff;
}

.lang-af[b-l8wl21sdqi] {
    background: var(--color-yellow, #fdb913);
    color: #333;
}

.tags-input[b-l8wl21sdqi] {
    border: none;
    outline: none;
    flex: 1;
    min-width: 100px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    padding: 0;
    background: transparent;
}

.tags-hint[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--color-text-secondary, #4b5563);
    margin-top: 4px;
}

/* ==========================================================================
   Content Section
   ========================================================================== */

.content-section[b-l8wl21sdqi] {
    margin-bottom: 16px;
}

.content-section-title[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
    margin-bottom: 8px;
}

/* ==========================================================================
   Image Upload
   ========================================================================== */

.image-upload-container[b-l8wl21sdqi] {
    border: 2px dashed var(--card-border, #e1e0e1);
    border-radius: 20px;
    overflow: hidden;
    transition: all var(--transition-base, 200ms ease-in-out);
    background: var(--card-background, #f9fafb);
}

.image-upload-container:hover[b-l8wl21sdqi] {
    border-color: var(--color-primary-blue, #2a63af);
}

.image-upload-container.dragging[b-l8wl21sdqi] {
    border-color: var(--color-primary-blue, #2a63af);
    background: rgba(42, 99, 175, 0.03);
    border-style: solid;
}

.image-upload-container.uploading[b-l8wl21sdqi] {
    border-color: #16a34a;
    background: rgba(34, 197, 94, 0.03);
}

.upload-placeholder[b-l8wl21sdqi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    cursor: pointer;
    color: var(--color-text-secondary, #4b5563);
}

.upload-placeholder svg[b-l8wl21sdqi] {
    margin-bottom: 12px;
    color: var(--card-border, #e1e0e1);
}

.upload-title[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin-bottom: 4px;
}

.upload-hint[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--color-text-secondary, #4b5563);
}

.upload-progress-container[b-l8wl21sdqi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.upload-spinner[b-l8wl21sdqi] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(34, 197, 94, 0.2);
    border-top-color: #16a34a;
    border-radius: 50%;
    animation: spin-b-l8wl21sdqi 1s linear infinite;
    margin-bottom: 12px;
}

.upload-text[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-black, #000);
}

.image-preview-container[b-l8wl21sdqi] {
    position: relative;
    width: 100%;
}

.image-preview[b-l8wl21sdqi] {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
}

.image-preview-overlay[b-l8wl21sdqi] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transition: all 0.3s ease;
}

.image-preview-container:hover .image-preview-overlay[b-l8wl21sdqi] {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.remove-image-btn[b-l8wl21sdqi],
.change-image-btn[b-l8wl21sdqi] {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.remove-image-btn[b-l8wl21sdqi] {
    background: #dc2626;
    color: var(--color-white, #fff);
}

.remove-image-btn:hover[b-l8wl21sdqi] {
    opacity: var(--opacity-hover, 0.9);
}

.change-image-btn[b-l8wl21sdqi] {
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white, #fff);
}

.change-image-btn:hover[b-l8wl21sdqi] {
    opacity: var(--opacity-hover, 0.9);
}

.upload-error[b-l8wl21sdqi] {
    color: #dc2626;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(220, 38, 38, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

/* ==========================================================================
   Gallery Item Rows (Category Image Sections)
   ========================================================================== */

.gallery-items-list[b-l8wl21sdqi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}

.gallery-item-row[b-l8wl21sdqi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 12px;
}

.gallery-item-thumb[b-l8wl21sdqi] {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.gallery-item-labels[b-l8wl21sdqi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gallery-item-label[b-l8wl21sdqi] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    background: var(--color-white, #fff);
}

.gallery-item-label:focus[b-l8wl21sdqi] {
    outline: none;
    border-color: var(--color-primary-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.gallery-item-filename[b-l8wl21sdqi] {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-item-remove[b-l8wl21sdqi] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
}

.gallery-add-section[b-l8wl21sdqi] {
    margin-top: 8px;
}

.gallery-add-btn[b-l8wl21sdqi] {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
}

.gallery-uploading[b-l8wl21sdqi] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    padding: 8px 0;
}

/* ==========================================================================
   Mobile Styles (max 743px)
   ========================================================================== */

@media (max-width: 743px) {
    .resort-admin[b-l8wl21sdqi] {
        padding: 20px 16px;
        gap: 16px;
    }

    .page-header[b-l8wl21sdqi] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .page-header h1[b-l8wl21sdqi] {
        font-size: 24px;
    }

    .btn-primary[b-l8wl21sdqi] {
        width: 100%;
        justify-content: center;
    }

    .stats-grid[b-l8wl21sdqi] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card[b-l8wl21sdqi] {
        padding: 16px;
        border-radius: 16px;
    }

    .stat-number[b-l8wl21sdqi] {
        font-size: 24px;
    }

    .filter-row[b-l8wl21sdqi] {
        flex-direction: column;
    }

    .filter-section[b-l8wl21sdqi] {
        padding: 16px;
        border-radius: 16px;
    }

    .content-table-container[b-l8wl21sdqi] {
        overflow-x: auto;
        border-radius: 16px;
    }

    .content-table[b-l8wl21sdqi] {
        min-width: 600px;
    }

    .form-row[b-l8wl21sdqi] {
        grid-template-columns: 1fr;
    }

    .form-row.triple[b-l8wl21sdqi] {
        grid-template-columns: 1fr;
    }

    .upload-placeholder[b-l8wl21sdqi] {
        padding: 30px 16px;
    }

    .image-preview[b-l8wl21sdqi] {
        max-height: 200px;
    }
}

/* ==========================================================================
   Tab Label Editing
   ========================================================================== */

.tab-label-row[b-l8wl21sdqi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light, #e9ecef);
}

/* Per-section rich-text description blocks */
.section-description-block[b-l8wl21sdqi] {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-light, #e9ecef);
}

.section-description-block:last-child[b-l8wl21sdqi] {
    border-bottom: none;
}

.section-description-block__heading[b-l8wl21sdqi] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}

.tab-label-row:last-child[b-l8wl21sdqi] {
    border-bottom: none;
}

.tab-label-key[b-l8wl21sdqi] {
    min-width: 110px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #6c757d);
    text-transform: capitalize;
}

.tab-label-field[b-l8wl21sdqi] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.tab-label-field input[b-l8wl21sdqi] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 6px;
    font-size: 13px;
    background: white;
    transition: border-color 200ms;
}

.tab-label-field input:focus[b-l8wl21sdqi] {
    border-color: var(--color-primary-blue, #2a63af);
    outline: none;
    box-shadow: 0 0 0 2px rgba(42, 99, 175, 0.1);
}

.tab-label-field input[b-l8wl21sdqi]::placeholder {
    color: #adb5bd;
    font-style: italic;
}

@media (max-width: 768px) {
    .tab-label-row[b-l8wl21sdqi] {
        flex-wrap: wrap;
    }

    .tab-label-key[b-l8wl21sdqi] {
        width: 100%;
        min-width: unset;
    }

    .tab-label-field[b-l8wl21sdqi] {
        width: 100%;
    }
}

/* ==========================================================================
   Amenity Icon on Chips
   ========================================================================== */

.tag-item-with-icon[b-l8wl21sdqi] {
    padding-left: 4px;
}

.tag-icon[b-l8wl21sdqi] {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(42, 99, 175, 0.15);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 200ms ease-in-out;
    padding: 0;
    color: var(--color-primary-blue, #2a63af);
    font-size: 12px;
    flex-shrink: 0;
}

.tag-icon:hover[b-l8wl21sdqi] {
    background: rgba(42, 99, 175, 0.3);
}

.tag-icon-af[b-l8wl21sdqi] {
    background: rgba(253, 185, 19, 0.25);
    color: #8a6500;
}

.tag-icon-af:hover[b-l8wl21sdqi] {
    background: rgba(253, 185, 19, 0.45);
}

/* ==========================================================================
   Icon Picker Modal
   ========================================================================== */

.icon-picker-modal[b-l8wl21sdqi] {
    max-width: 600px;
}

.icon-search-input[b-l8wl21sdqi] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: var(--color-white, #fff);
    margin-bottom: 16px;
    box-sizing: border-box;
}

.icon-search-input:focus[b-l8wl21sdqi] {
    outline: none;
    border-color: var(--color-primary-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.icon-category[b-l8wl21sdqi] {
    margin-bottom: 16px;
}

.icon-category-title[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.icon-grid[b-l8wl21sdqi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.icon-grid-item[b-l8wl21sdqi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 4px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 12px;
    background: var(--color-white, #fff);
    cursor: pointer;
    transition: all 200ms ease-in-out;
}

.icon-grid-item:hover[b-l8wl21sdqi] {
    border-color: var(--color-primary-blue, #2a63af);
    background: rgba(42, 99, 175, 0.03);
}

.icon-grid-item--selected[b-l8wl21sdqi] {
    border-color: var(--color-primary-blue, #2a63af);
    background: rgba(42, 99, 175, 0.08);
    box-shadow: 0 0 0 2px rgba(42, 99, 175, 0.2);
}

.icon-grid-item i[b-l8wl21sdqi] {
    font-size: 22px;
    color: var(--color-primary-blue, #2a63af);
}

.icon-grid-label[b-l8wl21sdqi] {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    color: var(--color-text-secondary, #4b5563);
    text-align: center;
    line-height: 1.2;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes spin-b-l8wl21sdqi {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Admin/ResortEdit.razor.rz.scp.css */
/* =========================================================================
   Resort edit page - lifted from docs/ui-redesign/admin/resort-edit.html
   so the live admin renders at 90% visual fidelity to the prototype.
   Only structural styles live here - colour tokens come from the design
   system. Component-scoped (Blazor adds b-xxxxx attribute selector).
   ========================================================================= */

[b-njtjykal82] body { background: var(--atkv-bg-alt, #f3f4f6); }

/* Light in-content breadcrumb. The blue app banner (TopNavBar) now comes from
   MainLayout, so this page no longer draws its own bar - just a slim breadcrumb
   row aligned with the editor grid below it. */
.re-crumbs[b-njtjykal82] {
    max-width: 1640px;
    margin: 0 auto;
    padding: 16px 28px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--atkv-muted, #6b7280);
}
.re-crumbs a[b-njtjykal82] {
    color: var(--atkv-blue, #2a63af);
    text-decoration: none;
    font-weight: 600;
}
.re-crumbs a:hover[b-njtjykal82] { text-decoration: underline; }
.re-crumbs .sep[b-njtjykal82] { opacity: 0.5; }
.re-crumbs .here[b-njtjykal82] { color: var(--atkv-ink, #0f172a); font-weight: 600; }

.re-page[b-njtjykal82] {
    display: grid;
    /* Default fits viewport >= ~900px (editor 440 + preview 400 + 20 gap + 40 padding).
       Wider viewports get a bigger preview via the @media rule below.
       Narrower viewports collapse to single column (preview hidden). */
    grid-template-columns: minmax(440px, 1fr) 400px;
    gap: 28px;
    padding: 28px;
    max-width: 1640px;
    margin: 0 auto;
    align-items: start;
}

.editor[b-njtjykal82] {
    background: #fff;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 16px;
    overflow: hidden;
}
.editor-head[b-njtjykal82] { padding: 20px 24px 0; }
/* Basics region (above the tabs) shares the same 24px horizontal inset as the
   editor head, language bar, tab strip and tab panes. */
.editor-body[b-njtjykal82] { padding: 0 24px 22px; }
.editor-body.is-collapsed[b-njtjykal82] { display: none; }

/* Collapse toggle bar for the basics/colours/hero region. Full-width, clickable,
   chevron rotates when collapsed. Lets the user fold the top section so the tab
   editor sits beside the live preview. */
/* Card container - matches the Profile "Personal information" card. */
.re-card[b-njtjykal82] {
    background: #fff;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.re-basics-card[b-njtjykal82] { margin: 8px 0 20px; }

.re-collapse-toggle[b-njtjykal82] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 18px 24px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.re-collapse-toggle:hover[b-njtjykal82] { background: #f9fafb; }
.re-collapse-toggle.is-collapsed[b-njtjykal82] { background: transparent; }
.re-collapse-toggle__chevron[b-njtjykal82] {
    color: var(--atkv-muted, #6b7280);
    font-size: 13px;
    transition: transform 150ms ease;
}
/* Chevron points up when expanded (matches the Profile card), down when collapsed. */
.re-collapse-toggle.is-collapsed .re-collapse-toggle__chevron[b-njtjykal82] { transform: rotate(180deg); }
.re-collapse-toggle__title[b-njtjykal82] {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--atkv-ink, #0f172a);
}
.editor-head h1[b-njtjykal82] { margin: 0; font-size: 22px; color: var(--atkv-ink, #0f172a); }
.editor-head .sub[b-njtjykal82] { font-size: 13px; color: var(--atkv-muted, #6b7280); margin-top: 4px; }
.editor-head .row-meta[b-njtjykal82] {
    display: flex;
    gap: 16px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--atkv-muted, #6b7280);
    flex-wrap: wrap;
}
.editor-head .row-meta strong[b-njtjykal82] { color: var(--atkv-ink, #0f172a); font-weight: 600; }
.editor-head .pill[b-njtjykal82] {
    background: var(--atkv-blue-50, #eff6ff);
    color: var(--atkv-blue, #2a63af);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.lang-bar[b-njtjykal82] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px 0;
    flex-wrap: wrap;
}
.lang-bar .label[b-njtjykal82] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--atkv-muted, #6b7280);
    font-weight: 700;
}
.lang-toggle[b-njtjykal82] {
    display: inline-flex;
    background: var(--atkv-bg-alt, #f3f4f6);
    border-radius: 999px;
    padding: 2px;
}
.lang-toggle button[b-njtjykal82] {
    border: 0;
    background: transparent;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    color: var(--atkv-muted, #6b7280);
}
.lang-toggle button.active[b-njtjykal82] { background: var(--atkv-blue, #2a63af); color: #fff; }
.lang-toggle button.active.af[b-njtjykal82] { background: #b45309; color: #fff; }
.lang-toggle .flag[b-njtjykal82] {
    font-size: 10px;
    font-weight: 800;
    margin-right: 4px;
    opacity: 0.75;
}
.lang-hint[b-njtjykal82] { font-size: 11px; color: var(--atkv-muted, #6b7280); }

.tabs-strip[b-njtjykal82] {
    display: flex;
    gap: 4px;
    padding: 14px 24px 0;
    margin-top: 14px;
    border-bottom: 1px solid var(--atkv-line, #e5e7eb);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs-strip[b-njtjykal82]::-webkit-scrollbar { display: none; }
.tabs-strip button[b-njtjykal82] {
    border: 0;
    background: transparent;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--atkv-muted, #6b7280);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 120ms, border-color 120ms;
}
.tabs-strip button:hover[b-njtjykal82] { color: var(--atkv-ink, #0f172a); }
.tabs-strip button.active[b-njtjykal82] {
    color: var(--atkv-blue, #2a63af);
    border-bottom-color: var(--atkv-blue, #2a63af);
}
.tabs-strip .count[b-njtjykal82] {
    margin-left: 6px;
    background: var(--atkv-line-soft, #e5e7eb);
    color: var(--atkv-muted, #6b7280);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}
.tabs-strip button.active .count[b-njtjykal82] {
    background: rgba(42,99,175,0.1);
    color: var(--atkv-blue, #2a63af);
}

.tab-pane[b-njtjykal82] { display: none; padding: 24px; }
.tab-pane.active[b-njtjykal82] { display: block; }

.section-title[b-njtjykal82] {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--atkv-muted, #6b7280);
    font-weight: 700;
    margin: 22px 0 12px;
}
.section-title:first-child[b-njtjykal82] { margin-top: 0; }

.form-grid[b-njtjykal82] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
.form-grid .full[b-njtjykal82] { grid-column: 1 / -1; }
.field-block label[b-njtjykal82] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--atkv-ink, #0f172a);
    margin-bottom: 6px;
}
.field-block input[b-njtjykal82],
.field-block select[b-njtjykal82],
.field-block textarea[b-njtjykal82] {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--atkv-line, #e5e7eb);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--atkv-ink, #0f172a);
    background: #fff;
    transition: border-color 120ms, box-shadow 120ms;
}
.field-block textarea[b-njtjykal82] { min-height: 90px; resize: vertical; line-height: 1.5; }
.field-block input:focus[b-njtjykal82],
.field-block select:focus[b-njtjykal82],
.field-block textarea:focus[b-njtjykal82] {
    outline: none;
    border-color: var(--atkv-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42,99,175,0.15);
}
.field-block .hint[b-njtjykal82] {
    font-size: 11px;
    color: var(--atkv-muted, #6b7280);
    margin-top: 4px;
}

.hex-trio[b-njtjykal82] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.hex-trio__col[b-njtjykal82] { display: flex; flex-direction: column; gap: 6px; }
.hex-trio__label[b-njtjykal82] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--atkv-muted, #6b7280);
}
.hex-trio__input-wrap[b-njtjykal82] {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--atkv-line, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.hex-trio__input-wrap:focus-within[b-njtjykal82] {
    border-color: var(--atkv-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42,99,175,0.15);
}
.hex-trio__swatch[b-njtjykal82] {
    width: 44px; height: 44px;
    border: 0; padding: 0; background: transparent;
    cursor: pointer; flex-shrink: 0;
}
.hex-trio__swatch[b-njtjykal82]::-webkit-color-swatch-wrapper { padding: 0; }
.hex-trio__swatch[b-njtjykal82]::-webkit-color-swatch { border: 0; }
.hex-trio__swatch[b-njtjykal82]::-moz-color-swatch { border: 0; }
.hex-trio__hex[b-njtjykal82] {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0 12px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 13px;
    color: var(--atkv-ink, #0f172a);
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hex-trio__hex:focus[b-njtjykal82] { outline: none; }

.image-drop[b-njtjykal82] {
    border: 2px dashed var(--atkv-line, #e5e7eb);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    background: var(--atkv-bg-alt, #f3f4f6);
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
    position: relative;
}
.image-drop:hover[b-njtjykal82] { border-color: var(--atkv-blue, #2a63af); background: #eff6ff; }
.image-drop input[type="file"][b-njtjykal82] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.image-drop .drop-prompt[b-njtjykal82] {
    pointer-events: none;
    font-size: 13px;
    color: var(--atkv-muted, #6b7280);
}
.image-drop .drop-prompt strong[b-njtjykal82] { color: var(--atkv-blue, #2a63af); font-weight: 700; }
.image-drop .drop-prompt .sub[b-njtjykal82] { font-size: 11px; margin-top: 4px; }
.image-drop.with-image[b-njtjykal82] { padding: 0; overflow: hidden; border-style: solid; border-color: var(--atkv-blue, #2a63af); background: #eff6ff; }
.image-drop.with-image .drop-prompt[b-njtjykal82] { display: none; }
.image-drop .preview-img[b-njtjykal82] { width: 100%; height: 180px; object-fit: cover; display: block; background: #fff; }
/* Half-height variant for the Rates card image. */
.image-drop--half .preview-img[b-njtjykal82] { height: 90px; }
.image-drop--half[b-njtjykal82] { padding: 12px; }
/* Downloadable PDF row */
.re-pdf-row[b-njtjykal82] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.re-pdf-link[b-njtjykal82] { display: inline-flex; align-items: center; gap: 6px; color: var(--atkv-blue, #2a63af); font-size: 12px; font-weight: 600; text-decoration: none; }
.re-pdf-link:hover[b-njtjykal82] { text-decoration: underline; }
.image-drop .preview-meta[b-njtjykal82] {
    padding: 10px 14px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--atkv-muted, #6b7280);
    position: relative;
    z-index: 2;
}
.image-drop .preview-meta button[b-njtjykal82] {
    background: transparent;
    border: 0;
    color: var(--atkv-blue, #2a63af);
    font-weight: 600;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}
.image-drop .preview-meta button + button[b-njtjykal82] { margin-left: 12px; }
.image-drop .preview-meta .danger[b-njtjykal82] { color: #b91c1c; }

.link-btn[b-njtjykal82] {
    background: transparent;
    border: 0;
    color: var(--atkv-blue, #2a63af);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.link-btn:hover[b-njtjykal82] { text-decoration: underline; }

.rte[b-njtjykal82] {
    border: 1.5px solid var(--atkv-line, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.rte:focus-within[b-njtjykal82] {
    border-color: var(--atkv-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42,99,175,0.15);
}
.rte__toolbar[b-njtjykal82] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px;
    background: var(--atkv-bg-alt, #f3f4f6);
    border-bottom: 1px solid var(--atkv-line, #e5e7eb);
}
.rte__btn[b-njtjykal82] {
    border: 0;
    background: transparent;
    color: var(--atkv-muted, #6b7280);
    width: 30px; height: 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: grid;
    place-items: center;
}
.rte__btn:hover[b-njtjykal82] { background: rgba(15,23,42,0.06); color: var(--atkv-ink, #0f172a); }
.rte__btn--text[b-njtjykal82] { width: auto; padding: 0 10px; font-weight: 700; font-size: 13px; }
.rte__sep[b-njtjykal82] { width: 1px; background: var(--atkv-line, #e5e7eb); margin: 4px 4px; }
.rte__body[b-njtjykal82] {
    padding: 14px 16px;
    min-height: 160px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    color: var(--atkv-ink, #0f172a);
    outline: none;
}
.rte__body p[b-njtjykal82] { margin: 0 0 10px; }
.rte__body p:last-child[b-njtjykal82] { margin-bottom: 0; }
.rte__body ul[b-njtjykal82], .rte__body ol[b-njtjykal82] { margin: 0 0 10px; padding-left: 22px; }

.highlight-list[b-njtjykal82] { display: flex; flex-direction: column; gap: 8px; }
.highlight-row[b-njtjykal82] {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 10px;
    background: #fff;
}
.icon-picker-btn[b-njtjykal82] {
    width: 44px; height: 44px;
    border: 1.5px solid var(--atkv-line, #e5e7eb);
    border-radius: 10px;
    background: var(--atkv-bg-alt, #f3f4f6);
    color: var(--atkv-blue, #2a63af);
    display: grid;
    place-items: center;
    font-size: 20px;
    cursor: pointer;
}
.icon-picker-btn:hover[b-njtjykal82] { border-color: var(--atkv-blue, #2a63af); background: #eff6ff; }
.highlight-row input[type="text"][b-njtjykal82] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--atkv-ink, #0f172a);
    background: var(--atkv-bg-alt, #f3f4f6);
}
.highlight-row input[type="text"]:focus[b-njtjykal82] {
    outline: none;
    background: #fff;
    border-color: var(--atkv-blue, #2a63af);
}
.highlight-row .row-actions[b-njtjykal82] { display: flex; gap: 4px; }
.drag-handle[b-njtjykal82] {
    color: var(--atkv-muted, #6b7280);
    font-size: 16px;
    cursor: grab;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
}

.crud-list[b-njtjykal82] {
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.crud-row[b-njtjykal82] {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--atkv-line-soft, #f0f2f5);
    cursor: pointer;
    transition: background 120ms;
}
.crud-row:last-child[b-njtjykal82] { border-bottom: 0; }
.crud-row:hover[b-njtjykal82] { background: var(--atkv-bg-alt, #f3f4f6); }
.crud-row .thumb[b-njtjykal82] {
    width: 56px; height: 56px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--atkv-blue, #2a63af), #6b9bd1);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    line-height: 1.1;
}
.crud-row .body[b-njtjykal82] { min-width: 0; }
.crud-row .body .name[b-njtjykal82] { font-weight: 600; color: var(--atkv-ink, #0f172a); font-size: 14px; }
.crud-row .body .meta[b-njtjykal82] { font-size: 12px; color: var(--atkv-muted, #6b7280); margin-top: 2px; }
.crud-row .actions[b-njtjykal82] { display: flex; align-items: center; gap: 6px; }
.ico-btn[b-njtjykal82] {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--atkv-line, #e5e7eb);
    background: #fff;
    color: var(--atkv-muted, #6b7280);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 14px;
}
.ico-btn:hover[b-njtjykal82] { color: var(--atkv-ink, #0f172a); border-color: var(--atkv-ink, #0f172a); }
.ico-btn.danger:hover[b-njtjykal82] { color: #991b1b; border-color: #991b1b; }
.add-btn[b-njtjykal82] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--atkv-blue-50, #eff6ff);
    color: var(--atkv-blue, #2a63af);
    border: 1px dashed var(--atkv-blue, #2a63af);
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    margin-top: 12px;
    transition: background 120ms;
}
.add-btn:hover[b-njtjykal82] { background: #d9e6f8; }

[data-reorderable] [draggable="true"][b-njtjykal82] {
    transition: transform 120ms, box-shadow 120ms, opacity 120ms;
}
[data-reorderable] [draggable="true"].row-dragging[b-njtjykal82] {
    opacity: 0.55;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
    cursor: grabbing;
}
[data-reorderable] [draggable="true"].row-drop-target[b-njtjykal82] {
    outline: 2px dashed var(--atkv-blue, #2a63af);
    outline-offset: -2px;
}

.modal-overlay[b-njtjykal82] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: grid;
    place-items: center;
    z-index: 100;
    padding: 32px 16px;
    overflow-y: auto;
}
/* Ensure a hidden overlay stays hidden (the display:grid above would otherwise win
   over the UA [hidden] rule and leak the modal). */
.modal-overlay[hidden][b-njtjykal82] { display: none !important; }
.modal[b-njtjykal82] {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
    overflow: hidden;
}
.modal--narrow[b-njtjykal82] { max-width: 540px; }

/* Gap-list inside the save-time bilingual-gap modal */
.gap-list[b-njtjykal82] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}
.gap-list li[b-njtjykal82] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fef9ec;
    border: 1px solid #f5e1a4;
    border-radius: 8px;
    font-size: 13px;
    color: #0f172a;
}
.gap-chip[b-njtjykal82] {
    background: #f5c451;
    color: #0f172a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.modal__head[b-njtjykal82] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--atkv-line, #e5e7eb);
    background: var(--atkv-bg-alt, #f3f4f6);
}
.modal__head h3[b-njtjykal82] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}
.modal__body[b-njtjykal82] {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.modal__foot[b-njtjykal82] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--atkv-line, #e5e7eb);
    background: var(--atkv-bg-alt, #f3f4f6);
}

.bilingual-pair[b-njtjykal82] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.bilingual-pair > *[b-njtjykal82] {
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
}
.bilingual-pair .lang-chip[b-njtjykal82] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 6px;
}
.bilingual-pair .lang-chip--en[b-njtjykal82] { background: #eff6ff; color: var(--atkv-blue, #2a63af); }
.bilingual-pair .lang-chip--af[b-njtjykal82] { background: #fef3c7; color: #92400e; }
.bilingual-pair > .lang-pane--af[b-njtjykal82] { background: #fffdf2; }
.bilingual-pair input[type="text"][b-njtjykal82],
.bilingual-pair textarea[b-njtjykal82] {
    width: 100%;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
}

.btn-primary[b-njtjykal82] {
    background: var(--atkv-blue, #2a63af);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.btn-primary:hover[b-njtjykal82] { background: #1d4f8e; }
.btn-ghost[b-njtjykal82] {
    background: transparent;
    color: var(--atkv-muted, #6b7280);
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.btn-ghost:hover[b-njtjykal82] { border-color: var(--atkv-ink, #0f172a); color: var(--atkv-ink, #0f172a); }

.lang-completeness[b-njtjykal82] {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-left-width: 4px;
    border-left-color: #d97706;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 20px 24px 0;
    font-size: 13px;
    color: #78350f;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.lang-completeness__icon[b-njtjykal82] { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.lang-completeness__body[b-njtjykal82] { flex: 1; }
.lang-completeness__title[b-njtjykal82] { font-weight: 700; margin-bottom: 4px; }
.lang-completeness__list[b-njtjykal82] { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.lang-completeness__chip[b-njtjykal82] {
    display: inline-block;
    background: rgba(120, 53, 15, 0.12);
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 7px;
    border-radius: 999px;
    margin-right: 6px;
}

.booking-link-grid[b-njtjykal82] {
    display: grid;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.booking-link-grid__header[b-njtjykal82],
.booking-link-grid__row[b-njtjykal82] {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
}
.booking-link-grid__header[b-njtjykal82] { background: var(--atkv-bg-alt, #f3f4f6); border-bottom: 1px solid var(--atkv-line, #e5e7eb); }
.booking-link-grid__col-head[b-njtjykal82] { padding: 12px 14px; font-size: 12px; font-weight: 700; border-left: 1px solid var(--atkv-line, #e5e7eb); display: flex; align-items: center; gap: 8px; }
.booking-link-grid__row[b-njtjykal82] { border-top: 1px solid var(--atkv-line, #e5e7eb); }
.booking-link-grid__row:first-of-type[b-njtjykal82] { border-top: 0; }
.booking-link-grid__row-head[b-njtjykal82] { padding: 14px; background: var(--atkv-bg-alt, #f3f4f6); border-right: 1px solid var(--atkv-line, #e5e7eb); display: flex; flex-direction: column; gap: 2px; }
.booking-link-grid__cell[b-njtjykal82] { padding: 12px 14px; border-left: 1px solid var(--atkv-line, #e5e7eb); display: flex; gap: 8px; align-items: center; }
.booking-link-grid__cell input[type="url"][b-njtjykal82] {
    flex: 1;
    padding: 9px 11px;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 8px;
    font-size: 12px;
    background: #fff;
}

/* =========================================================================
   MOBILE PREVIEW PANE
   - The right column is a realistic phone mock-up wrapping a same-origin
     iframe that loads the actual /resorts/{slug} member-facing page. No
     hand-built mini-renderer - the preview IS the member app.
   ========================================================================= */
.preview[b-njtjykal82] { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 10px; }

.preview-view-bar[b-njtjykal82] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--atkv-muted, #6b7280);
    flex-wrap: wrap;
}
.preview-view-bar select[b-njtjykal82] {
    padding: 5px 10px;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 8px;
    font-size: 12px;
    background: #fff;
    font-weight: 600;
    color: #0f172a;
}
.preview-hint[b-njtjykal82] {
    font-size: 11px;
    color: #9ca3af;
    flex: 1 1 100%;
    margin-top: 2px;
}

/* Phone bezel - simulates the physical frame of a modern handset.
   Outer rounded corners + thick dark body + inner screen with smaller
   rounded corners + iPhone-style top notch. */
.preview-bezel[b-njtjykal82] {
    background: #111827;
    border-radius: 38px;
    padding: 12px 8px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.08), inset 0 0 0 2px #1f2937;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}
.preview-bezel__notch[b-njtjykal82] {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 22px;
    background: #000;
    border-radius: 0 0 14px 14px;
    z-index: 2;
}
.preview-bezel__screen[b-njtjykal82] {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
}
.preview-iframe[b-njtjykal82] {
    display: block;
    border: 0;
    background: #fff;
    width: 360px;
    height: 720px;
}
.preview-placeholder[b-njtjykal82] {
    width: 360px;
    height: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    text-align: center;
    color: var(--atkv-muted, #6b7280);
    font-size: 14px;
    background: var(--atkv-bg-alt, #f3f4f6);
}
.preview-placeholder__icon[b-njtjykal82] { font-size: 40px; opacity: 0.6; }

/* At wide viewports, scale the phone up to a full 393x780 (close to a
   real iPhone screen ratio). */
@media (min-width: 1500px) {
    .re-page[b-njtjykal82] { grid-template-columns: minmax(640px, 1fr) 480px; gap: 28px; padding: 28px; }
    .preview-iframe[b-njtjykal82] { width: 393px; height: 780px; }
    .preview-bezel[b-njtjykal82] { border-radius: 42px; padding: 14px 10px; }
    .preview-bezel__notch[b-njtjykal82] { width: 110px; height: 26px; }
}

/* Collapse to single column before the two columns would overflow and cause
   horizontal scroll. With 28px gutters the editor (min 440) + preview (400) +
   gap (28) + padding (56) need ~924px, so collapse at 940px. Common laptops at
   125% DPI scaling render at ~1093 effective viewport - they still see the preview. */
@media (max-width: 940px) {
    .re-page[b-njtjykal82] { grid-template-columns: 1fr; }
    .preview[b-njtjykal82] { display: none; }
}

/* AF tint rules live in wwwroot/css/redesign/admin-resort-edit-af.css
   (global stylesheet) because body[data-lang="af"] is an ancestor
   selector outside this component's b-xxxx scope, which ::deep does
   not handle. */

/* ===== Rebuilt editor: section RTE, chips, rates, gallery, events, save bar ===== */
.re-rte-block[b-njtjykal82] { margin: 0 0 14px; }

.re-hero-drop[b-njtjykal82] {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: #f8fafc;
}
.re-hero-thumb[b-njtjykal82] {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e3e7ee;
}
.re-hero-actions[b-njtjykal82] { display: flex; align-items: center; gap: 8px; }

.re-chips[b-njtjykal82] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 14px;
}
.re-chip[b-njtjykal82] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef2f8;
    border: 1px solid #dbe3ef;
    font-size: 13px;
    color: #1c2430;
}
.re-chip button[b-njtjykal82] {
    border: 0;
    background: transparent;
    color: #6b7480;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
}
.re-chip button:hover[b-njtjykal82] { color: #c4362f; }
.re-chip-input[b-njtjykal82] {
    flex: 1 1 180px;
    min-width: 160px;
    padding: 7px 10px;
    border: 1px solid #d7dde7;
    border-radius: 8px;
    font-size: 13px;
}

/* Amenity chip icon button + the icon-picker modal grid (restored capability). */
.re-chip__icon-btn[b-njtjykal82] {
    border: 0;
    background: transparent;
    padding: 0;
    margin-right: 2px;
    cursor: pointer;
    color: var(--atkv-blue, #2a63af);
    font-size: 14px;
    line-height: 1;
}
.re-chip__icon-btn:hover[b-njtjykal82] { color: var(--atkv-ink, #0f172a); }

/* Entertainment feature rows (icon + title + description) */
.re-feature-list[b-njtjykal82] { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.re-feature-row[b-njtjykal82] { display: flex; align-items: flex-start; gap: 10px; }
.re-feature-row__icon[b-njtjykal82] {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border: 1px solid #d7dde7;
    border-radius: 8px;
    background: #f8fafc;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: var(--atkv-blue, #2a63af);
    cursor: pointer;
    margin-right: 0;
}
.re-feature-row__icon:hover[b-njtjykal82] { border-color: var(--atkv-blue, #2a63af); background: #eff6ff; }
.re-feature-row__fields[b-njtjykal82] { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.re-feature-row__fields input[b-njtjykal82] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d7dde7;
    border-radius: 8px;
    font-size: 13px;
}
.re-icon-search[b-njtjykal82] {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid var(--atkv-line, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 6px;
}
.re-icon-cat[b-njtjykal82] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--atkv-muted, #6b7280);
    margin: 14px 0 8px;
}
.re-icon-grid[b-njtjykal82] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 8px;
}
.re-icon-tile[b-njtjykal82] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 10.5px;
    color: var(--atkv-muted, #6b7280);
}
.re-icon-tile i[b-njtjykal82] { font-size: 20px; color: var(--atkv-ink, #0f172a); }
.re-icon-tile span[b-njtjykal82] { line-height: 1.15; text-align: center; }
.re-icon-tile:hover[b-njtjykal82] { border-color: var(--atkv-blue, #2a63af); }
.re-icon-tile.is-selected[b-njtjykal82] { border-color: var(--atkv-blue, #2a63af); background: var(--atkv-blue-50, #eff6ff); }

/* Resort palette colour pickers (brand override). */
.re-gallery[b-njtjykal82] { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.re-gallery-item[b-njtjykal82] {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid #e3e7ee;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
}
.re-gallery-thumb[b-njtjykal82] {
    width: 84px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    background: #eef2f8;
    flex: 0 0 auto;
}
.re-gallery-fields[b-njtjykal82] { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.re-gallery-fields input[b-njtjykal82] {
    padding: 7px 10px;
    border: 1px solid #d7dde7;
    border-radius: 8px;
    font-size: 13px;
}
.re-gallery-add[b-njtjykal82] { margin-top: 4px; }
/* Unit image reorder controls */
.re-unit-img__badge[b-njtjykal82] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--atkv-blue, #2a63af);
    background: #eff6ff;
    border-radius: 6px;
    padding: 2px 6px;
}
.re-unit-img__order[b-njtjykal82] { display: flex; gap: 6px; margin-left: auto; }
.re-unit-img__order .ico-btn:disabled[b-njtjykal82] { opacity: 0.35; cursor: default; }

.re-save-bar[b-njtjykal82] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 14px 0 4px;
    border-top: 1px solid #e5e7eb;
    margin-top: 18px;
}
.re-save-msg[b-njtjykal82] { font-size: 13px; font-weight: 600; margin-right: auto; }
.re-save-msg.ok[b-njtjykal82] { color: #1f9d57; }
.re-save-msg.err[b-njtjykal82] { color: #c4362f; }
/* /Pages/Auth/ChangePassword.razor.rz.scp.css */
/**
 * ATKV Mobile App - Change Password Page Styles
 * Pattern: forgot-password-mobile.html (Figma)
 * Background: linear-gradient(to left, white, #2a63af)
 * White container: 60px 60px 0 0 border-radius, max-width 393px
 * Input fields: 55px height, 20px border-radius, 345px width
 * Button: 16px border-radius, black, 345px
 */

/* ==========================================================================
   Container and Background
   ========================================================================== */

.change-password-container[b-obz1mo3crt] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    background: linear-gradient(to left, white, #2a63af);
    overflow-x: hidden;
    overflow-y: auto;
}

/* ==========================================================================
   Change Password Card - White card anchored to bottom
   ========================================================================== */

.change-password-card[b-obz1mo3crt] {
    background: var(--color-white, #ffffff);
    border-radius: 60px 60px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    padding: 48px 20px 40px;
    width: 100%;
    max-width: 393px;
    position: relative;
    z-index: 10;
    animation: slideUpFadeIn-b-obz1mo3crt 0.4s ease-out;
}

/* ==========================================================================
   Header
   ========================================================================== */

.change-password-header[b-obz1mo3crt] {
    text-align: center;
    margin-bottom: 32px;
}

.title[b-obz1mo3crt] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-2xl, 24px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-black, #000000);
    line-height: var(--line-height-tight, 1.2);
    margin: 0 0 8px 0;
}

.subtitle[b-obz1mo3crt] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    color: var(--color-text-secondary, #6b7280);
    line-height: var(--line-height-normal, 1.5);
    margin: 0;
}

/* ==========================================================================
   Alert Messages
   ========================================================================== */

.alert[b-obz1mo3crt] {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm, 14px);
}

.alert i[b-obz1mo3crt] {
    font-size: 20px;
    flex-shrink: 0;
}

.alert-danger[b-obz1mo3crt] {
    background-color: var(--color-error-light, #fef2f2);
    border: 1px solid var(--color-error, #dc3545);
    color: var(--color-error, #dc3545);
}

.alert-success[b-obz1mo3crt] {
    background-color: var(--color-success-light, #f0fdf4);
    border: 1px solid var(--color-success, #22c55e);
    color: var(--color-success, #22c55e);
}

/* ==========================================================================
   Form Groups - 55px height, 20px border-radius, 345px width
   ========================================================================== */

.form-group[b-obz1mo3crt] {
    margin-bottom: 20px;
}

.form-label[b-obz1mo3crt] {
    display: block;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-black, #000000);
    margin-bottom: 8px;
}

.form-label i[b-obz1mo3crt] {
    margin-right: 4px;
    color: var(--color-text-secondary, #6b7280);
}

/* Input fields match Figma spec */
.form-control[b-obz1mo3crt] {
    width: 100%;
    max-width: 345px;
    height: 55px;
    border: 1px solid var(--color-black, #000000);
    border-radius: 20px;
    padding: 0 16px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-black, #000000);
    background: var(--color-white, #ffffff);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-control:focus[b-obz1mo3crt] {
    outline: none;
    border-color: var(--color-secondary, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.15);
}

.form-control:disabled[b-obz1mo3crt] {
    background-color: #f3f4f6;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==========================================================================
   Validation Messages
   ========================================================================== */

.text-danger[b-obz1mo3crt] {
    display: block;
    color: var(--color-error, #dc3545);
    font-size: var(--font-size-xs, 12px);
    margin-top: 4px;
    line-height: 1.4;
}

/* ==========================================================================
   Submit Button - 16px border-radius, black, 345px
   ========================================================================== */

.btn-submit[b-obz1mo3crt] {
    width: 100%;
    max-width: 345px;
    height: 55px;
    color: var(--color-white, #ffffff);
    background: var(--color-black, #000000);
    border: none;
    border-radius: 16px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-medium, 500);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 24px;
}

.btn-submit:hover:not(:disabled)[b-obz1mo3crt] {
    background: #333333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-submit:active:not(:disabled)[b-obz1mo3crt] {
    background: #1a1a1a;
    transform: translateY(0);
}

.btn-submit:focus-visible[b-obz1mo3crt] {
    outline: 3px solid var(--color-secondary, #2a63af);
    outline-offset: 2px;
}

.btn-submit:disabled[b-obz1mo3crt] {
    background: var(--color-gray-400, #9ca3af);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ==========================================================================
   Spinner
   ========================================================================== */

.spinner-border[b-obz1mo3crt] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate-b-obz1mo3crt 0.75s linear infinite;
}

@keyframes spinner-rotate-b-obz1mo3crt {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Back Link
   ========================================================================== */

.back-link-container[b-obz1mo3crt] {
    text-align: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.back-link[b-obz1mo3crt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-secondary, #2a63af);
    text-decoration: none;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-medium, 500);
    transition: color 0.2s ease;
}

.back-link i[b-obz1mo3crt] {
    font-size: 16px;
}

.back-link:hover[b-obz1mo3crt] {
    color: #1e4f8a;
    text-decoration: underline;
}

.back-link:focus-visible[b-obz1mo3crt] {
    outline: 2px solid var(--color-secondary, #2a63af);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes slideUpFadeIn-b-obz1mo3crt {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .change-password-card[b-obz1mo3crt] {
        animation: none;
    }

    .btn-submit[b-obz1mo3crt],
    .form-control[b-obz1mo3crt],
    .back-link[b-obz1mo3crt] {
        transition: none;
    }

    .btn-submit:hover:not(:disabled)[b-obz1mo3crt] {
        transform: none;
    }

    .btn-submit:active:not(:disabled)[b-obz1mo3crt] {
        transform: none;
    }
}

/* ==========================================================================
   Responsive - Tablet and up: centred card
   ========================================================================== */

@media (min-width: 768px) {
    .change-password-container[b-obz1mo3crt] {
        justify-content: center;
        padding: 20px;
    }

    .change-password-card[b-obz1mo3crt] {
        border-radius: 60px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        padding: 48px 32px;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    .change-password-card[b-obz1mo3crt] {
        border: 2px solid var(--color-black, #000000);
    }

    .form-control[b-obz1mo3crt] {
        border-width: 2px;
    }

    .btn-submit[b-obz1mo3crt] {
        border: 2px solid var(--color-white, #ffffff);
    }
}
/* /Pages/Auth/ConfirmEmail.razor.rz.scp.css */
/**
 * ATKV Mobile App - Confirm Email Page Styles
 * Pattern: forgot-password-mobile.html (status page variant, Figma)
 * Background: linear-gradient(to left, white, #2a63af)
 * White container: 60px border-radius, max-width 393px
 * Status messages centred
 * Button: 16px border-radius, black, 345px
 */

/* ==========================================================================
   Container and Background
   ========================================================================== */

.confirm-email-container[b-cjgrpz90a2] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(to left, white, #2a63af);
}

/* ==========================================================================
   White Card
   ========================================================================== */

.confirm-email-card[b-cjgrpz90a2] {
    background: var(--color-white, #ffffff);
    border-radius: 60px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 48px 20px;
    width: 100%;
    max-width: 393px;
    text-align: center;
}

/* ==========================================================================
   Header
   ========================================================================== */

.confirm-email-header[b-cjgrpz90a2] {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.confirm-email-logo[b-cjgrpz90a2] {
    width: 100px;
    height: auto;
    object-fit: contain;
    margin-bottom: 8px;
}

.confirm-email-title[b-cjgrpz90a2] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-2xl, 24px);
    font-weight: var(--font-weight-semibold, 600);
    margin: 0;
    color: var(--color-black, #000000);
    line-height: var(--line-height-tight, 1.2);
}

.confirm-email-subtitle[b-cjgrpz90a2] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    color: var(--color-text-secondary, #6b7280);
    margin: 0;
    line-height: var(--line-height-normal, 1.5);
    max-width: 300px;
}

/* ==========================================================================
   Status Icons
   ========================================================================== */

.success-icon[b-cjgrpz90a2],
.error-icon[b-cjgrpz90a2] {
    font-size: 4rem;
    margin: 0;
}

.success-icon i[b-cjgrpz90a2] {
    color: var(--color-success, #22c55e);
}

.error-icon i[b-cjgrpz90a2] {
    color: var(--color-error, #dc3545);
}

.text-success[b-cjgrpz90a2] {
    color: var(--color-success, #22c55e);
}

.text-danger[b-cjgrpz90a2] {
    color: var(--color-error, #dc3545);
}

/* ==========================================================================
   Spinner
   ========================================================================== */

.spinner-border[b-cjgrpz90a2] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--color-secondary, #2a63af);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate-b-cjgrpz90a2 0.75s linear infinite;
    margin: 0;
}

@keyframes spinner-rotate-b-cjgrpz90a2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.visually-hidden[b-cjgrpz90a2] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Buttons - 16px border-radius, 345px, black
   ========================================================================== */

.btn-block[b-cjgrpz90a2] {
    width: 100%;
    max-width: 345px;
    height: 55px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-medium, 500);
    margin-top: 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn.btn-primary[b-cjgrpz90a2],
.btn-primary[b-cjgrpz90a2] {
    background: var(--color-black, #000000);
    color: var(--color-white, #ffffff);
    border: none;
    border-radius: 16px;
    height: 55px;
    width: 100%;
    max-width: 345px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-medium, 500);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.btn-primary:hover[b-cjgrpz90a2] {
    background: #333333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-primary:active[b-cjgrpz90a2] {
    background: #1a1a1a;
    transform: translateY(0);
}

.btn.btn-outline-primary[b-cjgrpz90a2],
.btn-outline-primary[b-cjgrpz90a2] {
    background: var(--color-white, #ffffff);
    color: var(--color-black, #000000);
    border: 2px solid var(--color-black, #000000);
    border-radius: 16px;
    height: 55px;
    width: 100%;
    max-width: 345px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-medium, 500);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.btn-outline-primary:hover[b-cjgrpz90a2] {
    background: var(--color-gray-100, #f3f4f6);
}

.btn-outline-primary:active[b-cjgrpz90a2] {
    background: var(--color-gray-200, #e5e7eb);
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.action-buttons[b-cjgrpz90a2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    align-items: center;
}

.action-buttons .btn[b-cjgrpz90a2] {
    width: 100%;
    max-width: 345px;
    height: 55px;
    border-radius: 16px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-medium, 500);
}

/* ==========================================================================
   Mobile (up to 480px) - card anchored to bottom
   ========================================================================== */
@media (max-width: 480px) {
    .confirm-email-container[b-cjgrpz90a2] {
        padding: 0;
        align-items: flex-end;
    }

    .confirm-email-card[b-cjgrpz90a2] {
        border-radius: 60px 60px 0 0;
        max-width: none;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
        padding: 40px 20px 32px;
        min-height: 60vh;
    }
}

/* ==========================================================================
   Focus states for accessibility
   ========================================================================== */
.btn:focus-visible[b-cjgrpz90a2],
.btn-primary:focus-visible[b-cjgrpz90a2],
.btn-outline-primary:focus-visible[b-cjgrpz90a2] {
    outline: 3px solid var(--color-secondary, #2a63af);
    outline-offset: 2px;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .btn[b-cjgrpz90a2],
    .btn-primary[b-cjgrpz90a2],
    .btn-outline-primary[b-cjgrpz90a2],
    .spinner-border[b-cjgrpz90a2] {
        transition: none;
        animation: none;
    }

    .btn-primary:hover[b-cjgrpz90a2],
    .btn-outline-primary:hover[b-cjgrpz90a2] {
        transform: none;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */
@media (prefers-contrast: high) {
    .confirm-email-card[b-cjgrpz90a2] {
        border: 2px solid var(--color-black, #000000);
    }

    .btn-primary[b-cjgrpz90a2] {
        border: 2px solid var(--color-white, #ffffff);
    }

    .btn-outline-primary[b-cjgrpz90a2] {
        border-width: 3px;
    }
}
/* /Pages/Auth/ForgotPassword.razor.rz.scp.css */
/**
 * ATKV Mobile App - Forgot Password Page Styles
 * Design System: ATKV Brand (Figma Design Reference)
 * Layout: gradient background with logo above white bottom-sheet card
 * Mobile-first responsive design
 */

/* ==========================================================================
   Page Container - Gradient Background (Figma: linear-gradient to left)
   ========================================================================== */

.page.page--with-background[b-awzjb6xxpj] {
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    background-color: var(--color-white);
    background-image: linear-gradient(to left, var(--color-white), var(--color-secondary, #2a63af));
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Remove default overlay */
.page.page--with-background[b-awzjb6xxpj]::before {
    display: none;
}

/* ==========================================================================
   Auth Container - Full-width wrapper (transparent, layout only)
   ========================================================================== */

.auth-container.auth-container--white-card[b-awzjb6xxpj] {
    background: transparent;
    border-radius: 0;
    max-width: var(--form-container-max-width, 393px);
    width: 100%;
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

/* ==========================================================================
   Form Layout
   ========================================================================== */

.forgot-password-form.form[b-awzjb6xxpj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    margin: 0;
}

/* ==========================================================================
   Header Section (Logo & Title) - Sits in gradient area above white card
   ========================================================================== */

.form__header[b-awzjb6xxpj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-6xl, 54px);
    width: 100%;
    padding: var(--spacing-3xl) 0;
}

.form__logo-container[b-awzjb6xxpj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3xl);
    width: 300px;
}

.form__logo-container .logo[b-awzjb6xxpj] {
    width: var(--logo-size, 99px);
    height: var(--logo-size, 99px);
    object-fit: contain;
}

.form__title[b-awzjb6xxpj] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    text-align: center;
    line-height: var(--line-height-tight);
    margin: 0;
    width: 100%;
}

.form__subtitle[b-awzjb6xxpj] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: var(--line-height-normal);
    margin: 0;
    max-width: 300px;
}

/* ==========================================================================
   Body Section (Form Fields) - White card with top border-radius
   ========================================================================== */

.form__body[b-awzjb6xxpj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
    background: var(--color-white);
    border-radius: 60px 60px 0 0;
    padding: 48px 20px;
    min-height: 680px;
}

.form__fields[b-awzjb6xxpj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    width: 100%;
    max-width: var(--form-container-width);
}

/* ==========================================================================
   Input Groups
   ========================================================================== */

.input-group[b-awzjb6xxpj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

.input-label[b-awzjb6xxpj] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

/* Input Container with Icon */
.input-container[b-awzjb6xxpj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--color-white);
    border: var(--border-width-thin) solid var(--color-black);
    border-radius: var(--border-radius-lg);
    height: var(--input-height);
    width: 100%;
    max-width: var(--form-container-width);
    padding: 0 var(--spacing-md);
    transition: var(--transition-base);
}

.input-container:focus-within[b-awzjb6xxpj] {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-input-focus);
}

.input-container--error[b-awzjb6xxpj] {
    border-color: var(--color-error);
}

.input-container--error:focus-within[b-awzjb6xxpj] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.input-icon[b-awzjb6xxpj] {
    width: var(--icon-size);
    height: var(--icon-size);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.input-field[b-awzjb6xxpj] {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    background: transparent;
    height: 100%;
}

.input-field[b-awzjb6xxpj]::placeholder {
    color: var(--color-text-placeholder);
}

/* Error Messages */
.input-error[b-awzjb6xxpj] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

/* ==========================================================================
   Alert Messages
   ========================================================================== */

.alert[b-awzjb6xxpj] {
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md) var(--spacing-base);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    width: 100%;
    max-width: var(--form-container-width);
}

.alert-danger[b-awzjb6xxpj] {
    background-color: var(--color-error-light);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

/* ==========================================================================
   Actions Section (Button & Links)
   ========================================================================== */

.form__actions[b-awzjb6xxpj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    width: 100%;
    max-width: var(--form-container-width);
}

/* Primary Button */
.btn.btn--primary[b-awzjb6xxpj] {
    width: 100%;
    max-width: var(--form-container-width);
    height: var(--button-height);
    background: var(--color-black);
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-button-padding-y) var(--spacing-button-padding-x);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-decoration: none;
}

.btn.btn--primary:hover:not(:disabled)[b-awzjb6xxpj] {
    background: var(--color-primary-hover);
}

.btn.btn--primary:active:not(:disabled)[b-awzjb6xxpj] {
    background: var(--color-primary-active);
}

.btn.btn--primary:disabled[b-awzjb6xxpj] {
    background: var(--color-gray-400);
    cursor: not-allowed;
}

.btn.btn--primary.btn--loading[b-awzjb6xxpj] {
    pointer-events: none;
}

/* Secondary Button */
.btn.btn--secondary[b-awzjb6xxpj] {
    width: 100%;
    max-width: var(--form-container-width);
    height: var(--button-height);
    background: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-button-padding-y) var(--spacing-button-padding-x);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn.btn--secondary:hover[b-awzjb6xxpj] {
    background: var(--color-gray-100);
}

.btn.btn--secondary:active[b-awzjb6xxpj] {
    background: var(--color-gray-200);
}

/* Spinner */
.spinner[b-awzjb6xxpj] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate-b-awzjb6xxpj 0.75s linear infinite;
}

@keyframes spinner-rotate-b-awzjb6xxpj {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Links */
.form__link[b-awzjb6xxpj] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-base);
}

.form__link:hover[b-awzjb6xxpj] {
    text-decoration: underline;
}

.form__link:focus-visible[b-awzjb6xxpj] {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
    border-radius: 2px;
}

.link-icon[b-awzjb6xxpj] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Success State
   ========================================================================== */

.success-state[b-awzjb6xxpj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-2xl) 0;
    max-width: var(--form-container-width);
    margin: 0 auto;
}

.success-icon-container[b-awzjb6xxpj] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-success-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon[b-awzjb6xxpj] {
    width: 40px;
    height: 40px;
    color: var(--color-success);
}

.success-title[b-awzjb6xxpj] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    margin: 0;
}

.success-message[b-awzjb6xxpj] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin: 0;
    max-width: 320px;
}

.success-actions[b-awzjb6xxpj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    margin-top: var(--spacing-xl);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet and up - centred card layout */
@media (min-width: 768px) {
    .page.page--with-background[b-awzjb6xxpj] {
        justify-content: center;
        align-items: center;
        padding: var(--spacing-xl);
    }

    .auth-container.auth-container--white-card[b-awzjb6xxpj] {
        max-width: var(--form-container-max-width, 393px);
        flex: initial;
        justify-content: center;
    }

    .form__body[b-awzjb6xxpj] {
        border-radius: var(--border-radius-3xl) var(--border-radius-3xl) 0 0;
        min-height: auto;
    }

    .success-actions[b-awzjb6xxpj] {
        flex-direction: row;
        justify-content: center;
    }

    .success-actions .btn[b-awzjb6xxpj] {
        width: auto;
        min-width: 180px;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .btn[b-awzjb6xxpj],
    .input-container[b-awzjb6xxpj],
    .form__link[b-awzjb6xxpj],
    .spinner[b-awzjb6xxpj] {
        transition: none;
        animation: none;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    .input-container[b-awzjb6xxpj] {
        border-width: 2px;
    }

    .btn.btn--primary[b-awzjb6xxpj] {
        border: 2px solid var(--color-white);
    }

    .btn.btn--secondary[b-awzjb6xxpj] {
        border-width: 3px;
    }
}
/* /Pages/Auth/LinkAccount.razor.rz.scp.css */
/**
 * ATKV Mobile App - Link Account Page Styles
 * Pattern: register.html (form variant, Figma)
 * Background: beach image or gradient
 * White container: 60px radius, max-width 393px
 * Input fields: 55px height, 20px border-radius, 345px width
 * Button: 16px border-radius, black, 345px
 */

/* ==========================================================================
   Page Container - Beach Background with Centred Card
   ========================================================================== */

.page.page--with-background[b-pzns0ncilc] {
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-image: url('/images/beach-background.jpg');
    background-size: cover;
    background-position: center top;
}

/* Remove default overlay */
.page.page--with-background[b-pzns0ncilc]::before {
    display: none;
}

/* ==========================================================================
   Auth Container - White Card (60px radius, max-width 393px)
   ========================================================================== */

.auth-container.auth-container--white-card[b-pzns0ncilc] {
    border-radius: 60px;
    max-width: 393px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 48px 20px;
    margin: 0 auto;
}

/* ==========================================================================
   Form Layout
   ========================================================================== */

.link-account-form.form[b-pzns0ncilc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4xl);
    width: 100%;
    max-width: 345px;
    margin: 0 auto;
}

/* ==========================================================================
   Header Section (Logo and Title)
   ========================================================================== */

.form__header[b-pzns0ncilc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3xl);
    width: 100%;
}

.form__logo-container[b-pzns0ncilc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.form__logo-container .logo[b-pzns0ncilc] {
    width: 113.43px;
    height: 113.43px;
    object-fit: contain;
}

.form__title[b-pzns0ncilc] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    text-align: center;
    line-height: var(--line-height-tight);
    margin: 0;
}

.form__subtitle[b-pzns0ncilc] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: var(--line-height-normal);
    margin: 0;
    max-width: 300px;
}

/* ==========================================================================
   Body Section (Form Fields)
   ========================================================================== */

.form__body[b-pzns0ncilc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    width: 100%;
}

.form__fields[b-pzns0ncilc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

/* ==========================================================================
   Input Groups - 55px height, 20px border-radius, 345px width
   ========================================================================== */

.input-group[b-pzns0ncilc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.input-label[b-pzns0ncilc] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

/* Input Container with Icon */
.input-container[b-pzns0ncilc] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 20px;
    height: 55px;
    width: 100%;
    max-width: 345px;
    padding: 0 var(--spacing-md);
    transition: var(--transition-base);
}

.input-container:focus-within[b-pzns0ncilc] {
    border-color: var(--color-secondary, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.15);
}

.input-container--error[b-pzns0ncilc] {
    border-color: var(--color-error);
}

.input-container--error:focus-within[b-pzns0ncilc] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.input-icon[b-pzns0ncilc] {
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.input-field[b-pzns0ncilc] {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    background: transparent;
    height: 100%;
}

.input-field[b-pzns0ncilc]::placeholder {
    color: var(--color-text-placeholder);
}

/* Password Toggle Button */
.input-toggle[b-pzns0ncilc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-base);
    margin-right: -8px;
}

.input-toggle:hover[b-pzns0ncilc] {
    background: var(--color-gray-100);
    color: var(--color-black);
}

.input-toggle:focus-visible[b-pzns0ncilc] {
    outline: 2px solid var(--color-secondary, #2a63af);
    outline-offset: 2px;
}

.input-toggle .input-icon[b-pzns0ncilc] {
    width: 20px;
    height: 20px;
}

/* Error Messages */
.input-error[b-pzns0ncilc] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

/* ==========================================================================
   Alert Messages
   ========================================================================== */

.alert[b-pzns0ncilc] {
    border-radius: 12px;
    padding: var(--spacing-md) var(--spacing-base);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
}

.alert-danger[b-pzns0ncilc] {
    background-color: var(--color-error-light);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

.alert-warning[b-pzns0ncilc] {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

/* ==========================================================================
   Actions Section - Button: 16px border-radius, black, 345px
   ========================================================================== */

.form__actions[b-pzns0ncilc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-base);
    width: 100%;
    margin-top: var(--spacing-base);
}

/* Primary Button */
.btn.btn--primary[b-pzns0ncilc] {
    width: 100%;
    max-width: 345px;
    height: 55px;
    background: var(--color-black);
    border: none;
    border-radius: 16px;
    padding: 16px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.btn.btn--primary:hover:not(:disabled)[b-pzns0ncilc] {
    background: #333333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn.btn--primary:active:not(:disabled)[b-pzns0ncilc] {
    background: #1a1a1a;
    transform: translateY(0);
}

.btn.btn--primary:disabled[b-pzns0ncilc] {
    background: var(--color-gray-400);
    cursor: not-allowed;
}

.btn.btn--primary.btn--loading[b-pzns0ncilc] {
    pointer-events: none;
}

/* Spinner */
.spinner[b-pzns0ncilc] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate-b-pzns0ncilc 0.75s linear infinite;
}

@keyframes spinner-rotate-b-pzns0ncilc {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Links */
.form__link[b-pzns0ncilc] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-black);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-base);
}

.form__link:hover[b-pzns0ncilc] {
    text-decoration: underline;
}

.form__link:focus-visible[b-pzns0ncilc] {
    outline: 2px solid var(--color-secondary, #2a63af);
    outline-offset: 2px;
    border-radius: 2px;
}

.link-icon[b-pzns0ncilc] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Responsive - Mobile (up to 480px): card anchored to bottom
   ========================================================================== */

@media (max-width: 480px) {
    .page.page--with-background[b-pzns0ncilc] {
        padding: 0;
        align-items: flex-end;
        justify-content: center;
    }

    .auth-container.auth-container--white-card[b-pzns0ncilc] {
        border-radius: 60px 60px 0 0;
        max-width: none;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
        margin-top: auto;
        min-height: 70vh;
    }
}

/* ==========================================================================
   Tablet and up
   ========================================================================== */

@media (min-width: 768px) {
    .auth-container.auth-container--white-card[b-pzns0ncilc] {
        border-radius: 60px;
        max-width: 393px;
        margin: 0 auto;
    }

    .page.page--with-background[b-pzns0ncilc] {
        justify-content: center;
        align-items: center;
        padding: var(--spacing-xl);
    }

    .form__logo-container .logo[b-pzns0ncilc] {
        width: 120px;
        height: 120px;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .btn.btn--primary[b-pzns0ncilc],
    .input-container[b-pzns0ncilc],
    .input-toggle[b-pzns0ncilc],
    .form__link[b-pzns0ncilc],
    .spinner[b-pzns0ncilc] {
        transition: none;
        animation: none;
    }

    .btn.btn--primary:hover:not(:disabled)[b-pzns0ncilc] {
        transform: none;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    .input-container[b-pzns0ncilc] {
        border-width: 2px;
    }

    .btn.btn--primary[b-pzns0ncilc] {
        border: 2px solid var(--color-white);
    }

    .auth-container.auth-container--white-card[b-pzns0ncilc] {
        border: 2px solid var(--color-black);
    }
}
/* /Pages/Auth/MemberSignIn.razor.rz.scp.css */
/**
 * ATKV Mobile App - Member Sign In Page Styles
 * Figma: enter-details-mobile.html (Pixel-Perfect)
 * Mobile-first responsive design
 */

/* ==========================================================================
   Page Container: background image, full viewport
   ========================================================================== */

.signin-page[b-xsjenkl33c] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background-image: url('/images/beach-background.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   White Card: bottom-anchored with rounded top corners
   ========================================================================== */

.signin-card[b-xsjenkl33c] {
    background: #ffffff;
    border-radius: 60px 60px 0 0;
    width: 100%;
    max-width: 393px;
    min-height: 698px;
    margin-top: auto;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ==========================================================================
   Form Layout
   ========================================================================== */

.signin-form[b-xsjenkl33c] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.signin-content[b-xsjenkl33c] {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    width: 350px;
    max-width: calc(100% - 48px);
    padding-top: 48px;
}

/* ==========================================================================
   Logo and Title Section
   ========================================================================== */

.signin-logo-section[b-xsjenkl33c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
}

.signin-logo[b-xsjenkl33c] {
    width: 113.43px;
    height: 113.43px;
    object-fit: contain;
}

.signin-title[b-xsjenkl33c] {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    color: #000000;
    line-height: 1;
    margin: 0;
    width: 100%;
}

/* ==========================================================================
   Input Fields Container
   ========================================================================== */

.signin-fields[b-xsjenkl33c] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.signin-input-group[b-xsjenkl33c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.signin-label[b-xsjenkl33c] {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
}

/* Input container with icon */
.signin-input-container[b-xsjenkl33c] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 20px;
    height: 55px;
    width: 345px;
    max-width: 100%;
    padding: 0 12px;
    transition: border-color 0.2s ease;
}

.signin-input-container:focus-within[b-xsjenkl33c] {
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.signin-input-container--error[b-xsjenkl33c] {
    border-color: #d32f2f;
}

.signin-input-icon[b-xsjenkl33c] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #000000;
}

.signin-input[b-xsjenkl33c] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    background: transparent;
    font-family: inherit;
    height: 100%;
}

.signin-input[b-xsjenkl33c]::placeholder {
    color: #9e9e9e;
    font-weight: 400;
}

.signin-input:disabled[b-xsjenkl33c] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Password toggle button */
.signin-toggle-password[b-xsjenkl33c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-right: -4px;
}

.signin-toggle-password:hover[b-xsjenkl33c] {
    background: #f5f5f5;
}

.signin-toggle-password:hover .signin-input-icon[b-xsjenkl33c] {
    color: #2a63af;
}

.signin-toggle-password:focus-visible[b-xsjenkl33c] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.signin-toggle-password .signin-input-icon[b-xsjenkl33c] {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Error and Alert Messages
   ========================================================================== */

.signin-error[b-xsjenkl33c] {
    font-size: 14px;
    color: #d32f2f;
    margin-top: -4px;
}

.signin-alert[b-xsjenkl33c] {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #d32f2f;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
}

/* ==========================================================================
   Actions: Sign-in button and forgot password link
   ========================================================================== */

.signin-actions[b-xsjenkl33c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.signin-btn-primary[b-xsjenkl33c] {
    width: 345px;
    max-width: 100%;
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 16px 76px;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signin-btn-primary:hover:not(:disabled)[b-xsjenkl33c] {
    opacity: 0.9;
}

.signin-btn-primary:disabled[b-xsjenkl33c] {
    background: #e0e0e0;
    color: #9e9e9e;
    cursor: not-allowed;
}

.signin-btn--loading[b-xsjenkl33c] {
    pointer-events: none;
}

.signin-forgot-link[b-xsjenkl33c] {
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    transition: text-decoration 0.2s ease;
}

.signin-forgot-link:hover[b-xsjenkl33c] {
    text-decoration: underline;
}

/* ==========================================================================
   Biometric Login Section
   ========================================================================== */

.signin-biometric-section[b-xsjenkl33c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.signin-divider[b-xsjenkl33c] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: #9e9e9e;
    font-size: 14px;
    font-weight: 500;
}

.signin-divider[b-xsjenkl33c]::before,
.signin-divider[b-xsjenkl33c]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.signin-btn-biometric[b-xsjenkl33c] {
    width: 345px;
    max-width: 100%;
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 16px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.signin-btn-biometric:hover:not(:disabled)[b-xsjenkl33c] {
    background: #f5f5f5;
    border-color: #2a63af;
    color: #2a63af;
}

.signin-btn-biometric:disabled[b-xsjenkl33c] {
    opacity: 0.6;
    cursor: not-allowed;
}

.signin-btn-biometric i[b-xsjenkl33c] {
    font-size: 20px;
}

/* ==========================================================================
   Desktop: centred card with full border-radius
   ========================================================================== */
@media (min-width: 769px) {
    .signin-page[b-xsjenkl33c] {
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .signin-card[b-xsjenkl33c] {
        border-radius: 60px;
        min-height: auto;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        padding: 48px 0;
        margin-top: 0;
    }
}

/* ==========================================================================
   Focus states for accessibility
   ========================================================================== */
.signin-btn-primary:focus-visible[b-xsjenkl33c] {
    outline: 3px solid #2a63af;
    outline-offset: 2px;
}

.signin-forgot-link:focus-visible[b-xsjenkl33c] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
    border-radius: 2px;
}

.signin-btn-biometric:focus-visible[b-xsjenkl33c] {
    outline: 3px solid #2a63af;
    outline-offset: 2px;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .signin-btn-primary[b-xsjenkl33c],
    .signin-input-container[b-xsjenkl33c],
    .signin-toggle-password[b-xsjenkl33c],
    .signin-forgot-link[b-xsjenkl33c],
    .signin-btn-biometric[b-xsjenkl33c] {
        transition: none;
    }
}

/* ==========================================================================
   High contrast mode
   ========================================================================== */
@media (prefers-contrast: high) {
    .signin-input-container[b-xsjenkl33c] {
        border-width: 2px;
    }

    .signin-btn-primary[b-xsjenkl33c] {
        border: 2px solid #ffffff;
    }
}
/* /Pages/Auth/PasswordChange.razor.rz.scp.css */
/**
 * ATKV Mobile App - Password Change Page Styles
 * Pattern: forgot-password-mobile.html (Figma)
 * Background: linear-gradient(to left, white, #2a63af)
 * White container: 60px 60px 0 0 border-radius, max-width 393px
 * Input fields: 55px height, 20px border-radius
 * Button: 16px border-radius, black
 */

/* Full-screen page container with gradient */
.atkv-password-page[b-dcm35smmvi] {
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

/* Gradient background matching Figma spec */
.atkv-password-background[b-dcm35smmvi] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to left, white, #2a63af);
    z-index: 0;
}

/* Content wrapper */
.atkv-password-content[b-dcm35smmvi] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 393px;
}

/* White card anchored to bottom */
.atkv-password-card[b-dcm35smmvi] {
    background: var(--color-white, #ffffff);
    border-radius: 60px 60px 0 0;
    padding: 48px 20px 40px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}

/* Header with back button and logo */
.atkv-password-header[b-dcm35smmvi] {
    position: relative;
    margin-bottom: 24px;
}

.atkv-password-back[b-dcm35smmvi] {
    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    border: none;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.atkv-password-back:hover[b-dcm35smmvi] {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-black, #000000);
}

.atkv-password-back:focus-visible[b-dcm35smmvi] {
    outline: 2px solid var(--color-secondary, #2a63af);
    outline-offset: 2px;
}

.atkv-password-back i[b-dcm35smmvi] {
    font-size: 20px;
}

.atkv-password-logo[b-dcm35smmvi] {
    text-align: center;
}

.atkv-password-logo img[b-dcm35smmvi] {
    height: 48px;
    width: auto;
    object-fit: contain;
}

/* Title */
.atkv-password-title[b-dcm35smmvi] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-2xl, 24px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-black, #000000);
    text-align: center;
    margin-bottom: 32px;
    line-height: 1.3;
}

/* Form fields container */
.atkv-password-form[b-dcm35smmvi] {
    margin-bottom: 0;
}

/* Form group */
.form-group[b-dcm35smmvi] {
    margin-bottom: 20px;
}

.form-group label[b-dcm35smmvi] {
    display: block;
    margin-bottom: 8px;
    color: var(--color-black, #000000);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-semibold, 600);
}

/* Input fields: 55px height, 20px border-radius */
.form-input[b-dcm35smmvi] {
    width: 100%;
    max-width: 345px;
    height: 55px;
    padding: 0 20px;
    border: 1px solid var(--color-black, #000000);
    border-radius: 20px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-black, #000000);
    background: var(--color-white, #ffffff);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-dcm35smmvi] {
    outline: none;
    border-color: var(--color-secondary, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.15);
}

.form-input:disabled[b-dcm35smmvi] {
    background-color: #f3f4f6;
    cursor: not-allowed;
    opacity: 0.6;
}

.form-input.has-error[b-dcm35smmvi] {
    border-color: var(--color-error, #dc3545);
}

/* Validation error messages */
.form-error[b-dcm35smmvi] {
    color: var(--color-error, #dc3545);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs, 12px);
    margin-top: 6px;
    padding-left: 12px;
}

/* General error and success alerts */
.atkv-password-error[b-dcm35smmvi],
.atkv-password-success[b-dcm35smmvi] {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm, 14px);
}

.atkv-password-error[b-dcm35smmvi] {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid var(--color-error, #dc3545);
    color: var(--color-error, #dc3545);
}

.atkv-password-success[b-dcm35smmvi] {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid var(--color-success, #22c55e);
    color: var(--color-success, #22c55e);
}

.atkv-password-error i[b-dcm35smmvi],
.atkv-password-success i[b-dcm35smmvi] {
    font-size: 18px;
}

/* Actions */
.atkv-password-actions[b-dcm35smmvi] {
    margin-top: 32px;
}

.atkv-password-actions > * + *[b-dcm35smmvi] {
    margin-top: 12px;
}

/* ==========================================================================
   Mobile (up to 480px) - card full-width at bottom
   ========================================================================== */
@media (max-width: 480px) {
    .atkv-password-page[b-dcm35smmvi] {
        align-items: flex-end;
    }

    .atkv-password-content[b-dcm35smmvi] {
        max-width: none;
        width: 100%;
    }

    .atkv-password-card[b-dcm35smmvi] {
        padding: 40px 20px 32px;
    }

    .atkv-password-title[b-dcm35smmvi] {
        font-size: 22px;
        margin-bottom: 24px;
    }

    .atkv-password-logo img[b-dcm35smmvi] {
        height: 40px;
    }
}

/* ==========================================================================
   Tablet (481px - 768px)
   ========================================================================== */
@media (min-width: 481px) and (max-width: 768px) {
    .atkv-password-content[b-dcm35smmvi] {
        max-width: 393px;
    }
}

/* ==========================================================================
   Desktop (769px and up) - centred card
   ========================================================================== */
@media (min-width: 769px) {
    .atkv-password-page[b-dcm35smmvi] {
        align-items: center;
        padding: 20px;
    }

    .atkv-password-card[b-dcm35smmvi] {
        border-radius: 60px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        padding: 48px 32px;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .form-input[b-dcm35smmvi],
    .atkv-password-back[b-dcm35smmvi] {
        transition: none;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */
@media (prefers-contrast: high) {
    .atkv-password-card[b-dcm35smmvi] {
        border: 2px solid var(--color-black, #000000);
    }

    .form-input[b-dcm35smmvi] {
        border-width: 2px;
    }
}
/* /Pages/Auth/Register.razor.rz.scp.css */
/**
 * ATKV Mobile App - Register Page Styles
 * Design System: ATKV Brand (Figma Design Reference)
 * Mobile-first responsive design
 */

/* ==========================================================================
   Container & Background
   ========================================================================== */

.register-container[b-kk98rn92rx] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    background-image: url('/images/beach-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   Register Card
   ========================================================================== */

.register-card[b-kk98rn92rx] {
    background: var(--color-white);
    border-radius: 60px;
    width: 100%;
    max-width: 393px;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    box-shadow: var(--shadow-xl);
}

/* ==========================================================================
   Header
   ========================================================================== */

.register-header[b-kk98rn92rx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3xl);
    padding: 0 var(--spacing-xl);
}

.register-logo[b-kk98rn92rx] {
    width: var(--logo-size, 99px);
    height: var(--logo-size, 99px);
    object-fit: contain;
}

.register-title[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    text-align: center;
    line-height: var(--line-height-tight);
    margin: 0;
}

.register-subtitle[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0;
    display: none; /* Hide subtitle for cleaner design */
}

/* ==========================================================================
   Form Styles
   ========================================================================== */

.register-card form[b-kk98rn92rx] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);
    padding: 0 var(--spacing-xl);
    box-sizing: border-box;
}

/* ==========================================================================
   Form Groups
   ========================================================================== */

.form-group[b-kk98rn92rx] {
    width: 100%;
    max-width: var(--form-container-width);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-label[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-input-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.form-label i[b-kk98rn92rx] {
    display: none; /* Hide icons in labels for cleaner design */
}

.required-asterisk[b-kk98rn92rx] {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Input Fields
   ========================================================================== */

.form-control[b-kk98rn92rx] {
    width: 100%;
    height: var(--input-height);
    background: var(--color-white);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--border-radius-lg);
    padding: 0 var(--spacing-lg);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    transition: var(--transition-base);
}

.form-control[b-kk98rn92rx]::placeholder {
    color: var(--color-text-placeholder);
}

.form-control:focus[b-kk98rn92rx] {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-input-focus);
}

.form-control.is-valid[b-kk98rn92rx] {
    border-color: var(--color-success);
}

.form-control.is-invalid[b-kk98rn92rx] {
    border-color: var(--color-error);
}

/* Input with validation icon container */
.input-with-validation[b-kk98rn92rx] {
    position: relative;
}

.input-with-validation .form-control[b-kk98rn92rx] {
    padding-right: 44px;
}

.validation-icon[b-kk98rn92rx] {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    pointer-events: none;
}

.validation-icon.valid[b-kk98rn92rx] {
    color: var(--color-success);
}

.validation-icon.invalid[b-kk98rn92rx] {
    color: var(--color-error);
}

.validation-feedback[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.form-text[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

/* ==========================================================================
   Password Input
   ========================================================================== */

.password-input-wrapper[b-kk98rn92rx] {
    position: relative;
}

.password-input-wrapper .form-control[b-kk98rn92rx] {
    padding-right: 48px;
}

.btn-password-toggle[b-kk98rn92rx] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    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: var(--transition-base);
}

.btn-password-toggle:hover[b-kk98rn92rx] {
    background: var(--color-gray-100);
    color: var(--color-black);
}

.btn-password-toggle i[b-kk98rn92rx] {
    font-size: 18px;
}

/* Confirm password icon positioning */
.confirm-password-icon[b-kk98rn92rx] {
    right: 52px;
}

/* ==========================================================================
   Password Strength Indicator
   ========================================================================== */

.password-strength[b-kk98rn92rx] {
    margin-top: var(--spacing-sm);
}

.password-strength-bar[b-kk98rn92rx] {
    height: 4px;
    background: var(--color-gray-200);
    border-radius: var(--border-radius-full);
    overflow: hidden;
}

.password-strength-fill[b-kk98rn92rx] {
    height: 100%;
    border-radius: var(--border-radius-full);
    transition: width var(--duration-base), background-color var(--duration-base);
}

/* V3: bar fill colour, keyed off the strength class on the parent
   (.password-strength). Ramp: red -> orange -> yellow -> green. */
.password-strength.strength-weak   .password-strength-fill[b-kk98rn92rx] { background-color: var(--color-error); }
.password-strength.strength-fair   .password-strength-fill[b-kk98rn92rx] { background-color: var(--color-warning); }
.password-strength.strength-good   .password-strength-fill[b-kk98rn92rx] { background-color: #e6b800; }
.password-strength.strength-strong .password-strength-fill[b-kk98rn92rx] { background-color: var(--color-success); }

.password-strength-label[b-kk98rn92rx] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    margin-top: var(--spacing-xs);
}

/* V3: label colour matches the bar */
.password-strength.strength-weak   .password-strength-label[b-kk98rn92rx] { color: var(--color-error); }
.password-strength.strength-fair   .password-strength-label[b-kk98rn92rx] { color: var(--color-warning); }
.password-strength.strength-good   .password-strength-label[b-kk98rn92rx] { color: #e6b800; }
.password-strength.strength-strong .password-strength-label[b-kk98rn92rx] { color: var(--color-success); }

/* ==========================================================================
   Password Requirements
   ========================================================================== */

.password-requirements[b-kk98rn92rx] {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-sm);
}

.password-requirements small[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.password-requirements ul[b-kk98rn92rx] {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0 0;
}

.password-requirements li[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    padding: var(--spacing-xs) 0;
    padding-left: var(--spacing-lg);
    position: relative;
}

.password-requirements li[b-kk98rn92rx]::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
    font-size: 12px;
}

.password-requirements li.valid[b-kk98rn92rx] {
    color: var(--color-success);
}

.password-requirements li.valid[b-kk98rn92rx]::before {
    content: '✓';
    color: var(--color-success);
}

/* ==========================================================================
   Checkbox (Terms)
   ========================================================================== */

.form-check[b-kk98rn92rx] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border-radius: var(--border-radius-sm);
}

.form-check-input[b-kk98rn92rx] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--color-secondary);
}

.form-check-label[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
    cursor: pointer;
}

/* Link button for Terms/Privacy */
.link-button[b-kk98rn92rx] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-secondary);
    text-decoration: none;
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-base);
}

.link-button:hover[b-kk98rn92rx] {
    text-decoration: underline;
}

/* ==========================================================================
   Register Button
   ========================================================================== */

.register-button-container[b-kk98rn92rx] {
    width: 100%;
    max-width: var(--form-container-width);
}

.btn-register[b-kk98rn92rx] {
    width: 100%;
    height: var(--button-height);
    background: var(--color-black);
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-base) var(--spacing-3xl);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.btn-register:hover:not(:disabled)[b-kk98rn92rx] {
    background: var(--color-primary-hover);
}

.btn-register:active:not(:disabled)[b-kk98rn92rx] {
    background: var(--color-primary-active);
}

.btn-register:disabled[b-kk98rn92rx] {
    background: var(--color-gray-400);
    cursor: not-allowed;
}

.form-completion-hint[b-kk98rn92rx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    color: #856404;
}

/* Spinner */
.spinner-border[b-kk98rn92rx] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate-b-kk98rn92rx 0.75s linear infinite;
}

@keyframes spinner-rotate-b-kk98rn92rx {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Login Prompt
   ========================================================================== */

.login-prompt[b-kk98rn92rx] {
    text-align: center;
    padding: 0 var(--spacing-xl);
}

.login-prompt p[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

.login-link[b-kk98rn92rx] {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-base);
}

.login-link:hover[b-kk98rn92rx] {
    text-decoration: underline;
}

/* ==========================================================================
   Alert Messages
   ========================================================================== */

.alert[b-kk98rn92rx] {
    width: 100%;
    max-width: var(--form-container-width);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md) var(--spacing-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
}

.alert i[b-kk98rn92rx] {
    font-size: 18px;
    flex-shrink: 0;
}

.alert-danger[b-kk98rn92rx] {
    background-color: var(--color-error-light);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

/* ==========================================================================
   Upgrade Banner (Simplified)
   ========================================================================== */

.upgrade-banner[b-kk98rn92rx] {
    width: 100%;
    max-width: var(--form-container-width);
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
    border: 2px solid var(--color-warning);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-base);
    display: flex;
    gap: var(--spacing-md);
    position: relative;
    margin: 0 var(--spacing-xl);
}

.upgrade-banner-icon[b-kk98rn92rx] {
    flex-shrink: 0;
    font-size: 20px;
}

.upgrade-banner-content[b-kk98rn92rx] {
    flex: 1;
    min-width: 0;
}

.upgrade-banner-title[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.upgrade-banner-text[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.upgrade-banner-benefits[b-kk98rn92rx] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-sm) 0;
}

.upgrade-banner-benefits li[b-kk98rn92rx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    padding: 2px 0;
}

.upgrade-banner-benefits li i[b-kk98rn92rx] {
    font-size: 12px;
}

.upgrade-banner-actions[b-kk98rn92rx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.upgrade-banner-actions .btn-primary[b-kk98rn92rx] {
    background: var(--color-secondary);
    border: none;
    color: white;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-full);
}

.upgrade-banner-actions .btn-link[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--spacing-sm);
}

.upgrade-banner-close[b-kk98rn92rx] {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-base);
}

.upgrade-banner-close:hover[b-kk98rn92rx] {
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-text-primary);
}

/* ==========================================================================
   Validation Messages
   ========================================================================== */

.text-danger[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    color: var(--color-error);
    margin-top: var(--spacing-xs);
}

.text-success[b-kk98rn92rx] {
    color: var(--color-success);
}

/* ==========================================================================
   Modal Styles
   ========================================================================== */

.modal-overlay[b-kk98rn92rx] {
    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: var(--z-index-modal);
    padding: var(--spacing-base);
    animation: fadeIn-b-kk98rn92rx var(--duration-base) var(--ease-out);
}

@keyframes fadeIn-b-kk98rn92rx {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-dialog[b-kk98rn92rx] {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-2xl);
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-kk98rn92rx var(--duration-medium) var(--ease-out);
}

@keyframes slideUp-b-kk98rn92rx {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-kk98rn92rx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-base) var(--spacing-xl);
    border-bottom: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}

.modal-title[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.modal-close[b-kk98rn92rx] {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: var(--spacing-sm);
    line-height: 1;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-base);
}

.modal-close:hover[b-kk98rn92rx] {
    background: var(--color-gray-100);
    color: var(--color-text-primary);
}

.modal-body[b-kk98rn92rx] {
    padding: var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
}

.modal-body h3[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.modal-body h3:not(:first-child)[b-kk98rn92rx] {
    margin-top: var(--spacing-base);
}

.modal-body p[b-kk98rn92rx] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--spacing-md) 0;
}

.modal-footer[b-kk98rn92rx] {
    display: flex;
    justify-content: flex-end;
    padding: var(--spacing-base) var(--spacing-xl);
    border-top: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}

.modal-footer .btn-primary[b-kk98rn92rx] {
    background: var(--color-secondary);
    color: var(--color-white);
    border: none;
    padding: var(--spacing-sm) var(--spacing-xl);
    border-radius: var(--border-radius-full);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.modal-footer .btn-primary:hover[b-kk98rn92rx] {
    background: var(--color-secondary-hover);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Small Mobile (below 393px design width) */
@media (max-width: 393px) {
    .register-container[b-kk98rn92rx] {
        padding: var(--spacing-md);
    }

    .register-card[b-kk98rn92rx] {
        padding: var(--spacing-xl) 0;
        gap: var(--spacing-3xl);
    }

    .register-logo[b-kk98rn92rx] {
        width: 80px;
        height: 80px;
    }

    .register-title[b-kk98rn92rx] {
        font-size: var(--font-size-xl);
    }

    .form-label[b-kk98rn92rx] {
        font-size: var(--font-size-md);
    }
}

/* Mobile - White Background (at 393px and below, per Figma spec) */
@media (max-width: 480px) {
    .register-container[b-kk98rn92rx] {
        background: var(--color-white);
        padding: 0;
        align-items: stretch;
    }

    .register-card[b-kk98rn92rx] {
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
        justify-content: flex-start;
        padding-top: var(--spacing-3xl);
    }
}

/* Tablet and up */
@media (min-width: 768px) {
    .register-card[b-kk98rn92rx] {
        padding: var(--spacing-3xl);
    }

    .register-logo[b-kk98rn92rx] {
        width: var(--logo-size, 99px);
        height: var(--logo-size, 99px);
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .modal-overlay[b-kk98rn92rx],
    .modal-dialog[b-kk98rn92rx],
    .form-control[b-kk98rn92rx],
    .btn-register[b-kk98rn92rx],
    .btn-password-toggle[b-kk98rn92rx],
    .link-button[b-kk98rn92rx] {
        animation: none;
        transition: none;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    .form-control[b-kk98rn92rx] {
        border-width: 2px;
    }

    .btn-register[b-kk98rn92rx] {
        border: 2px solid var(--color-white);
    }

    .register-card[b-kk98rn92rx] {
        border: 2px solid var(--color-black);
    }
}

/* =========================================================================
   Register wizard (matches docs/ui-redesign/screens/04a-d-auth-register-*).
   Step indicator, progress bar, step titles, chip group (interests +
   resort regions), toggle switches, review cards and the bottom nav row.
   ========================================================================= */
.register-step-header[b-kk98rn92rx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.register-step-meta[b-kk98rn92rx] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--atkv-muted, #6b7280);
    font-weight: 600;
}

.register-progress[b-kk98rn92rx] {
    height: 8px;
    width: 120px;
    background: var(--atkv-line-soft, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: 8px;
}

.register-progress__fill[b-kk98rn92rx] {
    height: 100%;
    background: var(--atkv-yellow, #fdb913);
    border-radius: 4px;
    transition: width 0.25s ease;
}

.register-step-title[b-kk98rn92rx] {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}

.register-step-help[b-kk98rn92rx] {
    margin: -4px 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--atkv-muted, #6b7280);
}

/* Chip groups (causes + resort regions). Snap to multi-row layout on
   narrow phone widths. */
.register-chips[b-kk98rn92rx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.register-chip[b-kk98rn92rx] {
    appearance: none;
    border: 1px solid var(--atkv-line, #e5e7eb);
    background: #fff;
    color: var(--atkv-ink, #0f172a);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.register-chip:hover[b-kk98rn92rx] {
    border-color: var(--atkv-blue, #2a63af);
    color: var(--atkv-blue, #2a63af);
}

.register-chip--selected[b-kk98rn92rx] {
    background: var(--atkv-blue, #2a63af);
    color: #fff;
    border-color: var(--atkv-blue, #2a63af);
}

.register-chip--selected:hover[b-kk98rn92rx] {
    color: #fff;
}

/* Communications toggles. CSS-only sliding switch. */
.register-toggle[b-kk98rn92rx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--atkv-line-soft, #f1f5f9);
    font-size: 14px;
    color: var(--atkv-ink, #0f172a);
    cursor: pointer;
}

.register-toggle:last-child[b-kk98rn92rx] {
    border-bottom: 0;
}

.register-toggle input[b-kk98rn92rx] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.register-toggle__slider[b-kk98rn92rx] {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--atkv-line, #e5e7eb);
    border-radius: 999px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.register-toggle__slider[b-kk98rn92rx]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.register-toggle input:checked ~ .register-toggle__slider[b-kk98rn92rx] {
    background: var(--atkv-blue, #2a63af);
}

.register-toggle input:checked ~ .register-toggle__slider[b-kk98rn92rx]::before {
    transform: translateX(18px);
}

/* Review step cards. */
.register-review-card[b-kk98rn92rx] {
    padding: 14px;
    margin-bottom: 12px;
}

.register-review-card__head[b-kk98rn92rx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.register-review-card__label[b-kk98rn92rx] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--atkv-muted, #6b7280);
    font-weight: 700;
}

.register-review-card__edit[b-kk98rn92rx] {
    background: transparent;
    border: 0;
    color: var(--atkv-blue, #2a63af);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.register-review-card__value[b-kk98rn92rx] {
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
    font-size: 14px;
}

.register-review-card__detail[b-kk98rn92rx] {
    font-size: 12px;
    color: var(--atkv-muted, #6b7280);
    margin-top: 4px;
}

/* Terms checkbox row on the review step. */
.register-terms[b-kk98rn92rx] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--atkv-ink, #0f172a);
    cursor: pointer;
}

.register-terms input[b-kk98rn92rx] {
    margin-top: 3px;
    flex-shrink: 0;
}

/* Bottom navigation row: Back on the left, Continue / Create on the right. */
.register-nav[b-kk98rn92rx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

.register-nav__back[b-kk98rn92rx] {
    flex: 1;
}

.register-nav__continue[b-kk98rn92rx] {
    flex: 2;
}

.register-nav__continue:disabled[b-kk98rn92rx] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Pages/Auth/RegisterOptions.razor.rz.scp.css */
/* Register Options Page - Screen-05 Choice Screen */

.register-options-page[b-68uonvfak5] {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.register-options-background[b-68uonvfak5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/images/beach-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.register-options-content[b-68uonvfak5] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 393px;
    padding: 20px;
}

.register-options-card[b-68uonvfak5] {
    background: #ffffff;
    border-radius: 60px;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 55px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Logo Section */
.register-options-logo-section[b-68uonvfak5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    text-align: center;
}

.register-options-logo[b-68uonvfak5] {
    width: 113.43px;
    height: 113.43px;
    object-fit: contain;
}

.register-options-title[b-68uonvfak5] {
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: 28px;
    font-weight: 500;
    color: #000000;
    line-height: 1.2;
    margin: 0;
}

.register-options-subtitle[b-68uonvfak5] {
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    margin: 0;
}

/* Button Group */
.register-options-button-group[b-68uonvfak5] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 345px;
    max-width: calc(100% - 48px);
    align-items: center;
    padding: 0 24px;
}

/* Primary Button: ATKV-lid teken aan (black) */
.register-btn-primary[b-68uonvfak5] {
    width: 100%;
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 16px;
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-btn-primary:hover[b-68uonvfak5] {
    opacity: 0.9;
}

/* Divider with "OF" text */
.register-options-divider[b-68uonvfak5] {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.register-options-divider[b-68uonvfak5]::before,
.register-options-divider[b-68uonvfak5]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #000000;
}

.register-options-divider span[b-68uonvfak5] {
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: 20px;
    font-weight: 400;
    color: #000000;
}

/* Secondary Button: Besoeker teken aan (blue) */
.register-btn-secondary[b-68uonvfak5] {
    width: 100%;
    background: #2a63af;
    color: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 16px;
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-btn-secondary:hover[b-68uonvfak5] {
    opacity: 0.9;
}

/* Footer Section */
.register-options-footer[b-68uonvfak5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 345px;
    max-width: calc(100% - 48px);
    padding: 0 24px;
}

.register-options-footer-text[b-68uonvfak5] {
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    margin: 0;
}

/* Sign-in link */
.register-options-signin-link[b-68uonvfak5] {
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: 16px;
    font-weight: 500;
    color: #2a63af;
    text-decoration: none;
    cursor: pointer;
}

.register-options-signin-link:hover[b-68uonvfak5] {
    text-decoration: underline;
}

/* Mobile: card anchored to bottom */
@media (max-width: 480px) {
    .register-options-page[b-68uonvfak5] {
        padding: 0;
        align-items: flex-end;
    }

    .register-options-content[b-68uonvfak5] {
        max-width: none;
        width: 100%;
        padding: 0;
    }

    .register-options-card[b-68uonvfak5] {
        border-radius: 60px 60px 0 0;
        min-height: 698px;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
        padding: 24px 0;
    }
}

/* Desktop: centred card with shadow */
@media (min-width: 769px) {
    .register-options-content[b-68uonvfak5] {
        max-width: 480px;
    }

    .register-options-card[b-68uonvfak5] {
        padding: 24px 0;
    }
}

/* Focus states */
.register-btn-primary:focus-visible[b-68uonvfak5],
.register-btn-secondary:focus-visible[b-68uonvfak5],
.register-options-signin-link:focus-visible[b-68uonvfak5] {
    outline: 3px solid #2a63af;
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .register-btn-primary[b-68uonvfak5],
    .register-btn-secondary[b-68uonvfak5] {
        transition: none;
    }
}
/* /Pages/Auth/ResetPassword.razor.rz.scp.css */
/**
 * ATKV Mobile App - Reset Password Page Styles
 * Pattern: forgot-password-mobile.html (Figma)
 * Background: linear-gradient(to left, white, #2a63af)
 * White container: 60px 60px 0 0 border-radius
 * Input fields: 55px height, 20px border-radius, 345px width
 * Button: 16px border-radius, black, 345px
 */

/* ==========================================================================
   Page Container - Gradient Background with Bottom Card
   ========================================================================== */

.page.page--with-background[b-afz61xayqa] {
    justify-content: flex-end;
    padding: 0;
    background: linear-gradient(to left, white, #2a63af);
    background-image: none;
}

/* Remove default overlay */
.page.page--with-background[b-afz61xayqa]::before {
    display: none;
}

/* ==========================================================================
   Auth Container - White Card at Bottom
   ========================================================================== */

.auth-container.auth-container--white-card[b-afz61xayqa] {
    border-radius: 60px 60px 0 0;
    max-width: 393px;
    width: 100%;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    padding: 48px 20px;
    margin: 0 auto;
    margin-top: auto;
    max-height: 90vh;
    overflow-y: auto;
}

/* ==========================================================================
   Form Layout
   ========================================================================== */

.reset-password-form.form[b-afz61xayqa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3xl);
    width: 100%;
    max-width: 345px;
    margin: 0 auto;
}

/* ==========================================================================
   Header Section (Logo & Title)
   ========================================================================== */

.form__header[b-afz61xayqa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);
    width: 100%;
}

.form__logo-container[b-afz61xayqa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

.form__logo-container .logo[b-afz61xayqa] {
    width: 99px;
    height: 99px;
    object-fit: contain;
}

.form__title[b-afz61xayqa] {
    font-family: var(--font-family-primary);
    font-size: 28px;
    font-weight: 500;
    color: var(--color-black);
    text-align: center;
    line-height: 1;
    margin: 0;
}

.form__subtitle[b-afz61xayqa] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: var(--line-height-normal);
    margin: 0;
    max-width: 280px;
}

/* ==========================================================================
   Body Section (Form Fields)
   ========================================================================== */

.form__body[b-afz61xayqa] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    width: 100%;
}

.form__fields[b-afz61xayqa] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* ==========================================================================
   Input Groups - 55px height, 20px border-radius, 345px width
   ========================================================================== */

.input-group[b-afz61xayqa] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.input-label[b-afz61xayqa] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

/* Input Container with Icon */
.input-container[b-afz61xayqa] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 20px;
    height: 55px;
    width: 100%;
    max-width: 345px;
    padding: 0 var(--spacing-md);
    transition: var(--transition-base);
}

.input-container:focus-within[b-afz61xayqa] {
    border-color: var(--color-secondary, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.15);
}

.input-container--error[b-afz61xayqa] {
    border-color: var(--color-error);
}

.input-container--error:focus-within[b-afz61xayqa] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.input-icon[b-afz61xayqa] {
    width: 20px;
    height: 20px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.input-field[b-afz61xayqa] {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    background: transparent;
    height: 100%;
}

.input-field[b-afz61xayqa]::placeholder {
    color: var(--color-text-placeholder);
}

/* Password Toggle Button */
.input-toggle[b-afz61xayqa] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-base);
    margin-right: -8px;
}

.input-toggle:hover[b-afz61xayqa] {
    background: var(--color-gray-100);
    color: var(--color-black);
}

.input-toggle:focus-visible[b-afz61xayqa] {
    outline: 2px solid var(--color-secondary, #2a63af);
    outline-offset: 2px;
}

.input-toggle .input-icon[b-afz61xayqa] {
    width: 18px;
    height: 18px;
}

/* Password Match Icon */
.match-icon[b-afz61xayqa] {
    width: 20px;
    height: 20px;
    color: var(--color-success);
    flex-shrink: 0;
}

/* Error Messages */
.input-error[b-afz61xayqa] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    color: var(--color-error);
}

/* ==========================================================================
   Password Strength Indicator
   ========================================================================== */

.password-strength[b-afz61xayqa] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.password-strength-bar[b-afz61xayqa] {
    flex: 1;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-fill[b-afz61xayqa] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.password-strength-fill.strength-weak[b-afz61xayqa] {
    background: var(--color-error);
}

.password-strength-fill.strength-fair[b-afz61xayqa] {
    background: var(--color-warning);
}

.password-strength-fill.strength-good[b-afz61xayqa] {
    background: var(--color-info);
}

.password-strength-fill.strength-strong[b-afz61xayqa] {
    background: var(--color-success);
}

.password-strength-text[b-afz61xayqa] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    min-width: 50px;
    text-align: right;
}

.password-strength-text.strength-weak[b-afz61xayqa] {
    color: var(--color-error);
}

.password-strength-text.strength-fair[b-afz61xayqa] {
    color: var(--color-warning);
}

.password-strength-text.strength-good[b-afz61xayqa] {
    color: var(--color-info);
}

.password-strength-text.strength-strong[b-afz61xayqa] {
    color: var(--color-success);
}

/* ==========================================================================
   Password Requirements
   ========================================================================== */

.password-requirements[b-afz61xayqa] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.requirement[b-afz61xayqa] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
}

.requirement.met[b-afz61xayqa] {
    color: var(--color-success);
}

.requirement-icon[b-afz61xayqa] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* ==========================================================================
   Alert Messages
   ========================================================================== */

.alert[b-afz61xayqa] {
    border-radius: 12px;
    padding: var(--spacing-md) var(--spacing-base);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
}

.alert-danger[b-afz61xayqa] {
    background-color: var(--color-error-light);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

/* ==========================================================================
   Actions Section - Button: 16px border-radius, black, 345px
   ========================================================================== */

.form__actions[b-afz61xayqa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    width: 100%;
    margin-top: var(--spacing-md);
}

/* Primary Button */
.btn.btn--primary[b-afz61xayqa] {
    width: 100%;
    max-width: 345px;
    height: 55px;
    background: var(--color-black);
    border: none;
    border-radius: 16px;
    padding: 16px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-decoration: none;
}

.btn.btn--primary:hover:not(:disabled)[b-afz61xayqa] {
    background: #333333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn.btn--primary:active:not(:disabled)[b-afz61xayqa] {
    background: #1a1a1a;
    transform: translateY(0);
}

.btn.btn--primary:disabled[b-afz61xayqa] {
    background: var(--color-gray-400);
    cursor: not-allowed;
}

.btn.btn--primary.btn--loading[b-afz61xayqa] {
    pointer-events: none;
}

/* Secondary Button */
.btn.btn--secondary[b-afz61xayqa] {
    width: 100%;
    max-width: 345px;
    height: 55px;
    background: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 16px;
    padding: 16px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn.btn--secondary:hover[b-afz61xayqa] {
    background: var(--color-gray-100);
}

.btn.btn--secondary:active[b-afz61xayqa] {
    background: var(--color-gray-200);
}

/* Spinner */
.spinner[b-afz61xayqa] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate-b-afz61xayqa 0.75s linear infinite;
}

@keyframes spinner-rotate-b-afz61xayqa {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Success State
   ========================================================================== */

.success-state[b-afz61xayqa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-2xl) 0;
    max-width: 345px;
    margin: 0 auto;
}

.success-icon-container[b-afz61xayqa] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-success-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon[b-afz61xayqa] {
    width: 36px;
    height: 36px;
    color: var(--color-success);
}

.success-title[b-afz61xayqa] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    margin: 0;
}

.success-message[b-afz61xayqa] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin: 0;
    max-width: 300px;
}

.success-actions[b-afz61xayqa] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    margin-top: var(--spacing-lg);
}

/* ==========================================================================
   Error State (Invalid Token)
   ========================================================================== */

.error-state[b-afz61xayqa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-2xl) 0;
    max-width: 345px;
    margin: 0 auto;
}

.error-icon-container[b-afz61xayqa] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-error-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-icon[b-afz61xayqa] {
    width: 36px;
    height: 36px;
    color: var(--color-error);
}

.error-title[b-afz61xayqa] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    margin: 0;
}

.error-message[b-afz61xayqa] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin: 0;
    max-width: 300px;
}

.error-actions[b-afz61xayqa] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    margin-top: var(--spacing-lg);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet and up */
@media (min-width: 768px) {
    .auth-container.auth-container--white-card[b-afz61xayqa] {
        border-radius: 60px;
        max-width: 393px;
        margin: auto;
        margin-bottom: var(--spacing-4xl);
        max-height: none;
    }

    .page.page--with-background[b-afz61xayqa] {
        justify-content: center;
        padding: var(--spacing-xl);
    }

    .form__logo-container .logo[b-afz61xayqa] {
        width: 99px;
        height: 99px;
    }

    .form__title[b-afz61xayqa] {
        font-size: var(--font-size-2xl);
    }

    .success-actions[b-afz61xayqa],
    .error-actions[b-afz61xayqa] {
        flex-direction: row;
        justify-content: center;
    }

    .success-actions .btn[b-afz61xayqa],
    .error-actions .btn[b-afz61xayqa] {
        width: auto;
        min-width: 160px;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .btn[b-afz61xayqa],
    .input-container[b-afz61xayqa],
    .input-toggle[b-afz61xayqa],
    .spinner[b-afz61xayqa],
    .password-strength-fill[b-afz61xayqa],
    .requirement[b-afz61xayqa] {
        transition: none;
        animation: none;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    .input-container[b-afz61xayqa] {
        border-width: 2px;
    }

    .btn.btn--primary[b-afz61xayqa] {
        border: 2px solid var(--color-white);
    }

    .btn.btn--secondary[b-afz61xayqa] {
        border-width: 3px;
    }

    .password-strength-bar[b-afz61xayqa] {
        border: 1px solid var(--color-black);
    }
}
/* /Pages/Auth/VisitorSignIn.razor.rz.scp.css */
/* VisitorSignIn Page - ATKV Design System (Figma)
   Pattern: landing.html (same button layout)
   Background: beach image, white container 60px radius, max-width 393px
   Buttons: 345px wide, border-radius 16px */

/* Full-screen page container */
.auth-page[b-rtrixdw22d] {
    background: url('/images/beach-background.jpg') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* White card container */
.auth-container[b-rtrixdw22d] {
    background: var(--color-white);
    border-radius: 60px;
    width: 100%;
    max-width: 393px;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.auth-content[b-rtrixdw22d] {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    width: 345px;
    max-width: calc(100% - 48px);
    padding-top: 48px;
}

.logo-title-container[b-rtrixdw22d] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
}

.logo[b-rtrixdw22d] {
    width: 113px;
    height: 113px;
    object-fit: contain;
}

.title-container[b-rtrixdw22d] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.title[b-rtrixdw22d] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    text-align: center;
    color: var(--color-black);
    line-height: var(--line-height-tight);
    width: 100%;
    margin: 0;
}

.input-fields-container[b-rtrixdw22d] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.input-group[b-rtrixdw22d] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.input-label[b-rtrixdw22d] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.input-field-container[b-rtrixdw22d] {
    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;
    transition: var(--transition-base);
}

.input-field-container:focus-within[b-rtrixdw22d] {
    border-color: var(--color-secondary, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.15);
}

.input-icon[b-rtrixdw22d] {
    width: 24px;
    height: 24px;
}

.input-field[b-rtrixdw22d] {
    border: none;
    outline: none;
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    background: transparent;
    flex: 1;
}

.input-field[b-rtrixdw22d]::placeholder {
    color: var(--color-text-secondary);
}

.sign-in-container[b-rtrixdw22d] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Button: 345px wide, border-radius 16px, black background */
.button[b-rtrixdw22d] {
    background: var(--color-black);
    border: none;
    border-radius: 16px;
    padding: 16px 76px;
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 100%;
    max-width: 345px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button:hover[b-rtrixdw22d] {
    background: #333333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.button:active[b-rtrixdw22d] {
    background: #1a1a1a;
    transform: translateY(0);
}

.forgot-password-link[b-rtrixdw22d] {
    font-family: var(--font-family-primary);
    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-rtrixdw22d] {
    text-decoration: underline;
}

.user-icon[b-rtrixdw22d] {
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary);
}

.lock-icon[b-rtrixdw22d] {
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   Mobile styles (up to 480px) - Card anchored to bottom
   ========================================================================== */
@media (max-width: 480px) {
    .auth-page[b-rtrixdw22d] {
        padding: 0;
        align-items: flex-end;
        justify-content: center;
    }

    .auth-container[b-rtrixdw22d] {
        max-width: none;
        border-radius: 60px 60px 0 0;
        margin-top: auto;
        min-height: 70vh;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    }
}

/* ==========================================================================
   Tablet (481px - 768px)
   ========================================================================== */
@media (min-width: 481px) and (max-width: 768px) {
    .auth-container[b-rtrixdw22d] {
        max-width: 440px;
    }
}

/* ==========================================================================
   Desktop (769px and up)
   ========================================================================== */
@media (min-width: 769px) {
    .auth-container[b-rtrixdw22d] {
        max-width: 480px;
    }

    .logo[b-rtrixdw22d] {
        width: 130px;
        height: 130px;
    }
}

/* ==========================================================================
   Focus states for accessibility
   ========================================================================== */
.button:focus-visible[b-rtrixdw22d] {
    outline: 3px solid var(--color-secondary, #2a63af);
    outline-offset: 2px;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .button[b-rtrixdw22d] {
        transition: none;
    }

    .button:hover[b-rtrixdw22d] {
        transform: none;
    }
}

/* ==========================================================================
   High contrast mode
   ========================================================================== */
@media (prefers-contrast: high) {
    .button[b-rtrixdw22d] {
        border: 2px solid var(--color-white);
    }

    .auth-container[b-rtrixdw22d] {
        border: 2px solid var(--color-black);
    }
}
/* /Pages/Bookings/BookingDetail.razor.rz.scp.css */
/* Booking detail page - prototype 09-booking-detail */
.booking-detail-page[b-17ua5e5o6f] {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
}

/* Sub-header below the global app appbar (avoids a second full blue bar);
   matches the back-affordance convention used by the other detail pages. */
.bd-appbar[b-17ua5e5o6f] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    color: var(--atkv-ink, #1a1a1a);
    border-bottom: 1px solid var(--atkv-line, #d9d6cf);
}
.bd-back[b-17ua5e5o6f] {
    background: transparent;
    border: 0;
    color: var(--atkv-ink, #1a1a1a);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}
.bd-appbar__title[b-17ua5e5o6f] { font-weight: 600; font-size: 16px; }

/* Resort-themed gradient hero (data-resort drives the palette). */
.bd-hero[b-17ua5e5o6f] {
    position: relative;
    height: 160px;
    background: linear-gradient(135deg, var(--resort-primary, #2a63af), var(--resort-secondary, #6b9bd1));
}
.bd-hero__title[b-17ua5e5o6f] {
    position: absolute;
    bottom: 14px;
    left: 20px;
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}
.bd-hero__pill[b-17ua5e5o6f] {
    position: absolute;
    bottom: 16px;
    right: 20px;
}

.bd-stats[b-17ua5e5o6f] { margin-bottom: 16px; }
.bd-stat-value[b-17ua5e5o6f] { font-size: 18px; }
.bd-stat-delta[b-17ua5e5o6f] { color: var(--atkv-muted, #6b7280); font-weight: 500; }

.bd-sep[b-17ua5e5o6f] {
    border: 0;
    border-top: 1px solid var(--atkv-line, #d9d6cf);
    margin: 10px 0;
}

.bd-notes-label[b-17ua5e5o6f] { text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.bd-notes-body[b-17ua5e5o6f] { margin: 0; font-size: 13px; color: var(--atkv-text, #3a3a3a); }

.bd-info-card[b-17ua5e5o6f] { background: var(--atkv-bg-alt, #f6f5f1); }
.bd-info-card__label[b-17ua5e5o6f] { text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.bd-info-card__body[b-17ua5e5o6f] { margin: 0; font-size: 13px; color: var(--atkv-text, #3a3a3a); }
/* /Pages/Bookings/MyBookings.razor.rz.scp.css */
/* Bookings Page Container */
.bookings-page[b-mwmu9ah3w1] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Bookings Header with Background Image */
.bookings-header[b-mwmu9ah3w1] {
    width: 100%;
    height: 180px;
    background-image: url('/images/resorts/hartenbos/resort_hero_1_sunset_panorama.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 20px 24px;
    position: relative;
}

.bookings-header[b-mwmu9ah3w1]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
}

.bookings-header-title[b-mwmu9ah3w1] {
    position: relative;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    z-index: 1;
    padding-left: 8px;
    margin: 0;
}

/* Main Content Area */
.bookings-content[b-mwmu9ah3w1] {
    flex: 1;
    padding: 24px 24px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Desktop Navigation Pill */
.bookings-navigation[b-mwmu9ah3w1] {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 40px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px;
    max-width: 420px;
    gap: 4px;
}

.bookings-nav-button[b-mwmu9ah3w1] {
    height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666666;
    white-space: nowrap;
}

.bookings-nav-button--active[b-mwmu9ah3w1] {
    background: #2a63af;
    color: #ffffff;
}

.bookings-nav-button--inactive[b-mwmu9ah3w1] {
    background: transparent;
    color: #666666;
}

.bookings-nav-button--inactive:hover[b-mwmu9ah3w1] {
    background: #f0f4fa;
    color: #2a63af;
}

/* Bookings Grid */
.bookings-grid[b-mwmu9ah3w1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    width: 100%;
}

/* Booking Card */
.booking-card[b-mwmu9ah3w1] {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: all 0.2s ease;
}

.booking-card:hover[b-mwmu9ah3w1] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Card header: resort name with status badge */
.booking-card-header[b-mwmu9ah3w1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 8px;
}

.booking-resort-name[b-mwmu9ah3w1] {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

/* Date range displayed prominently */
.booking-date-range[b-mwmu9ah3w1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;
}

.booking-date[b-mwmu9ah3w1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.booking-date-label[b-mwmu9ah3w1] {
    font-size: 11px;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.booking-date-value[b-mwmu9ah3w1] {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    font-family: 'Inter', 'Montserrat', sans-serif;
}

.booking-date-arrow[b-mwmu9ah3w1] {
    color: #cccccc;
    font-size: 14px;
    flex-shrink: 0;
}

/* Compact info rows for details */
.booking-details[b-mwmu9ah3w1] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.booking-detail-item[b-mwmu9ah3w1] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #555555;
    line-height: 1.6;
}

.booking-detail-item strong[b-mwmu9ah3w1] {
    font-weight: 600;
    color: #333333;
}

/* Booking Row (label-value pair) — used in current/all bookings */
.booking-row[b-mwmu9ah3w1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 4px 0;
}

.booking-label[b-mwmu9ah3w1] {
    font-size: 13px;
    font-weight: 600;
    color: #2a63af;
    line-height: 1.4;
}

.booking-value[b-mwmu9ah3w1] {
    font-size: 14px;
    color: #000000;
    line-height: 1.4;
    text-align: right;
}

.booking-value--normal[b-mwmu9ah3w1] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.booking-value--bold[b-mwmu9ah3w1] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.booking-value--date[b-mwmu9ah3w1] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
}

/* Status Badge */
.booking-status[b-mwmu9ah3w1] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.booking-status--l[b-mwmu9ah3w1],
.booking-status--s[b-mwmu9ah3w1] {
    background: #e8f5e9;
    color: #2e7d32;
}

.booking-status--c[b-mwmu9ah3w1],
.booking-status--d[b-mwmu9ah3w1],
.booking-status--u[b-mwmu9ah3w1] {
    background: #e3f2fd;
    color: #1565c0;
}

.booking-status--p[b-mwmu9ah3w1],
.booking-status--i[b-mwmu9ah3w1] {
    background: #fff3e0;
    color: #e65100;
}

.booking-status--a[b-mwmu9ah3w1] {
    background: #f3e5f5;
    color: #7b1fa2;
}

.booking-status--x[b-mwmu9ah3w1],
.booking-status--f[b-mwmu9ah3w1] {
    background: #fbe9e7;
    color: #c62828;
}

.booking-status--unknown[b-mwmu9ah3w1] {
    background: #f5f5f5;
    color: #616161;
}

/* Notes (collapsible feel) */
.booking-notes[b-mwmu9ah3w1] {
    font-size: 12px;
    color: #666666;
    line-height: 1.5;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    word-break: break-word;
}

/* Loading / Error / Empty states */
.bookings-loading[b-mwmu9ah3w1],
.bookings-error[b-mwmu9ah3w1],
.bookings-empty[b-mwmu9ah3w1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    text-align: center;
}

.bookings-loading-text[b-mwmu9ah3w1] {
    font-size: 14px;
    color: #666666;
}

.bookings-error[b-mwmu9ah3w1] {
    color: #c62828;
    font-size: 14px;
}

.bookings-empty[b-mwmu9ah3w1] {
    color: #888888;
    font-size: 14px;
}

/* Pagination */
.pagination[b-mwmu9ah3w1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.pagination-dot[b-mwmu9ah3w1] {
    width: 8px;
    height: 8px;
    background: #cccccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-dot:hover[b-mwmu9ah3w1] {
    transform: scale(1.3);
}

.pagination-dot--active[b-mwmu9ah3w1] {
    background: #2a63af;
    width: 24px;
    border-radius: 4px;
}

/* Dropdown - Hidden on Desktop */
.bookings-dropdown[b-mwmu9ah3w1] {
    display: none;
}

.bookings-dropdown-menu[b-mwmu9ah3w1] {
    display: none;
}

.bookings-dropdown-item[b-mwmu9ah3w1] {
    display: block;
    width: 100%;
    padding: 12px 20px;
    border: none;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.bookings-dropdown-item:hover[b-mwmu9ah3w1] {
    background: #f5f7fa;
}

.bookings-dropdown-item--active[b-mwmu9ah3w1] {
    color: #2a63af;
    font-weight: 700;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .bookings-navigation[b-mwmu9ah3w1] {
        display: none;
    }

    .bookings-dropdown[b-mwmu9ah3w1] {
        display: flex;
        background: #2a63af;
        border-radius: 24px;
        height: 44px;
        padding: 0 20px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 300px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .bookings-dropdown:hover[b-mwmu9ah3w1] {
        opacity: 0.9;
    }

    .bookings-dropdown-text[b-mwmu9ah3w1] {
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
    }

    .bookings-dropdown-icon[b-mwmu9ah3w1] {
        width: 20px;
        height: 20px;
        color: #ffffff;
    }

    .bookings-dropdown-menu[b-mwmu9ah3w1] {
        display: block;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        max-width: 300px;
    }

    .bookings-grid[b-mwmu9ah3w1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .bookings-content[b-mwmu9ah3w1] {
        padding: 20px 16px;
    }
}

/* Mobile Styles (480px and below) */
@media (max-width: 480px) {
    .bookings-header[b-mwmu9ah3w1] {
        height: 140px;
        padding: 16px;
    }

    .bookings-header-title[b-mwmu9ah3w1] {
        font-size: 20px;
        padding-left: 4px;
    }

    .bookings-content[b-mwmu9ah3w1] {
        padding: 16px 12px;
        gap: 16px;
    }

    .bookings-dropdown[b-mwmu9ah3w1] {
        max-width: 100%;
    }

    .bookings-grid[b-mwmu9ah3w1] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .booking-card[b-mwmu9ah3w1] {
        padding: 14px 16px;
    }
}

/* =====================================================================
   UAT #88056 / #88063: controls bar + two-line grid booking row
   ===================================================================== */

.bookings-controls[b-mwmu9ah3w1] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
}

.bookings-control[b-mwmu9ah3w1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.bookings-control-label[b-mwmu9ah3w1] {
    white-space: nowrap;
}

.bookings-control-select[b-mwmu9ah3w1] {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d0d0d0;
    border-radius: 18px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    min-width: 220px;
}

.bookings-control--toggle[b-mwmu9ah3w1] {
    cursor: pointer;
}

.bookings-control--toggle input[type="checkbox"][b-mwmu9ah3w1] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary-blue, #2a63af);
    cursor: pointer;
}

.bookings-group-heading[b-mwmu9ah3w1] {
    margin: 16px 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary-blue, #2a63af);
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
}

.bookings-grid--two-line[b-mwmu9ah3w1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-row[b-mwmu9ah3w1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
}

.booking-row--header[b-mwmu9ah3w1] {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 8px 16px;
    background: #f5f7fb;
    border-color: #e0e6f0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4a5568;
}

.booking-row--historical[b-mwmu9ah3w1] {
    background: #fafbff;
}

.booking-row__line--primary[b-mwmu9ah3w1] {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr 1fr 1fr 1fr;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    color: #222;
}

.booking-row__line--secondary[b-mwmu9ah3w1] {
    font-size: 13px;
    color: #555;
}

.booking-cell[b-mwmu9ah3w1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-cell--resort[b-mwmu9ah3w1] {
    font-weight: 600;
    color: var(--color-primary-blue, #2a63af);
}

.booking-cell--status[b-mwmu9ah3w1] {
    font-weight: 600;
    text-transform: capitalize;
}

.booking-cell--unit-type[b-mwmu9ah3w1] {
    white-space: normal;
}

/* Mobile: stack each cell with its label so 5 columns don't crush */
@media (max-width: 744px) {
    .booking-row--header[b-mwmu9ah3w1] {
        display: none;
    }

    .booking-row__line--primary[b-mwmu9ah3w1] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .booking-cell[b-mwmu9ah3w1] {
        display: flex;
        flex-direction: column;
        white-space: normal;
    }

    .booking-cell[b-mwmu9ah3w1]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
    }

    .booking-cell--resort[b-mwmu9ah3w1] {
        grid-column: 1 / -1;
    }
}

/* ============================================================================
   Compact list view (Resort | Booking Number | Status) + details modal
   Replaces the cramped 5-column two-line grid that was unreadable on phones
   and visually empty on desktop. Each row is a button that opens a modal with
   the full booking record. (UAT feedback 2026-05-20)
   ============================================================================ */

.bookings-list[b-mwmu9ah3w1] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.booking-list-header[b-mwmu9ah3w1] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) 28px;
    gap: 16px;
    padding: 12px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}

.booking-list-header__chevron[b-mwmu9ah3w1] { /* spacer to align with chevron column */ }

.booking-list-row[b-mwmu9ah3w1] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) 28px;
    gap: 16px;
    align-items: center;
    width: 100%;
    padding: 14px 18px;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background-color 0.12s ease;
}

.booking-list-row:last-child[b-mwmu9ah3w1] {
    border-bottom: 0;
}

.booking-list-row:hover[b-mwmu9ah3w1],
.booking-list-row:focus-visible[b-mwmu9ah3w1] {
    background: #f8fafc;
    outline: none;
}

.booking-list-row:focus-visible[b-mwmu9ah3w1] {
    box-shadow: inset 0 0 0 2px #2a63af;
}

.booking-list-row--historical[b-mwmu9ah3w1] {
    background: #fafafa;
}

.booking-list-cell[b-mwmu9ah3w1] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: #1f2937;
}

.booking-list-cell--resort[b-mwmu9ah3w1] {
    font-weight: 600;
}

.booking-list-cell--booking[b-mwmu9ah3w1] {
    font-variant-numeric: tabular-nums;
    color: #2a63af;
}

.booking-list-cell--status[b-mwmu9ah3w1] {
    display: flex;
    align-items: center;
}

.booking-list-chevron[b-mwmu9ah3w1] {
    width: 18px;
    height: 18px;
    color: #9ca3af;
    flex-shrink: 0;
}

.booking-list-row:hover .booking-list-chevron[b-mwmu9ah3w1] {
    color: #2a63af;
}

/* Status pill (replaces inline-coloured-text). Compact, badge-style. */
.booking-status-pill[b-mwmu9ah3w1] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}

.booking-status-pill--confirmed[b-mwmu9ah3w1],
.booking-status-pill--checkedin[b-mwmu9ah3w1] {
    background: #dcfce7;
    color: #166534;
}

.booking-status-pill--provisional[b-mwmu9ah3w1],
.booking-status-pill--internet[b-mwmu9ah3w1] {
    background: #fef3c7;
    color: #92400e;
}

.booking-status-pill--closed[b-mwmu9ah3w1],
.booking-status-pill--checkedout[b-mwmu9ah3w1] {
    background: #e5e7eb;
    color: #374151;
}

.booking-status-pill--cancelled[b-mwmu9ah3w1],
.booking-status-pill--noshow[b-mwmu9ah3w1] {
    background: #fee2e2;
    color: #991b1b;
}

/* Phone layout. Convert the grid into a stacked 2-row card per booking:
   line 1 = Resort name (bold) + chevron pinned to the right;
   line 2 = Booking number on the left, status pill on the right.
   No "..." truncation, no horizontal scroll. */
@media (max-width: 720px) {
    .booking-list-header[b-mwmu9ah3w1] {
        display: none;
    }
    .booking-list-row[b-mwmu9ah3w1] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 4px;
        padding: 14px 16px;
    }
    .booking-list-cell--resort[b-mwmu9ah3w1] {
        grid-column: 1;
        grid-row: 1;
        white-space: normal;
        font-size: 15px;
    }
    .booking-list-chevron[b-mwmu9ah3w1] {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
    .booking-list-cell--booking[b-mwmu9ah3w1] {
        grid-column: 1;
        grid-row: 2;
        font-size: 13px;
    }
    .booking-list-cell--status[b-mwmu9ah3w1] {
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        padding-right: 6px;
    }
    /* When both booking# and status share row 2, push booking# to a new cell */
    .booking-list-cell--booking[b-mwmu9ah3w1] { grid-column: 1; }
    .booking-list-cell--status[b-mwmu9ah3w1]  { grid-column: 1; justify-self: end; }
}

/* ============================================================================
   Modal: full booking record on row click
   ============================================================================ */

.booking-modal-backdrop[b-mwmu9ah3w1] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
    animation: booking-modal-fade-in-b-mwmu9ah3w1 0.15s ease-out;
}

@keyframes booking-modal-fade-in-b-mwmu9ah3w1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.booking-modal[b-mwmu9ah3w1] {
    background: #ffffff;
    border-radius: 14px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    animation: booking-modal-slide-in-b-mwmu9ah3w1 0.18s ease-out;
}

@keyframes booking-modal-slide-in-b-mwmu9ah3w1 {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.booking-modal__header[b-mwmu9ah3w1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
}

.booking-modal__title[b-mwmu9ah3w1] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}

.booking-modal__close[b-mwmu9ah3w1] {
    background: transparent;
    border: 0;
    color: #6b7280;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.booking-modal__close:hover[b-mwmu9ah3w1] {
    background: #f1f5f9;
    color: #0f172a;
}

.booking-modal__close svg[b-mwmu9ah3w1] {
    width: 20px;
    height: 20px;
}

.booking-modal__body[b-mwmu9ah3w1] {
    padding: 18px 22px;
    overflow-y: auto;
}

.booking-detail-list[b-mwmu9ah3w1] {
    margin: 0;
    display: grid;
    gap: 12px;
}

.booking-detail-list__row[b-mwmu9ah3w1] {
    display: grid;
    grid-template-columns: minmax(120px, 35%) 1fr;
    gap: 12px;
    align-items: start;
}

.booking-detail-list__row dt[b-mwmu9ah3w1] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin: 0;
}

.booking-detail-list__row dd[b-mwmu9ah3w1] {
    margin: 0;
    font-size: 14px;
    color: #0f172a;
    word-break: break-word;
}

.booking-detail-list__row--block[b-mwmu9ah3w1] {
    grid-template-columns: 1fr;
}

.booking-detail-list__row--block dd[b-mwmu9ah3w1] {
    line-height: 1.45;
    white-space: pre-wrap;
}

.booking-modal__footer[b-mwmu9ah3w1] {
    padding: 14px 22px 18px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
}

.booking-modal__btn[b-mwmu9ah3w1] {
    border: 0;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.booking-modal__btn--primary[b-mwmu9ah3w1] {
    background: #2a63af;
    color: #ffffff;
}

.booking-modal__btn--primary:hover[b-mwmu9ah3w1] {
    background: #1f4d8c;
}

@media (max-width: 540px) {
    .booking-modal[b-mwmu9ah3w1] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 14px 14px 0 0;
        margin-bottom: 0;
        align-self: flex-end;
    }
    .booking-modal-backdrop[b-mwmu9ah3w1] {
        align-items: flex-end;
        padding: 0;
    }
    .booking-detail-list__row[b-mwmu9ah3w1] {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* =========================================================================
   Booking detail modal body - resort-themed banner + stats + cards.
   The modal layout container (booking-modal, booking-modal__body) is
   unchanged; the inner content is restyled to match docs/ui-redesign
   screen 09-booking-detail. Reuses the global redesign classes (.card,
   .card-stack, .stats, .stat, .pill, .row-between) for the bulk of the
   styling; this scoped block only adjusts modal-specific padding and the
   gradient hero.
   ========================================================================= */
.booking-detail-banner[b-mwmu9ah3w1] {
    position: relative;
    height: 140px;
    background: linear-gradient(135deg, var(--resort-primary, #2a63af), var(--resort-secondary, #6b9bd1));
    border-radius: 14px 14px 0 0;
    margin: -20px -20px 16px;
    padding: 16px 20px;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.booking-detail-banner__title[b-mwmu9ah3w1] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.booking-detail-banner__pill[b-mwmu9ah3w1] {
    position: absolute;
    top: 16px;
    right: 16px;
}

.booking-detail-section[b-mwmu9ah3w1] {
    padding: 0;
}

.booking-detail-stats[b-mwmu9ah3w1] {
    margin-bottom: 16px;
}

.booking-detail-sep[b-mwmu9ah3w1] {
    border: 0;
    border-top: 1px solid var(--atkv-line, #e5e7eb);
    margin: 10px 0;
}

.booking-detail-notes[b-mwmu9ah3w1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-detail-notes p[b-mwmu9ah3w1] {
    margin: 0;
    font-size: 13px;
    color: var(--atkv-text, #1f2937);
    line-height: 1.5;
}

.booking-detail-info-card[b-mwmu9ah3w1] {
    background: var(--atkv-bg-alt, #f8fafc);
}

.booking-detail-info-card__label[b-mwmu9ah3w1] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.booking-detail-info-card__body[b-mwmu9ah3w1] {
    margin: 0;
    font-size: 13px;
    color: var(--atkv-text, #1f2937);
    line-height: 1.5;
}

/* =========================================================================
   "Book a new stay" external CTA - the mobile app is read-only against
   CiMSO so the button deep-links to atkv.org.za rather than pretending
   in-app booking exists. The caption underneath keeps the affordance
   honest about leaving the app.
   ========================================================================= */
.bookings-book-new[b-mwmu9ah3w1] {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bookings-book-new__button[b-mwmu9ah3w1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2a63af;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    min-width: 220px;
}

.bookings-book-new__button:hover[b-mwmu9ah3w1] {
    background: #1f4d8c;
    transform: translateY(-1px);
}

.bookings-book-new__button:focus[b-mwmu9ah3w1] {
    outline: 2px solid #fdb913;
    outline-offset: 2px;
}

.bookings-book-new__external-icon[b-mwmu9ah3w1] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    flex-shrink: 0;
}

.bookings-book-new__caption[b-mwmu9ah3w1] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    max-width: 320px;
    line-height: 1.4;
}

/* ==========================================================================
   Redesign: prototype 08-bookings layout (blue hero, tabs, resort-edged rows).
   Most structure comes from the global design-system; these are the deltas.
   ========================================================================== */

/* Let the inner sections own their padding so the list can run edge-to-edge
   like the prototype. */
.bookings-content[b-mwmu9ah3w1] {
    padding: 0;
    gap: 0;
    max-width: 100%;
}

.bookings-hero[b-mwmu9ah3w1] {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #2a63af, #1d3f6f);
}
.bookings-hero__title[b-mwmu9ah3w1] {
    position: absolute;
    bottom: 16px;
    left: 20px;
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.bookings-tabs-section[b-mwmu9ah3w1] { padding-top: 18px; }

.bookings-count-row[b-mwmu9ah3w1] {
    margin-top: 14px;
    color: var(--atkv-muted, #6b7280);
    font-size: 13px;
}

/* UAT #88056: on narrow screens stack the count above the Order by / Group by
   controls and let the select grow instead of holding its 220px min-width, so
   the wider control can never force horizontal scroll. */
@media (max-width: 560px) {
    .bookings-count-row[b-mwmu9ah3w1] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .bookings-controls[b-mwmu9ah3w1] {
        justify-content: flex-start;
    }
    .bookings-control[b-mwmu9ah3w1] {
        flex: 1 1 auto;
    }
    .bookings-control-select[b-mwmu9ah3w1] {
        min-width: 0;
        flex: 1 1 auto;
    }
}
.bookings-sort-btn[b-mwmu9ah3w1] {
    border: 1px solid var(--atkv-line, #d9d6cf);
    background: #fff;
    border-radius: var(--r-pill, 999px);
}

/* Group By Resort (UAT #88056): toggle button sits next to Sort and highlights
   when active; each resort segment is introduced by a sticky-feeling header. */
.bookings-controls[b-mwmu9ah3w1] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bookings-group-btn[b-mwmu9ah3w1] {
    border: 1px solid var(--atkv-line, #d9d6cf);
    background: #fff;
    border-radius: var(--r-pill, 999px);
}
.bookings-group-btn.active[b-mwmu9ah3w1] {
    background: var(--atkv-blue, #2a63af);
    border-color: var(--atkv-blue, #2a63af);
    color: #fff;
}

.bookings-list-section[b-mwmu9ah3w1] {
    background: #fff;
    border-top: 1px solid var(--atkv-line, #d9d6cf);
}
.bookings-list-section .list-row[b-mwmu9ah3w1] { cursor: pointer; }
.bookings-group-header[b-mwmu9ah3w1] {
    margin: 0;
    padding: 12px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--atkv-muted, #6b7280);
    background: var(--atkv-surface, #f7f6f3);
    border-top: 1px solid var(--atkv-line, #d9d6cf);
}
.bookings-group-header:first-child[b-mwmu9ah3w1] { border-top: 0; }

.bookings-book-new__arrow[b-mwmu9ah3w1] { margin-left: 6px; }
/* /Pages/ContentPreview.razor.rz.scp.css */
/* Content Preview - Figma-aligned scoped styles */

.content-preview[b-kmrp2pn3on] {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 20px;
    padding-bottom: 100px;
    min-height: 100vh;
}

/* Loading and error states */
.loading-state[b-kmrp2pn3on],
.error-state[b-kmrp2pn3on] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.spinner[b-kmrp2pn3on] {
    width: 40px;
    height: 40px;
    border: 3px solid #e1e0e1;
    border-top-color: #2a63af;
    border-radius: 50%;
    animation: spin-b-kmrp2pn3on 0.8s linear infinite;
}

@keyframes spin-b-kmrp2pn3on {
    to { transform: rotate(360deg); }
}

.error-icon[b-kmrp2pn3on] {
    color: #ef4444;
    margin-bottom: 16px;
}

.error-state p[b-kmrp2pn3on] {
    color: #666;
    margin-bottom: 20px;
}

/* Preview header bar */
.preview-header[b-kmrp2pn3on] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e1e0e1;
}

/* Back button (44x44 icon button per Figma) */
.back-btn[b-kmrp2pn3on] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    color: #333;
}

.back-btn:hover[b-kmrp2pn3on] {
    background: #f5f5f5;
    border-color: #2a63af;
    color: #2a63af;
}

/* Preview mode badge (dashed border per Figma) */
.preview-badge[b-kmrp2pn3on] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: white;
    color: #856404;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    border: 2px dashed #fdb913;
}

/* Article container */
.content-article[b-kmrp2pn3on] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
}

/* Featured image */
.featured-image-container[b-kmrp2pn3on] {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.featured-image[b-kmrp2pn3on] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* Article metadata row */
.article-meta[b-kmrp2pn3on] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 0;
}

/* Content type badge */
.content-type-badge[b-kmrp2pn3on] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.content-type-badge.type-news[b-kmrp2pn3on] {
    background: #2a63af;
    color: white;
}

.content-type-badge.type-announcement[b-kmrp2pn3on] {
    background: #fef3c7;
    color: #92400e;
}

.content-type-badge.type-promotional[b-kmrp2pn3on] {
    background: #d1fae5;
    color: #065f46;
}

.featured-badge[b-kmrp2pn3on] {
    background: #fdb913;
    color: black;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.publish-date[b-kmrp2pn3on] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 14px;
}

/* Article title */
.article-title[b-kmrp2pn3on] {
    font-size: 32px;
    font-weight: 700;
    color: black;
    line-height: 1.2;
    padding: 16px 24px 0;
    margin: 0 0 24px 0;
}

/* Summary block */
.article-summary[b-kmrp2pn3on] {
    font-size: 18px;
    color: #555;
    line-height: 1.75;
    padding: 16px 20px;
    border-left: 4px solid #2a63af;
    margin: 16px 24px;
    background: #f9fafb;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

/* Promotional details */
.promo-details[b-kmrp2pn3on] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    margin: 0 24px;
    border-radius: 20px;
}

.offer-badge[b-kmrp2pn3on] {
    background: #059669;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
}

.price-text[b-kmrp2pn3on] {
    font-size: 20px;
    font-weight: 700;
    color: #065f46;
}

.location-text[b-kmrp2pn3on],
.validity-text[b-kmrp2pn3on] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #065f46;
    font-size: 14px;
}

/* Announcement details */
.announcement-details[b-kmrp2pn3on] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #fef3c7;
    margin: 0 24px;
    border-radius: 20px;
}

.priority-badge[b-kmrp2pn3on] {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.priority-badge.priority-important[b-kmrp2pn3on] {
    background: #fbbf24;
    color: #78350f;
}

.priority-badge.priority-urgent[b-kmrp2pn3on] {
    background: #ef4444;
    color: white;
}

.key-date[b-kmrp2pn3on] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #92400e;
    font-size: 14px;
}

/* Author info (news type) */
.author-info[b-kmrp2pn3on] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    color: #666;
    font-size: 14px;
}

.reading-time[b-kmrp2pn3on] {
    color: #999;
}

/* Article body content */
.article-content[b-kmrp2pn3on] {
    padding: 24px;
    font-size: 18px;
    line-height: 1.75;
    color: #333;
}

.article-content p[b-kmrp2pn3on] {
    margin-bottom: 24px;
}

.article-content ul[b-kmrp2pn3on],
.article-content ol[b-kmrp2pn3on] {
    margin-bottom: 24px;
    padding-left: 24px;
}

.article-content li[b-kmrp2pn3on] {
    margin-bottom: 8px;
}

.article-content h2[b-kmrp2pn3on] {
    font-size: 24px;
    font-weight: 700;
    color: black;
    margin: 32px 0 12px;
}

.article-content h3[b-kmrp2pn3on] {
    font-size: 20px;
    font-weight: 600;
    color: black;
    margin: 24px 0 10px;
}

/* Inline images with captions (inserted via rich text editor) */
.article-content figure.article-inline-image[b-kmrp2pn3on] {
    margin: 24px 0;
    text-align: center;
}

.article-content figure.article-inline-image img[b-kmrp2pn3on] {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.article-content figure.article-inline-image figcaption[b-kmrp2pn3on] {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
    font-style: italic;
    line-height: 1.4;
}

/* Tags */
.article-tags[b-kmrp2pn3on] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 24px 24px;
}

.tag[b-kmrp2pn3on] {
    flex: 0 0 auto;
    height: 50px;
    background: white;
    border: 1.5px solid #e1e0e1;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: black;
    font-size: 14px;
    font-weight: 500;
}

/* Promotional CTA */
.promo-cta[b-kmrp2pn3on] {
    padding: 24px;
    text-align: center;
    background: #f0fdf4;
    margin: 0 24px 24px;
    border-radius: 20px;
}

.btn-book[b-kmrp2pn3on] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #059669;
    color: white;
    font-size: 16px;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-book:hover[b-kmrp2pn3on] {
    background: #047857;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

/* Article footer */
.article-footer[b-kmrp2pn3on] {
    padding: 24px;
    border-top: 1px solid #e1e0e1;
}

.btn-back[b-kmrp2pn3on] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-back:hover[b-kmrp2pn3on] {
    background: #f5f5f5;
    border-color: #2a63af;
    color: #2a63af;
}

/* Mobile responsive (393px target) */
@media (max-width: 768px) {
    .content-preview[b-kmrp2pn3on] {
        padding: 16px;
        padding-bottom: 100px;
    }

    .featured-image-container[b-kmrp2pn3on] {
        height: 250px;
    }

    .article-title[b-kmrp2pn3on] {
        font-size: 24px;
        padding: 12px 16px 0;
    }

    .article-meta[b-kmrp2pn3on],
    .article-content[b-kmrp2pn3on],
    .article-tags[b-kmrp2pn3on],
    .article-footer[b-kmrp2pn3on] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .article-content[b-kmrp2pn3on] {
        font-size: 16px;
    }

    .article-summary[b-kmrp2pn3on] {
        margin: 12px 16px;
        font-size: 16px;
    }

    .promo-details[b-kmrp2pn3on],
    .announcement-details[b-kmrp2pn3on],
    .promo-cta[b-kmrp2pn3on] {
        margin-left: 16px;
        margin-right: 16px;
    }

    .preview-header[b-kmrp2pn3on] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

@media (max-width: 393px) {
    .content-preview[b-kmrp2pn3on] {
        padding: 16px;
        padding-bottom: 100px;
    }

    .article-title[b-kmrp2pn3on] {
        font-size: 24px;
    }

    .back-btn[b-kmrp2pn3on] {
        width: 40px;
        height: 40px;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* =========================================================================
   Home page styling - mobile-first to match docs/ui-redesign/screens/07-home.html
   while preserving the existing WalletCard, SearchInput, FeaturedExperiences
   and NewsEventsSection components and their data wiring.

   Mobile (default + below 1024px): single-column vertical stack matching
   the mock-up shape. Desktop (>=1024px): falls back to the previous
   horizontal hero (welcome+search LEFT, wallet RIGHT).
   ========================================================================= */

/* ------------------------------------------------------- BASE LAYOUT */
.main-content[b-y8hgml8unn] {
    padding: 16px;
    max-width: 1440px;
    margin: 0 auto;
    background: #ffffff;
}

.home-v2__hero[b-y8hgml8unn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.home-v2__hero-text[b-y8hgml8unn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Greeting kicker (uppercase eyebrow) above the name h1. */
.home-v2__greeting-kicker[b-y8hgml8unn] {
    color: var(--atkv-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 600;
}

.home-v2__name[b-y8hgml8unn] {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 2px 0 0;
    color: var(--atkv-ink, #0f172a);
    line-height: 1.2;
}

.home-v2__subtitle[b-y8hgml8unn] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--atkv-muted, #6b7280);
    margin: 0 0 8px;
}

.home-v2__wallet-wrap[b-y8hgml8unn] {
    width: 100%;
}

/* --------------------------------------------------- UPCOMING TILES */
/* Both tiles MUST be the same size for consistency: equal width via the
   grid columns, equal height via align-items: stretch + a shared
   min-height so a short copy on one side does not look smaller than a
   long copy on the other. */
.home-v2__tiles[b-y8hgml8unn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 24px;
}

.home-v2__tile[b-y8hgml8unn] {
    padding: 14px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
    box-sizing: border-box;
}

.home-v2__tile:hover[b-y8hgml8unn] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.home-v2__tile--project[b-y8hgml8unn] {
    border: 1.5px solid var(--atkv-yellow, #fdb913);
}

.home-v2__tile-icon[b-y8hgml8unn] {
    font-size: 18px;
    color: var(--atkv-blue, #2a63af);
}

.home-v2__tile-title[b-y8hgml8unn] {
    font-weight: 700;
    font-size: 14px;
    color: var(--atkv-ink, #0f172a);
}

.home-v2__tile-detail[b-y8hgml8unn] {
    font-size: 11px;
    color: var(--atkv-muted, #6b7280);
    line-height: 1.4;
}

/* --------------------------------------------------------- DESKTOP */
/* Restore the original side-by-side hero on desktop so larger viewports
   still get the welcome+search LEFT, wallet RIGHT pattern they had. */
@media (min-width: 1025px) {
    .main-content[b-y8hgml8unn] {
        padding: 32px 20px;
    }

    /* V8: greeting on top, wallet cards span the full content width below
       (instead of being boxed into a narrow right-hand column). */
    .home-v2__hero[b-y8hgml8unn] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 24px;
        gap: 16px;
    }

    .home-v2__hero-text[b-y8hgml8unn] {
        max-width: none;
    }

    .home-v2__name[b-y8hgml8unn] {
        font-size: 32px;
        font-weight: 600;
    }

    .home-v2__subtitle[b-y8hgml8unn] {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .home-v2__wallet-wrap[b-y8hgml8unn] {
        width: 100%;
    }

    .home-v2__tiles[b-y8hgml8unn] {
        max-width: 720px;
    }
}

/* --------------------------------------------------------- TABLET */
@media (min-width: 744px) and (max-width: 1024px) {
    .home-v2__name[b-y8hgml8unn] {
        font-size: 28px;
    }
}

/* --------------------------------------------------------- MOBILE */
@media (max-width: 393px) {
    .main-content[b-y8hgml8unn] {
        padding: 16px 12px;
    }

    .home-v2__name[b-y8hgml8unn] {
        font-size: 22px;
    }

    .home-v2__tiles[b-y8hgml8unn] {
        gap: 10px;
    }

    .home-v2__tile[b-y8hgml8unn] {
        padding: 12px;
    }
}
/* /Pages/Legal.razor.rz.scp.css */
/* Legal page - prototype legal.html */
.legal-page[b-g4mouzzcgz] { background: #fff; min-height: 100%; }

.legal-appbar[b-g4mouzzcgz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--atkv-blue, #2a63af);
    color: #fff;
}
.legal-back[b-g4mouzzcgz] {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}
.legal-appbar__title[b-g4mouzzcgz] { font-weight: 600; font-size: 16px; }

.legal-heading[b-g4mouzzcgz] { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--atkv-ink, #1a1a1a); }
.legal-body[b-g4mouzzcgz] { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--atkv-text, #3a3a3a); }
.legal-link[b-g4mouzzcgz] { border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.legal-section--divided[b-g4mouzzcgz] { border-top: 1px solid var(--atkv-line, #d9d6cf); }
/* /Pages/News/Detail.razor.rz.scp.css */
/* News Detail - Figma-aligned scoped styles */

.article-detail[b-kf9hwoipfu] {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 20px;
    padding-bottom: 100px;
}

/* Back buttons */
.back-btn[b-kf9hwoipfu] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 24px;
    padding: 0;
    color: #333;
}

.back-btn:hover[b-kf9hwoipfu] {
    background: #f5f5f5;
    border-color: #2a63af;
    color: #2a63af;
}

.btn-back[b-kf9hwoipfu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-back:hover[b-kf9hwoipfu] {
    background: #f5f5f5;
    border-color: #2a63af;
    color: #2a63af;
}

/* Article card container */
article[b-kf9hwoipfu] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
}

/* Article header */
.article-header[b-kf9hwoipfu] {
    padding: 0 0 32px 0;
}

.article-image[b-kf9hwoipfu] {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 32px;
}

/* Article metadata row */
.article-meta[b-kf9hwoipfu] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 32px;
    margin-bottom: 16px;
}

/* Category badge */
.category-badge[b-kf9hwoipfu] {
    display: inline-block;
    padding: 8px 16px;
    background: #2a63af;
    color: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* Category colour variants */
.category-resortupdates[b-kf9hwoipfu] {
    background: #2a63af;
    color: white;
}

.category-specialoffers[b-kf9hwoipfu] {
    background: #fff3e0;
    color: #f57c00;
}

.category-events[b-kf9hwoipfu] {
    background: #f3e5f5;
    color: #7b1fa2;
}

.category-membershipnews[b-kf9hwoipfu] {
    background: #e8f5e9;
    color: #388e3c;
}

.category-tjiengrewards[b-kf9hwoipfu] {
    background: #fdb913;
    color: black;
}

.article-date[b-kf9hwoipfu] {
    color: #666;
    font-size: 14px;
}

.featured-badge[b-kf9hwoipfu] {
    background: #fdb913;
    color: black;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* Article title */
article h1[b-kf9hwoipfu] {
    font-size: 32px;
    font-weight: 700;
    color: black;
    line-height: 1.2;
    margin: 0 0 24px 0;
    padding: 0 32px;
}

/* Summary block */
.article-summary[b-kf9hwoipfu] {
    padding: 20px;
    color: #555;
    font-size: 18px;
    line-height: 1.75;
    font-style: italic;
    border-left: 4px solid #2a63af;
    margin: 24px 32px;
    background: #f9fafb;
    border-radius: 0 8px 8px 0;
}

.article-summary p[b-kf9hwoipfu] {
    margin: 0;
}

/* Article body content */
.article-content[b-kf9hwoipfu] {
    padding: 0 32px 32px 32px;
    font-size: 18px;
    line-height: 1.75;
    color: #333;
}

.article-content[b-kf9hwoipfu]  h2 {
    font-size: 28px;
    font-weight: 700;
    color: black;
    margin: 32px 0 16px 0;
}

.article-content[b-kf9hwoipfu]  h3 {
    font-size: 22px;
    font-weight: 600;
    color: black;
    margin: 24px 0 12px 0;
}

.article-content[b-kf9hwoipfu]  p {
    margin: 0 0 24px 0;
}

.article-content[b-kf9hwoipfu]  ul,
.article-content[b-kf9hwoipfu]  ol {
    margin: 0 0 24px 0;
    padding-left: 24px;
}

.article-content[b-kf9hwoipfu]  li {
    margin-bottom: 8px;
}

.article-content[b-kf9hwoipfu]  img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 24px 0;
}

.article-content[b-kf9hwoipfu]  a {
    color: #2a63af;
    text-decoration: underline;
}

.article-content[b-kf9hwoipfu]  a:hover {
    color: #1e4f8f;
}

/* Inline images with captions (inserted via rich text editor) */
.article-content[b-kf9hwoipfu]  figure.article-inline-image {
    margin: 24px 0;
    text-align: center;
}

.article-content[b-kf9hwoipfu]  figure.article-inline-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.article-content[b-kf9hwoipfu]  figure.article-inline-image figcaption {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
    font-style: italic;
    line-height: 1.4;
}

/* Article footer */
.article-footer[b-kf9hwoipfu] {
    padding: 24px 32px 32px;
    border-top: 1px solid #e1e0e1;
}

/* Loading and error states */
.loading-state[b-kf9hwoipfu],
.error-state[b-kf9hwoipfu] {
    text-align: center;
    padding: 60px 20px;
}

.spinner[b-kf9hwoipfu] {
    width: 40px;
    height: 40px;
    border: 3px solid #e1e0e1;
    border-top-color: #2a63af;
    border-radius: 50%;
    animation: spin-b-kf9hwoipfu 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin-b-kf9hwoipfu {
    to { transform: rotate(360deg); }
}

.error-state p[b-kf9hwoipfu] {
    color: #dc3545;
    margin-bottom: 20px;
}

/* Mobile responsive (393px target) */
@media (max-width: 768px) {
    .article-detail[b-kf9hwoipfu] {
        padding: 16px;
        padding-bottom: 100px;
    }

    .article-image[b-kf9hwoipfu] {
        height: 250px;
    }

    article h1[b-kf9hwoipfu] {
        font-size: 24px;
        padding: 0 20px;
    }

    .article-meta[b-kf9hwoipfu] {
        padding: 0 20px;
    }

    .article-summary[b-kf9hwoipfu] {
        margin: 20px;
        padding: 16px;
        font-size: 16px;
    }

    .article-content[b-kf9hwoipfu] {
        padding: 0 20px 24px 20px;
        font-size: 16px;
    }

    .article-content[b-kf9hwoipfu]  h2 {
        font-size: 24px;
    }

    .article-content[b-kf9hwoipfu]  h3 {
        font-size: 20px;
    }

    .article-footer[b-kf9hwoipfu] {
        padding: 20px;
    }
}

@media (max-width: 393px) {
    .article-detail[b-kf9hwoipfu] {
        padding: 16px;
        padding-bottom: 100px;
    }

    .article-image[b-kf9hwoipfu] {
        height: 250px;
    }

    article h1[b-kf9hwoipfu] {
        font-size: 24px;
        padding: 0 16px;
    }

    .article-meta[b-kf9hwoipfu] {
        padding: 0 16px;
        gap: 12px;
    }

    .article-summary[b-kf9hwoipfu] {
        margin: 16px;
        padding: 16px 12px;
        font-size: 16px;
    }

    .article-content[b-kf9hwoipfu] {
        padding: 0 16px 20px 16px;
        font-size: 16px;
    }

    .article-footer[b-kf9hwoipfu] {
        padding: 16px;
    }

    .back-btn[b-kf9hwoipfu] {
        width: 40px;
        height: 40px;
    }
}

/* =========================================================================
   News detail redesign (matches docs/ui-redesign/screens/25-news-detail.html).
   Appbar with back, hero image, category pill, title, meta, content.
   ========================================================================= */
.news-detail-redesign[b-kf9hwoipfu] {
    background: #fff;
    min-height: 100vh;
}

.news-detail-redesign__appbar[b-kf9hwoipfu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--atkv-line, #e5e7eb);
}

.news-detail-redesign__appbar-title[b-kf9hwoipfu] {
    font-weight: 600;
    margin-left: 8px;
    font-size: 16px;
}

.news-detail-redesign__hero[b-kf9hwoipfu] {
    height: 220px;
    overflow: hidden;
    background: linear-gradient(135deg, #fdb913, #f59e0b);
}

.news-detail-redesign__hero--placeholder[b-kf9hwoipfu] {
    background: linear-gradient(135deg, var(--atkv-blue, #2a63af), #6b9bd1);
}

.news-detail-redesign__hero-image[b-kf9hwoipfu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-detail-redesign__pill[b-kf9hwoipfu] {
    font-size: 11px;
}

.news-detail-redesign__title[b-kf9hwoipfu] {
    margin: 8px 0 4px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--atkv-ink, #0f172a);
}

.news-detail-redesign__meta[b-kf9hwoipfu] {
    margin-bottom: 16px;
}

.news-detail-redesign__featured[b-kf9hwoipfu] {
    color: var(--atkv-blue, #2a63af);
    font-weight: 600;
}

.news-detail-redesign__summary[b-kf9hwoipfu] {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--atkv-text, #1f2937);
}

.news-detail-redesign__content[b-kf9hwoipfu] {
    font-size: 14px;
    line-height: 1.65;
    color: var(--atkv-text, #1f2937);
}

.news-detail-redesign__content p[b-kf9hwoipfu] {
    margin: 0 0 14px;
}

.news-detail-redesign__content h2[b-kf9hwoipfu] {
    font-size: 16px;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 8px;
    color: var(--atkv-ink, #0f172a);
}

.news-detail-redesign__content ul[b-kf9hwoipfu],
.news-detail-redesign__content ol[b-kf9hwoipfu] {
    margin: 0 0 14px 22px;
    padding: 0;
}

.news-detail-redesign__content li[b-kf9hwoipfu] {
    margin-bottom: 6px;
    line-height: 1.6;
}
/* /Pages/News/Index.razor.rz.scp.css */
/* News Index - Figma-aligned scoped styles */

.news-page[b-fzsm2w7hgk] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 20px;
    padding-bottom: 100px;
}

/* Page header */
.page-header[b-fzsm2w7hgk] {
    margin-bottom: 32px;
}

.page-header h1[b-fzsm2w7hgk] {
    font-size: 32px;
    font-weight: 700;
    color: black;
    margin: 0 0 8px 0;
}

.page-subtitle[b-fzsm2w7hgk] {
    font-size: 18px;
    color: #666;
    margin: 0 0 32px 0;
}

/* Category filter bar */
.category-filter[b-fzsm2w7hgk] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.filter-btn[b-fzsm2w7hgk] {
    padding: 12px 24px;
    border: 2px solid #e1e0e1;
    border-radius: 20px;
    background: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: black;
    white-space: nowrap;
}

.filter-btn:hover[b-fzsm2w7hgk] {
    border-color: #2a63af;
}

.filter-btn.active[b-fzsm2w7hgk] {
    background: #2a63af;
    color: white;
    border-color: #2a63af;
}

/* Featured section */
.featured-section[b-fzsm2w7hgk] {
    margin-bottom: 48px;
}

.featured-section h2[b-fzsm2w7hgk] {
    font-size: 24px;
    font-weight: 700;
    color: black;
    margin: 0 0 24px 0;
}

.featured-articles[b-fzsm2w7hgk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 11px;
}

/* Articles grid */
.articles-section[b-fzsm2w7hgk] {
    margin-bottom: 32px;
}

.articles-grid[b-fzsm2w7hgk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 11px;
}

/* Loading state */
.loading-state[b-fzsm2w7hgk] {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.spinner[b-fzsm2w7hgk] {
    width: 40px;
    height: 40px;
    border: 3px solid #e1e0e1;
    border-top-color: #2a63af;
    border-radius: 50%;
    animation: spin-b-fzsm2w7hgk 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin-b-fzsm2w7hgk {
    to { transform: rotate(360deg); }
}

/* Error state */
.error-state[b-fzsm2w7hgk] {
    text-align: center;
    padding: 60px 20px;
}

.error-state p[b-fzsm2w7hgk] {
    color: #dc3545;
    margin-bottom: 20px;
}

.btn-retry[b-fzsm2w7hgk] {
    padding: 12px 24px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    transition: background 0.2s;
}

.btn-retry:hover[b-fzsm2w7hgk] {
    background: #1e4f8f;
}

/* Empty state */
.empty-state[b-fzsm2w7hgk] {
    text-align: center;
    padding: 60px 20px;
}

.empty-state p[b-fzsm2w7hgk] {
    color: #666;
    font-size: 16px;
}

/* Tablet responsive (744px) */
@media (max-width: 744px) {
    .featured-articles[b-fzsm2w7hgk],
    .articles-grid[b-fzsm2w7hgk] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .filter-btn[b-fzsm2w7hgk] {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* Mobile responsive (393px) */
@media (max-width: 393px) {
    .news-page[b-fzsm2w7hgk] {
        padding: 16px;
        padding-bottom: 100px;
    }

    .page-header h1[b-fzsm2w7hgk] {
        font-size: 24px;
    }

    .page-subtitle[b-fzsm2w7hgk] {
        font-size: 16px;
    }

    .featured-articles[b-fzsm2w7hgk],
    .articles-grid[b-fzsm2w7hgk] {
        grid-template-columns: 1fr;
    }

    .category-filter[b-fzsm2w7hgk] {
        gap: 8px;
    }

    .filter-btn[b-fzsm2w7hgk] {
        padding: 10px 18px;
        font-size: 14px;
    }
}

/* =========================================================================
   News list redesign (matches docs/ui-redesign/screens/24-news.html).
   Dropdown category filter and section-aligned typography. The
   ArticleCard component handles individual card styling.
   ========================================================================= */
.news-redesign[b-fzsm2w7hgk] {
    background: #fff;
}

.news-redesign__intro[b-fzsm2w7hgk] {
    padding-top: 18px;
}

.news-redesign__title[b-fzsm2w7hgk] {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}

.news-redesign__filter[b-fzsm2w7hgk] {
    margin-top: 12px;
}

.news-redesign__filter-select[b-fzsm2w7hgk] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    box-sizing: border-box;
    cursor: pointer;
}
/* /Pages/NFC/LinkArmband.razor.rz.scp.css */
/*
 * NFC/LinkArmband.razor.css
 * Link Armband page styles aligned to Figma add-armband-modal form pattern.
 * Blue header, form inputs, method selector cards, QR scanner UI.
 */

/* Page Container */
.link-armband-container[b-3ouz83p58i] {
    padding: 24px;
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================
   PAGE HEADER
   ========================================== */
.page-header[b-3ouz83p58i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.page-header h1[b-3ouz83p58i] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.btn-back[b-3ouz83p58i] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    transition: all 0.2s ease;
}

.btn-back:hover[b-3ouz83p58i] {
    background: #f5f5f5;
    border-color: #ccc;
}

.spacer[b-3ouz83p58i] {
    width: 44px;
}

/* ==========================================
   METHOD SELECTOR
   ========================================== */
.link-methods[b-3ouz83p58i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.method-card[b-3ouz83p58i] {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.method-card:hover[b-3ouz83p58i] {
    border-color: #2a63af;
    box-shadow: 0 2px 8px rgba(42, 99, 175, 0.1);
}

.method-card.active[b-3ouz83p58i] {
    border-color: #2a63af;
    background: linear-gradient(135deg, #1a5a9e 0%, #3a7bc8 100%);
    color: white;
}

.method-card.active h3[b-3ouz83p58i] {
    color: white;
}

.method-card.active p[b-3ouz83p58i] {
    color: rgba(255, 255, 255, 0.9);
}

.method-icon[b-3ouz83p58i] {
    font-size: 32px;
    display: block;
    margin-bottom: 12px;
}

.method-card h3[b-3ouz83p58i] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
}

.method-card p[b-3ouz83p58i] {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* ==========================================
   LINK FORM (manual entry)
   ========================================== */
.link-form[b-3ouz83p58i] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
}

.form-group[b-3ouz83p58i] {
    margin-bottom: 20px;
}

.form-group:last-child[b-3ouz83p58i] {
    margin-bottom: 0;
}

.form-group label[b-3ouz83p58i] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.form-control[b-3ouz83p58i] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-control:focus[b-3ouz83p58i] {
    outline: none;
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.form-control[b-3ouz83p58i]::placeholder {
    color: #999;
}

/* ==========================================
   QR SCANNER
   ========================================== */
.qr-scanner[b-3ouz83p58i] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 32px;
}

.scanner-placeholder[b-3ouz83p58i] {
    padding: 48px 32px;
    text-align: center;
    color: #666;
}

.scanner-icon[b-3ouz83p58i] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.scanner-placeholder p[b-3ouz83p58i] {
    font-size: 14px;
    color: #999;
    margin: 0 0 20px;
    line-height: 1.5;
}

.scanner-placeholder .btn-secondary[b-3ouz83p58i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: white;
    border: 2px solid #2a63af;
    border-radius: 360px;
    color: #2a63af;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.scanner-placeholder .btn-secondary:hover[b-3ouz83p58i] {
    background: #2a63af;
    color: white;
}

.scanner-active[b-3ouz83p58i] {
    position: relative;
    background: #000;
}

.scanner-active video[b-3ouz83p58i] {
    width: 100%;
    display: block;
}

.scanner-overlay[b-3ouz83p58i] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.scanner-frame[b-3ouz83p58i] {
    width: 200px;
    height: 200px;
    border: 3px solid white;
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
}

.scanner-hint[b-3ouz83p58i] {
    color: white;
    font-size: 14px;
    margin-top: 16px;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   ERROR ALERT
   ========================================== */
.alert[b-3ouz83p58i] {
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 24px;
}

.alert-error[b-3ouz83p58i] {
    background: #fdecea;
    color: #c62828;
    border: 1px solid #f5c6cb;
}

/* ==========================================
   LINK BUTTON
   ========================================== */
.btn-primary[b-3ouz83p58i] {
    width: 100%;
    padding: 16px 32px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 360px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary:hover[b-3ouz83p58i] {
    background: #234f8e;
}

.btn-primary:disabled[b-3ouz83p58i] {
    background: #ccc;
    cursor: not-allowed;
}

.btn-large[b-3ouz83p58i] {
    padding: 16px 32px;
    font-size: 18px;
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *[b-3ouz83p58i],
    *[b-3ouz83p58i]::before,
    *[b-3ouz83p58i]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   MOBILE RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .link-armband-container[b-3ouz83p58i] {
        padding: 16px;
    }

    .link-methods[b-3ouz83p58i] {
        grid-template-columns: 1fr;
    }

    .method-card[b-3ouz83p58i] {
        padding: 20px;
    }

    .link-form[b-3ouz83p58i] {
        padding: 24px 20px;
    }

    .btn-primary[b-3ouz83p58i] {
        padding: 14px 24px;
        font-size: 16px;
    }
}
/* /Pages/NFC/NFCTransactions.razor.rz.scp.css */
/*
 * NFC/NFCTransactions.razor.css
 * NFC transaction history page styles aligned to Figma transaction-history-modal pattern.
 * Armband info card with gradient, transaction list with debit/credit colouring.
 */

/* Page Container */
.nfc-transactions-container[b-gtfq2u7i4k] {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

/* ==========================================
   PAGE HEADER
   ========================================== */
.page-header[b-gtfq2u7i4k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.page-header h1[b-gtfq2u7i4k] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.btn-back[b-gtfq2u7i4k] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    transition: all 0.2s ease;
}

.btn-back:hover[b-gtfq2u7i4k] {
    background: #f5f5f5;
    border-color: #ccc;
}

.spacer[b-gtfq2u7i4k] {
    width: 44px;
}

/* ==========================================
   ARMBAND INFO CARD
   ========================================== */
.armband-info-card[b-gtfq2u7i4k] {
    background: linear-gradient(135deg, #1a5a9e 0%, #3a7bc8 100%);
    border-radius: 16px;
    padding: 24px 32px;
    margin-bottom: 32px;
    color: white;
    position: relative;
    overflow: hidden;
}

.armband-info-card[b-gtfq2u7i4k]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 100%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.armband-info-card h3[b-gtfq2u7i4k] {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 4px;
    position: relative;
    z-index: 1;
}

.armband-info-card p[b-gtfq2u7i4k] {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ==========================================
   TRANSACTIONS LIST
   ========================================== */
.transactions-list[b-gtfq2u7i4k] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    overflow: hidden;
}

.transaction-item[b-gtfq2u7i4k] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 32px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.transaction-item:last-child[b-gtfq2u7i4k] {
    border-bottom: none;
}

.transaction-item:hover[b-gtfq2u7i4k] {
    background: #fafafa;
}

.transaction-icon[b-gtfq2u7i4k] {
    width: 44px;
    height: 44px;
    background: #e3f2fd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.transaction-details[b-gtfq2u7i4k] {
    flex: 1;
    min-width: 0;
}

.transaction-details h4[b-gtfq2u7i4k] {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 0 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-date[b-gtfq2u7i4k] {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.transaction-ref[b-gtfq2u7i4k] {
    font-size: 12px;
    color: #bbb;
    margin: 2px 0 0;
}

.transaction-amount[b-gtfq2u7i4k] {
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

.transaction-amount.negative[b-gtfq2u7i4k] {
    color: #e53935;
}

.transaction-amount.positive[b-gtfq2u7i4k] {
    color: #43a047;
}

.currency-symbol[b-gtfq2u7i4k] {
    font-size: 14px;
}

/* ==========================================
   LOADING STATE
   ========================================== */
.loading-container[b-gtfq2u7i4k] {
    padding: 64px 32px;
    text-align: center;
    color: #999;
}

.loading-container p[b-gtfq2u7i4k] {
    margin-top: 16px;
    font-size: 14px;
}

.spinner[b-gtfq2u7i4k] {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2a63af;
    border-radius: 50%;
    animation: spin-b-gtfq2u7i4k 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-gtfq2u7i4k {
    to { transform: rotate(360deg); }
}

/* ==========================================
   EMPTY STATE
   ========================================== */
.empty-state[b-gtfq2u7i4k] {
    padding: 64px 32px;
    text-align: center;
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empty-icon[b-gtfq2u7i4k] {
    font-size: 56px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.4;
}

.empty-state h3[b-gtfq2u7i4k] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
}

.empty-state p[b-gtfq2u7i4k] {
    font-size: 14px;
    color: #999;
    margin: 0;
    line-height: 1.5;
    max-width: 400px;
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *[b-gtfq2u7i4k],
    *[b-gtfq2u7i4k]::before,
    *[b-gtfq2u7i4k]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   MOBILE RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .nfc-transactions-container[b-gtfq2u7i4k] {
        padding: 16px;
    }

    .armband-info-card[b-gtfq2u7i4k] {
        padding: 20px;
    }

    .transaction-item[b-gtfq2u7i4k] {
        padding: 12px 16px;
        gap: 12px;
    }

    .transaction-icon[b-gtfq2u7i4k] {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .transaction-details h4[b-gtfq2u7i4k] {
        font-size: 14px;
    }

    .transaction-amount[b-gtfq2u7i4k] {
        font-size: 14px;
    }
}
/* /Pages/NPO/ArticleDetail.razor.rz.scp.css */
/* NPO Article Detail - Figma-aligned scoped styles */

.article-detail-page[b-z2yhlnbc9w] {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 20px;
    padding-bottom: 100px;
}

/* Back button */
.article-back[b-z2yhlnbc9w] {
    margin-bottom: 24px;
}

.btn-back[b-z2yhlnbc9w] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: all 0.2s;
    padding: 0;
}

.btn-back:hover[b-z2yhlnbc9w] {
    background: #f5f5f5;
    border-color: #2a63af;
    color: #2a63af;
}

/* Article header section */
.article-header[b-z2yhlnbc9w] {
    margin-bottom: 32px;
}

.article-image[b-z2yhlnbc9w] {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 32px;
}

.article-meta[b-z2yhlnbc9w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.article-categories[b-z2yhlnbc9w] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.article-category[b-z2yhlnbc9w] {
    display: inline-block;
    padding: 8px 16px;
    background: #2a63af;
    color: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.article-date[b-z2yhlnbc9w] {
    color: #666;
    font-size: 14px;
    margin: 0 0 16px 0;
}

/* Article title */
.article-title[b-z2yhlnbc9w] {
    font-size: 32px;
    font-weight: 700;
    color: black;
    margin: 0 0 24px 0;
    line-height: 1.2;
}

/* Article body content */
.article-content[b-z2yhlnbc9w] {
    font-size: 18px;
    line-height: 1.75;
    color: #333;
}

.article-content p[b-z2yhlnbc9w] {
    margin-bottom: 24px;
}

/* Loading state */
.loading-state[b-z2yhlnbc9w] {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

/* Mobile responsive (393px target) */
@media (max-width: 768px) {
    .article-detail-page[b-z2yhlnbc9w] {
        padding: 16px;
        padding-bottom: 100px;
    }

    .article-image[b-z2yhlnbc9w] {
        height: 250px;
    }

    .article-title[b-z2yhlnbc9w] {
        font-size: 24px;
    }

    .article-content[b-z2yhlnbc9w] {
        font-size: 16px;
    }

    .article-meta[b-z2yhlnbc9w] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/NPO/Benefits.razor.rz.scp.css */
/* Benefits & Rewards page styles
 * Figma reference: npo-benefits-rewards.html
 * Layout: benefit card grid with yellow icons + FAQ section
 */

.npo-page[b-dwwb4nlsg1] {
    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: 265px hero image with gradient overlay */
.npo-header[b-dwwb4nlsg1] {
    width: 100%;
    height: 265px;
    background-image: url('/images/resorts/hartenbos/resort_good_1_aerial_clifftop_beach.jpg');
    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-dwwb4nlsg1]::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-dwwb4nlsg1] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

/* NPO Navigation: pill-shaped tab bar, 70px border-radius */
.npo-navigation[b-dwwb4nlsg1] {
    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-dwwb4nlsg1] {
    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-dwwb4nlsg1] {
    background: var(--color-white);
    border: 1px solid var(--color-white);
}

.npo-nav-button:hover[b-dwwb4nlsg1] {
    opacity: var(--opacity-hover);
}

/* Introduction section */
.intro-section[b-dwwb4nlsg1] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.intro-title[b-dwwb4nlsg1] {
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.intro-description[b-dwwb4nlsg1] {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: var(--line-height-normal);
}

/* Benefits Grid: flex wrap with 70px gap, space-between alignment */
.benefits-grid[b-dwwb4nlsg1] {
    display: flex;
    flex-wrap: wrap;
    gap: 70px;
    width: 100%;
    justify-content: space-between;
}

/* Benefit Card: 280px wide, centred content with 20px gap */
.benefit-card[b-dwwb4nlsg1] {
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 12px;
    text-align: center;
    border-radius: 20px;
}

/* Yellow circular icon: 60px diameter */
.benefit-icon[b-dwwb4nlsg1] {
    width: 60px;
    height: 60px;
    background: #fdb913;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon-img[b-dwwb4nlsg1] {
    width: 32px;
    height: 32px;
}

.benefit-title[b-dwwb4nlsg1] {
    font-size: 24px;
    font-weight: 600;
    color: black;
}

.benefit-description[b-dwwb4nlsg1] {
    font-size: 16px;
    font-weight: 500;
    color: black;
    line-height: 1.5;
}

/* FAQ Section */
.faq-section[b-dwwb4nlsg1] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.faq-title[b-dwwb4nlsg1] {
    font-size: 28px;
    font-weight: 600;
    color: black;
}

/* NPO Dropdown: hidden on desktop, shown on tablet/mobile */
.npo-dropdown[b-dwwb4nlsg1] {
    display: none;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .npo-navigation[b-dwwb4nlsg1] {
        display: none;
    }

    .npo-dropdown[b-dwwb4nlsg1] {
        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-dwwb4nlsg1] {
        opacity: var(--opacity-hover);
    }

    .npo-dropdown-text[b-dwwb4nlsg1] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-black);
    }

    .npo-dropdown-icon[b-dwwb4nlsg1] {
        width: 34px;
        height: 29px;
    }

    .benefits-grid[b-dwwb4nlsg1] {
        gap: 70px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .npo-page[b-dwwb4nlsg1] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .npo-dropdown[b-dwwb4nlsg1] {
        max-width: 350px;
    }

    .benefits-grid[b-dwwb4nlsg1] {
        flex-direction: column;
        align-items: center;
        gap: 70px;
    }

    .benefit-card[b-dwwb4nlsg1] {
        max-width: 353px;
        width: 100%;
    }
}
/* /Pages/NPO/IndividualProjects.razor.rz.scp.css */
/* NPO Individual Projects Page Styles
 * Aligned to Figma design specifications
 * Sections: Page layout, Header, Intro, Projects grid with columns
 */

/* Page Layout */
.npo-page[b-i57pld73ev] {
    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: 265px tall with gradient overlay */
.npo-header[b-i57pld73ev] {
    width: 100%;
    height: 265px;
    background-image: url('/images/resorts/hartenbos/resort_hero_2_aerial_beach_walkway.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    display: flex;
    align-items: flex-end;
    padding: 32px;
    position: relative;
}

/* Gradient overlay: 142px from bottom */
.npo-header[b-i57pld73ev]::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: 20px;
}

.npo-header-title[b-i57pld73ev] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

/* Introduction Section */
.intro-section[b-i57pld73ev] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.intro-title[b-i57pld73ev] {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
}

.intro-description[b-i57pld73ev] {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: var(--line-height-normal);
}

/* Projects Grid: 4-column layout with flex */
.projects-grid[b-i57pld73ev] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    width: 100%;
}

.projects-column[b-i57pld73ev] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Project Card: 362px tall, 20px radius, 1.5px border */
.project-card[b-i57pld73ev] {
    background: #f9fafb;
    border: 1.5px solid var(--color-grey);
    border-radius: 20px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    height: 362px;
    transition: all var(--transition-base);
    cursor: pointer;
}

.project-card:hover[b-i57pld73ev] {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.project-card-title[b-i57pld73ev] {
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    text-align: center;
}

.project-card-image[b-i57pld73ev] {
    width: 246px;
    flex: 1;
    border-radius: 16px;
    object-fit: cover;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .npo-page[b-i57pld73ev] {
        padding: var(--spacing-5xl) var(--spacing-lg);
    }

    /* Tablet: 2-column grid */
    .projects-grid[b-i57pld73ev] {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .npo-page[b-i57pld73ev] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .intro-title[b-i57pld73ev] {
        font-size: 32px;
    }

    /* Mobile: 1-column grid, card max-width 353px */
    .projects-grid[b-i57pld73ev] {
        grid-template-columns: 1fr;
    }

    .project-card[b-i57pld73ev] {
        max-width: 353px;
        margin: 0 auto;
        width: 100%;
    }
}
/* /Pages/NPO/Nuusgenoot.razor.rz.scp.css */
/* Nuusgenoot (Newsletter) page styles
 * Figma reference: npo-nuusgenoot.html
 * Layout: newspaper preview cards with download buttons
 */

.npo-page[b-dtju4d3yy1] {
    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: 265px hero image with gradient overlay */
.npo-header[b-dtju4d3yy1] {
    width: 100%;
    height: 265px;
    background-image: url('/images/resorts/buffelspoort/resort_good_1_reception_building_garden.jpg');
    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-dtju4d3yy1]::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-dtju4d3yy1] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

/* NPO Navigation: pill-shaped tab bar, 70px border-radius */
.npo-navigation[b-dtju4d3yy1] {
    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%;
    max-width: 1245px;
    gap: var(--spacing-md);
}

.npo-nav-button[b-dtju4d3yy1] {
    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:hover[b-dtju4d3yy1] {
    opacity: var(--opacity-hover);
}

.npo-nav-button--active[b-dtju4d3yy1] {
    background: var(--color-white);
    border: 1px solid var(--color-white);
}

/* NPO Dropdown: hidden on desktop */
.npo-dropdown[b-dtju4d3yy1] {
    display: none;
}

/* Newspapers Container: centred flex wrap with 47px gap */
.newspapers-container[b-dtju4d3yy1] {
    display: flex;
    gap: 47px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

/* Newspaper Card: 615x796px on desktop with centred content */
.newspaper-card[b-dtju4d3yy1] {
    position: relative;
    width: 615px;
    height: 796px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Newspaper preview image: dimmed with border-radius */
.newspaper-image[b-dtju4d3yy1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    border-radius: 16px;
}

/* Download button: centred over the image, yellow background */
.newspaper-download-button[b-dtju4d3yy1] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fdb913;
    border: none;
    border-radius: 16px;
    padding: 16px 76px;
    font-size: 16px;
    font-weight: 500;
    color: black;
    cursor: pointer;
    transition: all var(--transition-base);
    width: 345px;
}

.newspaper-download-button:hover[b-dtju4d3yy1] {
    opacity: var(--opacity-hover);
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .npo-navigation[b-dtju4d3yy1] {
        display: none;
    }

    .npo-dropdown[b-dtju4d3yy1] {
        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-dtju4d3yy1] {
        opacity: var(--opacity-hover);
    }

    .npo-dropdown-text[b-dtju4d3yy1] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-black);
    }

    .npo-dropdown-icon[b-dtju4d3yy1] {
        width: 34px;
        height: 29px;
    }

    /* Tablet: smaller newspaper cards */
    .newspaper-card[b-dtju4d3yy1] {
        width: 354px;
        height: 483px;
    }

    .newspaper-download-button[b-dtju4d3yy1] {
        width: 322px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .npo-page[b-dtju4d3yy1] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .npo-dropdown[b-dtju4d3yy1] {
        max-width: 350px;
    }

    .newspapers-container[b-dtju4d3yy1] {
        flex-direction: column;
        align-items: center;
        gap: 47px;
    }

    /* Mobile: full-width cards with max constraint */
    .newspaper-card[b-dtju4d3yy1] {
        width: 100%;
        max-width: 354px;
        height: 483px;
    }
}
/* /Pages/NPO/Projects.razor.rz.scp.css */
/* NPO Projects Page Styles
 * Aligned to Figma design specifications
 * Sections: Page layout, Header, Intro, Projects container, Upcoming card, Project cards
 */

/* Page Layout */
.npo-page[b-xicfhkktf3] {
    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: 265px hero showing the photograph only. The h1 is visually hidden
   via the global .sr-only utility, so no overlay text or gradient scrim is needed. */
.npo-header[b-xicfhkktf3] {
    width: 100%;
    height: 265px;
    background-image: url('/images/resorts/drakensville/resort_hero_2_aerial_resort_pool_mountains.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

/* Introduction Section */
.intro-section[b-xicfhkktf3] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Hashtag line: brand blue with the hashtag in gold (v3 mock-up). The gold span
   is injected via MarkupString, so ::deep is needed to reach it past scoping. */
.v2-intro-hashtag[b-xicfhkktf3] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #2a63af;
    margin: 0;
    font-size: 1rem;
}

.v2-intro-hashtag[b-xicfhkktf3]  .v2-tag {
    color: #b8860b;
}

.intro-title[b-xicfhkktf3] {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
}

.intro-description[b-xicfhkktf3] {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: var(--line-height-normal);
}

/* Loading and Error States */
.loading-container[b-xicfhkktf3] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-5xl);
    width: 100%;
}

.error-container[b-xicfhkktf3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-5xl);
    width: 100%;
}

.error-message[b-xicfhkktf3] {
    color: #d32f2f;
    font-size: 18px;
}

.retry-button[b-xicfhkktf3] {
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: 20px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.retry-button:hover[b-xicfhkktf3] {
    opacity: var(--opacity-hover);
}

/* Projects Container: flex row with sidebar + grid */
.projects-container[b-xicfhkktf3] {
    display: flex;
    gap: 43px;
    width: 100%;
    flex-wrap: wrap;
}

/* Upcoming Projects Card: 267px wide, grows with its contents so the list of
   upcoming events stays inside the rounded border regardless of how many are
   returned. Tablet and mobile media queries below already used height: auto. */
.upcoming-projects-card[b-xicfhkktf3] {
    background: #f9fafb;
    border: 1.5px solid #e1e0e1;
    border-radius: 20px;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 267px;
    height: auto;
    gap: 20px;
}

.upcoming-projects-title[b-xicfhkktf3] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    text-align: center;
    width: 246px;
}

.project-info-group[b-xicfhkktf3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 246px;
    text-align: center;
    cursor: pointer;
}

.project-info-group:hover[b-xicfhkktf3] {
    opacity: var(--opacity-hover);
}

.project-info-title[b-xicfhkktf3] {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    /* Long Afrikaans compound words (e.g. "Tienertoneelstreeksfees") can exceed
       the 246px content width; allow the browser to break inside a word only
       when no other break opportunity fits. */
    overflow-wrap: break-word;
}

.project-info-date[b-xicfhkktf3] {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    height: 38px;
}

.no-projects-message[b-xicfhkktf3] {
    font-size: 18px;
    color: var(--color-grey);
    text-align: center;
    padding: var(--spacing-xl);
}

/* Enter Now Button: yellow, 246x55px, 20px radius */
.enter-now-button[b-xicfhkktf3] {
    background: #fdb913;
    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);
    margin-top: auto;
}

.enter-now-button:hover[b-xicfhkktf3] {
    opacity: var(--opacity-hover);
}

/* Projects Grid: flex columns layout */
.projects-grid[b-xicfhkktf3] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 40px;
    align-content: flex-start;
}

.projects-column[b-xicfhkktf3] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Project Card: 286px wide, 362px tall, 20px radius, 1.5px border */
.project-card[b-xicfhkktf3] {
    background: #f9fafb;
    border: 1.5px solid var(--color-grey);
    border-radius: 20px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 286px;
    height: 362px;
    transition: all var(--transition-base);
    cursor: pointer;
}

.project-card:hover[b-xicfhkktf3] {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Visible keyboard focus for the interactive key-area cards (accessibility). */
.project-card:focus-visible[b-xicfhkktf3] {
    outline: 3px solid #2a63af;
    outline-offset: 2px;
}

/* Membership CTA band: blue gradient, centred white text, yellow pill (v3 mock-up). */
.v2-familie-cta[b-xicfhkktf3] {
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(135deg, #2a63af 0%, #1d4a87 100%);
    border-radius: 20px;
    padding: 32px 28px;
    color: #fff;
    text-align: center;
}

.v2-familie-cta h2[b-xicfhkktf3] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0 0 12px;
    color: #fff;
}

.v2-familie-cta p[b-xicfhkktf3] {
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto 20px;
    color: rgba(255, 255, 255, .92);
}

.v2-familie-btn[b-xicfhkktf3] {
    display: inline-block;
    background: #fdb913;
    color: #1a1a1a;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 12px 32px;
    border-radius: 999px;
    text-decoration: none;
}

.v2-familie-btn:hover[b-xicfhkktf3] {
    background: #e5a710;
    color: #1a1a1a;
}

.project-card-title[b-xicfhkktf3] {
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    text-align: center;
}

.project-card-image[b-xicfhkktf3] {
    width: 246px;
    flex: 1;
    border-radius: 16px;
    object-fit: cover;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .npo-page[b-xicfhkktf3] {
        padding: var(--spacing-5xl) var(--spacing-lg);
    }

    .projects-container[b-xicfhkktf3] {
        flex-direction: column;
        align-items: center;
    }

    .upcoming-projects-card[b-xicfhkktf3] {
        width: 100%;
        max-width: 386px;
        height: auto;
    }

    .projects-grid[b-xicfhkktf3] {
        justify-content: center;
        gap: 32px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .npo-page[b-xicfhkktf3] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .intro-title[b-xicfhkktf3] {
        font-size: 32px;
    }

    .projects-container[b-xicfhkktf3] {
        flex-direction: column;
        align-items: center;
    }

    .projects-grid[b-xicfhkktf3] {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .projects-column[b-xicfhkktf3] {
        width: 100%;
        align-items: center;
    }

    .project-card[b-xicfhkktf3] {
        max-width: 353px;
        width: 100%;
    }

    .upcoming-projects-card[b-xicfhkktf3] {
        max-width: 353px;
        width: 100%;
        height: auto;
    }
}
/* /Pages/NPO/Woekerfonds.razor.rz.scp.css */
/* Woekerfonds (Benefit Fund) page styles
 * Figma reference: npo-woekerfonds.html
 * Layout: FAQ accordion with expanded/collapsed states + donate button
 */

.npo-page[b-ezf3og5h8b] {
    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: 265px hero image with gradient overlay */
.npo-header[b-ezf3og5h8b] {
    width: 100%;
    height: 265px;
    background-image: url('/images/resorts/drakensville/resort_good_2_outdoor_pool_thatched_gazebos.jpg');
    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-ezf3og5h8b]::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-ezf3og5h8b] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

/* NPO Navigation: pill-shaped tab bar, 70px border-radius */
.npo-navigation[b-ezf3og5h8b] {
    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%;
    max-width: 1245px;
    gap: var(--spacing-md);
}

.npo-nav-button[b-ezf3og5h8b] {
    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:hover[b-ezf3og5h8b] {
    opacity: var(--opacity-hover);
}

.npo-nav-button--active[b-ezf3og5h8b] {
    background: var(--color-white);
    border: 1px solid var(--color-white);
}

/* NPO Dropdown: hidden on desktop */
.npo-dropdown[b-ezf3og5h8b] {
    display: none;
}

/* FAQ Container: vertical stack with 49px gap, 1336px max-width */
.faq-container[b-ezf3og5h8b] {
    display: flex;
    flex-direction: column;
    gap: 49px;
    width: 100%;
    max-width: 1336px;
}

/* FAQ Item: white card with grey border, 20px radius, 20px padding */
.faq-item[b-ezf3og5h8b] {
    background: white;
    border: 1.5px solid #b7beb5;
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    transition: all 0.2s;
}

/* Collapsed FAQ: 132px min-height, centred with question + icon */
.faq-item--collapsed[b-ezf3og5h8b] {
    min-height: 132px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Expanded FAQ: same padding, content flows vertically */
.faq-item--expanded[b-ezf3og5h8b] {
    padding: 20px;
}

/* Collapsed question: 30px bold */
.faq-question[b-ezf3og5h8b] {
    font-size: 30px;
    font-weight: 700;
    color: black;
    line-height: 1.2;
}

/* Expanded question: 24px bold */
.faq-question--expanded[b-ezf3og5h8b] {
    font-size: 24px;
    font-weight: 700;
    color: black;
}

/* FAQ content area: 48px gap between header, text, and button */
.faq-content[b-ezf3og5h8b] {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* FAQ header row: question text + toggle icon */
.faq-header[b-ezf3og5h8b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
}

/* FAQ answer text: 20px regular weight */
.faq-text[b-ezf3og5h8b] {
    font-size: 20px;
    font-weight: 400;
    color: black;
    line-height: 1.5;
}

/* FAQ toggle icon: 48px yellow circle */
.faq-icon[b-ezf3og5h8b] {
    width: 48px;
    height: 48px;
    background: #fdb913;
    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-ezf3og5h8b] {
    opacity: var(--opacity-hover);
}

.faq-icon svg[b-ezf3og5h8b] {
    width: 24px;
    height: 24px;
}

/* Donate button: yellow, 256px wide, 20px border-radius */
.donate-button[b-ezf3og5h8b] {
    background: #fdb913;
    border: none;
    border-radius: 20px;
    padding: 10px 76px;
    font-size: 23px;
    font-weight: 600;
    color: black;
    cursor: pointer;
    transition: all var(--transition-base);
    width: 256px;
}

.donate-button:hover[b-ezf3og5h8b] {
    opacity: var(--opacity-hover);
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .npo-navigation[b-ezf3og5h8b] {
        display: none;
    }

    .npo-dropdown[b-ezf3og5h8b] {
        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-ezf3og5h8b] {
        opacity: var(--opacity-hover);
    }

    .npo-dropdown-text[b-ezf3og5h8b] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-black);
    }

    .npo-dropdown-icon[b-ezf3og5h8b] {
        width: 34px;
        height: 29px;
    }

    .faq-container[b-ezf3og5h8b] {
        max-width: 100%;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .npo-page[b-ezf3og5h8b] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .npo-dropdown[b-ezf3og5h8b] {
        max-width: 350px;
    }

    .faq-question[b-ezf3og5h8b] {
        font-size: 28px;
    }

    .faq-question--expanded[b-ezf3og5h8b] {
        font-size: 28px;
    }
}
/* /Pages/Profile/Edit.razor.rz.scp.css */
/**
 * ATKV Profile Edit Page Styles
 * Aligned to Figma profile-desktop.html design specs
 * Breakpoints: 393px (mobile), 744px (tablet), desktop (default)
 */

/* ==========================================================================
   Page Layout (matches Index)
   ========================================================================== */

.profile-container[b-dp46v8jobt] {
    min-height: 100vh;
    background: var(--color-white);
    max-width: 1280px;
    padding: 48px 24px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.loading-container[b-dp46v8jobt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
}

.spinner[b-dp46v8jobt] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(42, 99, 175, 0.2);
    border-top-color: var(--color-primary-blue);
    border-radius: 50%;
    animation: spin-b-dp46v8jobt 1s linear infinite;
}

/* ==========================================================================
   Profile Header (matches Index card style)
   ========================================================================== */

.profile-header[b-dp46v8jobt] {
    text-align: center;
    padding: 56px 24px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ==========================================================================
   Profile Photo (160px circular per Figma)
   ========================================================================== */

.profile-photo-container[b-dp46v8jobt] {
    position: relative;
    width: 180px;
    height: 180px;
    margin-bottom: 8px;
}

.profile-photo[b-dp46v8jobt] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--card-border, #e1e0e1);
    object-fit: cover;
    object-position: top;
}

.avatar-fallback[b-dp46v8jobt] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: var(--font-weight-semibold, 600);
}

/* Edit overlay (48px circle, bottom-right) */
.photo-edit-btn[b-dp46v8jobt] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-border, #e1e0e1);
    border: none;
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.photo-edit-btn:hover[b-dp46v8jobt] {
    opacity: var(--opacity-hover, 0.9);
}

.photo-edit-btn:active[b-dp46v8jobt] {
    opacity: var(--opacity-pressed, 0.8);
}

.photo-edit-btn i[b-dp46v8jobt] {
    font-size: 18px;
}

/* ==========================================================================
   Member Name / Number
   ========================================================================== */

.member-name[b-dp46v8jobt] {
    font-size: 32px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #000);
    margin: 0;
}

.member-number[b-dp46v8jobt] {
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
    margin: 0;
    font-family: 'Courier New', monospace;
}

/* ==========================================================================
   Photo Actions
   ========================================================================== */

.photo-actions[b-dp46v8jobt] {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.remove-photo-btn[b-dp46v8jobt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    color: var(--color-error, #ef4444);
    border: 1px solid var(--color-error, #ef4444);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
}

.remove-photo-btn:hover[b-dp46v8jobt] {
    background: var(--color-error, #ef4444);
    color: var(--color-white);
}

.photo-error[b-dp46v8jobt] {
    color: var(--color-error, #ef4444);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
}

/* ==========================================================================
   Profile Sections (Card-based layout)
   ========================================================================== */

.profile-sections[b-dp46v8jobt] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.profile-section[b-dp46v8jobt] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    overflow: hidden;
}

.section-header[b-dp46v8jobt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0 24px;
}

.section-header h2[b-dp46v8jobt] {
    font-size: 32px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-black);
    margin: 0;
}

.section-content[b-dp46v8jobt] {
    padding: 24px;
}

/* ==========================================================================
   Form Elements (aligned to Figma design system tokens)
   ========================================================================== */

.form-group[b-dp46v8jobt] {
    margin-bottom: 24px;
}

.form-group:last-child[b-dp46v8jobt] {
    margin-bottom: 0;
}

.form-group label[b-dp46v8jobt] {
    display: block;
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #000);
    margin-bottom: 8px;
    line-height: var(--line-height-tight, 1);
}

.form-group label.required[b-dp46v8jobt]::after {
    content: " *";
    color: var(--input-border-error, #d32f2f);
}

.form-input[b-dp46v8jobt],
[b-dp46v8jobt] .form-input {
    width: 100%;
    height: 55px;
    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--input-text-size, 1rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-tight, 1);
    background-color: var(--input-background, #fff);
    border: var(--border-width-thin, 1px) solid var(--input-border, #000);
    border-radius: var(--radius-input, 1.25rem);
    color: var(--input-text, #000);
    transition: all var(--transition-base, 200ms ease-in-out);
    outline: none;
    box-sizing: border-box;
}

.form-input[b-dp46v8jobt]::placeholder {
    color: var(--input-placeholder, #9e9e9e);
    opacity: 1;
}

.form-input:focus[b-dp46v8jobt] {
    border-color: var(--input-border-focus, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.form-input:disabled[b-dp46v8jobt] {
    background-color: var(--input-disabled-bg, #f5f5f5);
    color: var(--input-disabled-text, #9e9e9e);
    border-color: var(--color-grey, #b7beb5);
    cursor: not-allowed;
    opacity: var(--opacity-disabled, 0.5);
}

select.form-input[b-dp46v8jobt] {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    padding-right: 56px;
}

/* ==========================================================================
   Checkbox Group
   ========================================================================== */

.checkbox-group[b-dp46v8jobt] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 8px);
    margin-top: 4px;
}

.checkbox-label[b-dp46v8jobt] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 12px);
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--input-text-size, 1rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-tight, 1);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-primary, #000);
    cursor: pointer;
    margin-bottom: 0;
    padding: var(--spacing-sm, 8px) 0;
    min-height: 44px;
}

.checkbox-label input[type="checkbox"][b-dp46v8jobt] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-black, #000);
    border: var(--border-width-medium, 2px) solid var(--color-black, #000);
    border-radius: var(--radius-sm, 8px);
}

/* ==========================================================================
   Phone Input Group
   ========================================================================== */

.phone-input-group[b-dp46v8jobt] {
    display: flex;
    align-items: stretch;
}

.country-code-prefix[b-dp46v8jobt] {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-lg, 16px);
    background: var(--card-background, #f9fafb);
    border: var(--border-width-thin, 1px) solid var(--input-border, #000);
    border-right: none;
    border-radius: var(--radius-input, 1.25rem) 0 0 var(--radius-input, 1.25rem);
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--input-text-size, 1rem);
    color: var(--color-text-primary, #000);
    font-weight: var(--font-weight-semibold, 600);
    white-space: nowrap;
    height: 55px;
}

.phone-input[b-dp46v8jobt] {
    border-radius: 0 var(--radius-input, 1.25rem) var(--radius-input, 1.25rem) 0 !important;
}

/* ==========================================================================
   Form Hints & Validation
   ========================================================================== */

.form-hint[b-dp46v8jobt] {
    display: block;
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-secondary, #b7beb5);
    margin-top: 6px;
}

.verified-badge[b-dp46v8jobt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
    font-size: 12px;
    margin-top: 4px;
}

.unverified-badge[b-dp46v8jobt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-warning, #f59e0b);
    font-size: 12px;
    margin-top: 4px;
}

.unverified-badge a[b-dp46v8jobt] {
    color: var(--color-primary-blue, #2a63af);
    text-decoration: none;
    margin-left: 4px;
}

.unverified-badge a:hover[b-dp46v8jobt] {
    text-decoration: underline;
}

.validation-message[b-dp46v8jobt],
[b-dp46v8jobt] .validation-message {
    color: var(--input-border-error, #d32f2f);
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--font-size-xs, 0.75rem);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.validation-error[b-dp46v8jobt] {
    color: var(--input-border-error, #d32f2f);
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--font-size-xs, 0.75rem);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.invalid[b-dp46v8jobt] {
    border-color: var(--input-border-error, #d32f2f) !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

/* ==========================================================================
   Info Row (read-only display within edit page)
   ========================================================================== */

.info-row[b-dp46v8jobt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.status-badge[b-dp46v8jobt] {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(42, 99, 175, 0.1);
    color: var(--color-primary-blue, #2a63af);
    border-radius: 12px;
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
}

/* ==========================================================================
   Address Tabs
   ========================================================================== */

.address-tabs[b-dp46v8jobt] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.address-tab[b-dp46v8jobt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    background: var(--card-background, #f9fafb);
    color: var(--color-text-secondary, #4b5563);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.address-tab:hover[b-dp46v8jobt] {
    background: rgba(42, 99, 175, 0.05);
    border-color: var(--color-primary-blue, #2a63af);
}

.address-tab.active[b-dp46v8jobt] {
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white);
    border-color: var(--color-primary-blue, #2a63af);
}

.address-type-badge[b-dp46v8jobt] {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(42, 99, 175, 0.08);
    color: var(--color-primary-blue, #2a63af);
    border-radius: 12px;
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    margin-bottom: 12px;
}

/* ==========================================================================
   Address Preferences
   ========================================================================== */

.address-preferences[b-dp46v8jobt] {
    margin-top: 16px;
    padding: 12px;
    background: var(--card-background, #f9fafb);
    border-radius: 8px;
}

.preferences-label[b-dp46v8jobt] {
    display: block;
    font-size: 14px;
    font-weight: var(--font-weight-semibold, 600);
    color: #333;
    margin-bottom: 8px;
}

.preference-toggles[b-dp46v8jobt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.preference-toggle[b-dp46v8jobt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 16px;
    background: var(--color-white);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.preference-toggle.active[b-dp46v8jobt] {
    background: #e8f5e9;
    border-color: #4caf50;
    color: #2e7d32;
    cursor: default;
}

.preference-toggle input[type="checkbox"][b-dp46v8jobt] {
    width: 16px;
    height: 16px;
    accent-color: #4caf50;
}

.preference-toggle input[type="checkbox"]:disabled[b-dp46v8jobt] {
    opacity: 1;
    accent-color: #4caf50;
}

.toggle-label[b-dp46v8jobt] {
    font-size: 13px;
}

.address-save-action[b-dp46v8jobt] {
    margin-top: 12px;
}

.address-success-msg[b-dp46v8jobt] {
    color: #2e7d32;
    font-size: 14px;
    margin-top: 8px;
}

.address-error-msg[b-dp46v8jobt] {
    color: #c62828;
    font-size: 14px;
    margin-top: 8px;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.action-buttons[b-dp46v8jobt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
}

/* ==========================================================================
   Error Container
   ========================================================================== */

.error-container[b-dp46v8jobt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 40px 20px;
}

.error-icon[b-dp46v8jobt] {
    font-size: 48px;
    color: var(--color-warning, #f59e0b);
    margin-bottom: 16px;
}

/* ==========================================================================
   Tablet Styles (744px)
   ========================================================================== */

@media (min-width: 744px) {
    .profile-photo-container[b-dp46v8jobt] {
        width: 160px;
        height: 160px;
    }

    .member-name[b-dp46v8jobt] {
        font-size: 32px;
    }

    .section-content[b-dp46v8jobt] {
        padding: 24px 32px;
    }

    .action-buttons[b-dp46v8jobt] {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }

    .action-buttons > :deep(*)[b-dp46v8jobt] {
        flex: 1;
        max-width: 200px;
    }
}

/* ==========================================================================
   Desktop Styles (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
    .profile-sections[b-dp46v8jobt] {
        gap: 32px;
    }
}

/* ==========================================================================
   Mobile Styles (393px)
   ========================================================================== */

@media (max-width: 743px) {
    .profile-container[b-dp46v8jobt] {
        padding: 20px 16px;
        gap: 24px;
    }

    .profile-header[b-dp46v8jobt] {
        padding: 32px 16px;
    }

    .profile-photo-container[b-dp46v8jobt] {
        width: 120px;
        height: 120px;
    }

    .photo-edit-btn[b-dp46v8jobt] {
        width: 36px;
        height: 36px;
    }

    .photo-edit-btn i[b-dp46v8jobt] {
        font-size: 14px;
    }

    .avatar-fallback[b-dp46v8jobt] {
        font-size: 36px;
    }

    .member-name[b-dp46v8jobt] {
        font-size: 24px;
    }

    .section-header h2[b-dp46v8jobt] {
        font-size: 18px;
    }

    .action-buttons[b-dp46v8jobt] {
        padding: 16px;
    }
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes spin-b-dp46v8jobt {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Profile/EditAddress.razor.rz.scp.css */
/**
 * ATKV Edit Address Page Styles
 * Aligned to Figma profile-desktop.html design specs
 * Breakpoints: 393px (mobile), 744px (tablet), desktop (default)
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.edit-address-container[b-ph1o3lyc3w] {
    min-height: 100vh;
    background: var(--color-white);
    max-width: 1280px;
    padding: 48px 24px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-ph1o3lyc3w] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-back[b-ph1o3lyc3w] {
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 20px;
    height: 55px;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 200ms ease-in-out;
    font-size: 20px;
}

.btn-back:hover[b-ph1o3lyc3w] {
    opacity: 0.9;
}

.page-header h1[b-ph1o3lyc3w] {
    font-size: 32px;
    font-weight: 600;
    color: var(--color-black);
    margin: 0;
    flex: 1;
}

.spacer[b-ph1o3lyc3w] {
    width: 55px;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-container[b-ph1o3lyc3w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
}

.spinner[b-ph1o3lyc3w] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(42, 99, 175, 0.2);
    border-top-color: #2a63af;
    border-radius: 50%;
    animation: spin-b-ph1o3lyc3w 1s linear infinite;
}

/* ==========================================================================
   Form Section (Card-based)
   ========================================================================== */

.form-section[b-ph1o3lyc3w] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    padding: 56px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ==========================================================================
   Form Elements (aligned to Figma design system tokens)
   ========================================================================== */

.form-group[b-ph1o3lyc3w] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-ph1o3lyc3w] {
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #000);
    margin-bottom: 8px;
    line-height: var(--line-height-tight, 1);
}

.form-control[b-ph1o3lyc3w] {
    width: 100%;
    height: 55px;
    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--input-text-size, 1rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-tight, 1);
    background-color: var(--input-background, #fff);
    border: var(--border-width-thin, 1px) solid var(--input-border, #000);
    border-radius: var(--radius-input, 1.25rem);
    color: var(--input-text, #000);
    transition: all var(--transition-base, 200ms ease-in-out);
    outline: none;
    box-sizing: border-box;
}

.form-control:focus[b-ph1o3lyc3w] {
    border-color: var(--input-border-focus, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.form-control:disabled[b-ph1o3lyc3w],
.form-control[readonly][b-ph1o3lyc3w] {
    background-color: var(--input-disabled-bg, #f5f5f5);
    color: var(--input-disabled-text, #9e9e9e);
    border-color: var(--color-grey, #b7beb5);
    cursor: not-allowed;
    opacity: var(--opacity-disabled, 0.5);
}

.form-control[b-ph1o3lyc3w]::placeholder {
    color: var(--input-placeholder, #9e9e9e);
    opacity: 1;
}

.help-text[b-ph1o3lyc3w] {
    display: block;
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-secondary, #b7beb5);
    margin-top: 6px;
}

/* Select dropdown styling */
select.form-control[b-ph1o3lyc3w] {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    padding-right: 56px;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert[b-ph1o3lyc3w] {
    padding: var(--spacing-lg, 16px);
    border-radius: var(--radius-input, 1.25rem);
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
}

.alert-error[b-ph1o3lyc3w] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-success[b-ph1o3lyc3w] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* ==========================================================================
   Form Actions
   ========================================================================== */

.form-actions[b-ph1o3lyc3w] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-primary[b-ph1o3lyc3w] {
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    border: 1px solid var(--color-white, #fff);
    border-radius: 20px;
    height: 55px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 200ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover[b-ph1o3lyc3w] {
    opacity: 0.9;
}

.btn-primary:disabled[b-ph1o3lyc3w] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-ph1o3lyc3w] {
    background: var(--card-background, #f9fafb);
    color: var(--color-black, #000);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    height: 55px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 200ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary:hover[b-ph1o3lyc3w] {
    opacity: 0.9;
}

.btn-secondary:disabled[b-ph1o3lyc3w] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   Tablet Styles (744px)
   ========================================================================== */

@media (min-width: 744px) {
    .form-section[b-ph1o3lyc3w] {
        padding: 48px 32px;
    }
}

/* ==========================================================================
   Mobile Styles (393px)
   ========================================================================== */

@media (max-width: 743px) {
    .edit-address-container[b-ph1o3lyc3w] {
        padding: 20px 16px;
        gap: 20px;
    }

    .page-header h1[b-ph1o3lyc3w] {
        font-size: 20px;
    }

    .btn-back[b-ph1o3lyc3w] {
        height: 44px;
        width: 44px;
    }

    .spacer[b-ph1o3lyc3w] {
        width: 44px;
    }

    .form-section[b-ph1o3lyc3w] {
        padding: 24px 16px;
    }

    .form-actions[b-ph1o3lyc3w] {
        flex-direction: column;
    }

    .btn-primary[b-ph1o3lyc3w],
    .btn-secondary[b-ph1o3lyc3w] {
        width: 100%;
    }
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes spin-b-ph1o3lyc3w {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Profile/EditContact.razor.rz.scp.css */
/**
 * ATKV Edit Contact Page Styles
 * Aligned to Figma profile-desktop.html design specs
 * Breakpoints: 393px (mobile), 744px (tablet), desktop (default)
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.edit-contact-container[b-2oazdm1eri] {
    min-height: 100vh;
    background: var(--color-white);
    max-width: 1280px;
    padding: 48px 24px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-2oazdm1eri] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-back[b-2oazdm1eri] {
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 20px;
    height: 55px;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 200ms ease-in-out;
    font-size: 20px;
}

.btn-back:hover[b-2oazdm1eri] {
    opacity: 0.9;
}

.page-header h1[b-2oazdm1eri] {
    font-size: 32px;
    font-weight: 600;
    color: var(--color-black);
    margin: 0;
    flex: 1;
}

.spacer[b-2oazdm1eri] {
    width: 55px;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-container[b-2oazdm1eri] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
}

.spinner[b-2oazdm1eri] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(42, 99, 175, 0.2);
    border-top-color: #2a63af;
    border-radius: 50%;
    animation: spin-b-2oazdm1eri 1s linear infinite;
}

/* ==========================================================================
   Form Section (Card-based)
   ========================================================================== */

.form-section[b-2oazdm1eri] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    padding: 56px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ==========================================================================
   Form Elements (aligned to Figma design system tokens)
   ========================================================================== */

.form-group[b-2oazdm1eri] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-2oazdm1eri] {
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #000);
    margin-bottom: 8px;
    line-height: var(--line-height-tight, 1);
}

.form-control[b-2oazdm1eri] {
    width: 100%;
    height: 55px;
    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--input-text-size, 1rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-tight, 1);
    background-color: var(--input-background, #fff);
    border: var(--border-width-thin, 1px) solid var(--input-border, #000);
    border-radius: var(--radius-input, 1.25rem);
    color: var(--input-text, #000);
    transition: all var(--transition-base, 200ms ease-in-out);
    outline: none;
    box-sizing: border-box;
}

.form-control:focus[b-2oazdm1eri] {
    border-color: var(--input-border-focus, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.form-control:disabled[b-2oazdm1eri] {
    background-color: var(--input-disabled-bg, #f5f5f5);
    color: var(--input-disabled-text, #9e9e9e);
    border-color: var(--color-grey, #b7beb5);
    cursor: not-allowed;
    opacity: var(--opacity-disabled, 0.5);
}

.form-control[b-2oazdm1eri]::placeholder {
    color: var(--input-placeholder, #9e9e9e);
    opacity: 1;
}

.help-text[b-2oazdm1eri] {
    display: block;
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-secondary, #b7beb5);
    margin-top: 6px;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert[b-2oazdm1eri] {
    padding: var(--spacing-lg, 16px);
    border-radius: var(--radius-input, 1.25rem);
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
}

.alert-error[b-2oazdm1eri] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-success[b-2oazdm1eri] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* ==========================================================================
   Form Actions
   ========================================================================== */

.form-actions[b-2oazdm1eri] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-primary[b-2oazdm1eri] {
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    border: 1px solid var(--color-white, #fff);
    border-radius: 20px;
    height: 55px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 200ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover[b-2oazdm1eri] {
    opacity: 0.9;
}

.btn-primary:disabled[b-2oazdm1eri] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-2oazdm1eri] {
    background: var(--card-background, #f9fafb);
    color: var(--color-black, #000);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
    height: 55px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 200ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary:hover[b-2oazdm1eri] {
    opacity: 0.9;
}

.btn-secondary:disabled[b-2oazdm1eri] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   Tablet Styles (744px)
   ========================================================================== */

@media (min-width: 744px) {
    .form-section[b-2oazdm1eri] {
        padding: 48px 32px;
    }
}

/* ==========================================================================
   Mobile Styles (393px)
   ========================================================================== */

@media (max-width: 743px) {
    .edit-contact-container[b-2oazdm1eri] {
        padding: 20px 16px;
        gap: 20px;
    }

    .page-header h1[b-2oazdm1eri] {
        font-size: 20px;
    }

    .btn-back[b-2oazdm1eri] {
        height: 44px;
        width: 44px;
    }

    .spacer[b-2oazdm1eri] {
        width: 44px;
    }

    .form-section[b-2oazdm1eri] {
        padding: 24px 16px;
    }

    .form-actions[b-2oazdm1eri] {
        flex-direction: column;
    }

    .btn-primary[b-2oazdm1eri],
    .btn-secondary[b-2oazdm1eri] {
        width: 100%;
    }
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes spin-b-2oazdm1eri {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Profile/Family.razor.rz.scp.css */
/* Family Page Styles
 * Aligned to Figma profile-desktop.html design patterns
 * Uses design tokens from design-tokens.css
 */

/* Page container */
.family-page[b-4gcxn3vds1] {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--spacing-5xl) var(--spacing-2xl);
    padding-bottom: 120px;
}

/* Loading state */
.loading-container[b-4gcxn3vds1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: var(--spacing-lg);
}

.loading-text[b-4gcxn3vds1] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

/* Section cards (Figma pattern: card background with border) */
.primary-member-section[b-4gcxn3vds1],
.family-members-section[b-4gcxn3vds1] {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: var(--spacing-6xl) var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

/* Section title (Figma: 32px semibold black) */
.section-title[b-4gcxn3vds1] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

/* Section header with action button */
.section-header[b-4gcxn3vds1] {
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
}

/* Add member button (Figma: primary blue, rounded) */
.btn-add-member[b-4gcxn3vds1] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-2xl);
    background: var(--color-primary-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-button);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-base);
}

.btn-add-member:hover[b-4gcxn3vds1] {
    background: var(--button-secondary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Family members grid */
.family-members-grid[b-4gcxn3vds1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-2xl);
}

/* Empty state card */
.empty-state[b-4gcxn3vds1] {
    text-align: center;
    padding: var(--spacing-5xl) var(--spacing-2xl);
    background: var(--color-white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow-sm);
}

.empty-icon[b-4gcxn3vds1] {
    font-size: 64px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

.empty-state h3[b-4gcxn3vds1] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.empty-state p[b-4gcxn3vds1] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-2xl) 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state .btn-lg[b-4gcxn3vds1] {
    padding: var(--spacing-lg) var(--spacing-2xl);
    background: var(--color-primary-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-button);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

/* Toast and modal backdrop for remove confirmation */
.toast-container[b-4gcxn3vds1] {
    z-index: var(--z-modal);
}

.toast[b-4gcxn3vds1] {
    min-width: 350px;
    max-width: 500px;
    box-shadow: var(--shadow-xl);
    border-radius: var(--radius-card);
}

.modal-backdrop[b-4gcxn3vds1] {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Tablet breakpoint (744px) */
@media (max-width: 768px) {
    .family-page[b-4gcxn3vds1] {
        padding: var(--spacing-2xl) var(--spacing-lg);
        padding-bottom: 100px;
    }

    .primary-member-section[b-4gcxn3vds1],
    .family-members-section[b-4gcxn3vds1] {
        padding: var(--spacing-3xl) var(--spacing-lg);
        gap: var(--spacing-2xl);
    }

    .section-title[b-4gcxn3vds1] {
        font-size: var(--font-size-xl);
    }

    .section-header[b-4gcxn3vds1] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-add-member[b-4gcxn3vds1] {
        width: 100%;
        justify-content: center;
    }

    .family-members-grid[b-4gcxn3vds1] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .empty-icon[b-4gcxn3vds1] {
        font-size: 48px;
    }

    .empty-state h3[b-4gcxn3vds1] {
        font-size: var(--font-size-lg);
    }

    .empty-state p[b-4gcxn3vds1] {
        font-size: var(--font-size-sm);
    }

    .toast[b-4gcxn3vds1] {
        min-width: 90vw;
    }
}

/* Mobile breakpoint (393px) */
@media (max-width: 480px) {
    .family-page[b-4gcxn3vds1] {
        padding: var(--spacing-lg);
        padding-bottom: 100px;
    }

    .primary-member-section[b-4gcxn3vds1],
    .family-members-section[b-4gcxn3vds1] {
        padding: var(--spacing-2xl) var(--spacing-lg);
        border-radius: var(--radius-md);
    }

    .family-members-grid[b-4gcxn3vds1] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Profile/Index.razor.rz.scp.css */
/**
 * ATKV Profile Index Page Styles
 * Aligned to Figma profile-desktop.html design specs
 * Breakpoints: 393px (mobile), 744px (tablet), desktop (default)
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.profile-container[b-tc5xak42n6] {
    min-height: 100vh;
    background: var(--color-white);
    max-width: 800px;
    padding: 32px 24px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.loading-container[b-tc5xak42n6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
}

.spinner[b-tc5xak42n6] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(42, 99, 175, 0.2);
    border-top-color: var(--color-primary-blue);
    border-radius: 50%;
    animation: spin-b-tc5xak42n6 1s linear infinite;
}

/* ==========================================================================
   Profile Header
   ========================================================================== */

.profile-header[b-tc5xak42n6] {
    text-align: center;
    padding: 32px 24px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ==========================================================================
   Profile Photo (160px circular per Figma)
   ========================================================================== */

.profile-photo-container[b-tc5xak42n6] {
    position: relative;
    width: 150px;
    height: 150px;
}

.profile-photo[b-tc5xak42n6] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--card-border, #e1e0e1);
    object-fit: cover;
    object-position: top;
}

.avatar-fallback[b-tc5xak42n6] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: var(--font-weight-semibold, 600);
}

/* Edit overlay button (48px circle, bottom-right) */
.photo-edit-btn[b-tc5xak42n6] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-border, #e1e0e1);
    border: none;
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.photo-edit-btn:hover[b-tc5xak42n6] {
    opacity: var(--opacity-hover, 0.9);
}

.photo-edit-btn:active[b-tc5xak42n6] {
    opacity: var(--opacity-pressed, 0.8);
}

.photo-edit-btn i[b-tc5xak42n6] {
    font-size: 18px;
}

/* ==========================================================================
   Member Name / Number / Status
   ========================================================================== */

.member-name[b-tc5xak42n6] {
    font-size: 24px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #000);
    margin: 0;
}

.member-number[b-tc5xak42n6] {
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
    margin: 0;
    font-family: 'Courier New', monospace;
}

.member-since[b-tc5xak42n6] {
    color: var(--color-text-secondary, #4b5563);
    font-size: 14px;
    margin: 0;
}

.membership-info[b-tc5xak42n6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.membership-badge[b-tc5xak42n6] {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.membership-badge.active[b-tc5xak42n6] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.membership-badge.expired[b-tc5xak42n6] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.membership-badge.pending[b-tc5xak42n6] {
    background: rgba(251, 191, 36, 0.1);
    color: #d97706;
}

.expiry-date[b-tc5xak42n6] {
    font-size: 12px;
    color: var(--color-text-secondary, #4b5563);
}

/* ==========================================================================
   Changelog Card (between profile header and sections)
   ========================================================================== */

.profile-changelog-card[b-tc5xak42n6] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 16px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-changelog-card .changelog-inline-btn[b-tc5xak42n6] {
    margin: 0;
}

/* ==========================================================================
   Profile Sections (Card-based layout)
   ========================================================================== */

.profile-sections[b-tc5xak42n6] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.profile-section[b-tc5xak42n6] {
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

/* ==========================================================================
   Section Header (120px height per Figma)
   ========================================================================== */

.section-header[b-tc5xak42n6] {
    height: auto;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border-bottom: none;
}

.profile-section.collapsible .section-header[b-tc5xak42n6] {
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
}

.profile-section.collapsible .section-header:hover[b-tc5xak42n6] {
    opacity: var(--opacity-hover, 0.9);
}

.section-header h2[b-tc5xak42n6] {
    font-size: 20px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-black);
    margin: 0;
}

/* ==========================================================================
   Pay Membership Button (top-right of Membership Information section)
   ========================================================================== */

.pay-membership-btn[b-tc5xak42n6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white, #fff);
    border: none;
    border-radius: 16px;
    font-size: 10px;
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
    /* V1: smaller font; label wraps to two lines and sits centred in the button */
    white-space: normal;
    text-align: center;
    justify-content: center;
    line-height: 1.12;
    max-width: 118px;
}

.pay-membership-btn:hover[b-tc5xak42n6] {
    opacity: var(--opacity-hover, 0.9);
}

.pay-membership-btn:active[b-tc5xak42n6] {
    opacity: var(--opacity-pressed, 0.8);
}

.pay-membership-btn i[b-tc5xak42n6] {
    font-size: 13px;
    flex-shrink: 0;
}

/* ==========================================================================
   Edit Button (Figma: black bg, white text, 150x55, 20px radius)
   ========================================================================== */

.edit-btn[b-tc5xak42n6] {
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 12px;
    height: 40px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: opacity var(--transition-base, 200ms ease-in-out);
    padding: 0 16px;
}

/* ==========================================================================
   Section Edit Footer
   Edit affordance lives at the bottom of an expanded section, so the user
   has to expand the section to access edit. Keeps headers clean (title +
   chevron only) and avoids the cramped icon-next-to-chevron pattern.
   ========================================================================== */

.section-edit-footer[b-tc5xak42n6] {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--card-border, #e1e0e1);
}

.section-edit-footer .edit-btn[b-tc5xak42n6] {
    width: auto;
    min-width: 120px;
    padding: 0 20px;
}

.edit-btn:hover[b-tc5xak42n6] {
    opacity: var(--opacity-hover, 0.9);
}

.edit-btn i[b-tc5xak42n6] {
    font-size: 16px;
}

.toggle-icon[b-tc5xak42n6] {
    color: var(--color-text-secondary, #4b5563);
    transition: transform 0.3s;
}

/* ==========================================================================
   Section Content (4-column grid per Figma .info-grid)
   ========================================================================== */

.section-content[b-tc5xak42n6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 24px;
    padding: 0;
}

/* Override grid for dependency list - vertical stack */
.section-content.dependency-list[b-tc5xak42n6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Override grid for collapsible address section */
.profile-section.collapsible .section-content[b-tc5xak42n6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ==========================================================================
   Information Grid (4-column per Figma)
   ========================================================================== */

.info-row[b-tc5xak42n6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    border-bottom: none;
}

.label[b-tc5xak42n6] {
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-secondary, #b7beb5);
}

.value[b-tc5xak42n6] {
    font-size: 15px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-black);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.value.masked[b-tc5xak42n6] {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.verified-icon[b-tc5xak42n6] {
    color: #16a34a;
    font-size: 14px;
}

/* ==========================================================================
   Status Indicators
   ========================================================================== */

.status-indicator[b-tc5xak42n6] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.status-indicator.active[b-tc5xak42n6] {
    background-color: #16a34a;
}

.status-indicator.expired[b-tc5xak42n6] {
    background-color: #dc2626;
}

.status-indicator.pending[b-tc5xak42n6] {
    background-color: #d97706;
}

/* ==========================================================================
   Shared section divider
   ========================================================================== */

.section-divider[b-tc5xak42n6] {
    height: 1px;
    background: var(--card-border, #e1e0e1);
    margin: 0;
    border: none;
}

/* ==========================================================================
   Content Preferences Section (US-80671)
   Rows stack vertically; each row lays the label/value column on the left
   and the shared .edit-btn (black pill, white pencil icon) on the right —
   matching the Address section pattern.
   ========================================================================== */

.preferences-section[b-tc5xak42n6] {
    margin-top: 16px;
}

.preferences-section .section-content[b-tc5xak42n6] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.preferences-row[b-tc5xak42n6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    width: 100%;
}

/* Per-row edit affordance is a compact icon-only button at every viewport.
   Each row has its own modal target (provinces vs content categories), so a
   single bottom "Edit" footer would not work here — keep the per-row buttons
   but lock them down so they cannot blow out into wide black bars. */
.preferences-row .edit-btn[b-tc5xak42n6] {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
}

.preferences-row-info[b-tc5xak42n6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.preferences-row-info .label[b-tc5xak42n6] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-primary-blue, #2a63af);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preferences-row-info .value[b-tc5xak42n6] {
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-black);
    line-height: 1.5;
    word-wrap: break-word;
}

.auto-renewal-badge[b-tc5xak42n6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
}

.auto-renewal-badge.active[b-tc5xak42n6] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.auto-renewal-badge.inactive[b-tc5xak42n6] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.auto-renewal-badge i[b-tc5xak42n6] {
    font-size: 10px;
}

/* ==========================================================================
   Address Tabs
   ========================================================================== */

.address-tabs[b-tc5xak42n6] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.address-tab[b-tc5xak42n6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 2px solid var(--card-border, #e1e0e1);
    border-radius: 24px;
    background: var(--card-background, #f9fafb);
    color: var(--color-text-secondary, #4b5563);
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    outline: none;
}

.address-tab:hover[b-tc5xak42n6] {
    border-color: var(--color-primary-blue, #2a63af);
    color: var(--color-primary-blue, #2a63af);
    background: rgba(42, 99, 175, 0.05);
}

.address-tab.active[b-tc5xak42n6] {
    background: var(--color-primary-blue, #2a63af);
    border-color: var(--color-primary-blue, #2a63af);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold, 600);
    box-shadow: 0 2px 8px rgba(42, 99, 175, 0.3);
}

.address-tab i[b-tc5xak42n6] {
    font-size: 12px;
}

/* ==========================================================================
   Address Display
   ========================================================================== */

.address-display[b-tc5xak42n6] {
    font-size: 14px;
    color: var(--color-text-primary, #000);
    line-height: 1.6;
}

.address-display p[b-tc5xak42n6] {
    margin: 0;
}

.no-data[b-tc5xak42n6] {
    color: var(--color-text-secondary, #4b5563);
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

/* ==========================================================================
   Badges & Tags
   ========================================================================== */

.readonly-badge[b-tc5xak42n6] {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(100, 100, 100, 0.1);
    color: var(--color-text-secondary, #4b5563);
    font-size: 10px;
    border-radius: 4px;
    margin-left: 8px;
    text-transform: uppercase;
}

.status-badge[b-tc5xak42n6] {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(42, 99, 175, 0.1);
    color: var(--color-primary-blue, #2a63af);
    border-radius: 12px;
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
}

.tjieng-balance[b-tc5xak42n6] {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-primary-blue, #2a63af);
}

.address-type-badge[b-tc5xak42n6] {
    display: inline-block;
    padding: 4px 10px;
    background: var(--card-background, #f9fafb);
    color: var(--color-text-secondary, #4b5563);
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.address-preferences[b-tc5xak42n6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--card-border, #e1e0e1);
}

.preference-tag[b-tc5xak42n6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border-radius: 6px;
    font-size: 11px;
    font-weight: var(--font-weight-medium, 500);
}

.preference-tag i[b-tc5xak42n6] {
    font-size: 10px;
}

/* ==========================================================================
   Dependencies Section
   ========================================================================== */

.dependency-list[b-tc5xak42n6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dependency-card[b-tc5xak42n6] {
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
}

.dependency-card-header[b-tc5xak42n6] {
    padding: 10px 16px;
    background: var(--card-background, #f9fafb);
    border-bottom: 1px solid var(--card-border, #e1e0e1);
}

.dependency-badge[b-tc5xak42n6] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dependency-badge.hooflid[b-tc5xak42n6] {
    background: rgba(42, 99, 175, 0.1);
    color: var(--color-primary-blue, #2a63af);
}

.dependency-badge.afhanklike[b-tc5xak42n6] {
    background: rgba(251, 185, 19, 0.15);
    color: #b8860b;
}

.dependency-card-body[b-tc5xak42n6] {
    padding: 4px 16px;
}

/* Keep horizontal row layout inside dependency cards */
.dependency-card-body .info-row[b-tc5xak42n6] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--card-border, #e1e0e1);
}

.dependency-card-body .info-row:last-child[b-tc5xak42n6] {
    border-bottom: none;
}

.dependency-card-body .label[b-tc5xak42n6] {
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
    flex-shrink: 0;
    margin-right: 16px;
}

.dependency-card-body .value[b-tc5xak42n6] {
    font-size: 14px;
    text-align: right;
}

.branch-code[b-tc5xak42n6] {
    color: var(--color-text-secondary, #4b5563);
    font-size: 12px;
    margin-left: 4px;
}

.section-header-actions[b-tc5xak42n6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.action-buttons[b-tc5xak42n6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: var(--card-background, #f9fafb);
    border: 1px solid var(--card-border, #e1e0e1);
    border-radius: 20px;
}

/* ==========================================================================
   Error Container
   ========================================================================== */

.error-container[b-tc5xak42n6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 40px 20px;
}

.error-icon[b-tc5xak42n6] {
    font-size: 48px;
    color: var(--color-warning, #f59e0b);
    margin-bottom: 16px;
}

/* ==========================================================================
   Tablet Styles (744px)
   ========================================================================== */

@media (min-width: 744px) {
    .section-content[b-tc5xak42n6] {
        grid-template-columns: repeat(2, 1fr);
    }

    .action-buttons[b-tc5xak42n6] {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }

    .action-buttons > :deep(*)[b-tc5xak42n6] {
        flex: 1;
        max-width: 200px;
    }
}

/* ==========================================================================
   Desktop Styles (1024px+) - full 4-column grid
   ========================================================================== */

@media (min-width: 1024px) {
    .section-content[b-tc5xak42n6] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Mobile Styles (393px)
   ========================================================================== */

@media (max-width: 743px) {
    .profile-container[b-tc5xak42n6] {
        padding: 16px;
        gap: 20px;
    }

    .profile-header[b-tc5xak42n6] {
        padding: 24px 16px;
    }

    .profile-photo-container[b-tc5xak42n6] {
        width: 96px;
        height: 96px;
    }

    .photo-edit-btn[b-tc5xak42n6] {
        width: 32px;
        height: 32px;
    }

    .photo-edit-btn i[b-tc5xak42n6] {
        font-size: 12px;
    }

    .avatar-fallback[b-tc5xak42n6] {
        font-size: 28px;
    }

    .member-name[b-tc5xak42n6] {
        font-size: 20px;
    }

    .profile-section[b-tc5xak42n6] {
        padding: 20px 16px;
        gap: 16px;
    }

    .section-header h2[b-tc5xak42n6] {
        font-size: 18px;
    }

    .edit-btn[b-tc5xak42n6] {
        /* Keep the button compact on mobile so it doesn't overlap the
           section heading or the row's value text. width: 100% (the previous
           value) made the black pill span the entire row, hiding adjacent
           content in Content Preferences, Accessibility, and Address. */
        height: 40px;
        width: 40px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .pay-membership-btn[b-tc5xak42n6] {
        padding: 6px 12px;
        font-size: 10px;
        text-align: center;
        justify-content: center;
    }

    .section-content[b-tc5xak42n6] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .action-buttons[b-tc5xak42n6] {
        padding: 16px;
    }
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes spin-b-tc5xak42n6 {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Profile/Membership.razor.rz.scp.css */
/* Membership Page Styles
 * Aligned to Figma profile-desktop.html design patterns
 * Uses design tokens from design-tokens.css
 */

/* Page container (Figma: max-width 1280px, 48px 24px padding) */
.membership-container[b-udz2akd5q1] {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--spacing-5xl) var(--spacing-2xl);
    padding-bottom: 120px;
}

/* Page header (Figma: flex, gap 16px, margin-bottom 32px) */
.page-header[b-udz2akd5q1] {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-3xl);
}

/* Back button (Figma: 44x44px, border, radius 6px, white bg) */
.btn-back[b-udz2akd5q1] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    transition: all var(--transition-base);
    flex-shrink: 0;
    padding: 0;
}

.btn-back:hover[b-udz2akd5q1] {
    background: var(--card-background);
    box-shadow: var(--shadow-sm);
}

/* Page title (Figma: 20px semibold #333) */
.page-header h1[b-udz2akd5q1] {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: #333333;
}

.spacer[b-udz2akd5q1] {
    flex: 1;
}

/* Loading state */
.loading-container[b-udz2akd5q1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: var(--spacing-lg);
}

.spinner[b-udz2akd5q1] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--card-border);
    border-top: 4px solid var(--color-primary-blue);
    border-radius: 50%;
    animation: spin-b-udz2akd5q1 1s linear infinite;
}

@keyframes spin-b-udz2akd5q1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Membership card (Figma: blue gradient, wallet card style) */
.membership-card[b-udz2akd5q1] {
    background: var(--gradient-ocean);
    color: var(--color-white);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-3xl);
}

.card-header[b-udz2akd5q1] {
    padding: var(--spacing-3xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header h2[b-udz2akd5q1] {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.membership-tier[b-udz2akd5q1] {
    display: inline-block;
    padding: 6px 16px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-button);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.card-body[b-udz2akd5q1] {
    padding: var(--spacing-3xl);
}

/* Detail rows inside card */
.detail-row[b-udz2akd5q1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-row:last-child[b-udz2akd5q1] {
    border-bottom: none;
}

.label[b-udz2akd5q1] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    opacity: 0.9;
}

.value[b-udz2akd5q1] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.member-number[b-udz2akd5q1] {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-lg);
    letter-spacing: 1px;
}

/* Status badges */
.status-badge[b-udz2akd5q1] {
    padding: 4px 14px;
    border-radius: var(--radius-button);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active[b-udz2akd5q1] {
    background-color: #4caf50;
    color: var(--color-white);
}

.status-expired[b-udz2akd5q1] {
    background-color: #f44336;
    color: var(--color-white);
}

.status-suspended[b-udz2akd5q1] {
    background-color: #ff9800;
    color: var(--color-white);
}

/* Benefits preview section card (Figma pattern: card bg, border, 20px radius) */
.membership-benefits-preview[b-udz2akd5q1] {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: var(--spacing-3xl);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.membership-benefits-preview h3[b-udz2akd5q1] {
    margin: 0 0 var(--spacing-lg) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.membership-benefits-preview p[b-udz2akd5q1] {
    margin: 0 0 var(--spacing-2xl) 0;
    color: #666666;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

/* Renewal notice */
.renewal-notice[b-udz2akd5q1] {
    background: #fff8e1;
    border: 1px solid var(--color-primary-yellow);
    border-radius: var(--radius-card);
    padding: var(--spacing-3xl);
    text-align: center;
}

.renewal-notice h3[b-udz2akd5q1] {
    margin: 0 0 var(--spacing-lg) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: #856404;
}

.renewal-notice p[b-udz2akd5q1] {
    margin: 0 0 var(--spacing-2xl) 0;
    color: #856404;
    font-size: var(--font-size-base);
}

/* Buttons (Figma patterns) */
.btn-primary[b-udz2akd5q1] {
    padding: var(--spacing-lg) var(--spacing-2xl);
    background: var(--color-primary-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-button);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-primary:hover[b-udz2akd5q1] {
    background: var(--button-secondary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary[b-udz2akd5q1] {
    padding: var(--spacing-lg) var(--spacing-2xl);
    background: var(--color-primary-yellow);
    color: var(--color-black);
    border: none;
    border-radius: var(--radius-button);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-secondary:hover[b-udz2akd5q1] {
    background: #e6a811;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Tablet breakpoint */
@media (max-width: 768px) {
    .membership-container[b-udz2akd5q1] {
        padding: var(--spacing-2xl) var(--spacing-lg);
        padding-bottom: 100px;
    }

    .card-header[b-udz2akd5q1],
    .card-body[b-udz2akd5q1] {
        padding: var(--spacing-2xl);
    }

    .card-header h2[b-udz2akd5q1] {
        font-size: var(--font-size-xl);
    }

    .detail-row[b-udz2akd5q1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .membership-benefits-preview[b-udz2akd5q1] {
        padding: var(--spacing-2xl);
    }

    .renewal-notice[b-udz2akd5q1] {
        padding: var(--spacing-2xl);
    }
}

/* Mobile breakpoint */
@media (max-width: 480px) {
    .membership-container[b-udz2akd5q1] {
        padding: var(--spacing-lg);
        padding-bottom: 100px;
    }

    .membership-card[b-udz2akd5q1] {
        border-radius: var(--radius-md);
    }

    .membership-benefits-preview[b-udz2akd5q1],
    .renewal-notice[b-udz2akd5q1] {
        border-radius: var(--radius-md);
    }
}
/* /Pages/Profile/MyATKV.razor.rz.scp.css */
/* MyATKV Dashboard - Scoped styles matching Figma design system */

/* Container */
.my-atkv-container[b-jdlx3pr2nz] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 24px;
    min-height: calc(100vh - 120px);
}

/* Loading */
.loading-container[b-jdlx3pr2nz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.spinner-large[b-jdlx3pr2nz] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(42, 99, 175, 0.2);
    border-top-color: #2a63af;
    border-radius: 50%;
    animation: spin-b-jdlx3pr2nz 1s linear infinite;
}

/* Hero Section */
.hero-section[b-jdlx3pr2nz] {
    text-align: center;
    padding: 40px 24px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    margin-bottom: 24px;
}

.member-profile[b-jdlx3pr2nz] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-photo-container[b-jdlx3pr2nz] {
    position: relative;
    margin-bottom: 16px;
}

.profile-photo[b-jdlx3pr2nz] {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 4px solid #2a63af;
}

.avatar-placeholder[b-jdlx3pr2nz] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #2a63af;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 600;
    border: 4px solid #2a63af;
}

.status-indicator[b-jdlx3pr2nz] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
}

.status-indicator.active[b-jdlx3pr2nz] {
    background: #22c55e;
}

.member-name[b-jdlx3pr2nz] {
    font-size: 24px;
    font-weight: 600;
    color: black;
    margin: 0 0 8px 0;
}

.member-number[b-jdlx3pr2nz] {
    font-size: 14px;
    color: #999;
    margin: 0 0 16px 0;
}

.membership-badges[b-jdlx3pr2nz] {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.status-badge[b-jdlx3pr2nz],
.tier-badge[b-jdlx3pr2nz] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active[b-jdlx3pr2nz] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.status-badge.expired[b-jdlx3pr2nz] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.status-badge.pending[b-jdlx3pr2nz] {
    background: rgba(251, 191, 36, 0.1);
    color: #d97706;
}

.tier-badge.bronze[b-jdlx3pr2nz] {
    background: linear-gradient(135deg, #cd7f32, #a0522d);
    color: white;
}

.tier-badge.silver[b-jdlx3pr2nz] {
    background: linear-gradient(135deg, #c0c0c0, #808080);
    color: white;
}

.tier-badge.gold[b-jdlx3pr2nz] {
    background: linear-gradient(135deg, #fdb913, #ffb300);
    color: #1f2937;
}

.tier-badge.platinum[b-jdlx3pr2nz] {
    background: linear-gradient(135deg, #e5e4e2, #b0b0b0);
    color: #1f2937;
}

/* Stats Grid */
.stats-grid[b-jdlx3pr2nz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.stat-card[b-jdlx3pr2nz] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-card.clickable[b-jdlx3pr2nz] {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card.clickable:hover[b-jdlx3pr2nz] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-card.clickable:active[b-jdlx3pr2nz] {
    transform: scale(0.98);
}

.stat-value[b-jdlx3pr2nz] {
    font-size: 24px;
    font-weight: bold;
    color: #2a63af;
}

.stat-label[b-jdlx3pr2nz] {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Navigation Grid */
.navigation-grid[b-jdlx3pr2nz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.nav-card[b-jdlx3pr2nz] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}

.nav-card:hover[b-jdlx3pr2nz] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.nav-card:active[b-jdlx3pr2nz] {
    transform: scale(0.98);
}

.nav-icon[b-jdlx3pr2nz] {
    width: 48px;
    height: 48px;
    background: rgba(42, 99, 175, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.nav-icon i[b-jdlx3pr2nz] {
    font-size: 24px;
    color: #2a63af;
}

.nav-card h3[b-jdlx3pr2nz] {
    font-size: 16px;
    font-weight: 600;
    color: black;
    margin: 0 0 8px 0;
}

.nav-card p[b-jdlx3pr2nz] {
    font-size: 12px;
    color: #999;
    margin: 0;
    line-height: 1.4;
}

.nav-arrow[b-jdlx3pr2nz] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #2a63af;
    font-size: 20px;
    font-weight: 600;
}

/* Recent Activity */
.recent-activity[b-jdlx3pr2nz] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 80px;
}

.recent-activity h2[b-jdlx3pr2nz] {
    font-size: 18px;
    font-weight: 600;
    color: black;
    margin: 0 0 16px 0;
}

.activity-list[b-jdlx3pr2nz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item[b-jdlx3pr2nz] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #fafafa;
    border-radius: 12px;
}

.activity-icon[b-jdlx3pr2nz] {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon i[b-jdlx3pr2nz] {
    font-size: 18px;
    color: #2a63af;
}

.activity-content[b-jdlx3pr2nz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-title[b-jdlx3pr2nz] {
    font-size: 14px;
    color: #333;
    margin: 0;
}

.activity-date[b-jdlx3pr2nz] {
    font-size: 12px;
    color: #999;
    margin: 0;
}

/* Error Container */
.error-container[b-jdlx3pr2nz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 40px 20px;
    text-align: center;
}

.error-icon[b-jdlx3pr2nz] {
    font-size: 48px;
    color: #fdb913;
    margin-bottom: 16px;
}

/* Tablet (744px) */
@media (min-width: 744px) {
    .stats-grid[b-jdlx3pr2nz] {
        grid-template-columns: repeat(4, 1fr);
    }

    .navigation-grid[b-jdlx3pr2nz] {
        grid-template-columns: repeat(3, 1fr);
    }

    .member-name[b-jdlx3pr2nz] {
        font-size: 28px;
    }

    .profile-photo[b-jdlx3pr2nz],
    .avatar-placeholder[b-jdlx3pr2nz] {
        width: 120px;
        height: 120px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .hero-section[b-jdlx3pr2nz] {
        padding: 48px 40px;
    }
}

/* Mobile (393px) */
@media (max-width: 393px) {
    .my-atkv-container[b-jdlx3pr2nz] {
        padding: 24px 16px;
    }

    .stats-grid[b-jdlx3pr2nz] {
        gap: 12px;
    }

    .stat-card[b-jdlx3pr2nz] {
        padding: 16px;
    }

    .navigation-grid[b-jdlx3pr2nz] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hero-section[b-jdlx3pr2nz] {
        padding: 24px 16px;
    }
}

@keyframes spin-b-jdlx3pr2nz {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Profile/Projects.razor.rz.scp.css */
/* Projects Page - Scoped styles matching Figma design system (npo-projects-overview.html) */

/* Container */
.projects-container[b-7yfdmdnpq0] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 24px;
    min-height: calc(100vh - 120px);
}

/* Overview Section */
.overview-section[b-7yfdmdnpq0] {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 56px 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.overview-title[b-7yfdmdnpq0] {
    font-size: 32px;
    font-weight: 600;
    color: black;
    margin: 0;
}

.overview-text[b-7yfdmdnpq0] {
    font-size: 14px;
    color: #999;
    line-height: 1.6;
    margin: 0;
}

.stats-grid[b-7yfdmdnpq0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.stat-card[b-7yfdmdnpq0] {
    text-align: center;
    padding: 24px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
}

.stat-number[b-7yfdmdnpq0] {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #2a63af;
    margin-bottom: 4px;
}

.stat-label[b-7yfdmdnpq0] {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Filter Section */
.filter-section[b-7yfdmdnpq0] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
}

.search-container[b-7yfdmdnpq0] {
    position: relative;
    margin-bottom: 16px;
}

.search-icon[b-7yfdmdnpq0] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.search-input[b-7yfdmdnpq0] {
    width: 100%;
    padding: 12px 40px 12px 44px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 16px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.search-input:focus[b-7yfdmdnpq0] {
    outline: none;
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.clear-search[b-7yfdmdnpq0] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 8px;
}

.category-filters[b-7yfdmdnpq0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.category-pill[b-7yfdmdnpq0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.category-pill:hover[b-7yfdmdnpq0] {
    border-color: #2a63af;
    color: #2a63af;
}

.category-pill.active[b-7yfdmdnpq0] {
    background: #2a63af;
    border-color: #2a63af;
    color: white;
}

.category-pill .count[b-7yfdmdnpq0] {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.active-filters[b-7yfdmdnpq0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: #fafafa;
    border-radius: 12px;
}

.filter-label[b-7yfdmdnpq0] {
    font-size: 13px;
    color: #999;
    margin-right: 4px;
}

.filter-tag[b-7yfdmdnpq0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    font-size: 12px;
    color: #333;
}

.filter-tag i[b-7yfdmdnpq0] {
    font-size: 10px;
    color: #999;
    cursor: pointer;
}

.filter-tag i:hover[b-7yfdmdnpq0] {
    color: #dc2626;
}

.clear-all-btn[b-7yfdmdnpq0] {
    background: none;
    border: none;
    color: #2a63af;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px 8px;
}

/* Projects Grid - Figma: flex wrap with gap 40px */
.projects-grid[b-7yfdmdnpq0] {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 80px;
}

/* Project Card - Figma: 286x362, fafafa bg, 1.5px border */
.project-card[b-7yfdmdnpq0] {
    width: 286px;
    background: #fafafa;
    border: 1.5px solid #e0e0e0;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.project-card:hover[b-7yfdmdnpq0] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.project-image-container[b-7yfdmdnpq0] {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    padding: 15px 15px 0 15px;
}

.project-image[b-7yfdmdnpq0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    transition: transform 0.3s;
}

.project-card:hover .project-image[b-7yfdmdnpq0] {
    transform: scale(1.05);
}

.project-overlay[b-7yfdmdnpq0] {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 16px;
}

.project-card:hover .project-overlay[b-7yfdmdnpq0] {
    opacity: 1;
}

.view-more[b-7yfdmdnpq0] {
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.project-content[b-7yfdmdnpq0] {
    padding: 15px 15px 24px 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.category-badge[b-7yfdmdnpq0] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    align-self: flex-start;
}

.category-badge.cultural[b-7yfdmdnpq0] {
    background: rgba(147, 51, 234, 0.1);
    color: #7c3aed;
}

.category-badge.language[b-7yfdmdnpq0] {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.category-badge.music-dance[b-7yfdmdnpq0] {
    background: rgba(236, 72, 153, 0.1);
    color: #db2777;
}

.category-badge.youth[b-7yfdmdnpq0] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.category-badge.digital[b-7yfdmdnpq0] {
    background: rgba(251, 146, 60, 0.1);
    color: #ea580c;
}

.category-badge.branches[b-7yfdmdnpq0] {
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
}

.category-badge.corporate[b-7yfdmdnpq0] {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
}

.category-badge.partner[b-7yfdmdnpq0] {
    background: rgba(168, 85, 247, 0.1);
    color: #9333ea;
}

.category-badge.education[b-7yfdmdnpq0] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.category-badge.heritage[b-7yfdmdnpq0] {
    background: rgba(190, 18, 60, 0.1);
    color: #be123c;
}

.project-title[b-7yfdmdnpq0] {
    font-size: 18px;
    font-weight: 600;
    color: black;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.project-description[b-7yfdmdnpq0] {
    font-size: 14px;
    color: #999;
    line-height: 1.5;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.project-footer[b-7yfdmdnpq0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-date[b-7yfdmdnpq0] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #999;
}

.project-date i[b-7yfdmdnpq0] {
    font-size: 11px;
}

.learn-more-btn[b-7yfdmdnpq0] {
    background: none;
    border: none;
    color: #2a63af;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s;
}

.learn-more-btn:hover[b-7yfdmdnpq0] {
    transform: translateX(4px);
}

/* No Results */
.no-results[b-7yfdmdnpq0] {
    width: 100%;
    text-align: center;
    padding: 60px 20px;
}

.no-results-icon[b-7yfdmdnpq0] {
    font-size: 48px;
    color: #999;
    margin-bottom: 16px;
}

.no-results h3[b-7yfdmdnpq0] {
    font-size: 20px;
    color: black;
    margin: 0 0 8px 0;
}

.no-results p[b-7yfdmdnpq0] {
    font-size: 14px;
    color: #999;
    margin: 0 0 20px 0;
}

/* Skeleton Loading */
.project-card.skeleton[b-7yfdmdnpq0] {
    pointer-events: none;
}

.skeleton-image[b-7yfdmdnpq0] {
    width: 100%;
    height: 180px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-7yfdmdnpq0 1.5s infinite;
    border-radius: 16px;
    margin: 15px 15px 0 15px;
    width: calc(100% - 30px);
}

.skeleton-content[b-7yfdmdnpq0] {
    padding: 15px;
}

.skeleton-badge[b-7yfdmdnpq0] {
    width: 80px;
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-7yfdmdnpq0 1.5s infinite;
    border-radius: 6px;
    margin-bottom: 12px;
}

.skeleton-title[b-7yfdmdnpq0] {
    width: 70%;
    height: 24px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-7yfdmdnpq0 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-text[b-7yfdmdnpq0] {
    width: 100%;
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-7yfdmdnpq0 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 6px;
}

.skeleton-text:last-of-type[b-7yfdmdnpq0] {
    width: 85%;
}

.skeleton-button[b-7yfdmdnpq0] {
    width: 100px;
    height: 32px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-7yfdmdnpq0 1.5s infinite;
    border-radius: 6px;
    margin-top: 16px;
}

/* Modal */
.modal-overlay[b-7yfdmdnpq0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
}

.project-modal[b-7yfdmdnpq0] {
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-close[b-7yfdmdnpq0] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background 0.2s;
}

.modal-close:hover[b-7yfdmdnpq0] {
    background: rgba(0, 0, 0, 0.7);
}

.modal-image-container[b-7yfdmdnpq0] {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.modal-image[b-7yfdmdnpq0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-category-badge[b-7yfdmdnpq0] {
    position: absolute;
    bottom: 16px;
    left: 16px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.85);
}

.modal-content[b-7yfdmdnpq0] {
    padding: 24px;
}

.modal-title[b-7yfdmdnpq0] {
    font-size: 28px;
    font-weight: 600;
    color: black;
    margin: 0 0 16px 0;
}

.modal-description[b-7yfdmdnpq0] {
    font-size: 14px;
    color: #999;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.modal-info[b-7yfdmdnpq0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 24px;
}

.info-item[b-7yfdmdnpq0] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #333;
}

.info-item i[b-7yfdmdnpq0] {
    width: 20px;
    text-align: center;
    color: #2a63af;
}

.modal-gallery[b-7yfdmdnpq0] {
    margin-bottom: 24px;
}

.modal-gallery h3[b-7yfdmdnpq0] {
    font-size: 16px;
    font-weight: 600;
    color: black;
    margin: 0 0 12px 0;
}

.gallery-grid[b-7yfdmdnpq0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.gallery-image[b-7yfdmdnpq0] {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s;
}

.gallery-image:hover[b-7yfdmdnpq0] {
    transform: scale(1.05);
}

.modal-participation[b-7yfdmdnpq0] {
    margin-bottom: 24px;
}

.modal-participation h3[b-7yfdmdnpq0] {
    font-size: 16px;
    font-weight: 600;
    color: black;
    margin: 0 0 12px 0;
}

.modal-participation p[b-7yfdmdnpq0] {
    font-size: 14px;
    color: #999;
    line-height: 1.5;
    margin: 0;
}

.modal-actions[b-7yfdmdnpq0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tablet (744px) */
@media (min-width: 744px) {
    .stats-grid[b-7yfdmdnpq0] {
        grid-template-columns: repeat(4, 1fr);
    }

    .projects-grid[b-7yfdmdnpq0] {
        justify-content: center;
    }

    .modal-image-container[b-7yfdmdnpq0] {
        height: 300px;
    }

    .modal-actions[b-7yfdmdnpq0] {
        flex-direction: row;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .overview-title[b-7yfdmdnpq0] {
        font-size: 32px;
    }

    .overview-text[b-7yfdmdnpq0] {
        font-size: 16px;
    }
}

/* Mobile (393px) */
@media (max-width: 393px) {
    .projects-container[b-7yfdmdnpq0] {
        padding: 24px 16px;
    }

    .projects-grid[b-7yfdmdnpq0] {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .project-card[b-7yfdmdnpq0] {
        width: 100%;
    }

    .overview-section[b-7yfdmdnpq0] {
        padding: 32px 16px;
    }

    .overview-title[b-7yfdmdnpq0] {
        font-size: 24px;
    }

    .filter-section[b-7yfdmdnpq0] {
        padding: 16px;
    }

    .modal-title[b-7yfdmdnpq0] {
        font-size: 22px;
    }
}

@keyframes loading-b-7yfdmdnpq0 {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
/* /Pages/Profile/Settings.razor.rz.scp.css */
/* Settings Page - Scoped styles matching Figma design system */

/* Container */
.settings-container[b-9ex915i49y] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 24px;
    min-height: calc(100vh - 120px);
}

/* Settings Sections */
.settings-section[b-9ex915i49y] {
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    background: white;
    padding: 24px;
    margin-bottom: 20px;
}

.section-title[b-9ex915i49y] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title i[b-9ex915i49y] {
    font-size: 18px;
    color: #2a63af;
}

.settings-group[b-9ex915i49y] {
    display: flex;
    flex-direction: column;
}

/* Setting Items */
.setting-item[b-9ex915i49y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.setting-item:last-child[b-9ex915i49y] {
    border-bottom: none;
}

.setting-item.clickable[b-9ex915i49y] {
    cursor: pointer;
    border-radius: 8px;
    padding: 16px 8px;
    margin: 0 -8px;
}

.setting-item.clickable:hover[b-9ex915i49y] {
    background-color: #fafafa;
}

.setting-item.clickable:active[b-9ex915i49y] {
    background-color: #f0f0f0;
}

.setting-item.danger .setting-label[b-9ex915i49y] {
    color: #dc2626;
}

.setting-info[b-9ex915i49y] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 16px;
}

.setting-label[b-9ex915i49y] {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.setting-description[b-9ex915i49y] {
    font-size: 14px;
    color: #999;
    line-height: 1.4;
}

/* Toggle Switch */
.toggle-switch[b-9ex915i49y] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input[b-9ex915i49y] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-9ex915i49y] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider[b-9ex915i49y]:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

input:checked + .toggle-slider[b-9ex915i49y] {
    background-color: #2a63af;
}

input:checked + .toggle-slider[b-9ex915i49y]:before {
    transform: translateX(22px);
}

/* Select Dropdown */
.setting-select[b-9ex915i49y] {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: white;
    color: #333;
    font-size: 14px;
    min-width: 120px;
    cursor: pointer;
}

.setting-select:focus[b-9ex915i49y] {
    outline: none;
    border-color: #2a63af;
}

/* Setting Button */
.setting-button[b-9ex915i49y] {
    padding: 8px 16px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.setting-button:hover[b-9ex915i49y] {
    background: #1e4f8f;
}

.setting-button:active[b-9ex915i49y] {
    background: #1a4480;
}

.setting-button.danger[b-9ex915i49y] {
    background: #dc2626;
}

.setting-button.danger:hover[b-9ex915i49y] {
    background: #b91c1c;
}

.setting-button.danger:active[b-9ex915i49y] {
    background: #991b1b;
}

/* Chevron icon for clickable items */
.setting-item.clickable i.fas.fa-chevron-right[b-9ex915i49y] {
    color: #ccc;
    font-size: 14px;
}

/* Version Text */
.version-text[b-9ex915i49y] {
    font-size: 14px;
    color: #999;
    font-family: 'Courier New', monospace;
}

/* PIN Modal */
.modal-overlay[b-9ex915i49y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.pin-modal[b-9ex915i49y] {
    background: white;
    border-radius: 20px;
    padding: 32px 24px;
    max-width: 340px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.pin-modal h3[b-9ex915i49y] {
    font-size: 20px;
    font-weight: 600;
    color: black;
    margin: 0 0 8px 0;
    text-align: center;
}

.pin-modal p[b-9ex915i49y] {
    font-size: 14px;
    color: #999;
    text-align: center;
    margin: 0 0 24px 0;
}

.pin-input-container[b-9ex915i49y] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.pin-digit[b-9ex915i49y] {
    width: 40px;
    height: 48px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.2s;
}

.pin-digit.filled[b-9ex915i49y] {
    border-color: #2a63af;
    background: rgba(42, 99, 175, 0.05);
}

.pin-keypad[b-9ex915i49y] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.keypad-btn[b-9ex915i49y] {
    height: 52px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: white;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.keypad-btn:hover[b-9ex915i49y] {
    background: #fafafa;
}

.keypad-btn:active[b-9ex915i49y] {
    background: #f0f0f0;
    transform: scale(0.95);
}

.keypad-btn:disabled[b-9ex915i49y] {
    opacity: 0.4;
    cursor: not-allowed;
}

.keypad-btn i[b-9ex915i49y] {
    font-size: 18px;
}

/* Tablet (744px) */
@media (min-width: 744px) {
    .settings-container[b-9ex915i49y] {
        max-width: 768px;
    }

    .section-title[b-9ex915i49y] {
        font-size: 18px;
    }

    .setting-label[b-9ex915i49y] {
        font-size: 16px;
    }

    .setting-description[b-9ex915i49y] {
        font-size: 14px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .settings-container[b-9ex915i49y] {
        max-width: 900px;
    }
}

/* Mobile (393px) */
@media (max-width: 393px) {
    .settings-container[b-9ex915i49y] {
        padding: 24px 16px;
    }

    .settings-section[b-9ex915i49y] {
        padding: 16px;
        border-radius: 16px;
    }

    .setting-label[b-9ex915i49y] {
        font-size: 14px;
    }

    .setting-description[b-9ex915i49y] {
        font-size: 12px;
    }
}
/* /Pages/Resorts/AccommodationOverview.razor.rz.scp.css */
.resort-page[b-x8yooxnfke] {
    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-x8yooxnfke] {
    width: 100%;
    height: 265px;
    background-image: url('/images/resorts/drakensville/resort_hero_1_golden_hour_dam_drakensberg.jpg');
    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-x8yooxnfke]::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-x8yooxnfke] {
    position: relative;
    width: 150px;
    height: 68px;
    z-index: 1;
}

.resort-navigation[b-x8yooxnfke] {
    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-x8yooxnfke] {
    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-x8yooxnfke] {
    opacity: var(--opacity-hover);
}

.resort-nav-button--active[b-x8yooxnfke] {
    border-color: var(--color-primary-blue);
}

.resort-dropdown[b-x8yooxnfke] {
    display: none;
}

.accommodation-section[b-x8yooxnfke] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xl);
}

.accommodation-heading[b-x8yooxnfke] {
    font-size: 32px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.accommodation-description[b-x8yooxnfke] {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: 48px;
}

.accommodation-grid[b-x8yooxnfke] {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    width: 100%;
}

.accommodation-card[b-x8yooxnfke] {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base);
}

.accommodation-card:hover[b-x8yooxnfke] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.accommodation-card--large[b-x8yooxnfke] {
    width: 725px;
    height: 462px;
}

.accommodation-card--small[b-x8yooxnfke] {
    width: 298px;
    height: 224px;
}

.accommodation-card__image[b-x8yooxnfke] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.accommodation-card__overlay[b-x8yooxnfke] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 105px;
    display: flex;
    align-items: center;
    padding-left: 23px;
}

.accommodation-card__overlay--cyan[b-x8yooxnfke] {
    background: linear-gradient(to top, #00a8e6, rgba(0, 0, 0, 0));
}

.accommodation-card__overlay--light-blue[b-x8yooxnfke] {
    background: linear-gradient(to top, #9bc8d4, rgba(0, 0, 0, 0));
}

.accommodation-card__overlay--blue-grey[b-x8yooxnfke] {
    background: linear-gradient(to top, #a0b1ca, rgba(0, 0, 0, 0));
}

.accommodation-card__overlay--navy[b-x8yooxnfke] {
    background: linear-gradient(to top, #0c2a6e, rgba(0, 0, 0, 0));
}

.accommodation-card__overlay--purple[b-x8yooxnfke] {
    background: linear-gradient(to top, #2f2769, rgba(0, 0, 0, 0));
}

.accommodation-card__title[b-x8yooxnfke] {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.accommodation-cards-column[b-x8yooxnfke] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .resort-page[b-x8yooxnfke] {
        padding: var(--spacing-5xl) var(--spacing-lg);
    }

    .resort-navigation[b-x8yooxnfke] {
        display: none;
    }

    .resort-dropdown[b-x8yooxnfke] {
        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-x8yooxnfke] {
        opacity: var(--opacity-hover);
    }

    .resort-dropdown-text[b-x8yooxnfke] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-white);
    }

    .resort-dropdown-icon[b-x8yooxnfke] {
        width: 34px;
        height: 29px;
    }

    .accommodation-card--large[b-x8yooxnfke] {
        width: 612px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .resort-page[b-x8yooxnfke] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .accommodation-grid[b-x8yooxnfke] {
        flex-direction: column;
        align-items: center;
    }

    .accommodation-card--large[b-x8yooxnfke] {
        width: 100%;
        max-width: 353px;
    }

    .accommodation-cards-column[b-x8yooxnfke] {
        width: 100%;
        align-items: center;
    }

    .accommodation-card--small[b-x8yooxnfke] {
        width: 100%;
        max-width: 298px;
    }
}
/* /Pages/Resorts/BookResort.razor.rz.scp.css */
/* ============================================
   BOOK RESORT PAGE - ATKV MOBILE APP
   Pattern: Wallet form modal (TopUp style)
   Design tokens: 480px max, 20px radius cards,
   55px input height, 20px input radius, black CTA 16px radius
   ============================================ */

/* ============================================
   PAGE CONTAINER
   ============================================ */

.booking-container[b-l58jo8cyyv] {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 24px;
    font-family: 'Montserrat', sans-serif;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-l58jo8cyyv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    gap: 16px;
    text-align: center;
}

.loading-container p[b-l58jo8cyyv] {
    margin: 0;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.spinner[b-l58jo8cyyv] {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: #2a63af;
    border-radius: 50%;
    animation: spin-b-l58jo8cyyv 0.8s linear infinite;
}

@keyframes spin-b-l58jo8cyyv {
    to { transform: rotate(360deg); }
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */

.breadcrumb[b-l58jo8cyyv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-link[b-l58jo8cyyv] {
    color: #2a63af;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.breadcrumb-link:hover[b-l58jo8cyyv] {
    opacity: 0.8;
    text-decoration: underline;
}

.breadcrumb-separator[b-l58jo8cyyv] {
    color: #b7beb5;
    font-size: 16px;
}

.breadcrumb-current[b-l58jo8cyyv] {
    color: #666;
    font-weight: 500;
}

/* ============================================
   PAGE TITLE
   ============================================ */

.booking-container h1[b-l58jo8cyyv] {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

/* ============================================
   BOOKING CONTENT LAYOUT
   ============================================ */

.booking-content[b-l58jo8cyyv] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.booking-form-section[b-l58jo8cyyv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================================
   SECTION CARDS
   ============================================ */

.section-card[b-l58jo8cyyv] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px;
}

.section-card h2[b-l58jo8cyyv] {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

/* ============================================
   FORM FIELDS
   ============================================ */

.form-group[b-l58jo8cyyv] {
    margin-bottom: 16px;
}

.form-group:last-child[b-l58jo8cyyv] {
    margin-bottom: 0;
}

.form-group label[b-l58jo8cyyv] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.form-input[b-l58jo8cyyv] {
    width: 100%;
    height: 55px;
    padding: 0 16px;
    border: 1px solid var(--input-border, #000);
    border-radius: 20px;
    font-size: 16px;
    font-family: inherit;
    color: #333;
    background: var(--input-background, #fff);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input[b-l58jo8cyyv]::placeholder {
    color: var(--input-placeholder, #9e9e9e);
}

.form-input:focus[b-l58jo8cyyv] {
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
    outline: none;
}

.form-textarea[b-l58jo8cyyv] {
    width: 100%;
    min-height: 110px;
    padding: 16px;
    border: 1px solid var(--input-border, #000);
    border-radius: 20px;
    font-size: 16px;
    font-family: inherit;
    color: #333;
    background: var(--input-background, #fff);
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-textarea[b-l58jo8cyyv]::placeholder {
    color: var(--input-placeholder, #9e9e9e);
}

.form-textarea:focus[b-l58jo8cyyv] {
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
    outline: none;
}

/* ============================================
   PAYMENT OPTIONS
   ============================================ */

.payment-options[b-l58jo8cyyv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-option[b-l58jo8cyyv] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.payment-option input[type="radio"][b-l58jo8cyyv] {
    width: 20px;
    height: 20px;
    accent-color: #2a63af;
    flex-shrink: 0;
}

.payment-option-content[b-l58jo8cyyv] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.payment-option input[type="radio"]:checked ~ .payment-option-content[b-l58jo8cyyv] {
    border-color: #2a63af;
    background: #f0f6ff;
}

.payment-icon[b-l58jo8cyyv] {
    font-size: 24px;
    flex-shrink: 0;
}

.payment-option-content div strong[b-l58jo8cyyv] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.payment-option-content div p[b-l58jo8cyyv] {
    margin: 0;
    font-size: 12px;
    color: #666;
}

/* ============================================
   TERMS AND CONDITIONS
   ============================================ */

.terms-content[b-l58jo8cyyv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkbox-label[b-l58jo8cyyv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.checkbox-label input[type="checkbox"][b-l58jo8cyyv] {
    width: 20px;
    height: 20px;
    accent-color: #2a63af;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ============================================
   VALIDATION MESSAGES
   ============================================ */

.validation-message[b-l58jo8cyyv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.validation-message.error[b-l58jo8cyyv] {
    background: #ffebee;
    border: 1px solid #e53935;
    color: #c62828;
}

.validation-message.success[b-l58jo8cyyv] {
    background: #e8f5e9;
    border: 1px solid #43a047;
    color: #2e7d32;
}

.validation-message .icon[b-l58jo8cyyv] {
    font-size: 18px;
    flex-shrink: 0;
}

/* ============================================
   FORM ACTION BUTTONS
   ============================================ */

.form-actions[b-l58jo8cyyv] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.btn[b-l58jo8cyyv] {
    padding: 16px 24px;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    text-align: center;
}

.btn:disabled[b-l58jo8cyyv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-l58jo8cyyv] {
    background: white;
    color: #333;
    border: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.btn-secondary:hover:not(:disabled)[b-l58jo8cyyv] {
    background: #f5f5f5;
}

.btn-primary[b-l58jo8cyyv] {
    background: #000;
    color: white;
    flex: 1;
}

.btn-primary:hover:not(:disabled)[b-l58jo8cyyv] {
    background: #1a1a1a;
}

.btn-primary:focus-visible[b-l58jo8cyyv] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.btn-large[b-l58jo8cyyv] {
    min-height: 55px;
}

/* ============================================
   BOOKING SUMMARY SECTION
   ============================================ */

.booking-summary-section[b-l58jo8cyyv] {
    margin-top: 4px;
}

.summary-card[b-l58jo8cyyv] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px;
}

.summary-card h2[b-l58jo8cyyv] {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

/* ============================================
   SUMMARY RESORT INFO
   ============================================ */

.summary-resort[b-l58jo8cyyv] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.summary-resort img[b-l58jo8cyyv] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.summary-resort-info h3[b-l58jo8cyyv] {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.summary-resort-info .accommodation-name[b-l58jo8cyyv] {
    margin: 0 0 4px;
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.summary-resort-info .location[b-l58jo8cyyv] {
    margin: 0;
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

.summary-resort-info .location .icon[b-l58jo8cyyv] {
    font-size: 14px;
}

/* ============================================
   SUMMARY DETAILS
   ============================================ */

.summary-details[b-l58jo8cyyv] {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.detail-row[b-l58jo8cyyv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.detail-row .label[b-l58jo8cyyv] {
    color: #666;
    font-weight: 500;
}

.detail-row .value[b-l58jo8cyyv] {
    color: #333;
    font-weight: 600;
}

/* ============================================
   SUMMARY SPECS
   ============================================ */

.summary-specs[b-l58jo8cyyv] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.summary-specs .spec[b-l58jo8cyyv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.summary-specs .spec .icon[b-l58jo8cyyv] {
    font-size: 16px;
}

/* ============================================
   SUMMARY PRICING
   ============================================ */

.summary-pricing[b-l58jo8cyyv] {
    margin-bottom: 16px;
}

.summary-pricing h3[b-l58jo8cyyv] {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.price-row[b-l58jo8cyyv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.price-row .label[b-l58jo8cyyv] {
    color: #666;
}

.price-row .value[b-l58jo8cyyv] {
    color: #333;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}

.price-row.discount[b-l58jo8cyyv] {
    color: #43a047;
}

.price-row.discount .label[b-l58jo8cyyv],
.price-row.discount .value[b-l58jo8cyyv] {
    color: #43a047;
    font-weight: 600;
}

.price-row.total[b-l58jo8cyyv] {
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 700;
}

.price-row.total .label[b-l58jo8cyyv] {
    color: #333;
    font-weight: 700;
}

.price-row.total .value[b-l58jo8cyyv] {
    color: #333;
    font-weight: 700;
    font-size: 18px;
}

/* ============================================
   SUMMARY NOTE
   ============================================ */

.summary-note[b-l58jo8cyyv] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 12px 16px;
}

.summary-note p[b-l58jo8cyyv] {
    margin: 0;
    font-size: 12px;
    color: #856404;
    font-weight: 500;
    line-height: 1.5;
}

/* ============================================
   ERROR CONTAINER
   ============================================ */

.error-container[b-l58jo8cyyv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    gap: 24px;
    text-align: center;
}

.error-message[b-l58jo8cyyv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.error-icon[b-l58jo8cyyv] {
    font-size: 32px;
}

.error-message p[b-l58jo8cyyv] {
    margin: 0;
    font-size: 14px;
    color: #c62828;
    line-height: 1.5;
}

.error-container .btn-primary[b-l58jo8cyyv] {
    width: auto;
    min-width: 160px;
}

/* ============================================
   RESPONSIVE: TABLET (744px+)
   ============================================ */

@media (min-width: 744px) {
    .booking-container[b-l58jo8cyyv] {
        max-width: 480px;
        padding: 40px 24px;
    }

    .booking-container h1[b-l58jo8cyyv] {
        font-size: 24px;
    }

    .summary-card.sticky[b-l58jo8cyyv] {
        position: sticky;
        top: 24px;
    }
}

/* ============================================
   RESPONSIVE: MOBILE (393px and below)
   ============================================ */

@media (max-width: 393px) {
    .booking-container[b-l58jo8cyyv] {
        padding: 16px;
    }

    .section-card[b-l58jo8cyyv] {
        padding: 16px;
    }

    .summary-card[b-l58jo8cyyv] {
        padding: 16px;
    }

    .form-actions[b-l58jo8cyyv] {
        flex-direction: column;
    }

    .btn-secondary[b-l58jo8cyyv] {
        order: 2;
    }

    .btn-primary[b-l58jo8cyyv] {
        order: 1;
    }

    .summary-resort img[b-l58jo8cyyv] {
        width: 64px;
        height: 64px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .spinner[b-l58jo8cyyv] {
        animation: none;
    }

    .btn[b-l58jo8cyyv],
    .form-input[b-l58jo8cyyv],
    .form-textarea[b-l58jo8cyyv],
    .payment-option-content[b-l58jo8cyyv] {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .form-input[b-l58jo8cyyv],
    .form-textarea[b-l58jo8cyyv] {
        border-width: 2px;
    }

    .section-card[b-l58jo8cyyv],
    .summary-card[b-l58jo8cyyv] {
        border-width: 2px;
    }
}
/* /Pages/Resorts/CheckAvailability.razor.rz.scp.css */
/* ============================================
   CHECK AVAILABILITY PAGE - ATKV MOBILE APP
   Pattern: Resort card (AccommodationOverview style)
   Design tokens: 298x224px cards, 20px radius,
   gradient overlays, 55px inputs, 20px radius
   ============================================ */

/* ============================================
   PAGE CONTAINER
   ============================================ */

.availability-container[b-igumgxqr6o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4xl);
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    font-family: 'Montserrat', sans-serif;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-igumgxqr6o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    gap: 16px;
    text-align: center;
    width: 100%;
}

.loading-container p[b-igumgxqr6o] {
    margin: 0;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.spinner[b-igumgxqr6o] {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--color-primary-blue);
    border-radius: 50%;
    animation: spin-b-igumgxqr6o 0.8s linear infinite;
}

@keyframes spin-b-igumgxqr6o {
    to { transform: rotate(360deg); }
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */

.breadcrumb[b-igumgxqr6o] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-link[b-igumgxqr6o] {
    color: var(--color-primary-blue);
    text-decoration: none;
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: opacity var(--transition-base);
}

.breadcrumb-link:hover[b-igumgxqr6o] {
    opacity: var(--opacity-hover);
    text-decoration: underline;
}

.breadcrumb-separator[b-igumgxqr6o] {
    color: var(--color-grey);
    font-size: 16px;
}

.breadcrumb-current[b-igumgxqr6o] {
    color: #666;
    font-weight: var(--font-weight-medium);
}

/* ============================================
   AVAILABILITY CONTENT
   ============================================ */

.availability-content[b-igumgxqr6o] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
}

/* ============================================
   RESORT SUMMARY CARD
   ============================================ */

.resort-summary-card[b-igumgxqr6o] {
    width: 100%;
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    height: 265px;
    display: flex;
    align-items: flex-end;
}

.resort-summary-image[b-igumgxqr6o] {
    position: absolute;
    inset: 0;
}

.resort-summary-image img[b-igumgxqr6o] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resort-summary-image .placeholder-image[b-igumgxqr6o] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a63af 0%, #6b9fd8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
}

.resort-summary-info[b-igumgxqr6o] {
    position: relative;
    z-index: 1;
    padding: var(--spacing-3xl);
    width: 100%;
    background: linear-gradient(to top, rgba(47, 48, 50, 1), rgba(0, 0, 0, 0));
}

.resort-summary-info h2[b-igumgxqr6o] {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.resort-summary-info .location[b-igumgxqr6o] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
}

.resort-summary-info .location .icon[b-igumgxqr6o] {
    font-size: 16px;
}


/* ============================================
   SEARCH FORM CARD
   ============================================ */

.search-form-card[b-igumgxqr6o] {
    background: var(--color-white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

.search-form-card h3[b-igumgxqr6o] {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

/* ============================================
   FORM GRID
   ============================================ */

.form-grid[b-igumgxqr6o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.form-group[b-igumgxqr6o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-igumgxqr6o] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: #333;
}

.form-input[b-igumgxqr6o],
.form-group select.form-input[b-igumgxqr6o] {
    width: 100%;
    height: 55px;
    padding: 0 16px;
    border: 1px solid var(--input-border, #000);
    border-radius: var(--radius-input);
    font-size: 16px;
    font-family: inherit;
    color: var(--input-text, #000);
    background: var(--input-background, #fff);
    box-sizing: border-box;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    -webkit-appearance: none;
    appearance: none;
}

.form-input[b-igumgxqr6o]::placeholder {
    color: var(--input-placeholder, #9e9e9e);
}

.form-input:focus[b-igumgxqr6o] {
    border-color: var(--input-border-focus, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
    outline: none;
}

/* ============================================
   VALIDATION MESSAGE
   ============================================ */

.validation-message[b-igumgxqr6o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    background: #ffebee;
    border: 1px solid #e53935;
    color: #c62828;
    margin-bottom: 16px;
}

.validation-message .icon[b-igumgxqr6o] {
    font-size: 18px;
    flex-shrink: 0;
}

/* ============================================
   FORM ACTIONS
   ============================================ */

.form-actions[b-igumgxqr6o] {
    display: flex;
}

.btn[b-igumgxqr6o] {
    padding: 16px 24px;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    font-family: inherit;
    transition: background-color var(--transition-base), opacity var(--transition-base);
    text-align: center;
}

.btn:disabled[b-igumgxqr6o] {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

.btn-primary[b-igumgxqr6o] {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

.btn-primary:hover:not(:disabled)[b-igumgxqr6o] {
    background: var(--button-primary-hover);
}

.btn-primary:focus-visible[b-igumgxqr6o] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.btn-large[b-igumgxqr6o] {
    width: 100%;
    min-height: 55px;
}

.btn-secondary[b-igumgxqr6o] {
    background: var(--color-white);
    color: #333;
    border: 1px solid var(--card-border);
}

.btn-secondary:hover:not(:disabled)[b-igumgxqr6o] {
    background: #f5f5f5;
}

/* ============================================
   LOADING RESULTS
   ============================================ */

.loading-results[b-igumgxqr6o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 16px;
    text-align: center;
}

.loading-results p[b-igumgxqr6o] {
    margin: 0;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* ============================================
   ERROR MESSAGE BOX
   ============================================ */

.error-message-box[b-igumgxqr6o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
    background: #ffebee;
    border: 1px solid #e53935;
    border-radius: var(--radius-card);
    text-align: center;
}

.error-message-box .icon[b-igumgxqr6o] {
    font-size: 32px;
}

.error-message-box p[b-igumgxqr6o] {
    margin: 0;
    font-size: 14px;
    color: #c62828;
    line-height: 1.5;
}

/* ============================================
   NO AVAILABILITY STATE
   ============================================ */

.no-availability[b-igumgxqr6o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
}

.no-availability .icon[b-igumgxqr6o] {
    font-size: 48px;
}

.no-availability h3[b-igumgxqr6o] {
    margin: 0;
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: #333;
}

.no-availability p[b-igumgxqr6o] {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

/* ============================================
   RESULTS SECTION
   ============================================ */

.results-section[b-igumgxqr6o] {
    width: 100%;
}

.results-header[b-igumgxqr6o] {
    margin-bottom: 24px;
}

.results-header h3[b-igumgxqr6o] {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.results-header p[b-igumgxqr6o] {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.results-header .nights-info[b-igumgxqr6o] {
    margin-top: 4px;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary-blue);
}

/* ============================================
   ACCOMMODATIONS LIST
   ============================================ */

.accommodations-list[b-igumgxqr6o] {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    width: 100%;
}

/* ============================================
   ACCOMMODATION CARD
   Pattern: 298x224px image area, 20px radius,
   gradient overlay like AccommodationOverview
   ============================================ */

.accommodation-card[b-igumgxqr6o] {
    background: var(--color-white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    width: 100%;
    max-width: 600px;
    transition: all var(--transition-base);
    box-shadow: var(--card-shadow-sm);
}

.accommodation-card:hover[b-igumgxqr6o] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.accommodation-images[b-igumgxqr6o] {
    position: relative;
    width: 100%;
    height: 224px;
    overflow: hidden;
}

.accommodation-images img[b-igumgxqr6o] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.accommodation-images .placeholder-image[b-igumgxqr6o] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #9bc8d4, rgba(0, 0, 0, 0));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

/* ============================================
   ACCOMMODATION DETAILS
   ============================================ */

.accommodation-details[b-igumgxqr6o] {
    padding: 20px 24px;
}

.accommodation-details h4[b-igumgxqr6o] {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
}

.accommodation-details .description[b-igumgxqr6o] {
    margin: 0 0 16px;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   ACCOMMODATION SPECS
   ============================================ */

.accommodation-specs[b-igumgxqr6o] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.accommodation-specs .spec[b-igumgxqr6o] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.accommodation-specs .spec .icon[b-igumgxqr6o] {
    font-size: 16px;
}

/* ============================================
   AMENITY TAGS
   ============================================ */

.accommodation-amenities[b-igumgxqr6o] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.amenity-tag[b-igumgxqr6o] {
    padding: 6px 12px;
    background: #f0f6ff;
    border: 1px solid #d0e2f7;
    border-radius: 70px;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary-blue);
}

.amenity-more[b-igumgxqr6o] {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: #666;
}

/* ============================================
   AVAILABILITY WARNING
   ============================================ */

.availability-warning[b-igumgxqr6o] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: #856404;
}

.availability-warning .icon[b-igumgxqr6o] {
    font-size: 16px;
    flex-shrink: 0;
}

/* ============================================
   ACCOMMODATION PRICING
   ============================================ */

.accommodation-pricing[b-igumgxqr6o] {
    padding: 0 24px 20px;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
}

.price-breakdown[b-igumgxqr6o] {
    margin-bottom: 16px;
}

.price-row[b-igumgxqr6o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 14px;
}

.price-row .label[b-igumgxqr6o] {
    color: #666;
}

.price-row .value[b-igumgxqr6o] {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--font-weight-semibold);
    color: #333;
}

.price-row.total[b-igumgxqr6o] {
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
    margin-top: 8px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
}

.price-row.total .label[b-igumgxqr6o] {
    color: var(--color-black);
    font-weight: var(--font-weight-bold);
}

.price-row.total .value[b-igumgxqr6o] {
    color: var(--color-black);
    font-weight: var(--font-weight-bold);
    font-size: 18px;
}

.btn-book[b-igumgxqr6o] {
    width: 100%;
    min-height: 55px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    font-family: inherit;
    transition: background-color var(--transition-base);
}

.btn-book:hover:not(:disabled)[b-igumgxqr6o] {
    background: var(--button-primary-hover);
}

.btn-book:focus-visible[b-igumgxqr6o] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.btn-book:disabled[b-igumgxqr6o] {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

.unavailable-text[b-igumgxqr6o] {
    margin: 8px 0 0;
    font-size: 13px;
    color: #c62828;
    text-align: center;
    font-weight: var(--font-weight-medium);
}

/* ============================================
   RESPONSIVE: TABLET (744px and below)
   ============================================ */

@media (max-width: 744px) {
    .availability-container[b-igumgxqr6o] {
        padding: 0 var(--spacing-lg);
        gap: var(--spacing-3xl);
    }

    .resort-summary-card[b-igumgxqr6o] {
        height: 200px;
    }

    .resort-summary-info h2[b-igumgxqr6o] {
        font-size: 22px;
    }

    .search-form-card[b-igumgxqr6o] {
        padding: 24px;
    }

    .form-grid[b-igumgxqr6o] {
        grid-template-columns: 1fr 1fr;
    }

    .accommodation-card[b-igumgxqr6o] {
        max-width: 100%;
    }

    .results-header h3[b-igumgxqr6o] {
        font-size: 20px;
    }
}

/* ============================================
   RESPONSIVE: MOBILE (393px and below)
   ============================================ */

@media (max-width: 393px) {
    .availability-container[b-igumgxqr6o] {
        padding: var(--spacing-lg);
        gap: var(--spacing-2xl);
    }

    .resort-summary-card[b-igumgxqr6o] {
        height: 180px;
    }

    .resort-summary-info[b-igumgxqr6o] {
        padding: var(--spacing-xl);
    }

    .resort-summary-info h2[b-igumgxqr6o] {
        font-size: 18px;
    }

    .resort-summary-info .location[b-igumgxqr6o] {
        font-size: 14px;
    }

    .search-form-card[b-igumgxqr6o] {
        padding: 16px;
    }

    .search-form-card h3[b-igumgxqr6o] {
        font-size: 18px;
    }

    .form-grid[b-igumgxqr6o] {
        grid-template-columns: 1fr;
    }

    .accommodations-list[b-igumgxqr6o] {
        gap: 20px;
    }

    .accommodation-images[b-igumgxqr6o] {
        height: 180px;
    }

    .accommodation-details[b-igumgxqr6o] {
        padding: 16px;
    }

    .accommodation-pricing[b-igumgxqr6o] {
        padding: 0 16px 16px;
        padding-top: 12px;
    }

    .accommodation-specs[b-igumgxqr6o] {
        gap: 12px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .spinner[b-igumgxqr6o] {
        animation: none;
    }

    .accommodation-card:hover[b-igumgxqr6o] {
        transform: none;
    }

    .btn[b-igumgxqr6o],
    .btn-book[b-igumgxqr6o],
    .form-input[b-igumgxqr6o] {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .form-input[b-igumgxqr6o] {
        border-width: 2px;
    }

    .accommodation-card[b-igumgxqr6o],
    .search-form-card[b-igumgxqr6o] {
        border-width: 2px;
    }
}
/* /Pages/Resorts/Entertainment.razor.rz.scp.css */
.resort-page[b-8gumm8z4y8] {
    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-8gumm8z4y8] {
    width: 100%;
    height: 265px;
    background-image: url('/images/resorts/drakensville/resort_hero_2_aerial_resort_pool_mountains.jpg');
    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-8gumm8z4y8]::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-8gumm8z4y8] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.resort-navigation[b-8gumm8z4y8] {
    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-8gumm8z4y8] {
    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-8gumm8z4y8] {
    opacity: var(--opacity-hover);
}

.resort-nav-button--active[b-8gumm8z4y8] {
    border-color: var(--color-primary-blue);
}

.resort-dropdown[b-8gumm8z4y8] {
    display: none;
}

.entertainment-cards[b-8gumm8z4y8] {
    display: flex;
    gap: 101px;
    width: 100%;
    justify-content: center;
}

.entertainment-card[b-8gumm8z4y8] {
    width: 606px;
    height: 771px;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.entertainment-card__image[b-8gumm8z4y8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .resort-page[b-8gumm8z4y8] {
        padding: var(--spacing-5xl) var(--spacing-lg);
    }

    .resort-navigation[b-8gumm8z4y8] {
        display: none;
    }

    .resort-dropdown[b-8gumm8z4y8] {
        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-8gumm8z4y8] {
        opacity: var(--opacity-hover);
    }

    .resort-dropdown-text[b-8gumm8z4y8] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-white);
    }

    .resort-dropdown-icon[b-8gumm8z4y8] {
        width: 34px;
        height: 29px;
    }

    .entertainment-cards[b-8gumm8z4y8] {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

    .entertainment-card[b-8gumm8z4y8] {
        width: 100%;
        max-width: 606px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .resort-page[b-8gumm8z4y8] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }
}
/* /Pages/Resorts/Index.razor.rz.scp.css */
/* Main Content Container */
.main-content[b-whwev6i7xi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 24px;
    padding-top: 80px;
    padding-bottom: 100px;
}

/* Header Section */
.header-section[b-whwev6i7xi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.header-title[b-whwev6i7xi] {
    font-size: 32px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

.header-subtitle[b-whwev6i7xi] {
    font-size: 20px;
    font-weight: 500;
    color: #000000;
    margin: 0;
}

/* Search and Filters */
.search-filters[b-whwev6i7xi] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.search-input-group[b-whwev6i7xi] {
    display: flex;
    gap: 12px;
    width: 300px;
}

.search-input[b-whwev6i7xi] {
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 20px;
    height: 55px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    position: relative;
}

.search-input:hover[b-whwev6i7xi] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-icon[b-whwev6i7xi] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #666666;
}

.search-text-input[b-whwev6i7xi] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    width: 100%;
    height: 100%;
}

.search-text-input[b-whwev6i7xi]::placeholder {
    color: #999999;
}

.clear-search-btn[b-whwev6i7xi] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clear-search-btn:hover[b-whwev6i7xi] {
    color: #000000;
}

.filter-button[b-whwev6i7xi] {
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 50%;
    width: 56px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.filter-button:hover[b-whwev6i7xi] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Resort Dropdown */
.resort-dropdown[b-whwev6i7xi] {
    background: #2a63af;
    border: 1px solid #cccccc;
    border-radius: 70px;
    height: 70px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 316px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resort-dropdown:hover[b-whwev6i7xi] {
    opacity: 0.9;
}

.resort-dropdown-text[b-whwev6i7xi] {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
}

/* Featured Experiences Section */
.experiences-section[b-whwev6i7xi] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.experiences-title[b-whwev6i7xi] {
    font-size: 28px;
    font-weight: 700;
    color: #000000;
    text-align: center;
    margin: 0;
}

/* Accommodation Grid - Horizontal Scroll */
.accommodation-grid[b-whwev6i7xi] {
    display: flex;
    gap: 43px;
    overflow-x: auto;
    padding-bottom: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.accommodation-grid[b-whwev6i7xi]::-webkit-scrollbar {
    height: 6px;
}

.accommodation-grid[b-whwev6i7xi]::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.accommodation-grid[b-whwev6i7xi]::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 3px;
}

/* Accommodation Card - matches ExperienceCard layout */
.accommodation-card[b-whwev6i7xi] {
    background: #f9fafb;
    border-radius: 20px;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    min-height: 400px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.accommodation-card:hover[b-whwev6i7xi] {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Image section */
.accommodation-image-wrap[b-whwev6i7xi] {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    flex-shrink: 0;
}

.accommodation-image[b-whwev6i7xi] {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.accommodation-overlay[b-whwev6i7xi] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 116px;
    background: linear-gradient(to top, rgba(0, 138, 161, 0.8) 0%, transparent 100%);
    display: flex;
    align-items: center;
    padding: 0 24px;
}

.accommodation-type[b-whwev6i7xi] {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

/* Details section below image */
.accommodation-details[b-whwev6i7xi] {
    padding: 20px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* Amenities Row */
.accommodation-amenities[b-whwev6i7xi] {
    display: flex;
    gap: 20px;
}

.amenity[b-whwev6i7xi] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #333;
}

.amenity-icon[b-whwev6i7xi] {
    font-size: 18px;
    color: #666;
}

.amenity-text[b-whwev6i7xi] {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* Footer: price left, button right */
.accommodation-footer[b-whwev6i7xi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.price[b-whwev6i7xi] {
    font-size: 20px;
    font-weight: 500;
}

.price-large[b-whwev6i7xi] {
    font-size: 24px;
    font-weight: 700;
    color: #000;
}

.price-small[b-whwev6i7xi] {
    font-size: 12px;
    color: #666;
}

/* Book Now Button - yellow CTA */
.book-button[b-whwev6i7xi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: #fdb913;
    color: #000;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    font-family: 'Montserrat', sans-serif;
}

.book-button:hover[b-whwev6i7xi] {
    background: #e5a811;
}

/* Reviews Section */
.reviews-section[b-whwev6i7xi] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.reviews-title[b-whwev6i7xi] {
    font-size: 32px;
    font-weight: 600;
    color: #000000;
    text-align: center;
    margin: 0;
}

.reviews-grid[b-whwev6i7xi] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.review-card[b-whwev6i7xi] {
    background: #cccccc;
    border-radius: 20px;
    width: 332px;
    height: 224px;
    overflow: hidden;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-card:hover[b-whwev6i7xi] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.review-image[b-whwev6i7xi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Loading State */
.loading-state[b-whwev6i7xi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.spinner[b-whwev6i7xi] {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e0e0;
    border-top-color: #2a63af;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@@keyframes spin {
    to[b-whwev6i7xi] {
        transform: rotate(360deg);
    }
}

.loading-state p[b-whwev6i7xi] {
    color: #666666;
    font-size: 16px;
}

/* No Results */
.no-results[b-whwev6i7xi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.no-results svg[b-whwev6i7xi] {
    color: #cccccc;
    margin-bottom: 16px;
}

.no-results h2[b-whwev6i7xi] {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #000000;
}

.no-results p[b-whwev6i7xi] {
    font-size: 14px;
    color: #666666;
    margin: 0 0 24px 0;
}

.no-results .book-button[b-whwev6i7xi] {
    padding: 12px 32px;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .main-content[b-whwev6i7xi] {
        padding: 40px 16px;
        padding-top: 80px;
        padding-bottom: 100px;
        gap: 32px;
    }

    .header-title[b-whwev6i7xi] {
        font-size: 26px;
    }

    .header-subtitle[b-whwev6i7xi] {
        font-size: 18px;
    }

    .search-input-group[b-whwev6i7xi] {
        width: 100%;
    }

    .resort-dropdown[b-whwev6i7xi] {
        width: 100%;
        max-width: 316px;
    }

    .accommodation-grid[b-whwev6i7xi] {
        gap: 20px;
    }

    .accommodation-card[b-whwev6i7xi] {
        width: 330px;
        min-width: 330px;
        max-width: 330px;
        min-height: 380px;
    }

    .review-card[b-whwev6i7xi] {
        width: 280px;
        height: 190px;
    }

    .reviews-title[b-whwev6i7xi] {
        font-size: 26px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .main-content[b-whwev6i7xi] {
        padding: 32px 16px;
        padding-top: 72px;
        padding-bottom: 100px;
    }

    .header-title[b-whwev6i7xi] {
        font-size: 24px;
    }

    .header-subtitle[b-whwev6i7xi] {
        font-size: 16px;
    }

    .accommodation-grid[b-whwev6i7xi] {
        flex-direction: column;
        align-items: center;
        overflow-x: visible;
    }

    .accommodation-card[b-whwev6i7xi] {
        width: 300px;
        min-width: 300px;
        max-width: 300px;
        min-height: 360px;
    }

    .accommodation-image-wrap[b-whwev6i7xi],
    .accommodation-image[b-whwev6i7xi] {
        height: 220px;
    }

    .accommodation-details[b-whwev6i7xi] {
        padding: 12px 16px;
    }

    .accommodation-amenities[b-whwev6i7xi] {
        gap: 16px;
    }

    .price-large[b-whwev6i7xi] {
        font-size: 20px;
    }

    .reviews-grid[b-whwev6i7xi] {
        flex-direction: column;
        align-items: center;
    }

    .review-card[b-whwev6i7xi] {
        width: 100%;
        max-width: 332px;
    }

    .resort-dropdown[b-whwev6i7xi] {
        height: 60px;
    }

    .resort-dropdown-text[b-whwev6i7xi] {
        font-size: 20px;
    }

    .experiences-title[b-whwev6i7xi] {
        font-size: 24px;
    }

    .reviews-title[b-whwev6i7xi] {
        font-size: 24px;
    }
}

/* =========================================================================
   Resorts list redesign (matches docs/ui-redesign/screens/16-resorts.html).
   Themed single-column card grid; each card uses data-resort to drive the
   gradient banner, accent stripe and feature pill colour via the global
   redesign CSS palette tokens.
   ========================================================================= */
.resorts-redesign[b-whwev6i7xi] {
    background: #fff;
}

.resorts-redesign__intro[b-whwev6i7xi] {
    padding: 8px 16px 0 !important;
    margin-bottom: 4px;
}
.resorts-redesign__intro p[b-whwev6i7xi] {
    margin: 0;
}

.resorts-redesign__title[b-whwev6i7xi] {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}

.resorts-redesign__search[b-whwev6i7xi] {
    margin-top: 14px;
}

.resorts-redesign__search-input[b-whwev6i7xi] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 12px;
    font-size: 14px;
    background: var(--atkv-bg-alt, #f8fafc);
    box-sizing: border-box;
}

.resorts-redesign__search-input:focus[b-whwev6i7xi] {
    outline: 2px solid var(--atkv-blue, #2a63af);
    outline-offset: 1px;
}

.resorts-redesign__filter[b-whwev6i7xi] {
    margin-top: 12px;
}

.resorts-redesign__filter-select[b-whwev6i7xi] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    box-sizing: border-box;
    cursor: pointer;
}

.resorts-redesign__grid[b-whwev6i7xi] {
    display: grid;
    gap: 14px;
    padding: 0 16px 32px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .resorts-redesign__grid[b-whwev6i7xi] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .resorts-redesign__grid[b-whwev6i7xi] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.resorts-redesign__card[b-whwev6i7xi] {
    padding: 0;
    overflow: hidden;
    text-align: left;
    background: #fff;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.resorts-redesign__card:hover[b-whwev6i7xi] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.resorts-redesign__banner[b-whwev6i7xi] {
    height: 150px;
    position: relative;
}

.resorts-redesign__banner-label[b-whwev6i7xi] {
    position: absolute;
    left: 14px;
    bottom: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}

.resorts-redesign__body[b-whwev6i7xi] {
    padding: 14px 16px;
}

.resorts-redesign__name[b-whwev6i7xi] {
    font-weight: 700;
    font-size: 16px;
    color: var(--atkv-ink, #0f172a);
}

.resorts-redesign__location[b-whwev6i7xi] {
    margin-top: 2px;
}

.resorts-redesign__chips[b-whwev6i7xi] {
    display: flex !important;
    gap: 6px;
    margin: 8px 0 0 !important;
    flex-wrap: wrap;
    width: auto !important;
}
.resorts-redesign__chips .resort-chip[b-whwev6i7xi] {
    flex: 0 0 auto;
    background: #f3f4f6;
    color: #475569;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
}

/* /Pages/Resorts/Rates.razor.rz.scp.css */
.resort-page[b-p41nund7mo] {
    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-p41nund7mo] {
    width: 100%;
    height: 265px;
    background-image: url('/images/resorts/drakensville/resort_hero_2_aerial_resort_pool_mountains.jpg');
    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-p41nund7mo]::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-p41nund7mo] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.resort-navigation[b-p41nund7mo] {
    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-p41nund7mo] {
    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-p41nund7mo] {
    opacity: var(--opacity-hover);
}

.resort-nav-button--active[b-p41nund7mo] {
    border-color: var(--color-primary-blue);
}

.resort-dropdown[b-p41nund7mo] {
    display: none;
}

.filter-buttons[b-p41nund7mo] {
    display: flex;
    flex-wrap: wrap;
    gap: 19px;
    width: 100%;
}

.filter-button[b-p41nund7mo] {
    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-p41nund7mo] {
    background: #e1e0e1;
    border: 2px solid var(--color-primary-blue);
    color: var(--color-primary-blue);
}

.filter-button--filled[b-p41nund7mo] {
    background: var(--color-primary-blue);
    border: none;
    color: var(--color-white);
}

.filter-button:hover[b-p41nund7mo] {
    opacity: var(--opacity-hover);
}

.rate-card[b-p41nund7mo] {
    width: 606px;
    height: 771px;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.rate-card__image[b-p41nund7mo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .resort-page[b-p41nund7mo] {
        padding: var(--spacing-5xl) var(--spacing-lg);
    }

    .resort-navigation[b-p41nund7mo] {
        display: none;
    }

    .resort-dropdown[b-p41nund7mo] {
        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-p41nund7mo] {
        opacity: var(--opacity-hover);
    }

    .resort-dropdown-text[b-p41nund7mo] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-white);
    }

    .resort-dropdown-icon[b-p41nund7mo] {
        width: 34px;
        height: 29px;
    }

    .rate-card[b-p41nund7mo] {
        width: 100%;
        max-width: 606px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .resort-page[b-p41nund7mo] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .filter-buttons[b-p41nund7mo] {
        flex-direction: column;
        max-width: 350px;
    }

    .filter-button[b-p41nund7mo] {
        width: 100%;
    }
}
/* /Pages/Resorts/ResortDetail.razor.rz.scp.css */
/* Resort detail page - matches docs/ui-redesign/screens/17*.html.
   The component uses data-resort on the hero, accent stripe, tab strip
   and main section so the global palette CSS sets --resort-primary etc. */

.main-content[b-e1739z11d7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
}

/* ---------------------------------------------------------------- HERO */
.rd-hero[b-e1739z11d7] {
    position: relative;
    height: 200px;
    overflow: hidden;
    width: 100%;
}

.rd-hero__bg[b-e1739z11d7] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.rd-hero__scrim[b-e1739z11d7] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
}

.rd-hero__back[b-e1739z11d7] {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-hero__title-block[b-e1739z11d7] {
    position: absolute;
    bottom: 14px;
    left: 20px;
    color: #fff;
}

.rd-hero__title[b-e1739z11d7] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

.rd-hero__meta[b-e1739z11d7] {
    font-size: 13px;
    opacity: 0.85;
    margin-top: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

/* Accent stripe directly under the hero */
.rd-accent[b-e1739z11d7] {
    height: 4px;
    width: 100%;
}

/* ---------------------------------------------------------------- TAB STRIP */
/* The .tab-strip base styles live in wwwroot/css/redesign/design-system.css.
   For resort sections we override that horizontal-scrolling underline strip
   with WRAPPED PILLS (#89920): every section stays visible across up to two
   rows, with no horizontal scroll. Scoped selectors win specificity over the
   global .tab-strip. */
.rd-tabs[b-e1739z11d7] {
    flex-wrap: wrap !important;
    overflow: visible !important;
    overflow-x: visible !important;
    border-bottom: none;
    gap: 8px;
    padding: 12px 16px 0;
    margin: 0;
    scroll-snap-type: none;
}

.rd-tabs button[b-e1739z11d7] {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    color: var(--atkv-ink, #0f172a);
    font-size: 12.5px;
    font-weight: 600;
    margin: 0;
    cursor: pointer;
}

/* cancel the underline strip's inter-button spacing/baseline tweaks */
.rd-tabs button + button[b-e1739z11d7] {
    margin-left: 0;
}

.rd-tabs button.active[b-e1739z11d7] {
    background: var(--resort-primary, var(--atkv-blue, #2a63af));
    border-color: var(--resort-primary, var(--atkv-blue, #2a63af));
    color: #fff;
}

/* -------------------------------------------------------- BOOK NOW (hero CTA)
   Theme-coloured Book now button placed between the hero and the section tabs.
   Uses the resort palette via the .resort-cta global class on a [data-resort]
   element; full-width pill, comfortable tap target. */
.rd-book-cta[b-e1739z11d7] {
    padding: 14px 16px 4px;
}

.rd-book-cta__btn[b-e1739z11d7] {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: filter .15s ease, transform .05s ease;
}

.rd-book-cta__btn:hover[b-e1739z11d7] { filter: brightness(0.94); }
.rd-book-cta__btn:active[b-e1739z11d7] { transform: translateY(1px); }
.rd-section[b-e1739z11d7] {
    padding: 16px 16px 32px;
}

.rd-lede[b-e1739z11d7] {
    margin: 0 0 16px;
    color: var(--atkv-text, #1f2937);
    font-size: 14px;
    line-height: 1.6;
}

.rd-empty[b-e1739z11d7] {
    margin: 16px 0;
    color: var(--atkv-muted, #6b7280);
    font-size: 14px;
    text-align: center;
    padding: 24px 16px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px dashed var(--atkv-line, #e5e7eb);
}

/* ---------------------------------------------------------------- ABOUT - quick info
   Key/value card per docs/ui-redesign (resort detail "Quick info"). Each row shows the
   label on the left, value on the right. Admin-managed; hidden entirely when empty. */
.rd-quickinfo__title[b-e1739z11d7] {
    margin: 4px 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}

.rd-quickinfo[b-e1739z11d7] {
    margin: 0 0 18px;
    background: #fff;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}

.rd-quickinfo__row[b-e1739z11d7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
}

.rd-quickinfo__row + .rd-quickinfo__row[b-e1739z11d7] {
    border-top: 1px solid var(--atkv-line, #e5e7eb);
}

.rd-quickinfo__label[b-e1739z11d7] {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--atkv-muted, #6b7280);
}

.rd-quickinfo__value[b-e1739z11d7] {
    flex: 1 1 auto;
    text-align: right;
    font-size: 13px;
    color: var(--atkv-text, #1f2937);
}

/* ---------------------------------------------------------------- ABOUT - amenities
   4-column grid, no cap: every amenity renders and wraps into as many rows as needed.
   Cells are sized smaller so 4 fit comfortably even at mobile width (~393px). */
.rd-overview-amenities[b-e1739z11d7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 6px;
    margin-bottom: 18px;
}

.rd-overview-amenity[b-e1739z11d7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--atkv-text, #1f2937);
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rd-overview-amenity__ico[b-e1739z11d7] {
    font-size: 18px;
    color: var(--resort-primary, #2A6EBB);
    line-height: 1;
}

/* ---------------------------------------------------------------- ABOUT - gallery */
.rd-gallery[b-e1739z11d7] {
    margin-top: 4px;
}

.rd-gallery__hero[b-e1739z11d7] {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--resort-primary, #2A6EBB), var(--resort-secondary, #00B0B9));
}

.rd-gallery__hero img[b-e1739z11d7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rd-gallery__caption[b-e1739z11d7] {
    position: absolute;
    left: 12px;
    bottom: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

.rd-gallery__counter[b-e1739z11d7] {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
}

.rd-gallery__thumbs[b-e1739z11d7] {
    margin-top: 10px;
}

.rd-gallery__thumb[b-e1739z11d7] {
    position: relative;
    flex: 0 0 88px;
    height: 66px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    background: linear-gradient(135deg, var(--resort-primary, #2A6EBB), var(--resort-secondary, #00B0B9));
    transition: border-color 160ms, transform 160ms;
    padding: 0;
}

.rd-gallery__thumb img[b-e1739z11d7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rd-gallery__thumb:active[b-e1739z11d7] {
    transform: scale(0.97);
}

.rd-gallery__thumb.is-active[b-e1739z11d7] {
    border-color: var(--resort-primary, #2A6EBB);
    box-shadow: 0 0 0 1px var(--resort-primary, #2A6EBB);
}

.rd-gallery__thumb-label[b-e1739z11d7] {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 3px;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.rd-gallery__hint[b-e1739z11d7] {
    margin: 8px 0 0;
}

/* ---------------------------------------------------------------- ACCOMMODATION */
.rd-accom-card[b-e1739z11d7] {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
}

.rd-accom-card__img[b-e1739z11d7] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--resort-primary, #2A6EBB);
}

.rd-accom-card__overlay[b-e1739z11d7] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    display: flex;
    align-items: flex-end;
    padding: 14px;
}

.rd-accom-card__title[b-e1739z11d7] {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.rd-accom-card__subtitle[b-e1739z11d7] {
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
}

.rd-accom-types[b-e1739z11d7] {
    font-size: 12px;
    color: var(--atkv-muted, #6b7280);
    margin: 0 0 14px;
}

.rd-accom-types ul[b-e1739z11d7] {
    margin: 6px 0 0 18px;
    padding: 0;
}

.rd-accom-card--premium[b-e1739z11d7] {
    aspect-ratio: 16/10;
    margin-bottom: 18px;
}

.rd-accom-card__badge[b-e1739z11d7] {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--atkv-yellow, #FDB913);
    color: #1f2937;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.rd-row-heading[b-e1739z11d7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 8px;
}

.rd-row-heading h3[b-e1739z11d7] {
    font-size: 14px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
    margin: 0;
}

.rd-row-heading__hint[b-e1739z11d7] {
    font-size: 11px;
    color: var(--atkv-muted, #6b7280);
}

/* ===== Accommodation: selected-unit detail + tappable room list ===== */
.rd-unit-detail[b-e1739z11d7] {
    display: block;
    margin-bottom: 16px;
}

.rd-unit-detail__nophoto[b-e1739z11d7] {
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
}

.rd-unit-meta[b-e1739z11d7] {
    padding: 12px 2px 0;
}

.rd-unit-meta__title[b-e1739z11d7] {
    font-size: 17px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}

.rd-unit-meta__sub[b-e1739z11d7] {
    font-size: 13px;
    color: var(--atkv-muted, #6b7280);
    margin-top: 2px;
}

.rd-unit-meta__price[b-e1739z11d7] {
    font-size: 14px;
    font-weight: 600;
    color: var(--resort-primary, #2A6EBB);
    margin-top: 6px;
}

.rd-unit-list[b-e1739z11d7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rd-unit-row[b-e1739z11d7] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 120ms, background 120ms;
}

.rd-unit-row:hover[b-e1739z11d7] {
    border-color: color-mix(in srgb, var(--resort-primary, #2A6EBB) 40%, #e5e7eb 60%);
}

.rd-unit-row.is-active[b-e1739z11d7] {
    border-color: var(--resort-primary, #2A6EBB);
    background: color-mix(in srgb, var(--resort-primary, #2A6EBB) 6%, white 94%);
}

.rd-unit-row__thumb[b-e1739z11d7] {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--resort-primary, #2A6EBB);
}

.rd-unit-row__text[b-e1739z11d7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rd-unit-row__name[b-e1739z11d7] {
    font-size: 14px;
    font-weight: 600;
    color: var(--atkv-ink, #0f172a);
}

.rd-unit-row__sub[b-e1739z11d7] {
    font-size: 12px;
    color: var(--atkv-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-unit-row__chev[b-e1739z11d7] {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: var(--atkv-muted, #9ca3af);
    padding-right: 6px;
}

.rd-unit-row.is-active .rd-unit-row__chev[b-e1739z11d7] {
    color: var(--resort-primary, #2A6EBB);
}

.rd-accom-card--carousel[b-e1739z11d7] {
    width: 220px;
    aspect-ratio: 4/5;
    flex: 0 0 220px;
}

/* ---------------------------------------------------------------- PRICE BAR */
.rd-price-bar[b-e1739z11d7] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--resort-primary, #2A6EBB) 8%, white 92%);
    border: 1px solid color-mix(in srgb, var(--resort-primary, #2A6EBB) 20%, white 80%);
    border-radius: 14px;
}

.rd-price-bar__price[b-e1739z11d7] {
    font-size: 14px;
    color: var(--atkv-text, #1f2937);
}

.rd-price-bar__price strong[b-e1739z11d7] {
    color: var(--resort-primary, #2A6EBB);
    font-size: 16px;
}

.rd-book-btn[b-e1739z11d7] {
    background: var(--resort-primary, #2A6EBB);
    color: #fff;
    border: 0;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.rd-book-btn:hover[b-e1739z11d7] {
    background: color-mix(in srgb, var(--resort-primary, #2A6EBB) 88%, black 12%);
}

.rd-nightsbridge-note[b-e1739z11d7] {
    margin: 8px 0 0;
    text-align: right;
}

/* ---------------------------------------------------------------- FACILITIES / ENTERTAINMENT */
.rd-facility-grid[b-e1739z11d7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.rd-facility-card[b-e1739z11d7] {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.rd-facility-card__img[b-e1739z11d7] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--resort-primary, #2A6EBB);
}

.rd-facility-card__overlay[b-e1739z11d7] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
    display: flex;
    align-items: flex-end;
    padding: 12px;
}

.rd-facility-card__title[b-e1739z11d7] {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.rd-chip-row[b-e1739z11d7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.rd-chip[b-e1739z11d7] {
    padding: 8px 14px;
    background: var(--resort-primary, #2A6EBB);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* ---------------------------------------------------------------- RATES */
.rd-rate-filter-row[b-e1739z11d7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.rd-rate-filter[b-e1739z11d7] {
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
}

.rd-rate-filter--outlined[b-e1739z11d7] {
    background: color-mix(in srgb, var(--resort-primary, #2A6EBB) 8%, white 92%);
    border: 1.5px solid var(--resort-primary, #2A6EBB);
    color: var(--resort-primary, #2A6EBB);
}

.rd-rate-filter--filled[b-e1739z11d7] {
    background: var(--resort-primary, #2A6EBB);
    color: #fff;
    border: 1.5px solid transparent;
}

.rd-rate-card[b-e1739z11d7] {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    /* Halved vertical size: the old 3/4 (tall portrait) card was twice as tall. */
    aspect-ratio: 3/2;
    margin-bottom: 14px;
}

.rd-rate-card__img[b-e1739z11d7] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--resort-primary, #2A6EBB);
}

.rd-rate-card__overlay[b-e1739z11d7] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(42,99,175,0.95), rgba(0,0,0,0));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 22px 16px;
    gap: 12px;
}

.rd-rate-card__price[b-e1739z11d7] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #fff;
}

.rd-rate-card__label[b-e1739z11d7] {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
}

.rd-rate-card__amount[b-e1739z11d7] {
    font-size: 30px;
    font-weight: 700;
}

.rd-rate-card__unit[b-e1739z11d7] {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
}

.rd-book-btn--on-image[b-e1739z11d7] {
    background: #fff;
    color: var(--resort-primary, #2A6EBB);
    padding: 10px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
}

.rd-book-btn--on-image:hover[b-e1739z11d7] {
    background: #fff;
    color: color-mix(in srgb, var(--resort-primary, #2A6EBB) 88%, black 12%);
}

/* Download-rates anchor on the rate-card image */
.rd-download-btn[b-e1739z11d7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.rd-download-btn i[b-e1739z11d7] {
    font-size: 15px;
}

/* ===== Entertainment: icon + title + description highlight rows ===== */
.rd-features__heading[b-e1739z11d7] {
    font-size: 15px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
    /* Breathing room below the entertainment image gallery (was cramped). */
    margin: 28px 0 14px;
}

.rd-features[b-e1739z11d7] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rd-feature[b-e1739z11d7] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.rd-feature__icon[b-e1739z11d7] {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1.2;
    color: var(--atkv-ink, #0f172a);
    width: 26px;
    text-align: center;
}

.rd-feature__text[b-e1739z11d7] {
    flex: 1 1 auto;
    min-width: 0;
}

.rd-feature__title[b-e1739z11d7] {
    font-size: 15px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
    line-height: 1.3;
}

.rd-feature__desc[b-e1739z11d7] {
    font-size: 13px;
    color: var(--atkv-muted, #6b7280);
    line-height: 1.45;
    margin-top: 2px;
}

/* ===== Rates: season chip (data-driven) ===== */
.rd-rate-season[b-e1739z11d7] {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--resort-primary, #2a63af);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* ===== Events (data-driven) ===== */
.rd-events[b-e1739z11d7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}
.rd-event[b-e1739z11d7] {
    display: flex;
    flex-direction: column;
    border: 1px solid #e3e7ee;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.rd-event__img[b-e1739z11d7] {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: #eef2f8;
}
.rd-event__body[b-e1739z11d7] {
    padding: 12px 14px 14px;
}
.rd-event__date[b-e1739z11d7] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--resort-primary, #2a63af);
}
.rd-event__time[b-e1739z11d7] {
    font-weight: 500;
    color: #6b7480;
    margin-left: 4px;
}
.rd-event__title[b-e1739z11d7] {
    font-size: 16px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
    margin: 4px 0 2px;
}
.rd-event__loc[b-e1739z11d7] {
    font-size: 13px;
    color: #6b7480;
    margin-bottom: 6px;
}
.rd-event__desc[b-e1739z11d7] {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}
.rd-event__price[b-e1739z11d7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--atkv-ink, #0f172a);
}

/* ===== Embedded preview (Resort Admin live preview iframe) ===== */
.rd-embed .rd-hero__back[b-e1739z11d7] {
    display: none;
}
/* /Pages/Resorts/UnitFacilities.razor.rz.scp.css */
.resort-page[b-lao4o1l4ok] {
    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-lao4o1l4ok] {
    width: 100%;
    height: 265px;
    background-image: url('/images/resorts/drakensville/resort_hero_1_golden_hour_dam_drakensberg.jpg');
    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-lao4o1l4ok]::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-lao4o1l4ok] {
    position: relative;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    z-index: 1;
}

.section-navigation[b-lao4o1l4ok] {
    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-lao4o1l4ok] {
    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-lao4o1l4ok] {
    opacity: var(--opacity-hover);
}

.section-nav-button--active[b-lao4o1l4ok] {
    background: var(--color-primary-blue);
    color: var(--color-white);
    height: 60px;
}

.section-dropdown[b-lao4o1l4ok] {
    display: none;
}

.facilities-grid[b-lao4o1l4ok] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 43px;
}

.facility-card[b-lao4o1l4ok] {
    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-lao4o1l4ok] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.facility-card__image[b-lao4o1l4ok] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.facility-card__overlay[b-lao4o1l4ok] {
    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-lao4o1l4ok] {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

/* Tablet Styles (744px and below) */
@media (max-width: 744px) {
    .resort-page[b-lao4o1l4ok] {
        padding: var(--spacing-5xl) var(--spacing-lg);
    }

    .section-navigation[b-lao4o1l4ok] {
        display: none;
    }

    .section-dropdown[b-lao4o1l4ok] {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        max-width: 352px;
        height: 492px;
        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);
    }

    .section-dropdown__selected[b-lao4o1l4ok] {
        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-lao4o1l4ok] {
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary-blue);
    }

    .section-dropdown__icon[b-lao4o1l4ok] {
        width: 34px;
        height: 29px;
    }

    .section-dropdown__items[b-lao4o1l4ok] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
        padding: var(--spacing-xl) 0;
    }

    .section-dropdown__item[b-lao4o1l4ok] {
        padding: 0 var(--spacing-xl);
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary-blue);
        cursor: pointer;
        transition: all var(--transition-base);
    }

    .section-dropdown__item--active[b-lao4o1l4ok] {
        background: var(--color-primary-blue);
        color: var(--color-white);
        height: 70px;
        border-radius: 40px;
        margin: 0 16px;
    }
}

/* Mobile Styles (393px and below) */
@media (max-width: 393px) {
    .resort-page[b-lao4o1l4ok] {
        padding: var(--spacing-4xl) var(--spacing-lg);
        gap: var(--spacing-4xl);
    }

    .facilities-grid[b-lao4o1l4ok] {
        flex-direction: column;
        align-items: center;
    }

    .facility-card[b-lao4o1l4ok] {
        width: 100%;
        max-width: 352px;
    }
}
/* /Pages/Search/Filters.razor.rz.scp.css */
/**
 * ATKV Mobile App - Search Filters Page Styles
 * Design System: ATKV Brand (Figma Design Reference)
 * Pattern: LocationPreference checkbox cards (20px radius, 55px height, blue active state)
 * Mobile-first responsive design
 */

/* ==========================================================================
   Page Container: full-height flex column
   ========================================================================== */

.filters-page[b-3j1e4n5ugg] {
    min-height: 100vh;
    background: linear-gradient(to left, var(--color-white, #ffffff), var(--color-primary-blue, #2a63af));
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    margin: 0 auto;
}

/* ==========================================================================
   Filters Header: gradient bar with back, title, and clear
   ========================================================================== */

.filters-header[b-3j1e4n5ugg] {
    background: linear-gradient(135deg, #2a63af 0%, #1a3b6e 100%);
    padding: 20px 24px;
    color: var(--color-white, #ffffff);
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 0 0 var(--radius-card, 20px) var(--radius-card, 20px);
}

.back-button[b-3j1e4n5ugg] {
    background: none;
    border: none;
    color: var(--color-white, #ffffff);
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    transition: all var(--transition-base, 0.2s);
}

.back-button:hover[b-3j1e4n5ugg] {
    opacity: var(--opacity-hover, 0.8);
}

.back-button:focus-visible[b-3j1e4n5ugg] {
    outline: 3px solid var(--color-white, #ffffff);
    outline-offset: 2px;
    border-radius: 4px;
}

.filters-header h1[b-3j1e4n5ugg] {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: var(--font-weight-semibold, 600);
    margin: 0;
}

.clear-button[b-3j1e4n5ugg] {
    background: none;
    border: none;
    color: var(--color-white, #ffffff);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    text-decoration: underline;
    transition: all var(--transition-base, 0.2s);
}

.clear-button:hover[b-3j1e4n5ugg] {
    opacity: var(--opacity-hover, 0.8);
}

/* ==========================================================================
   Filters Content: scrollable area with checkbox sections
   ========================================================================== */

.filters-content[b-3j1e4n5ugg] {
    flex: 1;
    padding: 32px 24px;
    overflow-y: auto;
    background: var(--color-white, #ffffff);
    border-radius: 60px 60px 0 0;
    margin-top: -20px;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Filter Section: grouped card with title
   ========================================================================== */

.filter-section[b-3j1e4n5ugg] {
    margin-bottom: 32px;
}

.filter-section h2[b-3j1e4n5ugg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-black, #000000);
    margin: 0 0 20px 0;
}

/* ==========================================================================
   Filter Option: LocationPreference checkbox card pattern
   55px height, 20px border-radius, blue active state
   ========================================================================== */

.filter-option[b-3j1e4n5ugg] {
    margin-bottom: 16px;
}

.filter-option:last-child[b-3j1e4n5ugg] {
    margin-bottom: 0;
}

.filter-option label[b-3j1e4n5ugg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-grey, #d1d5db);
    border-radius: 20px;
    height: 55px;
    padding: 0 16px;
    cursor: pointer;
    transition: all var(--transition-base, 0.2s);
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    max-width: 345px;
    box-sizing: border-box;
}

.filter-option label:hover[b-3j1e4n5ugg] {
    border-color: var(--color-primary-blue, #2a63af);
}

.filter-option label:focus-within[b-3j1e4n5ugg] {
    outline: 3px solid var(--color-primary-blue, #2a63af);
    outline-offset: 2px;
}

.filter-option label span[b-3j1e4n5ugg] {
    font-size: 16px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-black, #000000);
}

/* Checkbox: styled to match LocationPreference toggle */
.filter-option input[type="checkbox"][b-3j1e4n5ugg] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: var(--color-primary-blue, #2a63af);
    border-radius: 4px;
    flex-shrink: 0;
}

.filter-option input[type="checkbox"]:checked + span[b-3j1e4n5ugg] {
    color: var(--color-primary-blue, #2a63af);
    font-weight: var(--font-weight-semibold, 600);
}

/* ==========================================================================
   Filters Actions: bottom bar with cancel + apply buttons
   ========================================================================== */

.filters-actions[b-3j1e4n5ugg] {
    padding: 24px;
    background: var(--color-white, #ffffff);
    border-top: 1px solid var(--color-grey, #d1d5db);
    display: flex;
    gap: 16px;
}

/* Secondary Button (Cancel) */
.btn-secondary[b-3j1e4n5ugg] {
    flex: 1;
    height: 55px;
    background: var(--color-white, #ffffff);
    border: 2px solid var(--color-black, #000000);
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-black, #000000);
    cursor: pointer;
    transition: all var(--transition-base, 0.2s);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary:hover[b-3j1e4n5ugg] {
    background: var(--color-gray-100, #f3f4f6);
}

.btn-secondary:active[b-3j1e4n5ugg] {
    background: var(--color-gray-200, #e5e7eb);
}

/* Primary Button (Apply) */
.btn-primary[b-3j1e4n5ugg] {
    flex: 1;
    height: 55px;
    background: var(--color-black, #000000);
    border: none;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-white, #ffffff);
    cursor: pointer;
    transition: all var(--transition-base, 0.2s);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover[b-3j1e4n5ugg] {
    background: var(--color-primary-hover, #333333);
}

.btn-primary:active[b-3j1e4n5ugg] {
    background: var(--color-primary-active, #1a1a1a);
}

/* ==========================================================================
   Tablet Styles (744px and below)
   ========================================================================== */

@media (max-width: 744px) {
    .filters-header[b-3j1e4n5ugg] {
        padding: 16px 20px;
    }

    .filters-header h1[b-3j1e4n5ugg] {
        font-size: 20px;
    }

    .filters-content[b-3j1e4n5ugg] {
        padding: 32px 20px;
    }

    .filter-option label[b-3j1e4n5ugg] {
        max-width: 100%;
    }

    .filters-actions[b-3j1e4n5ugg] {
        padding: 20px;
    }
}

/* ==========================================================================
   Mobile Styles (393px and below)
   ========================================================================== */

@media (max-width: 393px) {
    .filters-content[b-3j1e4n5ugg] {
        padding: 24px 16px;
        border-radius: 40px 40px 0 0;
    }

    .filter-section h2[b-3j1e4n5ugg] {
        font-size: 18px;
    }

    .filters-actions[b-3j1e4n5ugg] {
        padding: 16px;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .back-button[b-3j1e4n5ugg],
    .clear-button[b-3j1e4n5ugg],
    .filter-option label[b-3j1e4n5ugg],
    .btn-primary[b-3j1e4n5ugg],
    .btn-secondary[b-3j1e4n5ugg] {
        transition: none;
    }
}
/* /Pages/Search/Index.razor.rz.scp.css */
/**
 * ATKV Mobile App - Search Page Styles
 * Design System: ATKV Brand (Figma Design Reference)
 * Patterns: home-desktop search bar, accommodation-overview result cards
 * Mobile-first responsive design
 */

/* ==========================================================================
   Page Container
   ========================================================================== */

.search-page[b-abfw9p3zj0] {
    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);
    min-height: 100vh;
    background: #ffffff;
}

/* ==========================================================================
   Search Header: gradient hero area with title + search bar
   ========================================================================== */

.search-header[b-abfw9p3zj0] {
    width: 100%;
    height: 265px;
    background: linear-gradient(135deg, #2a63af 0%, #1a3b6e 100%);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card, 20px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: var(--spacing-3xl, 32px);
    position: relative;
}

.search-header[b-abfw9p3zj0]::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, 20px);
}

.search-header h1[b-abfw9p3zj0] {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-white, #ffffff);
    z-index: 1;
    margin: 0 0 16px 0;
}

/* ==========================================================================
   Search Container: input bar matching home-desktop pattern
   ========================================================================== */

.search-container[b-abfw9p3zj0] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
}

/* ==========================================================================
   Search Results Section
   ========================================================================== */

.search-results[b-abfw9p3zj0] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xl, 48px);
    padding-bottom: 80px;
}

/* Loading, empty and no-results states */
.loading-state[b-abfw9p3zj0],
.no-results[b-abfw9p3zj0],
.empty-state[b-abfw9p3zj0] {
    text-align: center;
    padding: 48px 16px;
    color: var(--color-text-secondary, #666);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: var(--font-weight-medium, 500);
}

/* Results summary count */
.results-summary[b-abfw9p3zj0] {
    margin-bottom: 0;
    color: var(--color-black, #000);
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: var(--font-weight-semibold, 600);
}

/* ==========================================================================
   Results Grid: accommodation-overview card pattern
   ========================================================================== */

.results-list[b-abfw9p3zj0] {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    width: 100%;
}

/* Result Card: accommodation card pattern with 20px radius and gradient overlay */
.result-item[b-abfw9p3zj0] {
    position: relative;
    border-radius: var(--radius-card, 20px);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base, 0.2s);
    width: calc(50% - 16px);
    height: 280px;
    display: flex;
    flex-direction: column;
    background: var(--color-white, #ffffff);
    border: 1.5px solid #b7beb5;
}

.result-item:hover[b-abfw9p3zj0] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
}

/* Result image: fills top portion of card */
.result-image[b-abfw9p3zj0] {
    width: 100%;
    height: 160px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Result text content area */
.result-content[b-abfw9p3zj0] {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.result-title[b-abfw9p3zj0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-black, #000);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Type badge: pill-shaped, primary blue */
.result-type[b-abfw9p3zj0] {
    display: inline-block;
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white, #ffffff);
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
    align-self: flex-start;
}

/* Description: 2-line clamp */
.result-description[b-abfw9p3zj0] {
    color: var(--color-text-secondary, #666);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
}

/* Location text */
.result-location[b-abfw9p3zj0] {
    color: var(--color-text-secondary, #999);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    margin: 0;
}

/* Price: primary yellow accent */
.result-price[b-abfw9p3zj0] {
    color: var(--color-primary-blue, #2a63af);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
    margin: 0;
}

/* ==========================================================================
   Tablet Styles (744px and below)
   ========================================================================== */

@media (max-width: 744px) {
    .search-header[b-abfw9p3zj0] {
        height: 200px;
        padding: var(--spacing-xl, 24px);
    }

    .search-header h1[b-abfw9p3zj0] {
        font-size: 28px;
    }

    .search-container[b-abfw9p3zj0] {
        max-width: 100%;
    }

    .result-item[b-abfw9p3zj0] {
        width: calc(50% - 16px);
        height: 260px;
    }
}

/* ==========================================================================
   Mobile Styles (393px and below)
   ========================================================================== */

@media (max-width: 393px) {
    .search-page[b-abfw9p3zj0] {
        padding: var(--spacing-4xl, 32px) var(--spacing-lg, 16px);
        gap: var(--spacing-4xl, 32px);
    }

    .search-header[b-abfw9p3zj0] {
        height: 180px;
        border-radius: var(--radius-card, 20px);
    }

    .search-header h1[b-abfw9p3zj0] {
        font-size: 24px;
    }

    .results-list[b-abfw9p3zj0] {
        flex-direction: column;
        align-items: center;
    }

    .result-item[b-abfw9p3zj0] {
        width: 100%;
        max-width: 353px;
        height: 260px;
    }

    .results-summary[b-abfw9p3zj0] {
        font-size: 16px;
    }
}
/* /Pages/Support/ContactUs.razor.rz.scp.css */
/**
 * ATKV Mobile App - Contact Us Page Styles
 * Design System: ATKV Brand (Figma Design Reference)
 * Mobile-first responsive design
 */

/* ==========================================================================
   Page Container
   ========================================================================== */

.contact-page[b-khjen09pix] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 16px 80px;
}

.contact-content[b-khjen09pix] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-khjen09pix] {
    text-align: center;
    padding: 8px 0 0;
}

.btn-tickets-link[b-khjen09pix] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 18px;
    background: none;
    border: 1.5px solid var(--color-primary-blue, #2a63af);
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary-blue, #2a63af);
    cursor: pointer;
    transition: 0.2s;
}

.btn-tickets-link:hover[b-khjen09pix] {
    background: rgba(42, 99, 175, 0.06);
}

.page-title[b-khjen09pix] {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.page-subtitle[b-khjen09pix] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary, #666);
    margin: 0;
    line-height: 1.5;
}

.section-title[b-khjen09pix] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0 0 20px 0;
}

/* ==========================================================================
   Success Banner
   ========================================================================== */

.success-banner[b-khjen09pix] {
    background: var(--color-white, #ffffff);
    border-radius: 24px;
    padding: 36px 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.success-icon[b-khjen09pix] {
    color: var(--color-success, #16a34a);
    margin-bottom: 16px;
}

.success-icon svg[b-khjen09pix] {
    width: 56px;
    height: 56px;
}

.success-content h3[b-khjen09pix] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0 0 12px 0;
}

.success-content p[b-khjen09pix] {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: var(--color-text-secondary, #666);
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.ticket-number[b-khjen09pix] {
    background: var(--color-gray-100, #f3f4f6);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    margin: 16px 0 !important;
    display: inline-block;
}

.success-actions[b-khjen09pix] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.btn-secondary[b-khjen09pix] {
    width: 100%;
    height: 50px;
    background: var(--color-white, #ffffff);
    border: 1.5px solid var(--color-black, #000);
    border-radius: 14px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-black, #000);
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary:hover[b-khjen09pix] {
    background: var(--color-gray-100, #f3f4f6);
}

/* ==========================================================================
   Contact Form Section
   ========================================================================== */

.contact-form-section[b-khjen09pix] {
    background: var(--color-white, #ffffff);
    border-radius: 24px;
    padding: 28px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.contact-form[b-khjen09pix] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ==========================================================================
   Form Groups
   ========================================================================== */

.form-group[b-khjen09pix] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.form-label[b-khjen09pix] {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black, #000);
}

.required[b-khjen09pix] {
    color: var(--color-error, #dc2626);
}

.form-input[b-khjen09pix],
.form-select[b-khjen09pix] {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1.5px solid #d1d5db;
    border-radius: 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-black, #000);
    background: var(--color-white, #ffffff);
    transition: 0.2s;
    box-sizing: border-box;
    outline: none;
}

.form-textarea[b-khjen09pix] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #d1d5db;
    border-radius: 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-black, #000);
    background: var(--color-white, #ffffff);
    transition: 0.2s;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    min-height: 120px;
}

.form-input:focus[b-khjen09pix],
.form-select:focus[b-khjen09pix],
.form-textarea:focus[b-khjen09pix] {
    border-color: var(--color-primary-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.form-input[b-khjen09pix]::placeholder,
.form-textarea[b-khjen09pix]::placeholder {
    color: var(--color-text-placeholder, #9ca3af);
}

/* Error states */
.form-input.error[b-khjen09pix],
.form-select.error[b-khjen09pix],
.form-textarea.error[b-khjen09pix] {
    border-color: var(--color-error, #dc2626);
}

.form-input.error:focus[b-khjen09pix],
.form-select.error:focus[b-khjen09pix],
.form-textarea.error:focus[b-khjen09pix] {
    border-color: var(--color-error, #dc2626);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

.readonly-field[b-khjen09pix] {
    background-color: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

.readonly-field:focus[b-khjen09pix] {
    border-color: #e5e7eb;
    box-shadow: none;
}

.character-count[b-khjen09pix] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--color-text-secondary, #666);
    text-align: right;
}

.error-message[b-khjen09pix] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--color-error, #dc2626);
}

.general-error[b-khjen09pix] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid var(--color-error, #dc2626);
    border-radius: 14px;
    color: var(--color-error, #dc2626);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

/* ==========================================================================
   Form Actions
   ========================================================================== */

.form-actions[b-khjen09pix] {
    margin-top: 4px;
}

.btn-primary[b-khjen09pix] {
    width: 100%;
    height: 50px;
    background: var(--color-black, #000000);
    border: none;
    border-radius: 14px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-white, #ffffff);
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary:hover:not(:disabled)[b-khjen09pix] {
    background: #333;
}

.btn-primary:active:not(:disabled)[b-khjen09pix] {
    background: #1a1a1a;
}

.btn-primary:disabled[b-khjen09pix] {
    background: var(--color-gray-400, #9ca3af);
    cursor: not-allowed;
}

.btn-large[b-khjen09pix] {
    padding: 14px 28px;
}

/* Spinner animation */
.spinner-small[b-khjen09pix] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate-b-khjen09pix 0.75s linear infinite;
}

@keyframes spinner-rotate-b-khjen09pix {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Contact Info Cards
   ========================================================================== */

.contact-info-section[b-khjen09pix] {
    width: 100%;
}

.contact-info-grid[b-khjen09pix] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.contact-info-card[b-khjen09pix] {
    background: var(--color-white, #ffffff);
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.2s;
}

.contact-info-card:hover[b-khjen09pix] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.contact-icon[b-khjen09pix] {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon.phone[b-khjen09pix] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.contact-icon.email[b-khjen09pix] {
    background: rgba(42, 99, 175, 0.1);
    color: var(--color-primary-blue, #2a63af);
}

.contact-icon.location[b-khjen09pix] {
    background: rgba(253, 185, 19, 0.15);
    color: #d97706;
}

.contact-info-card h3[b-khjen09pix] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0 0 8px 0;
}

.contact-info-card p[b-khjen09pix] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary, #666);
    margin: 4px 0;
}

.contact-info-card a[b-khjen09pix] {
    color: var(--color-primary-blue, #2a63af);
    text-decoration: none;
    font-weight: 500;
}

.contact-info-card a:hover[b-khjen09pix] {
    text-decoration: underline;
}

.contact-hours[b-khjen09pix] {
    font-size: 12px !important;
    color: var(--color-text-tertiary, #999) !important;
    margin-top: 6px !important;
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */

.faq-section[b-khjen09pix] {
    width: 100%;
}

.faq-list[b-khjen09pix] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item[b-khjen09pix] {
    background: var(--color-white, #ffffff);
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px 18px;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s;
}

.faq-item:hover[b-khjen09pix] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.faq-question[b-khjen09pix] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.faq-question h3[b-khjen09pix] {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0;
    flex: 1;
    line-height: 1.4;
}

.faq-icon[b-khjen09pix] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: var(--color-primary-yellow, #fdb913);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.faq-icon:hover[b-khjen09pix] {
    opacity: 0.85;
}

.faq-icon svg[b-khjen09pix] {
    width: 20px;
    height: 20px;
    stroke: var(--color-black, #000);
}

.faq-item.expanded .faq-icon[b-khjen09pix] {
    transform: rotate(180deg);
}

.faq-answer[b-khjen09pix] {
    padding-top: 14px;
    color: var(--color-text-secondary, #666);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    animation: fadeIn-b-khjen09pix 0.3s ease;
}

.faq-answer p[b-khjen09pix] {
    margin: 0;
    overflow-wrap: anywhere; /* long bare URLs from the May 2026 FAQ rewrite can wrap mid-string */
}

/* Anchor styling for auto-linkified URLs in FAQ answers */
.faq-answer p a[b-khjen09pix] {
    color: var(--color-primary-blue, #2a63af);
    text-decoration: underline;
    font-weight: 500;
}
.faq-answer p a:hover[b-khjen09pix] { text-decoration: none; }

/* ==========================================================================
   Tablet and up (744px+)
   ========================================================================== */

@media (min-width: 744px) {
    .contact-page[b-khjen09pix] {
        gap: 40px;
        padding: 32px 24px 80px;
    }

    .contact-content[b-khjen09pix] {
        gap: 40px;
    }

    .page-title[b-khjen09pix] {
        font-size: 34px;
    }

    .page-subtitle[b-khjen09pix] {
        font-size: 18px;
    }

    .section-title[b-khjen09pix] {
        font-size: 24px;
    }

    .contact-form-section[b-khjen09pix] {
        border-radius: 32px;
        padding: 40px 36px;
    }

    .success-banner[b-khjen09pix] {
        border-radius: 32px;
        padding: 48px 36px;
    }

    .contact-info-grid[b-khjen09pix] {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .contact-info-card[b-khjen09pix] {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .faq-item[b-khjen09pix] {
        padding: 20px 24px;
        border-radius: 20px;
    }

    .faq-question h3[b-khjen09pix] {
        font-size: 17px;
    }

    .form-label[b-khjen09pix] {
        font-size: 16px;
    }
}

/* ==========================================================================
   Desktop (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
    .contact-page[b-khjen09pix] {
        gap: 48px;
        padding: 40px 32px 80px;
    }

    .contact-content[b-khjen09pix] {
        gap: 48px;
    }

    .page-title[b-khjen09pix] {
        font-size: 36px;
    }

    .page-subtitle[b-khjen09pix] {
        font-size: 20px;
    }

    .contact-form-section[b-khjen09pix] {
        border-radius: 40px;
        padding: 48px 40px;
    }

    .success-banner[b-khjen09pix] {
        border-radius: 40px;
        padding: 48px 40px;
    }

    .form-input[b-khjen09pix],
    .form-select[b-khjen09pix] {
        height: 55px;
    }

    .btn-primary[b-khjen09pix], .btn-secondary[b-khjen09pix] {
        height: 55px;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeIn-b-khjen09pix {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .btn-primary[b-khjen09pix],
    .btn-secondary[b-khjen09pix],
    .faq-item[b-khjen09pix],
    .faq-icon[b-khjen09pix],
    .contact-info-card[b-khjen09pix],
    .form-input[b-khjen09pix],
    .form-select[b-khjen09pix],
    .form-textarea[b-khjen09pix],
    .spinner-small[b-khjen09pix] {
        transition: none;
        animation: none;
    }

    .faq-answer[b-khjen09pix] {
        animation: none;
    }
}

/* =========================================================================
   Contact redesign (matches docs/ui-redesign/screens/26-support-contact.html).
   Appbar with back, "Get in touch" intro, channel cards. The form below
   stays as-is so existing ticket-creation logic is preserved.
   ========================================================================= */
/* Contact page appbar: white surface with the resort-detail layout.
   The global .appbar .icon-btn rule paints the arrow white (for blue
   headers), so we restyle the back button to a circular dark-on-light
   icon button that reads against the white background.

   On desktop (>=744px) the MainLayout top nav already shows location
   and provides navigation, so the in-page appbar is redundant. Hide it. */
@media (min-width: 744px) {
    .contact-redesign__appbar[b-khjen09pix] {
        display: none;
    }
}

.contact-redesign__appbar[b-khjen09pix] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--atkv-line, #e5e7eb);
}

/* The inner .row holds back-button + title side-by-side */
.contact-redesign__appbar > .row[b-khjen09pix] {
    gap: 12px;
}

/* Override the global .appbar .icon-btn (white-on-blue) for this
   white appbar. Circular ink-coloured icon button. */
.contact-redesign__appbar .icon-btn[b-khjen09pix] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--atkv-ink, #0f172a);
    font-size: 18px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}
.contact-redesign__appbar .icon-btn:hover[b-khjen09pix] {
    background: var(--atkv-bg-alt, #f3f4f6);
}

.contact-redesign__appbar-title[b-khjen09pix] {
    font-weight: 600;
    font-size: 16px;
    color: var(--atkv-ink, #0f172a);
    margin: 0;
}

/* Centered intro block: page title, subtitle, "View my requests" pill.
   Replaces the previous channel-cards row (a bad port from the mobile
   redesign mock - the contact page should land on the form, not a row
   of action cards). Matches the screenshot the user shared on 29 May. */
.contact-redesign__intro[b-khjen09pix] {
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.contact-redesign__title[b-khjen09pix] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}

.contact-redesign__subtitle[b-khjen09pix] {
    margin: 0;
    max-width: 560px;
    color: var(--atkv-muted, #6b7280);
    font-size: 14px;
    line-height: 1.5;
}

/* "View my requests" pill - outline blue, small icon, rounded full */
.contact-redesign__view-requests[b-khjen09pix] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--atkv-blue, #2a63af);
    color: var(--atkv-blue, #2a63af);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.contact-redesign__view-requests:hover[b-khjen09pix] {
    background: var(--atkv-blue-50, #eef2f9);
}
.contact-redesign__view-requests i[b-khjen09pix] {
    font-size: 14px;
    line-height: 1;
}
/* /Pages/Support/MyTickets.razor.rz.scp.css */
/**
 * ATKV Mobile App - My Tickets Page Styles
 * Design System: ATKV Brand (matching ContactUs patterns)
 */

.tickets-page[b-2so71rh0n9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 16px 80px;
}

.tickets-content[b-2so71rh0n9] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-header[b-2so71rh0n9] {
    text-align: center;
    padding: 8px 0 0;
}

.page-title[b-2so71rh0n9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0 0 8px 0;
}

.page-subtitle[b-2so71rh0n9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary, #666);
    margin: 0;
    line-height: 1.5;
}

/* Actions Bar */
.tickets-actions[b-2so71rh0n9] {
    display: flex;
    justify-content: flex-end;
}

.btn-primary[b-2so71rh0n9] {
    background: var(--color-black, #000000);
    border: none;
    border-radius: 16px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white, #ffffff);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

.btn-primary:hover:not(:disabled)[b-2so71rh0n9] {
    background: #333;
}

.btn-primary:disabled[b-2so71rh0n9] {
    background: var(--color-gray-400, #9ca3af);
    cursor: not-allowed;
}

.btn-secondary[b-2so71rh0n9] {
    background: var(--color-white, #ffffff);
    border: 1.5px solid var(--color-black, #000);
    border-radius: 16px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-black, #000);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

.btn-secondary:hover[b-2so71rh0n9] {
    background: var(--color-gray-100, #f3f4f6);
}

/* Loading */
.loading-container[b-2so71rh0n9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 64px 0;
    color: var(--color-text-secondary, #666);
    font-family: 'Montserrat', sans-serif;
}

.spinner[b-2so71rh0n9] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-gray-200, #e5e7eb);
    border-top-color: var(--color-primary-blue, #2a63af);
    border-radius: 50%;
    animation: spin-b-2so71rh0n9 0.8s linear infinite;
}

.spinner-small[b-2so71rh0n9] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-2so71rh0n9 0.75s linear infinite;
}

@keyframes spin-b-2so71rh0n9 {
    to { transform: rotate(360deg); }
}

/* Error Banner */
.error-banner[b-2so71rh0n9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid var(--color-error, #dc2626);
    border-radius: 20px;
    color: var(--color-error, #dc2626);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.btn-retry[b-2so71rh0n9] {
    margin-left: auto;
    background: none;
    border: 1px solid var(--color-error, #dc2626);
    border-radius: 12px;
    padding: 6px 16px;
    color: var(--color-error, #dc2626);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    cursor: pointer;
}

/* Empty State */
.empty-state[b-2so71rh0n9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 64px 32px;
    color: var(--color-text-secondary, #666);
}

.empty-state svg[b-2so71rh0n9] {
    opacity: 0.4;
}

.empty-state h3[b-2so71rh0n9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0;
}

.empty-state p[b-2so71rh0n9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    margin: 0 0 8px 0;
}

/* Filter Tabs */
.filter-tabs[b-2so71rh0n9] {
    display: flex;
    gap: 0;
    background: var(--color-gray-100, #f3f4f6);
    border-radius: 16px;
    padding: 4px;
}

.filter-tab[b-2so71rh0n9] {
    flex: 1;
    background: none;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary, #666);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.filter-tab:hover:not(.active)[b-2so71rh0n9] {
    color: var(--color-black, #000);
}

.filter-tab.active[b-2so71rh0n9] {
    background: var(--color-white, #ffffff);
    color: var(--color-black, #000);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-count[b-2so71rh0n9] {
    background: var(--color-gray-200, #e5e7eb);
    color: var(--color-text-secondary, #666);
    font-size: 12px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}

.filter-tab.active .filter-count[b-2so71rh0n9] {
    background: var(--color-primary-blue, #2a63af);
    color: var(--color-white, #ffffff);
}

/* Ticket List */
.ticket-list[b-2so71rh0n9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ticket-card[b-2so71rh0n9] {
    background: var(--color-white, #ffffff);
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.ticket-card:hover[b-2so71rh0n9] {
    border-color: var(--color-primary-blue, #2a63af);
    box-shadow: 0 4px 12px rgba(42, 99, 175, 0.1);
}

.ticket-card.unread[b-2so71rh0n9] {
    border-left: 4px solid var(--color-primary-blue, #2a63af);
}

.ticket-header[b-2so71rh0n9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ticket-id[b-2so71rh0n9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #666);
}

.ticket-status[b-2so71rh0n9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-open[b-2so71rh0n9] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.status-pending[b-2so71rh0n9] {
    background: rgba(253, 185, 19, 0.15);
    color: #d97706;
}

.status-resolved[b-2so71rh0n9] {
    background: rgba(42, 99, 175, 0.1);
    color: var(--color-primary-blue, #2a63af);
}

.status-closed[b-2so71rh0n9] {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-text-secondary, #666);
}

.ticket-subject[b-2so71rh0n9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.unread-dot[b-2so71rh0n9] {
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: var(--color-primary-blue, #2a63af);
    border-radius: 50%;
}

.ticket-meta[b-2so71rh0n9] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--color-text-secondary, #666);
}

.ticket-category[b-2so71rh0n9] {
    background: var(--color-gray-100, #f3f4f6);
    padding: 2px 10px;
    border-radius: 8px;
}

.ticket-replies[b-2so71rh0n9] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ticket-header-badges[b-2so71rh0n9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-priority[b-2so71rh0n9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    display: none;
}

.priority-high[b-2so71rh0n9], .priority-urgent[b-2so71rh0n9] {
    display: inline-block;
}

.priority-high[b-2so71rh0n9] {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.priority-urgent[b-2so71rh0n9] {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* Load More */
.load-more[b-2so71rh0n9] {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

/* Tablet and up (744px+) */
@media (min-width: 744px) {
    .tickets-page[b-2so71rh0n9] {
        padding: 32px 24px 80px;
    }

    .tickets-content[b-2so71rh0n9] {
        gap: 32px;
    }

    .page-title[b-2so71rh0n9] {
        font-size: 34px;
    }

    .page-subtitle[b-2so71rh0n9] {
        font-size: 18px;
    }

    .ticket-card[b-2so71rh0n9] {
        padding: 20px 24px;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .tickets-page[b-2so71rh0n9] {
        padding: 40px 32px 80px;
    }

    .page-title[b-2so71rh0n9] {
        font-size: 36px;
    }

    .page-subtitle[b-2so71rh0n9] {
        font-size: 20px;
    }
}

@media (max-width: 393px) {
    .page-title[b-2so71rh0n9] {
        font-size: 24px;
    }

    .ticket-meta[b-2so71rh0n9] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner[b-2so71rh0n9], .spinner-small[b-2so71rh0n9], .ticket-card[b-2so71rh0n9] {
        transition: none;
        animation: none;
    }
}

/* =========================================================================
   My tickets redesign (matches docs/ui-redesign/screens/27-support-tickets.html).
   Appbar with back, tab strip (Open / Resolved / All), open-new-ticket
   CTA at the bottom.
   ========================================================================= */
.tickets-redesign[b-2so71rh0n9] {
    background: #fff;
    min-height: 100vh;
}

/* Override the centered/padded layout that .tickets-page imposes - the
   redesigned page needs the appbar to span edge-to-edge and the body
   to use its own padding. */
.tickets-redesign[b-2so71rh0n9] {
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 100% !important;
}
.tickets-redesign .tickets-content[b-2so71rh0n9] {
    padding: 0 16px 32px;
    max-width: 600px;
    gap: 16px;
}

/* Blue appbar matching docs/ui-redesign/screens/27-support-tickets.html. */
.tickets-redesign__appbar[b-2so71rh0n9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--atkv-blue, #2a63af);
    color: #fff;
    border-bottom: 0;
}
.tickets-redesign__appbar .appbar-row[b-2so71rh0n9] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.tickets-redesign__appbar .icon-btn[b-2so71rh0n9] {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
}

.tickets-redesign__appbar-title[b-2so71rh0n9] {
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}

.tickets-redesign__intro[b-2so71rh0n9] {
    padding: 24px 16px 0;
}

.tickets-redesign__title[b-2so71rh0n9] {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}

.tickets-redesign__tabs[b-2so71rh0n9] {
    margin-top: 14px;
}

.tickets-redesign__new-ticket[b-2so71rh0n9] {
    padding: 16px 16px 32px;
}

/* Large blue "+ Open a new ticket" CTA at bottom, matches prototype. */
.tickets-redesign__cta[b-2so71rh0n9] {
    display: block;
    width: 100%;
    padding: 16px 20px;
    background: var(--atkv-blue, #2a63af);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
}
.tickets-redesign__cta:hover[b-2so71rh0n9] {
    background: #1e4a8c;
}

/* Minimal empty state. Padded to take the vertical space ~2 ticket cards
   would occupy so the bottom "+ Open a new ticket" CTA lands in the same
   y-position as the prototype's CTA. */
.empty-state--minimal[b-2so71rh0n9] {
    padding: 70px 16px 60px;
    text-align: center;
    color: #6b7280;
}
.empty-state--minimal h3[b-2so71rh0n9] {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}
.empty-state--minimal p[b-2so71rh0n9] {
    margin: 0;
    font-size: 13px;
}
/* /Pages/Support/TicketDetail.razor.rz.scp.css */
/**
 * ATKV Mobile App - Ticket Detail Page Styles
 * Design System: ATKV Brand (matching ContactUs patterns)
 */

.ticket-detail-page[b-7y20wqn85d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 16px 80px;
}

.ticket-detail-content[b-7y20wqn85d] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Back Button */
.btn-back[b-7y20wqn85d] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 8px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-primary-blue, #2a63af);
    cursor: pointer;
    transition: 0.2s;
    align-self: flex-start;
}

.btn-back:hover[b-7y20wqn85d] {
    opacity: 0.7;
}

/* Loading */
.loading-container[b-7y20wqn85d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 64px 0;
    color: var(--color-text-secondary, #666);
    font-family: 'Montserrat', sans-serif;
}

.spinner[b-7y20wqn85d] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-gray-200, #e5e7eb);
    border-top-color: var(--color-primary-blue, #2a63af);
    border-radius: 50%;
    animation: spin-b-7y20wqn85d 0.8s linear infinite;
}

.spinner-small[b-7y20wqn85d] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-7y20wqn85d 0.75s linear infinite;
}

@keyframes spin-b-7y20wqn85d {
    to { transform: rotate(360deg); }
}

/* Error Banner */
.error-banner[b-7y20wqn85d] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid var(--color-error, #dc2626);
    border-radius: 20px;
    color: var(--color-error, #dc2626);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

/* Ticket Header Card */
.ticket-header-card[b-7y20wqn85d] {
    background: var(--color-white, #ffffff);
    border-radius: 20px;
    padding: 20px 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ticket-header-top[b-7y20wqn85d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ticket-id[b-7y20wqn85d] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary, #666);
}

.ticket-status[b-7y20wqn85d] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-open[b-7y20wqn85d] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.status-pending[b-7y20wqn85d] {
    background: rgba(253, 185, 19, 0.15);
    color: #d97706;
}

.status-resolved[b-7y20wqn85d] {
    background: rgba(42, 99, 175, 0.1);
    color: var(--color-primary-blue, #2a63af);
}

.status-closed[b-7y20wqn85d] {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-text-secondary, #666);
}

.ticket-subject[b-7y20wqn85d] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.ticket-meta-row[b-7y20wqn85d] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.meta-tag[b-7y20wqn85d] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    background: var(--color-gray-100, #f3f4f6);
    padding: 4px 12px;
    border-radius: 10px;
    color: var(--color-text-secondary, #666);
}

.meta-priority[b-7y20wqn85d] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px;
}

.priority-low[b-7y20wqn85d] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.priority-medium[b-7y20wqn85d] {
    background: rgba(42, 99, 175, 0.1);
    color: var(--color-primary-blue, #2a63af);
}

.priority-high[b-7y20wqn85d] {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.priority-urgent[b-7y20wqn85d] {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.meta-date[b-7y20wqn85d] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--color-text-secondary, #666);
}

.ticket-agent[b-7y20wqn85d] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary, #666);
}

/* Conversation Thread */
.conversation-thread[b-7y20wqn85d] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title[b-7y20wqn85d] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-black, #000);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.conversation-count[b-7y20wqn85d] {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-secondary, #666);
}

/* Conversation Entries */
.conversation-entry[b-7y20wqn85d] {
    border-radius: 16px;
    padding: 16px 18px;
    animation: fadeIn-b-7y20wqn85d 0.3s ease;
}

.entry-incoming[b-7y20wqn85d] {
    background: var(--color-primary-blue, #2a63af);
    color: white;
    margin-left: 0;
    margin-right: 12px;
}

.entry-outgoing[b-7y20wqn85d] {
    background: var(--color-white, #ffffff);
    border: 1.5px solid #e5e7eb;
    margin-left: 12px;
    margin-right: 0;
}

.original-message[b-7y20wqn85d] {
    margin-left: 0;
    margin-right: 0;
    border: 1.5px solid #e5e7eb;
    background: var(--color-gray-50, #f9fafb);
}

.entry-header[b-7y20wqn85d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
}

.entry-author[b-7y20wqn85d] {
    font-weight: 600;
}

.entry-incoming .entry-author[b-7y20wqn85d] {
    color: rgba(255, 255, 255, 0.9);
}

.entry-outgoing .entry-author[b-7y20wqn85d] {
    color: var(--color-black, #000);
}

.entry-date[b-7y20wqn85d] {
    font-weight: 400;
    opacity: 0.7;
}

.agent-badge[b-7y20wqn85d] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.entry-body[b-7y20wqn85d] {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

.entry-incoming .entry-body[b-7y20wqn85d] {
    color: rgba(255, 255, 255, 0.95);
}

.entry-outgoing .entry-body[b-7y20wqn85d] {
    color: var(--color-text-primary, #333);
}

.entry-body p[b-7y20wqn85d] {
    margin: 0 0 8px 0;
}

.entry-body p:last-child[b-7y20wqn85d] {
    margin-bottom: 0;
}

/* Attachments */
.entry-attachments[b-7y20wqn85d] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.entry-outgoing .entry-attachments[b-7y20wqn85d] {
    border-top-color: #e5e7eb;
}

.attachment-link[b-7y20wqn85d] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.2s;
}

.entry-incoming .attachment-link[b-7y20wqn85d] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.entry-outgoing .attachment-link[b-7y20wqn85d] {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-primary-blue, #2a63af);
}

.attachment-link:hover[b-7y20wqn85d] {
    opacity: 0.8;
}

/* Reply Section */
.reply-section[b-7y20wqn85d] {
    background: var(--color-white, #ffffff);
    border-radius: 20px;
    padding: 20px 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.reply-form[b-7y20wqn85d] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reply-textarea[b-7y20wqn85d] {
    width: 100%;
    padding: 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: var(--color-black, #000);
    background: var(--color-white, #ffffff);
    resize: vertical;
    min-height: 100px;
    outline: none;
    transition: 0.2s;
    box-sizing: border-box;
}

.reply-textarea:focus[b-7y20wqn85d] {
    border-color: var(--color-primary-blue, #2a63af);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.reply-textarea.error[b-7y20wqn85d] {
    border-color: var(--color-error, #dc2626);
}

.error-message[b-7y20wqn85d] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--color-error, #dc2626);
}

.reply-actions[b-7y20wqn85d] {
    display: flex;
    justify-content: flex-end;
}

.btn-primary[b-7y20wqn85d] {
    background: var(--color-black, #000000);
    border: none;
    border-radius: 16px;
    padding: 12px 28px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-white, #ffffff);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

.btn-primary:hover:not(:disabled)[b-7y20wqn85d] {
    background: #333;
}

.btn-primary:disabled[b-7y20wqn85d] {
    background: var(--color-gray-400, #9ca3af);
    cursor: not-allowed;
}

/* Closed Notice */
.closed-notice[b-7y20wqn85d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    background: var(--color-gray-100, #f3f4f6);
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: var(--color-text-secondary, #666);
}

/* Tablet and up (744px+) */
@media (min-width: 744px) {
    .ticket-detail-page[b-7y20wqn85d] {
        padding: 32px 24px 80px;
    }

    .ticket-detail-content[b-7y20wqn85d] {
        gap: 24px;
    }

    .ticket-header-card[b-7y20wqn85d], .reply-section[b-7y20wqn85d] {
        padding: 28px 32px;
    }

    .ticket-subject[b-7y20wqn85d] {
        font-size: 24px;
    }

    .entry-incoming[b-7y20wqn85d] {
        margin-right: 32px;
    }

    .entry-outgoing[b-7y20wqn85d] {
        margin-left: 32px;
    }

    .conversation-entry[b-7y20wqn85d] {
        padding: 20px 24px;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .ticket-detail-page[b-7y20wqn85d] {
        padding: 40px 32px 80px;
    }
}

@media (max-width: 393px) {
    .ticket-subject[b-7y20wqn85d] {
        font-size: 18px;
    }

    .entry-incoming[b-7y20wqn85d] {
        margin-right: 4px;
    }

    .entry-outgoing[b-7y20wqn85d] {
        margin-left: 4px;
    }

    .original-message[b-7y20wqn85d] {
        margin-left: 0;
        margin-right: 0;
    }

    .ticket-meta-row[b-7y20wqn85d] {
        gap: 8px;
    }
}

@keyframes fadeIn-b-7y20wqn85d {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .spinner[b-7y20wqn85d], .spinner-small[b-7y20wqn85d], .conversation-entry[b-7y20wqn85d] {
        transition: none;
        animation: none;
    }
}
/* /Pages/Wallet/Index.razor.rz.scp.css */
/**
 * ATKV Wallet Index Page Styles
 * Aligned to Figma wallet-desktop.html design specs
 * Breakpoints: 393px (mobile), 744px (tablet), desktop (default)
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.wallet-page[b-jifmvcoi4v] {
    min-height: 100vh;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
}

.wallet-content[b-jifmvcoi4v] {
    flex: 1;
    padding: 48px 24px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* ==========================================================================
   Wallet Navigation Pill (Desktop/Tablet)
   ========================================================================== */

.wallet-navigation[b-jifmvcoi4v] {
    display: none;
}

.wallet-nav-button[b-jifmvcoi4v] {
    height: 71px;
    padding: 0 24px;
    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);
    font-family: var(--font-family-primary);
}

.wallet-nav-button--active[b-jifmvcoi4v] {
    background: var(--color-white);
    color: var(--color-primary-blue);
}

.wallet-nav-button--inactive[b-jifmvcoi4v] {
    background: var(--color-primary-blue);
    color: var(--color-white);
    flex: 1;
    max-width: 398px;
}

.wallet-nav-button--inactive:hover[b-jifmvcoi4v] {
    opacity: var(--opacity-hover);
}

/* ==========================================================================
   Wallet Mobile Tabs (Hidden on Desktop)
   ========================================================================== */

.wallet-mobile-tabs[b-jifmvcoi4v] {
    display: none !important;
}

/* ==========================================================================
   Balance Cards
   ========================================================================== */

.wallet-cards-container[b-jifmvcoi4v] {
    display: flex;
    gap: 48px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Wallet carousel dots: hidden on desktop (cards sit side-by-side); shown
   on mobile / tablet where the cards become a swipeable carousel. */
.wallet-cards-dots[b-jifmvcoi4v] {
    display: none;
}

.wallet-balance-card[b-jifmvcoi4v] {
    width: 603px;
    height: 280px;
    background: linear-gradient(to left, var(--color-white) 0%, var(--color-primary-blue) 100%);
    border: 2px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.wallet-balance-card--active[b-jifmvcoi4v] {
    opacity: 1;
    box-shadow: 0 4px 16px rgba(42, 99, 175, 0.25);
}

.wallet-balance-card:hover[b-jifmvcoi4v] {
    opacity: 1;
}

.wallet-card-header[b-jifmvcoi4v] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.wallet-balance-title[b-jifmvcoi4v] {
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    line-height: var(--line-height-tight);
    margin: 0;
}

.wallet-link-button[b-jifmvcoi4v] {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    padding: 16px 40px;
    border-radius: 16px;
    font-size: 27px;
    font-weight: var(--font-weight-semibold);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family-primary);
    white-space: nowrap;
}

.wallet-link-button:hover[b-jifmvcoi4v] {
    opacity: var(--opacity-hover);
}

.wallet-balance-display[b-jifmvcoi4v] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wallet-icon-circle[b-jifmvcoi4v] {
    width: 77px;
    height: 74px;
    background: var(--color-white);
    border: 2px solid var(--card-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wallet-coin-icon[b-jifmvcoi4v] {
    font-size: 32px;
    color: var(--color-primary-blue);
}

.wallet-amount[b-jifmvcoi4v] {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
}

.wallet-balance-spinner[b-jifmvcoi4v] {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(42, 99, 175, 0.2);
    border-top-color: var(--color-primary-blue);
    border-radius: 50%;
    animation: wallet-balance-spin-b-jifmvcoi4v 0.8s linear infinite;
}

@keyframes wallet-balance-spin-b-jifmvcoi4v {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Quick Actions Row
   ========================================================================== */

.wallet-quick-actions[b-jifmvcoi4v] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.wallet-quick-action-btn[b-jifmvcoi4v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 24px;
    border: 2px solid var(--color-primary-blue, #2a63af);
    border-radius: 16px;
    background: white;
    color: var(--color-primary-blue, #2a63af);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 600;
    min-width: 100px;
}

.wallet-quick-action-btn i[b-jifmvcoi4v] {
    font-size: 24px;
}

.wallet-quick-action-btn:hover[b-jifmvcoi4v] {
    background: rgba(42, 99, 175, 0.06);
}

.wallet-quick-action-btn:active[b-jifmvcoi4v] {
    transform: scale(0.96);
}

.wallet-quick-action-btn.scan[b-jifmvcoi4v] {
    background: var(--color-primary-blue, #2a63af);
    color: white;
    border-color: var(--color-primary-blue, #2a63af);
    min-width: 120px;
    padding: 16px 28px;
}

.wallet-quick-action-btn.scan:hover[b-jifmvcoi4v] {
    background: #1a4a8f;
}

/* ==========================================================================
   QR Scanner Modal
   ========================================================================== */

.qr-scanner-overlay[b-jifmvcoi4v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-scanner-header[b-jifmvcoi4v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.8);
}

.qr-scanner-header h2[b-jifmvcoi4v] {
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.qr-scanner-close[b-jifmvcoi4v] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.125rem;
    transition: background 0.2s;
}

.qr-scanner-close:hover[b-jifmvcoi4v] {
    background: rgba(255, 255, 255, 0.25);
}

.qr-scanner-viewport[b-jifmvcoi4v] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    position: relative;
    overflow: hidden;
}

.qr-video[b-jifmvcoi4v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.qr-scan-line[b-jifmvcoi4v] {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-primary-blue, #2a63af), transparent);
    border-radius: 2px;
    animation: qr-scan-move-b-jifmvcoi4v 2.5s ease-in-out infinite;
}

@keyframes qr-scan-move-b-jifmvcoi4v {
    0%, 100% { top: 20%; }
    50% { top: 80%; }
}

.qr-scanner-prompt[b-jifmvcoi4v] {
    text-align: center;
    color: white;
    padding: 2rem;
}

.qr-scanner-prompt i[b-jifmvcoi4v] {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.7;
}

.qr-scanner-prompt p[b-jifmvcoi4v] {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    opacity: 0.85;
}

.qr-scanner-enable-btn[b-jifmvcoi4v] {
    background: var(--color-primary-blue, #2a63af);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.qr-scanner-enable-btn:hover[b-jifmvcoi4v] {
    background: #1a4a8f;
}

.qr-scanner-instructions[b-jifmvcoi4v] {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 0.875rem;
    padding: 16px 20px 32px;
    margin: 0;
}

.qr-scanner-error[b-jifmvcoi4v] {
    background: rgba(231, 76, 60, 0.9);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 0 20px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

/* ==========================================================================
   Account Linking Section
   ========================================================================== */

/* In-card link CTA — sits where .wallet-amount would otherwise render
   when the corresponding wallet is not linked. */
.wallet-card-cta[b-jifmvcoi4v]  .atkv-btn,
[b-jifmvcoi4v] .wallet-card-cta {
    flex: 1 1 auto;
    min-width: 0;
}

/* Sticitt "Link account" CTA on the wallet hero card - white pill matching the
   approved home-page link CTA (was a dark PrimaryButton that clashed on the
   blue card). */
.wallet-link-cta[b-jifmvcoi4v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    min-height: 46px;
    margin-top: 6px;
    padding: 0 18px;
    background: #fff;
    color: var(--atkv-blue, #2a63af);
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease, transform 0.1s ease;
}

.wallet-link-cta:hover[b-jifmvcoi4v] {
    background: #f3f6fb;
}

.wallet-link-cta:active[b-jifmvcoi4v] {
    transform: translateY(1px);
}

.wallet-link-cta i[b-jifmvcoi4v] {
    font-size: 16px;
}

.wallet-link-hint[b-jifmvcoi4v] {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   NFC Armbands Section
   ========================================================================== */

.nfc-armbands-section[b-jifmvcoi4v] {
    background: white;
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--card-shadow-sm);
}

.nfc-armbands-header[b-jifmvcoi4v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.nfc-armbands-title[b-jifmvcoi4v] {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.add-armband-btn[b-jifmvcoi4v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    color: var(--color-primary, #2a63af);
    border: 2px solid var(--color-primary, #2a63af);
    border-radius: var(--radius-sm, 8px);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.add-armband-btn:hover[b-jifmvcoi4v] {
    background: var(--color-primary, #2a63af);
    color: white;
}

.armbands-empty[b-jifmvcoi4v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 16px;
    color: var(--color-text-secondary, #6c757d);
}

.armbands-empty i[b-jifmvcoi4v] {
    font-size: 2.5rem;
    opacity: 0.5;
}

.armbands-empty p[b-jifmvcoi4v] {
    margin: 0;
    font-size: 0.875rem;
}

.armbands-grid[b-jifmvcoi4v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* Armband Card */
.armband-card[b-jifmvcoi4v] {
    border-radius: var(--radius-md);
    padding: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.armband-card[b-jifmvcoi4v]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 100%;
    height: 150%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.armband-card--blue[b-jifmvcoi4v] {
    background: linear-gradient(135deg, #1a5a9e 0%, #2a6ab8 100%);
}

.armband-card--green[b-jifmvcoi4v] {
    background: linear-gradient(135deg, #1a9e5a 0%, #2ab868 100%);
}

.armband-card--purple[b-jifmvcoi4v] {
    background: linear-gradient(135deg, #7b1a9e 0%, #9e2ab8 100%);
}

.armband-card--orange[b-jifmvcoi4v] {
    background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
}

.armband-header[b-jifmvcoi4v] {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.armband-label[b-jifmvcoi4v] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.armband-name[b-jifmvcoi4v] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 4px 0;
}

.armband-id[b-jifmvcoi4v] {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Daily Spend */
.daily-spend[b-jifmvcoi4v] {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.daily-spend-label[b-jifmvcoi4v] {
    font-size: 0.75rem;
    opacity: 0.9;
    display: block;
    margin-bottom: 8px;
}

.daily-spend-amount[b-jifmvcoi4v] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.spend-current[b-jifmvcoi4v] {
    font-size: 1.25rem;
    font-weight: 700;
}

.spend-limit[b-jifmvcoi4v] {
    font-size: 0.875rem;
    opacity: 0.8;
}

.spend-progress[b-jifmvcoi4v] {
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
    overflow: hidden;
}

.spend-progress-bar[b-jifmvcoi4v] {
    height: 100%;
    background: #fff;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Armband Actions */
.armband-actions[b-jifmvcoi4v] {
    display: flex;
    gap: 12px;
}

.armband-btn[b-jifmvcoi4v] {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-align: center;
    font-family: var(--font-family-primary);
}

.armband-btn--history[b-jifmvcoi4v] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.armband-btn--history:hover[b-jifmvcoi4v] {
    background: rgba(255, 255, 255, 0.3);
}

.armband-btn--unlink[b-jifmvcoi4v] {
    background: #fff;
    color: #666;
}

.armband-btn--unlink:hover[b-jifmvcoi4v] {
    background: #f5f5f5;
}

/* ==========================================================================
   Filter Section
   ========================================================================== */

.filter-section[b-jifmvcoi4v] {
    background: white;
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--card-shadow-sm);
}

.filter-row[b-jifmvcoi4v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 16px;
}

.filter-item label[b-jifmvcoi4v] {
    display: block;
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 8px;
    font-weight: var(--font-weight-medium);
}

.date-inputs[b-jifmvcoi4v] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-inputs input[b-jifmvcoi4v] {
    flex: 1;
}

.form-input[b-jifmvcoi4v],
.form-select[b-jifmvcoi4v] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    background: white;
    transition: border-color 0.2s;
    font-family: var(--font-family-primary);
}

.form-input:focus[b-jifmvcoi4v],
.form-select:focus[b-jifmvcoi4v] {
    outline: none;
    border-color: var(--color-primary-blue);
}

.filter-actions[b-jifmvcoi4v] {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

/* ==========================================================================
   Transaction Section
   ========================================================================== */

.transaction-section[b-jifmvcoi4v] {
    background: white;
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--card-shadow-sm);
}

.section-header[b-jifmvcoi4v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-header h3[b-jifmvcoi4v] {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.export-buttons[b-jifmvcoi4v] {
    display: flex;
    gap: 8px;
}

/* ==========================================================================
   Loading Skeleton
   ========================================================================== */

.loading-skeleton[b-jifmvcoi4v] {
    padding: 16px 0;
}

.skeleton-item[b-jifmvcoi4v] {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

.skeleton-line[b-jifmvcoi4v] {
    height: 12px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-jifmvcoi4v 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-line.short[b-jifmvcoi4v] {
    width: 30%;
}

.skeleton-line.medium[b-jifmvcoi4v] {
    width: 60%;
}

@keyframes loading-b-jifmvcoi4v {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state[b-jifmvcoi4v] {
    text-align: center;
    padding: 48px 16px;
    color: #999;
}

.empty-icon[b-jifmvcoi4v] {
    font-size: 4rem;
    opacity: 0.3;
    margin-bottom: 16px;
}

.empty-state p[b-jifmvcoi4v] {
    font-size: 1rem;
    margin: 0;
}

/* ==========================================================================
   Transaction List
   ========================================================================== */

.transaction-list[b-jifmvcoi4v] {
    margin: -16px;
}

.transaction-item[b-jifmvcoi4v] {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.transaction-item:hover[b-jifmvcoi4v] {
    background-color: #f9f9f9;
}

.transaction-item:last-child[b-jifmvcoi4v] {
    border-bottom: none;
}

.transaction-date[b-jifmvcoi4v] {
    text-align: center;
    margin-right: 16px;
    min-width: 50px;
}

.date-day[b-jifmvcoi4v] {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-text-primary);
    line-height: 1;
}

.date-month[b-jifmvcoi4v] {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
}

.transaction-details[b-jifmvcoi4v] {
    flex: 1;
    min-width: 0;
}

.transaction-description[b-jifmvcoi4v] {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-merchant[b-jifmvcoi4v] {
    font-size: 0.875rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-amount[b-jifmvcoi4v] {
    font-weight: var(--font-weight-semibold);
    margin-right: 16px;
    white-space: nowrap;
}

.transaction-amount.positive[b-jifmvcoi4v] {
    color: #00a651;
}

.transaction-amount.negative[b-jifmvcoi4v] {
    color: #e74c3c;
}

.transaction-status[b-jifmvcoi4v] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 20px;
    background: #f0f0f0;
    white-space: nowrap;
}

.status-dot[b-jifmvcoi4v] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #999;
}

.transaction-status.completed .status-dot[b-jifmvcoi4v] {
    background: #00a651;
}

.transaction-status.pending .status-dot[b-jifmvcoi4v] {
    background: #ff9800;
}

.transaction-status.failed .status-dot[b-jifmvcoi4v] {
    background: #e74c3c;
}

/* Load More */
.load-more[b-jifmvcoi4v] {
    text-align: center;
    padding: 32px 16px 16px;
}

/* ==========================================================================
   Tablet (max-width: 744px)
   ========================================================================== */

@media (max-width: 744px) {
    .wallet-content[b-jifmvcoi4v] {
        padding: 48px 16px;
    }

    .wallet-navigation[b-jifmvcoi4v] {
        max-width: 100%;
    }

    /* Mobile / tablet: cards become a horizontal swipeable carousel
       (one card per viewport, scroll-snap, hidden scrollbar). The user
       commits a wallet switch by tapping a dot or a card; swipe is a
       visual preview of the other wallet. */
    .wallet-cards-container[b-jifmvcoi4v] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 16px 4px;
        margin: 0 -16px;
        scroll-padding-left: 16px;
    }

    .wallet-cards-container[b-jifmvcoi4v]::-webkit-scrollbar {
        display: none;
    }

    .wallet-balance-card[b-jifmvcoi4v] {
        flex: 0 0 calc(100vw - 32px);
        max-width: 600px;
        scroll-snap-align: start;
        opacity: 1;
    }

    .wallet-cards-dots[b-jifmvcoi4v] {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin: 12px 0 4px;
    }

    .wallet-card-dot[b-jifmvcoi4v] {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: var(--card-border, #d8dde6);
        cursor: pointer;
        transition: width 0.2s ease, background 0.2s ease;
    }

    .wallet-card-dot--active[b-jifmvcoi4v] {
        width: 22px;
        background: var(--color-primary-blue, #2a63af);
    }

    .wallet-card-dot--active.tjieng[b-jifmvcoi4v] {
        background: var(--color-primary-yellow, #fdb913);
    }

    .filter-row[b-jifmvcoi4v] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .armbands-grid[b-jifmvcoi4v] {
        grid-template-columns: 1fr;
    }

    .wallet-quick-actions[b-jifmvcoi4v] {
        gap: 12px;
    }

    .wallet-quick-action-btn[b-jifmvcoi4v] {
        min-width: 80px;
        padding: 12px 16px;
        font-size: 12px;
    }

    .wallet-quick-action-btn.scan[b-jifmvcoi4v] {
        min-width: 100px;
        padding: 14px 20px;
    }
}

/* ==========================================================================
   Mobile (max-width: 393px)
   ========================================================================== */

@media (max-width: 393px) {
    .wallet-content[b-jifmvcoi4v] {
        padding: 48px 16px;
        gap: 48px;
    }

    /* Navigation hidden, cards are clickable to switch */
    .wallet-navigation[b-jifmvcoi4v] {
        display: none;
    }

    .wallet-mobile-tabs[b-jifmvcoi4v] {
        display: none !important;
    }

    .wallet-cards-container[b-jifmvcoi4v] {
        gap: 48px;
    }

    .wallet-balance-card[b-jifmvcoi4v] {
        /* Preserve the carousel sizing inherited from the tablet
           breakpoint above — do not collapse cards to a static width
           or the swipe affordance disappears. */
        flex: 0 0 calc(100vw - 32px);
        max-width: 100%;
        width: auto;
        height: auto;
        min-height: 240px;
        margin: 0;
    }

    .wallet-balance-title[b-jifmvcoi4v] {
        font-size: 28px;
    }

    .wallet-link-button[b-jifmvcoi4v] {
        font-size: 20px;
        padding: 12px 24px;
    }

    .wallet-amount[b-jifmvcoi4v] {
        font-size: 24px;
    }

    .wallet-icon-circle[b-jifmvcoi4v] {
        width: 60px;
        height: 58px;
    }

    .wallet-coin-icon[b-jifmvcoi4v] {
        font-size: 24px;
    }

    .section-header[b-jifmvcoi4v] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .export-buttons[b-jifmvcoi4v] {
        align-self: flex-end;
    }

    .transaction-item[b-jifmvcoi4v] {
        padding: 12px;
    }

    .transaction-date[b-jifmvcoi4v] {
        margin-right: 12px;
    }

    .transaction-amount[b-jifmvcoi4v] {
        font-size: 0.875rem;
    }

    .transaction-status[b-jifmvcoi4v] {
        font-size: 0.625rem;
        padding: 2px 6px;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .wallet-nav-button[b-jifmvcoi4v],
    .wallet-mobile-tab[b-jifmvcoi4v],
    .wallet-link-button[b-jifmvcoi4v],
    .armband-btn[b-jifmvcoi4v],
    .transaction-item[b-jifmvcoi4v] {
        transition: none;
    }

    .skeleton-line[b-jifmvcoi4v] {
        animation: none;
    }
}

/* ==========================================================================
   Redesign: prototype-aligned wallet layout (10/10b-wallet)
   Carousel of full-width hero cards -> armbands -> activity list.
   Most styling comes from the global design-system; these are the deltas.
   ========================================================================== */

.wallet-heading[b-jifmvcoi4v] {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--atkv-ink, #1a1a1a);
}

/* Tjieng hero gets the gold treatment; Sticitt hero keeps the blue default. */
.wallet-hero--tjieng[b-jifmvcoi4v] {
    background: linear-gradient(135deg, #fdb913 0%, #c2870a 100%);
}
.wallet-hero--tjieng .label[b-jifmvcoi4v],
.wallet-hero--tjieng .amount[b-jifmvcoi4v],
.wallet-hero--tjieng .currency[b-jifmvcoi4v],
.wallet-hero--tjieng .sub[b-jifmvcoi4v] { color: #1a1a1a; }
.wallet-hero--tjieng .label[b-jifmvcoi4v] { opacity: 0.7; }
.wallet-hero--tjieng .sub[b-jifmvcoi4v] { opacity: 0.7; }
.wallet-hero--tjieng .currency[b-jifmvcoi4v] { opacity: 0.7; margin-left: 4px; }

/* Member with no Tjieng wallet: subdued "Not linked" label instead of a bold
   points amount, so the missing-account state is not mistaken for a zero balance. */
.wallet-hero--tjieng .amount.wallet-not-linked[b-jifmvcoi4v] {
    font-size: 22px;
    font-weight: 500;
    opacity: 0.7;
}

.wallet-hero-actions[b-jifmvcoi4v] { gap: 8px; margin-top: 16px; }
.wallet-hero-scan[b-jifmvcoi4v] { border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.wallet-hero-unlink[b-jifmvcoi4v] {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
}
.wallet-hero-unlink:disabled[b-jifmvcoi4v] { opacity: 0.6; }

.wallet-section-title[b-jifmvcoi4v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.wallet-add-armband[b-jifmvcoi4v] {
    background: var(--atkv-blue, #2a63af);
    color: #fff;
    border-radius: 999px;
    /* mobile-overrides.css forces .btn to 12px 18px / 15px / 44px !important,
       which overflows this inline header row. Pin it back to a compact pill so
       the title + button sit on one line like prototype 10-wallet. */
    padding: 8px 14px !important;
    font-size: 0.8125rem !important;
    min-height: 0 !important;
    height: auto !important;
}
.wallet-armbands-sub[b-jifmvcoi4v] { margin-top: -4px; }

.wallet-armband-top[b-jifmvcoi4v] { margin-bottom: 10px; }
.wallet-armband-wearer-label[b-jifmvcoi4v] { text-transform: uppercase; letter-spacing: 0.06em; }
.wallet-armband-name[b-jifmvcoi4v] { font-weight: 700; margin-top: 2px; }
.wallet-armband-amount-row[b-jifmvcoi4v] { margin-top: 2px; }
.wallet-armband-amount[b-jifmvcoi4v] { font-size: 18px; }
.wallet-armband-progress[b-jifmvcoi4v] {
    height: 6px;
    background: var(--atkv-line-soft, #ecebe6);
    border-radius: 999px;
    margin-top: 6px;
    overflow: hidden;
}
.wallet-armband-progress-bar[b-jifmvcoi4v] { height: 100%; background: var(--atkv-blue, #2a63af); }
.wallet-armband-actions[b-jifmvcoi4v] { gap: 8px; margin-top: 14px; }
.wallet-armband-history[b-jifmvcoi4v] { border-radius: 999px; }
.wallet-armband-unlink[b-jifmvcoi4v] {
    background: transparent;
    color: var(--status-cancelled-fg, #b3261e);
    border: 1px solid var(--atkv-line, #d9d6cf);
    border-radius: 999px;
}

.wallet-activity-card[b-jifmvcoi4v] { padding: 0; }
.wallet-amt-neg[b-jifmvcoi4v] { color: var(--atkv-ink, #1a1a1a); }
.wallet-amt-pos[b-jifmvcoi4v] { color: var(--status-confirmed-fg, #1f7a3d); }
/* /Pages/Wallet/LinkWallet.razor.rz.scp.css */
/* ============================================
   LINK WALLET PAGE - ATKV MOBILE APP
   Figma-aligned wallet linking interface
   ============================================ */

.link-wallet-page[b-u1v7xlcv8u] {
    min-height: 100vh;
    background-color: #f9f9f9;
    font-family: 'Montserrat', sans-serif;
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-u1v7xlcv8u] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-button[b-u1v7xlcv8u] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.back-button:hover[b-u1v7xlcv8u] {
    background-color: #f5f5f5;
}

.back-button:focus-visible[b-u1v7xlcv8u] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.page-header h1[b-u1v7xlcv8u] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

/* ============================================
   CONTENT AREA
   ============================================ */

.link-wallet-content[b-u1v7xlcv8u] {
    max-width: 600px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-state[b-u1v7xlcv8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    gap: 16px;
}

.loading-spinner[b-u1v7xlcv8u] {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid #2a63af;
    border-radius: 50%;
    animation: spin-b-u1v7xlcv8u 1s linear infinite;
}

@keyframes spin-b-u1v7xlcv8u {
    to { transform: rotate(360deg); }
}

.loading-state p[b-u1v7xlcv8u] {
    margin: 0;
    font-size: 14px;
    color: #999;
}

/* ============================================
   ERROR STATE
   ============================================ */

.error-state[b-u1v7xlcv8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    gap: 16px;
}

.error-icon[b-u1v7xlcv8u] {
    width: 80px;
    height: 80px;
    background: #ffebee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-icon i[b-u1v7xlcv8u] {
    font-size: 40px;
    color: #e53935;
}

.error-state h2[b-u1v7xlcv8u] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.error-state p[b-u1v7xlcv8u] {
    margin: 0;
    font-size: 14px;
    color: #999;
    max-width: 320px;
}

.retry-button[b-u1v7xlcv8u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s ease;
}

.retry-button:hover[b-u1v7xlcv8u] {
    background: #234f8e;
}

.retry-button:focus-visible[b-u1v7xlcv8u] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

/* ============================================
   SUCCESS STATE
   ============================================ */

.success-state[b-u1v7xlcv8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    gap: 16px;
}

.success-icon[b-u1v7xlcv8u] {
    width: 80px;
    height: 80px;
    background: #e8f5e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon i[b-u1v7xlcv8u] {
    font-size: 40px;
    color: #43a047;
}

.success-state h2[b-u1v7xlcv8u] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.success-state p[b-u1v7xlcv8u] {
    margin: 0;
    font-size: 14px;
    color: #999;
    max-width: 320px;
}

.wallet-id[b-u1v7xlcv8u] {
    font-family: 'Roboto Mono', monospace;
    background: #f5f5f5;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
}

.continue-button[b-u1v7xlcv8u] {
    padding: 16px 32px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s ease;
}

.continue-button:hover[b-u1v7xlcv8u] {
    background: #234f8e;
}

.continue-button:focus-visible[b-u1v7xlcv8u] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

/* ============================================
   CREATE WALLET FORM
   ============================================ */

.create-wallet-form[b-u1v7xlcv8u] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
}

.mode-indicator[b-u1v7xlcv8u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #e3f2fd;
    border: 1px solid #2a63af;
    border-radius: 8px;
    margin-bottom: 16px;
    color: #1565c0;
    font-size: 14px;
    font-weight: 500;
}

.mode-indicator i[b-u1v7xlcv8u] {
    font-size: 18px;
}

.form-description[b-u1v7xlcv8u] {
    color: #666;
    margin-bottom: 24px;
    line-height: 1.5;
    font-size: 14px;
}

.form-description p[b-u1v7xlcv8u] {
    margin: 0;
}

/* ============================================
   FORM FIELDS
   ============================================ */

.form-group[b-u1v7xlcv8u] {
    margin-bottom: 24px;
}

.form-group label[b-u1v7xlcv8u] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.form-control[b-u1v7xlcv8u] {
    width: 100%;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus[b-u1v7xlcv8u] {
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
    outline: none;
}

.validation-message[b-u1v7xlcv8u] {
    color: #e53935;
    font-size: 13px;
    margin-top: 4px;
}

/* ============================================
   FORM ACTIONS
   ============================================ */

.form-actions[b-u1v7xlcv8u] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn-secondary[b-u1v7xlcv8u] {
    flex: 1;
    padding: 16px 24px;
    background: white;
    color: #666;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.btn-secondary:hover[b-u1v7xlcv8u] {
    background: #f5f5f5;
}

.btn-secondary:focus-visible[b-u1v7xlcv8u] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.btn-primary[b-u1v7xlcv8u] {
    flex: 1;
    padding: 16px 24px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.btn-primary:hover:not(:disabled)[b-u1v7xlcv8u] {
    background: #234f8e;
}

.btn-primary:focus-visible[b-u1v7xlcv8u] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.btn-primary:disabled[b-u1v7xlcv8u] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-border-sm[b-u1v7xlcv8u] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-u1v7xlcv8u 0.75s linear infinite;
    display: inline-block;
}

/* ============================================
   HELP TEXT
   ============================================ */

.help-text[b-u1v7xlcv8u] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: #e3f2fd;
    border: 1px solid #2a63af;
    border-radius: 8px;
    color: #1565c0;
    font-size: 14px;
    line-height: 1.4;
}

.help-text i[b-u1v7xlcv8u] {
    color: #2a63af;
    flex-shrink: 0;
    font-size: 16px;
    margin-top: 2px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (min-width: 768px) {
    .page-header h1[b-u1v7xlcv8u] {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .page-header[b-u1v7xlcv8u] {
        padding: 12px 16px;
    }

    .page-header h1[b-u1v7xlcv8u] {
        font-size: 18px;
    }

    .link-wallet-content[b-u1v7xlcv8u] {
        padding: 16px;
    }

    .create-wallet-form[b-u1v7xlcv8u] {
        padding: 16px;
    }

    .form-actions[b-u1v7xlcv8u] {
        flex-direction: column;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .loading-spinner[b-u1v7xlcv8u],
    .spinner-border-sm[b-u1v7xlcv8u] {
        animation: none;
    }

    .btn-primary[b-u1v7xlcv8u],
    .btn-secondary[b-u1v7xlcv8u],
    .back-button[b-u1v7xlcv8u],
    .retry-button[b-u1v7xlcv8u],
    .continue-button[b-u1v7xlcv8u],
    .form-control[b-u1v7xlcv8u] {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .form-control[b-u1v7xlcv8u],
    .btn-secondary[b-u1v7xlcv8u] {
        border-width: 2px;
    }
}

/* Existing/new choice screen (shown when /wallet/link is opened without a mode) */
.link-choice-panel[b-u1v7xlcv8u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.link-choice-option[b-u1v7xlcv8u] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.link-choice-option:hover:not(:disabled)[b-u1v7xlcv8u] {
    border-color: var(--atkv-blue, #2a63af);
    box-shadow: 0 2px 10px rgba(42, 99, 175, 0.12);
}

.link-choice-option:active:not(:disabled)[b-u1v7xlcv8u] {
    transform: translateY(1px);
}

.link-choice-option:disabled[b-u1v7xlcv8u] {
    opacity: 0.6;
    cursor: default;
}

.link-choice-icon[b-u1v7xlcv8u] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--atkv-blue, #2a63af);
    color: #fff;
    font-size: 20px;
}

.link-choice-text[b-u1v7xlcv8u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.link-choice-title[b-u1v7xlcv8u] {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.link-choice-desc[b-u1v7xlcv8u] {
    font-size: 13px;
    color: #5a6677;
    line-height: 1.3;
}

.link-choice-arrow[b-u1v7xlcv8u] {
    flex: 0 0 auto;
    color: #9aa6b6;
    font-size: 18px;
}
/* /Pages/Wallet/NfcArmbands.razor.rz.scp.css */
/*
 * NfcArmbands.razor.css
 * Wallet NFC Armbands page styles aligned to Figma nfc-armbands.html design.
 *
 * Sections: Balance Bar, Action Tabs, Section Header, Armbands Grid,
 *           Armband Card, Daily Spend, Transaction History, States.
 */

/* Page Container */
.armbands-page[b-49vqcng4hn] {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ==========================================
   BALANCE BAR
   ========================================== */
.balance-bar[b-49vqcng4hn] {
    background: linear-gradient(135deg, #1a5a9e 0%, #3a7bc8 100%);
    border-radius: 16px;
    padding: 32px 40px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.balance-info[b-49vqcng4hn] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.balance-icon[b-49vqcng4hn] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.balance-text[b-49vqcng4hn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.balance-label[b-49vqcng4hn] {
    font-size: 14px;
    opacity: 0.9;
    color: white;
}

.balance-amount[b-49vqcng4hn] {
    font-size: 28px;
    font-weight: bold;
    color: white;
}

/* ==========================================
   ACTION TABS
   ========================================== */
.action-tabs[b-49vqcng4hn] {
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
    justify-content: center;
}

.action-tab[b-49vqcng4hn] {
    padding: 16px 48px;
    border-radius: 360px;
    font-size: 18px;
    font-weight: 600;
    min-width: 160px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    color: black;
    border: 2px solid #e0e0e0;
}

.action-tab:hover[b-49vqcng4hn] {
    background: #f5f5f5;
}

.action-tab--active[b-49vqcng4hn] {
    background: #2a63af;
    color: white;
    border-color: #2a63af;
}

.action-tab--active:hover[b-49vqcng4hn] {
    background: #234f8e;
}

/* ==========================================
   SECTION HEADER
   ========================================== */
.armbands-section[b-49vqcng4hn] {
    margin-bottom: 48px;
}

.section-header[b-49vqcng4hn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.section-title[b-49vqcng4hn] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.add-armband-btn[b-49vqcng4hn] {
    padding: 12px 24px;
    background: white;
    border: 2px solid #2a63af;
    border-radius: 16px;
    color: #2a63af;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-armband-btn:hover[b-49vqcng4hn] {
    background: #2a63af;
    color: white;
}

/* ==========================================
   ARMBANDS GRID
   ========================================== */
.armbands-grid[b-49vqcng4hn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

/* ==========================================
   ARMBAND CARD
   ========================================== */
.armband-card[b-49vqcng4hn] {
    border-radius: 16px;
    padding: 32px;
    color: white;
    position: relative;
    overflow: hidden;
}

.armband-card[b-49vqcng4hn]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 100%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Card colour variants */
.armband-card--blue[b-49vqcng4hn] {
    background: linear-gradient(135deg, #1a5a9e 0%, #2a6ab8 100%);
}

.armband-card--green[b-49vqcng4hn] {
    background: linear-gradient(135deg, #1a9e5a 0%, #2ab868 100%);
}

.armband-card--purple[b-49vqcng4hn] {
    background: linear-gradient(135deg, #6a1a9e 0%, #8a2ab8 100%);
}

.armband-card--orange[b-49vqcng4hn] {
    background: linear-gradient(135deg, #c65d00 0%, #e87800 100%);
}

/* Card Header */
.armband-header[b-49vqcng4hn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.armband-label[b-49vqcng4hn] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.armband-name[b-49vqcng4hn] {
    font-size: 20px;
    font-weight: bold;
}

.armband-id[b-49vqcng4hn] {
    font-size: 14px;
    opacity: 0.9;
}

/* ==========================================
   DAILY SPEND
   ========================================== */
.daily-spend[b-49vqcng4hn] {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.daily-spend-label[b-49vqcng4hn] {
    font-size: 12px;
    opacity: 0.8;
    display: block;
    margin-bottom: 8px;
}

.daily-spend-amount[b-49vqcng4hn] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 12px;
}

.spend-current[b-49vqcng4hn] {
    font-size: 20px;
    font-weight: bold;
}

.spend-limit[b-49vqcng4hn] {
    font-size: 14px;
    opacity: 0.8;
}

.spend-progress[b-49vqcng4hn] {
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 360px;
    overflow: hidden;
}

.spend-progress-bar[b-49vqcng4hn] {
    height: 100%;
    background: white;
    border-radius: 360px;
    transition: width 0.5s ease;
}

/* ==========================================
   ARMBAND ACTIONS
   ========================================== */
.armband-actions[b-49vqcng4hn] {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.armband-btn[b-49vqcng4hn] {
    flex: 1;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.armband-btn--history[b-49vqcng4hn] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.armband-btn--history:hover[b-49vqcng4hn] {
    background: rgba(255, 255, 255, 0.3);
}

.armband-btn--unlink[b-49vqcng4hn] {
    background: white;
    color: #666;
}

.armband-btn--unlink:hover[b-49vqcng4hn] {
    background: #f5f5f5;
}

/* ==========================================
   TRANSACTION HISTORY SECTION
   ========================================== */
.transaction-section[b-49vqcng4hn] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 32px;
}

.transaction-header[b-49vqcng4hn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.transaction-title[b-49vqcng4hn] {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.transaction-actions[b-49vqcng4hn] {
    display: flex;
    gap: 8px;
}

.transaction-action-btn[b-49vqcng4hn] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #666;
    font-size: 18px;
}

.transaction-action-btn:hover[b-49vqcng4hn] {
    background: #f5f5f5;
    border-color: #ccc;
}

.transaction-list[b-49vqcng4hn] {
    border-top: 1px solid #f0f0f0;
}

.transaction-item[b-49vqcng4hn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.transaction-item:last-child[b-49vqcng4hn] {
    border-bottom: none;
}

.transaction-item:hover[b-49vqcng4hn] {
    background: #fafafa;
}

.transaction-info[b-49vqcng4hn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.transaction-location[b-49vqcng4hn] {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.transaction-date[b-49vqcng4hn] {
    font-size: 14px;
    color: #999;
}

.transaction-amount[b-49vqcng4hn] {
    font-weight: 600;
    font-size: 16px;
}

.transaction-amount--debit[b-49vqcng4hn] {
    color: #e53935;
}

.transaction-amount--credit[b-49vqcng4hn] {
    color: #43a047;
}

/* Transaction Empty State */
.transaction-empty[b-49vqcng4hn] {
    padding: 48px 32px;
    text-align: center;
    color: #999;
}

.transaction-empty i[b-49vqcng4hn] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.transaction-empty p[b-49vqcng4hn] {
    margin: 0 0 4px;
}

.transaction-empty-sub[b-49vqcng4hn] {
    font-size: 14px;
    color: #bbb;
}

/* ==========================================
   LOADING STATE
   ========================================== */
.loading-state[b-49vqcng4hn] {
    padding: 64px 32px;
    text-align: center;
    color: #999;
}

.loading-state p[b-49vqcng4hn] {
    margin-top: 16px;
}

.spinner[b-49vqcng4hn] {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2a63af;
    border-radius: 50%;
    animation: spin-b-49vqcng4hn 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-49vqcng4hn {
    to { transform: rotate(360deg); }
}

/* ==========================================
   EMPTY STATE
   ========================================== */
.empty-state[b-49vqcng4hn] {
    padding: 64px 32px;
    text-align: center;
    color: #999;
}

.empty-state i[b-49vqcng4hn] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.4;
}

.empty-state p[b-49vqcng4hn] {
    margin-bottom: 24px;
    font-size: 16px;
}

.empty-state .btn-primary[b-49vqcng4hn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.empty-state .btn-primary:hover[b-49vqcng4hn] {
    background: #234f8e;
}

/* ==========================================
   MOBILE RESPONSIVE (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {
    .armbands-page[b-49vqcng4hn] {
        padding: 16px;
    }

    .balance-bar[b-49vqcng4hn] {
        flex-direction: column;
        gap: 24px;
        text-align: center;
        padding: 24px 20px;
    }

    .balance-info[b-49vqcng4hn] {
        flex-direction: column;
    }

    .balance-amount[b-49vqcng4hn] {
        font-size: 24px;
    }

    .action-tabs[b-49vqcng4hn] {
        flex-wrap: wrap;
    }

    .action-tab[b-49vqcng4hn] {
        min-width: 100px;
        padding: 12px 24px;
        font-size: 16px;
    }

    .armbands-grid[b-49vqcng4hn] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .armband-card[b-49vqcng4hn] {
        padding: 24px;
    }

    .transaction-section[b-49vqcng4hn] {
        padding: 20px;
    }

    .transaction-item[b-49vqcng4hn] {
        padding: 12px 16px;
    }

    .section-header[b-49vqcng4hn] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .add-armband-btn[b-49vqcng4hn] {
        justify-content: center;
    }
}

/* =========================================================================
   NFC armbands redesign (matches docs/ui-redesign/screens/15-wallet-armbands.html).
   Replaces the old balance-bar + action-tabs strip with an appbar + intro
   section that includes the Sticitt balance inline. The armband cards
   themselves still use the existing scoped armband-card styles so the
   richer per-card progress bars and statuses are preserved.
   ========================================================================= */
.armbands-redesign[b-49vqcng4hn] {
    background: #fff;
    min-height: 100vh;
}

.armbands-redesign__appbar[b-49vqcng4hn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--atkv-line, #e5e7eb);
}

.armbands-redesign__appbar-title[b-49vqcng4hn] {
    font-weight: 600;
    margin-left: 8px;
    font-size: 16px;
}

.armbands-redesign__intro[b-49vqcng4hn] {
    padding-top: 24px;
}

.armbands-redesign__title[b-49vqcng4hn] {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}

.armbands-redesign__balance[b-49vqcng4hn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--atkv-bg-alt, #f8fafc);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 14px;
}

.armbands-redesign__balance-amount[b-49vqcng4hn] {
    font-size: 16px;
    color: var(--atkv-ink, #0f172a);
}

.armbands-redesign__section-header[b-49vqcng4hn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    margin-bottom: 12px;
}

.armbands-redesign__section-title[b-49vqcng4hn] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}

.armbands-redesign__add-btn[b-49vqcng4hn] {
    background: var(--atkv-blue, #2a63af);
    color: #fff;
    border-radius: 999px;
    border: 0;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.armbands-redesign__add-btn i[b-49vqcng4hn] {
    font-size: 14px;
}

/* Action tabs (Top-up / Transfer / History) restored from dev so the
   routes those buttons opened are still reachable from this page. */
.armbands-redesign__action-tabs[b-49vqcng4hn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.armbands-redesign__action-tab[b-49vqcng4hn] {
    border: 1px solid var(--atkv-line, #e5e7eb);
    background: #fff;
    color: var(--atkv-ink, #0f172a);
    border-radius: 12px;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.armbands-redesign__action-tab:hover[b-49vqcng4hn] {
    border-color: var(--atkv-blue, #2a63af);
    color: var(--atkv-blue, #2a63af);
}

.armbands-redesign__action-tab--active[b-49vqcng4hn] {
    background: var(--atkv-blue, #2a63af);
    color: #fff;
    border-color: var(--atkv-blue, #2a63af);
}

.armbands-redesign__action-tab--active:hover[b-49vqcng4hn] {
    color: #fff;
}

.armbands-redesign__action-tab i[b-49vqcng4hn] {
    font-size: 16px;
}
/* /Pages/Wallet/SticittCallback.razor.rz.scp.css */
/* ============================================
   STICITT CALLBACK PAGE - ATKV MOBILE APP
   Figma-aligned OAuth callback interface
   Full viewport centred layout, minimal UI
   ============================================ */

.callback-page[b-dcmd86000w] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #f9f9f9;
    font-family: 'Montserrat', sans-serif;
}

/* ============================================
   STATE CONTAINERS
   ============================================ */

.loading-state[b-dcmd86000w],
.error-state[b-dcmd86000w],
.success-state[b-dcmd86000w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    gap: 16px;
    max-width: 400px;
}

/* ============================================
   LOADING SPINNER
   ============================================ */

.loading-spinner[b-dcmd86000w] {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid #2a63af;
    border-radius: 50%;
    animation: spin-b-dcmd86000w 1s linear infinite;
}

@keyframes spin-b-dcmd86000w {
    to { transform: rotate(360deg); }
}

.loading-state p[b-dcmd86000w] {
    font-size: 14px;
    color: #999;
    margin: 0;
}

/* ============================================
   ERROR STATE
   ============================================ */

.error-icon[b-dcmd86000w] {
    width: 80px;
    height: 80px;
    background: #ffebee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-icon i[b-dcmd86000w] {
    font-size: 40px;
    color: #e53935;
}

.error-state h2[b-dcmd86000w] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.error-state p[b-dcmd86000w] {
    margin: 0;
    font-size: 14px;
    color: #999;
    max-width: 320px;
    line-height: 1.5;
}

/* ============================================
   SUCCESS STATE
   ============================================ */

.success-icon[b-dcmd86000w] {
    width: 80px;
    height: 80px;
    background: #e8f5e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon i[b-dcmd86000w] {
    font-size: 40px;
    color: #43a047;
}

.success-state h2[b-dcmd86000w] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.success-state p[b-dcmd86000w] {
    margin: 0;
    font-size: 14px;
    color: #999;
    max-width: 320px;
    line-height: 1.5;
}

/* ============================================
   BUTTONS
   ============================================ */

.retry-button[b-dcmd86000w] {
    padding: 16px 24px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s ease;
}

.retry-button:hover[b-dcmd86000w] {
    background: #234f8e;
}

.retry-button:focus-visible[b-dcmd86000w] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 480px) {
    .callback-page[b-dcmd86000w] {
        padding: 16px;
    }

    .loading-state[b-dcmd86000w],
    .error-state[b-dcmd86000w],
    .success-state[b-dcmd86000w] {
        padding: 32px 16px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .loading-spinner[b-dcmd86000w] {
        animation: none;
        border-top-color: transparent;
    }

    .retry-button[b-dcmd86000w] {
        transition: none;
    }
}
/* /Pages/Wallet/TopUp.razor.rz.scp.css */
/* ============================================
   TOPUP PAGE - ATKV MOBILE APP
   Figma-aligned wallet top-up interface
   ============================================ */

.topup-container[b-174txbrjtk] {
    max-width: 600px;
    margin: 0 auto;
    padding: 32px 24px;
    font-family: 'Montserrat', sans-serif;
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-174txbrjtk] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.btn-back[b-174txbrjtk] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.btn-back:hover[b-174txbrjtk] {
    background-color: #f5f5f5;
}

.btn-back:focus-visible[b-174txbrjtk] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.page-header h1[b-174txbrjtk] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    flex: 1;
}

.spacer[b-174txbrjtk] {
    width: 44px;
    flex-shrink: 0;
}

/* ============================================
   BALANCE CARD
   ============================================ */

.current-balance-card[b-174txbrjtk] {
    background: linear-gradient(to left, white 0%, #2a63af 100%);
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px 32px;
    color: white;
    text-align: center;
    margin-bottom: 32px;
}

.balance-label[b-174txbrjtk] {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
}

.balance-amount[b-174txbrjtk] {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;
}

/* ============================================
   TOP-UP FORM
   ============================================ */

.topup-form[b-174txbrjtk] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
}

.topup-form h3[b-174txbrjtk] {
    margin: 0 0 24px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* ============================================
   QUICK AMOUNTS GRID
   ============================================ */

.quick-amounts[b-174txbrjtk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.amount-btn[b-174txbrjtk] {
    padding: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    background: white;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: all 0.2s ease;
}

.amount-btn:hover[b-174txbrjtk] {
    border-color: #2a63af;
    background-color: #f0f6ff;
}

.amount-btn:focus-visible[b-174txbrjtk] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.amount-btn.selected[b-174txbrjtk] {
    border-color: #2a63af;
    background: #f0f6ff;
    color: #2a63af;
}

/* ============================================
   CUSTOM AMOUNT INPUT
   ============================================ */

.custom-amount[b-174txbrjtk] {
    margin-bottom: 24px;
}

.custom-amount label[b-174txbrjtk] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.input-group[b-174txbrjtk] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix[b-174txbrjtk] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-weight: 500;
    font-size: 16px;
    z-index: 1;
    pointer-events: none;
}

.amount-input[b-174txbrjtk] {
    width: 100%;
    padding: 16px;
    padding-left: 36px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.amount-input:focus[b-174txbrjtk] {
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
    outline: none;
}

/* ============================================
   BONUS NOTICE
   ============================================ */

.bonus-notice[b-174txbrjtk] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: #856404;
    font-size: 14px;
}

.bonus-icon[b-174txbrjtk] {
    font-size: 24px;
    flex-shrink: 0;
}

.bonus-notice p[b-174txbrjtk] {
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
}

/* ============================================
   PAYMENT SUMMARY
   ============================================ */

.payment-summary[b-174txbrjtk] {
    border-top: 1px solid #e0e0e0;
    padding-top: 24px;
    margin-bottom: 24px;
}

.summary-row[b-174txbrjtk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: #666;
}

.summary-row.bonus[b-174txbrjtk] {
    color: #43a047;
    font-weight: 600;
}

.summary-row.total[b-174txbrjtk] {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    border-top: 1px solid #e0e0e0;
    padding-top: 16px;
    margin-top: 8px;
}

.currency-symbol[b-174txbrjtk] {
    font-weight: 600;
}

/* ============================================
   ALERT
   ============================================ */

.alert[b-174txbrjtk] {
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.5;
}

.alert-error[b-174txbrjtk] {
    background: #ffebee;
    border: 1px solid #e53935;
    color: #c62828;
}

/* ============================================
   PRIMARY BUTTON
   ============================================ */

.btn-primary[b-174txbrjtk] {
    width: 100%;
    padding: 16px 24px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s ease;
}

.btn-primary:hover:not(:disabled)[b-174txbrjtk] {
    background: #234f8e;
}

.btn-primary:focus-visible[b-174txbrjtk] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.btn-primary:disabled[b-174txbrjtk] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-large[b-174txbrjtk] {
    padding: 16px 24px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (min-width: 768px) {
    .quick-amounts[b-174txbrjtk] {
        grid-template-columns: repeat(4, 1fr);
    }

    .page-header h1[b-174txbrjtk] {
        font-size: 24px;
    }

    .balance-amount[b-174txbrjtk] {
        font-size: 40px;
    }
}

@media (max-width: 480px) {
    .topup-container[b-174txbrjtk] {
        padding: 16px;
    }

    .topup-form[b-174txbrjtk] {
        padding: 16px;
    }

    .quick-amounts[b-174txbrjtk] {
        grid-template-columns: repeat(2, 1fr);
    }

    .current-balance-card[b-174txbrjtk] {
        padding: 20px 16px;
    }

    .balance-amount[b-174txbrjtk] {
        font-size: 28px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .amount-btn[b-174txbrjtk],
    .btn-primary[b-174txbrjtk],
    .btn-back[b-174txbrjtk],
    .amount-input[b-174txbrjtk] {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .amount-btn[b-174txbrjtk] {
        border-width: 3px;
    }

    .amount-input[b-174txbrjtk] {
        border-width: 2px;
    }
}
/* /Pages/Wallet/TransactionHistory.razor.rz.scp.css */
/* ============================================
   TRANSACTION HISTORY PAGE - ATKV MOBILE APP
   Figma-aligned transaction list interface
   ============================================ */

.transactions-container[b-ynhooo0oy3] {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 24px;
    font-family: 'Montserrat', sans-serif;
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-ynhooo0oy3] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.btn-back[b-ynhooo0oy3] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.btn-back:hover[b-ynhooo0oy3] {
    background-color: #f5f5f5;
}

.btn-back:focus-visible[b-ynhooo0oy3] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.btn-filter[b-ynhooo0oy3] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.btn-filter:hover[b-ynhooo0oy3] {
    background-color: #f5f5f5;
}

.btn-filter:focus-visible[b-ynhooo0oy3] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.page-header h1[b-ynhooo0oy3] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    flex: 1;
}

/* ============================================
   FILTERS PANEL
   ============================================ */

.filters-panel[b-ynhooo0oy3] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-select[b-ynhooo0oy3] {
    width: 100%;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    background-color: white;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.filter-select:focus[b-ynhooo0oy3] {
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
    outline: none;
}

.btn-apply-filters[b-ynhooo0oy3] {
    width: 100%;
    padding: 16px 24px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s ease;
}

.btn-apply-filters:hover[b-ynhooo0oy3] {
    background: #234f8e;
}

.btn-apply-filters:focus-visible[b-ynhooo0oy3] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-ynhooo0oy3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    gap: 16px;
}

.spinner[b-ynhooo0oy3] {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid #2a63af;
    border-radius: 50%;
    animation: spin-b-ynhooo0oy3 1s linear infinite;
}

@keyframes spin-b-ynhooo0oy3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-ynhooo0oy3] {
    font-size: 14px;
    color: #999;
    margin: 0;
}

/* ============================================
   TRANSACTIONS LIST
   ============================================ */

.transactions-list[b-ynhooo0oy3] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
}

.transaction-item[b-ynhooo0oy3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    gap: 16px;
    transition: background-color 0.15s ease;
}

.transaction-item:last-child[b-ynhooo0oy3] {
    border-bottom: none;
}

.transaction-item:hover[b-ynhooo0oy3] {
    background: #fafafa;
}

/* ============================================
   TRANSACTION ICON
   ============================================ */

.transaction-icon[b-ynhooo0oy3] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.icon-topup[b-ynhooo0oy3] {
    background-color: #e8f5e9;
    color: #43a047;
}

.icon-payment[b-ynhooo0oy3] {
    background-color: #fff3e0;
    color: #f57c00;
}

.icon-transfer[b-ynhooo0oy3] {
    background-color: #e3f2fd;
    color: #1565c0;
}

.icon-default[b-ynhooo0oy3] {
    background-color: #f5f5f5;
    color: #999;
}

/* ============================================
   TRANSACTION DETAILS
   ============================================ */

.transaction-details[b-ynhooo0oy3] {
    flex: 1;
    min-width: 0;
}

.transaction-details h4[b-ynhooo0oy3] {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-date[b-ynhooo0oy3] {
    margin: 0;
    font-size: 14px;
    color: #999;
}

.transaction-ref[b-ynhooo0oy3] {
    margin: 4px 0 0;
    font-size: 12px;
    color: #bbb;
    font-family: 'Roboto Mono', monospace;
}

/* ============================================
   TRANSACTION AMOUNT
   ============================================ */

.transaction-amount[b-ynhooo0oy3] {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}

.amount-positive[b-ynhooo0oy3] {
    color: #43a047;
}

.amount-negative[b-ynhooo0oy3] {
    color: #e53935;
}

.currency-symbol[b-ynhooo0oy3] {
    font-weight: 600;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination[b-ynhooo0oy3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.btn-page[b-ynhooo0oy3] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    width: auto;
    transition: all 0.2s ease;
}

.btn-page:hover:not(:disabled)[b-ynhooo0oy3] {
    background: #2a63af;
    color: white;
    border-color: #2a63af;
}

.btn-page:focus-visible[b-ynhooo0oy3] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.btn-page:disabled[b-ynhooo0oy3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info[b-ynhooo0oy3] {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    padding: 0 8px;
}

/* ============================================
   EXPORT BUTTON
   ============================================ */

.btn-export[b-ynhooo0oy3] {
    width: 100%;
    padding: 16px 24px;
    background: white;
    color: #666;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    margin-top: 24px;
    transition: background-color 0.2s ease;
}

.btn-export:hover[b-ynhooo0oy3] {
    background: #f5f5f5;
}

.btn-export:focus-visible[b-ynhooo0oy3] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-ynhooo0oy3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    gap: 16px;
}

.empty-icon[b-ynhooo0oy3] {
    font-size: 64px;
    color: #e0e0e0;
}

.empty-state h3[b-ynhooo0oy3] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.empty-state p[b-ynhooo0oy3] {
    margin: 0;
    font-size: 14px;
    color: #999;
    max-width: 320px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (min-width: 768px) {
    .page-header h1[b-ynhooo0oy3] {
        font-size: 24px;
    }

    .filters-panel[b-ynhooo0oy3] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .filter-select[b-ynhooo0oy3] {
        flex: 1;
        min-width: 180px;
    }

    .btn-apply-filters[b-ynhooo0oy3] {
        width: auto;
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    .transactions-container[b-ynhooo0oy3] {
        padding: 16px;
    }

    .filters-panel[b-ynhooo0oy3] {
        padding: 16px;
    }

    .transaction-item[b-ynhooo0oy3] {
        padding: 12px 16px;
    }

    .transaction-icon[b-ynhooo0oy3] {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .transaction-details h4[b-ynhooo0oy3] {
        font-size: 14px;
    }

    .transaction-amount[b-ynhooo0oy3] {
        font-size: 14px;
    }

    .pagination[b-ynhooo0oy3] {
        flex-wrap: wrap;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .transaction-item[b-ynhooo0oy3],
    .btn-page[b-ynhooo0oy3],
    .btn-export[b-ynhooo0oy3],
    .btn-apply-filters[b-ynhooo0oy3],
    .btn-back[b-ynhooo0oy3],
    .btn-filter[b-ynhooo0oy3],
    .filter-select[b-ynhooo0oy3] {
        transition: none;
    }

    .spinner[b-ynhooo0oy3] {
        animation: none;
        border-top-color: transparent;
    }
}

@media (prefers-contrast: high) {
    .transaction-item[b-ynhooo0oy3],
    .filter-select[b-ynhooo0oy3],
    .btn-page[b-ynhooo0oy3],
    .btn-export[b-ynhooo0oy3],
    .btn-apply-filters[b-ynhooo0oy3] {
        border-width: 2px;
    }

    .transaction-icon[b-ynhooo0oy3] {
        border: 2px solid currentColor;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .filters-panel[b-ynhooo0oy3],
    .btn-back[b-ynhooo0oy3],
    .btn-filter[b-ynhooo0oy3],
    .pagination[b-ynhooo0oy3],
    .btn-export[b-ynhooo0oy3] {
        display: none;
    }

    .transaction-item[b-ynhooo0oy3] {
        border-bottom: 1px solid #ccc;
        break-inside: avoid;
    }

    .transactions-container[b-ynhooo0oy3] {
        max-width: 100%;
        padding: 0;
    }

    .transactions-list[b-ynhooo0oy3] {
        border: none;
        border-radius: 0;
    }
}

/* =========================================================================
   Transaction history redesign (matches docs/ui-redesign/screens/14-wallet-history.html).
   Month-grouped list-row layout. Heavy lifting is done by the global
   redesign CSS (.list-row, .pill, .section); this scoped block carries
   the appbar, filter selects, and month-group header.
   ========================================================================= */
.transactions-redesign[b-ynhooo0oy3] {
    background: #fff;
    min-height: 100vh;
    padding: 0;
}

.transactions-redesign__appbar[b-ynhooo0oy3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--atkv-line, #e5e7eb);
}

.transactions-redesign__appbar-title[b-ynhooo0oy3] {
    font-weight: 600;
    margin-left: 8px;
    font-size: 16px;
}

.transactions-redesign__intro[b-ynhooo0oy3] {
    padding-top: 18px;
    padding-bottom: 8px;
}

.transactions-redesign__title[b-ynhooo0oy3] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--atkv-ink, #0f172a);
}

.transactions-redesign__filters[b-ynhooo0oy3] {
    gap: 10px;
    margin-top: 14px;
}

.transactions-redesign__filter[b-ynhooo0oy3] {
    flex: 1;
}

.transactions-redesign__filter-select[b-ynhooo0oy3] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--atkv-line, #e5e7eb);
    border-radius: 10px;
    font-size: 13px;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    box-sizing: border-box;
    cursor: pointer;
}

.transactions-redesign__list[b-ynhooo0oy3] {
    background: #fff;
    border-top: 1px solid var(--atkv-line, #e5e7eb);
}

.transactions-redesign__month[b-ynhooo0oy3] {
    background: var(--atkv-bg-alt, #f8fafc);
    padding: 8px 16px;
    font-size: 11px;
    color: var(--atkv-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.transactions-redesign__amount--in[b-ynhooo0oy3] {
    color: var(--status-confirmed-fg, #16a34a);
}

.transactions-redesign__pagination[b-ynhooo0oy3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.transactions-redesign__page-info[b-ynhooo0oy3] {
    font-size: 13px;
    color: var(--atkv-muted, #6b7280);
}

.transactions-redesign__export[b-ynhooo0oy3] {
    padding-bottom: 32px;
}

.transactions-redesign__empty[b-ynhooo0oy3] {
    padding: 32px 16px;
    text-align: center;
    color: var(--atkv-muted, #6b7280);
}
/* /Pages/Wallet/Transfer.razor.rz.scp.css */
/* ============================================
   TRANSFER PAGE - ATKV MOBILE APP
   Figma-aligned wallet transfer interface
   ============================================ */

.transfer-container[b-ig4mp74wua] {
    max-width: 600px;
    margin: 0 auto;
    padding: 32px 24px;
    font-family: 'Montserrat', sans-serif;
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-ig4mp74wua] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.btn-back[b-ig4mp74wua] {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.btn-back:hover[b-ig4mp74wua] {
    background-color: #f5f5f5;
}

.btn-back:focus-visible[b-ig4mp74wua] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.page-header h1[b-ig4mp74wua] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    flex: 1;
}

.spacer[b-ig4mp74wua] {
    width: 44px;
    flex-shrink: 0;
}

/* ============================================
   TRANSFER FORM
   ============================================ */

.transfer-form[b-ig4mp74wua] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
}

/* ============================================
   FORM SECTIONS
   ============================================ */

.form-section[b-ig4mp74wua] {
    margin-bottom: 24px;
}

.form-section h3[b-ig4mp74wua] {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.form-control[b-ig4mp74wua] {
    width: 100%;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    background-color: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.form-control:focus[b-ig4mp74wua] {
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
    outline: none;
}

select.form-control[b-ig4mp74wua] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* ============================================
   TRANSFER ARROW
   ============================================ */

.transfer-arrow[b-ig4mp74wua] {
    text-align: center;
    font-size: 28px;
    color: #2a63af;
    margin: 8px 0;
    font-weight: 600;
}

/* ============================================
   AMOUNT INPUT GROUP
   ============================================ */

.input-group[b-ig4mp74wua] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix[b-ig4mp74wua] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-weight: 500;
    font-size: 16px;
    z-index: 1;
    pointer-events: none;
}

.input-group input[b-ig4mp74wua] {
    width: 100%;
    padding: 16px;
    padding-left: 36px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-group input:focus[b-ig4mp74wua] {
    border-color: #2a63af;
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
    outline: none;
}

/* ============================================
   ALERT
   ============================================ */

.alert[b-ig4mp74wua] {
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.5;
}

.alert-error[b-ig4mp74wua] {
    background: #ffebee;
    border: 1px solid #e53935;
    color: #c62828;
}

/* ============================================
   PRIMARY BUTTON
   ============================================ */

.btn-primary[b-ig4mp74wua] {
    width: 100%;
    padding: 16px 24px;
    background: #2a63af;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    margin-top: 8px;
    transition: background-color 0.2s ease;
}

.btn-primary:hover:not(:disabled)[b-ig4mp74wua] {
    background: #234f8e;
}

.btn-primary:focus-visible[b-ig4mp74wua] {
    outline: 2px solid #2a63af;
    outline-offset: 2px;
}

.btn-primary:disabled[b-ig4mp74wua] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-large[b-ig4mp74wua] {
    padding: 16px 24px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (min-width: 768px) {
    .page-header h1[b-ig4mp74wua] {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .transfer-container[b-ig4mp74wua] {
        padding: 16px;
    }

    .transfer-form[b-ig4mp74wua] {
        padding: 16px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .btn-primary[b-ig4mp74wua],
    .btn-back[b-ig4mp74wua],
    .form-control[b-ig4mp74wua],
    .input-group input[b-ig4mp74wua] {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .form-control[b-ig4mp74wua],
    .input-group input[b-ig4mp74wua] {
        border-width: 2px;
    }
}
/* /Pages/Wallet/WalletDetails.razor.rz.scp.css */
/**
 * ATKV Wallet Details Page Styles
 * Aligned to Figma wallet-desktop.html design specs
 * Breakpoints: 393px (mobile), 744px (tablet), desktop (default)
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.wallet-details-page[b-hj7j33641q] {
    min-height: 100vh;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
}

.wallet-details-content[b-hj7j33641q] {
    flex: 1;
    padding: 48px 24px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-hj7j33641q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-back[b-hj7j33641q] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: none;
    border: none;
    padding: 0;
    font-size: 24px;
    color: var(--color-primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all var(--transition-base);
}

.btn-back:hover[b-hj7j33641q] {
    background: rgba(42, 99, 175, 0.08);
}

.btn-back:focus-visible[b-hj7j33641q] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.btn-back:active[b-hj7j33641q] {
    transform: scale(0.95);
}

.page-header h1[b-hj7j33641q] {
    flex: 1;
    margin: 0;
    font-size: var(--heading-h2-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-align: center;
}

.spacer[b-hj7j33641q] {
    width: 44px;
    flex-shrink: 0;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-container[b-hj7j33641q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-hj7j33641q] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--card-border);
    border-top: 4px solid var(--color-primary-blue);
    border-radius: 50%;
    animation: spin-b-hj7j33641q 1s linear infinite;
}

@keyframes spin-b-hj7j33641q {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-hj7j33641q] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ==========================================================================
   Balance Card (Figma spec)
   ========================================================================== */

.wallet-cards-container[b-hj7j33641q] {
    display: flex;
    justify-content: center;
}

.wallet-balance-card[b-hj7j33641q] {
    width: 603px;
    height: 280px;
    background: linear-gradient(to left, var(--color-white) 0%, var(--color-primary-blue) 100%);
    border: 2px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wallet-card-header[b-hj7j33641q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.wallet-balance-title[b-hj7j33641q] {
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    line-height: var(--line-height-tight);
    margin: 0;
}

.wallet-balance-display[b-hj7j33641q] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wallet-icon-circle[b-hj7j33641q] {
    width: 77px;
    height: 74px;
    background: var(--color-white);
    border: 2px solid var(--card-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wallet-coin-icon[b-hj7j33641q] {
    font-size: 32px;
    color: var(--color-primary-blue);
}

.wallet-amount[b-hj7j33641q] {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
}

/* ==========================================================================
   Quick Actions
   ========================================================================== */

.quick-actions[b-hj7j33641q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 694px;
    margin: 0 auto;
    width: 100%;
}

.action-card[b-hj7j33641q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    min-height: 100px;
    background: var(--color-white);
    border: 2px solid var(--card-border);
    border-radius: var(--radius-card);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family-primary);
}

.action-card:hover[b-hj7j33641q] {
    border-color: var(--color-primary-blue);
    box-shadow: var(--shadow-sm);
}

.action-card:focus-visible[b-hj7j33641q] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.action-card:active[b-hj7j33641q] {
    transform: scale(0.95);
}

.action-icon[b-hj7j33641q] {
    font-size: 32px;
    color: var(--color-primary-blue);
}

.action-card span:last-child[b-hj7j33641q] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* ==========================================================================
   Recent Transactions
   ========================================================================== */

.recent-transactions[b-hj7j33641q] {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--card-shadow-sm);
    border: 1px solid var(--card-border);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.recent-transactions h3[b-hj7j33641q] {
    margin: 0 0 24px 0;
    font-size: var(--heading-h3-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.transactions-list[b-hj7j33641q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.transaction-item[b-hj7j33641q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: var(--card-background);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base);
}

.transaction-item:hover[b-hj7j33641q] {
    background-color: rgba(42, 99, 175, 0.04);
}

.transaction-info[b-hj7j33641q] {
    flex: 1;
}

.transaction-info h4[b-hj7j33641q] {
    margin: 0 0 4px 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.transaction-info p[b-hj7j33641q] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.transaction-amount[b-hj7j33641q] {
    font-family: 'Roboto', sans-serif;
    font-size: var(--heading-h4-size);
    font-weight: var(--font-weight-bold);
    margin-left: 12px;
    white-space: nowrap;
}

.transaction-amount.positive[b-hj7j33641q] {
    color: #00a651;
}

.transaction-amount.negative[b-hj7j33641q] {
    color: #e74c3c;
}

.currency-symbol[b-hj7j33641q] {
    font-weight: var(--font-weight-bold);
}

.btn-view-all[b-hj7j33641q] {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--color-white);
    color: var(--color-primary-blue);
    border: 2px solid var(--color-primary-blue);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: 44px;
    font-family: var(--font-family-primary);
}

.btn-view-all:hover[b-hj7j33641q] {
    background-color: var(--color-primary-blue);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.btn-view-all:focus-visible[b-hj7j33641q] {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.btn-view-all:active[b-hj7j33641q] {
    transform: scale(0.98);
}

.empty-transactions[b-hj7j33641q] {
    text-align: center;
    padding: 64px 16px;
    color: var(--color-text-secondary);
}

.empty-transactions p[b-hj7j33641q] {
    margin: 0;
    font-size: var(--font-size-base);
}

/* ==========================================================================
   Tablet (max-width: 744px)
   ========================================================================== */

@media (max-width: 744px) {
    .wallet-details-content[b-hj7j33641q] {
        padding: 48px 16px;
        gap: 40px;
    }

    .wallet-balance-card[b-hj7j33641q] {
        width: 100%;
        max-width: 724px;
    }

    .quick-actions[b-hj7j33641q] {
        max-width: 100%;
    }

    .recent-transactions[b-hj7j33641q] {
        padding: 24px;
    }
}

/* ==========================================================================
   Mobile (max-width: 393px)
   ========================================================================== */

@media (max-width: 393px) {
    .wallet-details-content[b-hj7j33641q] {
        padding: 24px 16px;
        gap: 32px;
    }

    .page-header h1[b-hj7j33641q] {
        font-size: var(--heading-h3-size);
    }

    .wallet-balance-card[b-hj7j33641q] {
        width: 100%;
        max-width: 367px;
        height: auto;
        min-height: 280px;
        margin: 0 auto;
    }

    .wallet-balance-title[b-hj7j33641q] {
        font-size: 28px;
    }

    .wallet-amount[b-hj7j33641q] {
        font-size: 24px;
    }

    .wallet-icon-circle[b-hj7j33641q] {
        width: 60px;
        height: 58px;
    }

    .wallet-coin-icon[b-hj7j33641q] {
        font-size: 24px;
    }

    .quick-actions[b-hj7j33641q] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .action-card:last-child[b-hj7j33641q] {
        grid-column: 1 / -1;
    }

    .action-icon[b-hj7j33641q] {
        font-size: 24px;
    }

    .action-card span:last-child[b-hj7j33641q] {
        font-size: var(--font-size-sm);
    }

    .recent-transactions[b-hj7j33641q] {
        padding: 20px;
    }

    .recent-transactions h3[b-hj7j33641q] {
        font-size: var(--heading-h4-size);
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .spinner[b-hj7j33641q],
    .action-card[b-hj7j33641q],
    .btn-back[b-hj7j33641q],
    .btn-view-all[b-hj7j33641q],
    .transaction-item[b-hj7j33641q] {
        transition: none;
        animation: none;
    }

    .action-card:active[b-hj7j33641q],
    .btn-back:active[b-hj7j33641q],
    .btn-view-all:active[b-hj7j33641q] {
        transform: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .wallet-balance-card[b-hj7j33641q],
    .action-card[b-hj7j33641q],
    .recent-transactions[b-hj7j33641q],
    .transaction-item[b-hj7j33641q] {
        border: 2px solid var(--color-text-primary);
    }

    .btn-view-all[b-hj7j33641q] {
        border-width: 2px;
    }
}

/* Print */
@media print {
    .btn-back[b-hj7j33641q],
    .quick-actions[b-hj7j33641q],
    .btn-view-all[b-hj7j33641q] {
        display: none;
    }

    .wallet-balance-card[b-hj7j33641q],
    .recent-transactions[b-hj7j33641q] {
        box-shadow: none;
        border: 1px solid #000;
    }

    .transaction-item[b-hj7j33641q] {
        page-break-inside: avoid;
    }
}

/* =========================================================================
   Wallet details redesign (matches docs/ui-redesign/screens/11-wallet-sticitt-details.html).
   Uses the global redesign CSS classes (.wallet-hero, .list-row, .pill,
   .section, .card, .row) for layout, with scoped tweaks here for the
   appbar, action row, and list separators that aren't expressed globally.
   ========================================================================= */
.wallet-details-redesign[b-hj7j33641q] {
    background: #fff;
    min-height: 100vh;
    padding-bottom: 32px;
}

.wallet-details-appbar[b-hj7j33641q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--atkv-line, #e5e7eb);
}

.wallet-details-appbar__title[b-hj7j33641q] {
    font-weight: 600;
    font-size: 16px;
    margin-left: 8px;
}

.wallet-details-redesign__hero-section[b-hj7j33641q] {
    padding: 20px 16px 0;
}

.wallet-details-redesign__actions[b-hj7j33641q] {
    gap: 12px;
}

.wallet-details-redesign__action[b-hj7j33641q] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wallet-details-redesign__list[b-hj7j33641q] {
    padding: 0;
    overflow: hidden;
}

.wallet-details-redesign__list .list-row--last[b-hj7j33641q] {
    border-bottom: 0;
}

.wallet-details-redesign__amount--in[b-hj7j33641q] {
    color: var(--status-confirmed-fg, #16a34a);
}

.wallet-details-redesign__view-all[b-hj7j33641q] {
    margin-top: 8px;
    background: transparent;
    border: 0;
    color: var(--atkv-blue, #2a63af);
    font-weight: 600;
    padding: 8px 0;
    cursor: pointer;
}

.wallet-details-redesign__empty[b-hj7j33641q] {
    padding: 24px;
    text-align: center;
    color: var(--atkv-muted, #6b7280);
}
/* /Shared/Components/ResortCard.razor.rz.scp.css */
/* ============================================
   RESORT CARD COMPONENT - ATKV MOBILE APP
   Reusable resort card for catalog display
   ============================================ */

.resort-card[b-1o3a6lq11t] {
    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-1o3a6lq11t] {
    box-shadow: var(--atkv-shadow-xl);
    transform: translateY(-4px);
}

.resort-card:active[b-1o3a6lq11t] {
    transform: translateY(-2px);
}

.resort-card:focus-visible[b-1o3a6lq11t] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.resort-image[b-1o3a6lq11t] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: var(--atkv-bg-light);
}

.resort-content[b-1o3a6lq11t] {
    padding: var(--atkv-space-lg);
}

.resort-header[b-1o3a6lq11t] {
    margin-bottom: var(--atkv-space-md);
}

.resort-name[b-1o3a6lq11t] {
    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-1o3a6lq11t] {
    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-1o3a6lq11t] {
    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-1o3a6lq11t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atkv-space-xs);
    margin-bottom: var(--atkv-space-md);
}

.amenity-tag[b-1o3a6lq11t] {
    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-1o3a6lq11t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--atkv-space-md);
    border-top: 1px solid var(--atkv-border-divider);
}


.btn-view[b-1o3a6lq11t] {
    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-1o3a6lq11t] {
    background-color: var(--atkv-primary-black);
}

.btn-view:focus-visible[b-1o3a6lq11t] {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .resort-card[b-1o3a6lq11t] {
        transition: none;
    }

    .resort-card:hover[b-1o3a6lq11t] {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    .resort-card[b-1o3a6lq11t] {
        border: 2px solid var(--atkv-border-divider);
    }
}
/* /Shared/Components/TjiengWalletWidget.razor.rz.scp.css */
.tjieng-wallet[b-cl8dhm1juy] {
    background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
}

.members-only-badge[b-cl8dhm1juy] {
    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-cl8dhm1juy] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    opacity: 0.8;
    text-align: center;
}

.lock-icon[b-cl8dhm1juy] {
    font-size: 48px;
    margin-bottom: 10px;
}

.wallet-locked p[b-cl8dhm1juy] {
    margin: 0;
    font-size: 14px;
}
/* /Shared/Components/ZarWalletWidget.razor.rz.scp.css */
.wallet-widget[b-4ftopiaj8o] {
    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-4ftopiaj8o] {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.zar-wallet[b-4ftopiaj8o] {
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
}

.wallet-header[b-4ftopiaj8o] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.wallet-icon[b-4ftopiaj8o] {
    font-size: 24px;
}

.wallet-header h3[b-4ftopiaj8o] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    opacity: 0.95;
}

.wallet-loading[b-4ftopiaj8o] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.loading-spinner[b-4ftopiaj8o] {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-4ftopiaj8o 1s linear infinite;
}

@keyframes spin-b-4ftopiaj8o {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.wallet-balance[b-4ftopiaj8o] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 20px 0;
}

.currency[b-4ftopiaj8o] {
    font-size: 24px;
    font-weight: 600;
}

.amount[b-4ftopiaj8o] {
    font-size: 36px;
    font-weight: bold;
    letter-spacing: -0.5px;
}

.wallet-footer[b-4ftopiaj8o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    opacity: 0.9;
    margin-top: 15px;
}

.last-updated[b-4ftopiaj8o] {
    font-style: italic;
}

.tap-hint[b-4ftopiaj8o] {
    font-weight: 600;
}

.wallet-error[b-4ftopiaj8o] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    opacity: 0.8;
}

.wallet-error p[b-4ftopiaj8o] {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 768px) {
    .wallet-widget[b-4ftopiaj8o] {
        min-height: 140px;
        padding: 15px;
    }

    .amount[b-4ftopiaj8o] {
        font-size: 28px;
    }

    .currency[b-4ftopiaj8o] {
        font-size: 20px;
    }
}