/* /Components/AdminBottomNavigationBar.razor.rz.scp.css */
.bottom-nav-container[b-66t5urep1z] {
    flex-shrink: 0;
    width: 100%;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0px -1px 1px 0px rgba(32, 31, 29, 0.2);
}

.bottom-nav-bar[b-66t5urep1z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0;
    max-width: 402px;
    margin: 0 auto;
}

.nav-item[b-66t5urep1z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.nav-item:hover[b-66t5urep1z] {
    background-color: rgba(206, 177, 133, 0.1);
}

.nav-item.active[b-66t5urep1z] {
    color: #CEB185;
}

.nav-item.active[b-66t5urep1z]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #CEB185;
    border-radius: 23px;
}

.nav-icon[b-66t5urep1z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.nav-icon img[b-66t5urep1z] {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%);
}

.nav-item.active .nav-icon img[b-66t5urep1z] {
    filter: invert(72%) sepia(85%) saturate(352%) hue-rotate(4deg) brightness(94%) contrast(92%) !important;
}

.nav-icon i[b-66t5urep1z] {
    font-size: 24px;
    color: #201F1D;
    transition: color 0.2s ease;
}

.nav-item.active .nav-icon i[b-66t5urep1z] {
    color: #CEB185 !important;
}

.dashboard-icon-fallback[b-66t5urep1z],
.clients-icon-fallback[b-66t5urep1z] {
    font-size: 24px;
    line-height: 1;
    display: block;
}

.nav-label[b-66t5urep1z] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: #201F1D;
    white-space: nowrap;
}

.nav-item.active .nav-label[b-66t5urep1z] {
    font-weight: 500 !important;
    color: #CEB185 !important;
}

/* Additional styles to ensure active state is working */
.nav-item.active[b-66t5urep1z] {
    background-color: rgba(206, 177, 133, 0.1) !important;
}

.nav-item.active[b-66t5urep1z]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #CEB185 !important;
    border-radius: 23px;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .bottom-nav-bar[b-66t5urep1z] {
        max-width: 100%;
    }
}
/* /Components/AdminTopHeader.razor.rz.scp.css */
/* Admin Top Header */
.admin-top-header[b-uut13qyens] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 1000;
}

.header-logo[b-uut13qyens] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-uut13qyens] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-actions[b-uut13qyens] {
    position: absolute;
    right: 10px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-notifications[b-uut13qyens] {
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notifications:hover[b-uut13qyens] {
    background-color: #f0f0f0;
    transform: scale(1.1);
}

.header-notifications:active[b-uut13qyens] {
    transform: scale(0.95);
}

.notification-icon[b-uut13qyens] {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-uut13qyens] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.notification-badge[b-uut13qyens] {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    border: 2px solid #FFFFFF;
}

.notification-badge span[b-uut13qyens] {
    line-height: 1;
}

.header-settings[b-uut13qyens] {
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-settings:hover[b-uut13qyens] {
    background-color: #f0f0f0;
    transform: scale(1.1);
}

.header-settings:active[b-uut13qyens] {
    transform: scale(0.95);
}

.header-settings img[b-uut13qyens] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Responsive Design */
@media (max-width: 480px) {
    .header-logo[b-uut13qyens] {
        width: 150px;
    }

    .header-actions[b-uut13qyens] {
        gap: 10px;
    }

    .header-notifications[b-uut13qyens],
    .header-settings[b-uut13qyens] {
        width: 28px;
        height: 28px;
    }

    .notification-icon[b-uut13qyens] {
        width: 28px;
        height: 28px;
    }

    .notification-badge[b-uut13qyens] {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }
}

@media (max-width: 360px) {
    .header-logo[b-uut13qyens] {
        width: 130px;
    }

    .header-actions[b-uut13qyens] {
        gap: 8px;
    }

    .header-notifications[b-uut13qyens],
    .header-settings[b-uut13qyens] {
        width: 24px;
        height: 24px;
    }

    .notification-icon[b-uut13qyens] {
        width: 24px;
        height: 24px;
    }

    .notification-badge[b-uut13qyens] {
        width: 14px;
        height: 14px;
        font-size: 8px;
    }
}
/* /Components/BottomNavigationBar.razor.rz.scp.css */
.bottom-nav-container[b-3d1dbppciq] {
    flex-shrink: 0;
    width: 100%;
    max-width: 402px;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0px -1px 1px 0px rgba(32, 31, 29, 0.2);
}

.bottom-nav-bar[b-3d1dbppciq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0;
    max-width: 402px;
    margin: 0 auto;
    width: 100%;
}

.nav-item[b-3d1dbppciq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.nav-item:hover[b-3d1dbppciq] {
    background-color: rgba(206, 177, 133, 0.1);
}

.nav-item.active[b-3d1dbppciq] {
    color: #CEB185;
    background-color: rgba(206, 177, 133, 0.1) !important;
}

.nav-item.active[b-3d1dbppciq]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #CEB185 !important;
    border-radius: 23px;
}

.nav-icon[b-3d1dbppciq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.nav-icon img[b-3d1dbppciq] {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%);
    object-fit: contain;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Specific fix for Profile icon to match other icons */
.nav-item:first-child .nav-icon img[b-3d1dbppciq] {
    width: 48px;
    height: 48px;
}

/* Fix for Events icon to make it wider */
.nav-item:nth-child(4) .nav-icon img[b-3d1dbppciq] {
    width: 32px;
    height: 24px;
}

.nav-item.active .nav-icon img[b-3d1dbppciq] {
    filter: brightness(0) saturate(100%) invert(65%) sepia(85%) saturate(350%) hue-rotate(4deg) brightness(95%) contrast(90%) !important;
}

.nav-label[b-3d1dbppciq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: #201F1D;
    white-space: nowrap;
}

.nav-item.active .nav-label[b-3d1dbppciq] {
    font-weight: 500 !important;
    color: #CEB185 !important;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .bottom-nav-bar[b-3d1dbppciq] {
        max-width: 100%;
    }
}
/* /Components/ClientBottomNavigationBar.razor.rz.scp.css */
.bottom-nav-container[b-p7xr0ryfwt] {
    flex-shrink: 0;
    width: 100%;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0px -1px 1px 0px rgba(32, 31, 29, 0.2);
}

.bottom-nav-bar[b-p7xr0ryfwt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0;
    max-width: 402px;
    margin: 0 auto;
}

.nav-item[b-p7xr0ryfwt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.nav-item:hover[b-p7xr0ryfwt] {
    background-color: rgba(206, 177, 133, 0.1);
}

.nav-item.active[b-p7xr0ryfwt] {
    color: #CEB185;
    background-color: rgba(206, 177, 133, 0.1) !important;
}

.nav-item.active[b-p7xr0ryfwt]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #CEB185 !important;
    border-radius: 23px;
}

.nav-icon[b-p7xr0ryfwt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.nav-icon img[b-p7xr0ryfwt] {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%);
}

.nav-item.active .nav-icon img[b-p7xr0ryfwt] {
    filter: invert(72%) sepia(85%) saturate(352%) hue-rotate(4deg) brightness(94%) contrast(92%) !important;
}

.nav-label[b-p7xr0ryfwt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: #201F1D;
    white-space: nowrap;
}

.nav-item.active .nav-label[b-p7xr0ryfwt] {
    font-weight: 500 !important;
    color: #CEB185 !important;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .bottom-nav-bar[b-p7xr0ryfwt] {
        max-width: 100%;
    }
}
/* /Components/ClientTopHeader.razor.rz.scp.css */
/* Client Top Header */
.search-header[b-g6frwu1eef] {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    height: calc(60px + env(safe-area-inset-top, 0));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0) 20px 0 20px;
    z-index: 1000;
}

.header-logo[b-g6frwu1eef] {
    position: absolute;
    left: 20px;
    top: calc(env(safe-area-inset-top, 0) + 15px);
    height: 29px;
    width: 175px;
}

.header-logo img[b-g6frwu1eef] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-g6frwu1eef] {
    position: absolute;
    right: 20px;
    top: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notifications:hover[b-g6frwu1eef] {
    background-color: #f0f0f0;
    transform: translateY(-50%) scale(1.1);
}

.header-notifications:active[b-g6frwu1eef] {
    transform: translateY(-50%) scale(0.95);
}

.notification-icon[b-g6frwu1eef] {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-g6frwu1eef] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.notification-badge[b-g6frwu1eef] {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    border: 2px solid #FFFFFF;
}

.notification-badge span[b-g6frwu1eef] {
    line-height: 1;
}

.header-actions[b-g6frwu1eef] {
    position: absolute;
    right: 0px;
    top: calc(env(safe-area-inset-top, 0) + 10px);
}

/* Responsive Design */
@media (max-width: 480px) {
    .header-logo[b-g6frwu1eef] {
        width: 150px;
    }

    .notification-icon[b-g6frwu1eef] {
        width: 36px;
        height: 36px;
    }

    .notification-badge[b-g6frwu1eef] {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }
}

@media (max-width: 360px) {
    .header-logo[b-g6frwu1eef] {
        width: 130px;
    }

    .notification-icon[b-g6frwu1eef] {
        width: 32px;
        height: 32px;
    }

    .notification-badge[b-g6frwu1eef] {
        width: 14px;
        height: 14px;
        font-size: 8px;
    }
}
/* /Components/ConfirmDialog.razor.rz.scp.css */
.confirm-dialog-overlay[b-hy2ic3j8ls] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: 24px;
}

.confirm-dialog-overlay.visible[b-hy2ic3j8ls] {
    opacity: 1;
    visibility: visible;
}

.confirm-dialog[b-hy2ic3j8ls] {
    background: #ffffff;
    width: 100%;
    max-width: 340px;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.confirm-dialog-title[b-hy2ic3j8ls] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: #201f1d;
    margin: 0;
}

.confirm-dialog-message[b-hy2ic3j8ls] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: #4a4946;
    margin: 0;
}

.confirm-dialog-actions[b-hy2ic3j8ls] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.confirm-dialog-btn[b-hy2ic3j8ls] {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.confirm-dialog-btn:disabled[b-hy2ic3j8ls] {
    cursor: not-allowed;
    opacity: 0.6;
}

.confirm-dialog-btn.secondary[b-hy2ic3j8ls] {
    background-color: #ffffff;
    color: #201f1d;
    border-color: #E8E5E0;
}

.confirm-dialog-btn.secondary:hover:not(:disabled)[b-hy2ic3j8ls] {
    background-color: #F5F3EF;
}

.confirm-dialog-btn.primary[b-hy2ic3j8ls] {
    background-color: #201f1d;
    color: #ffffff;
}

.confirm-dialog-btn.primary:hover:not(:disabled)[b-hy2ic3j8ls] {
    background-color: #3a3835;
}

.confirm-dialog.danger .confirm-dialog-btn.primary[b-hy2ic3j8ls] {
    background-color: #842029;
}

.confirm-dialog.danger .confirm-dialog-btn.primary:hover:not(:disabled)[b-hy2ic3j8ls] {
    background-color: #6d1a22;
}
/* /Components/EventFilterModal.razor.rz.scp.css */
/* Event Filter Modal Styles */
.event-filter-modal-overlay[b-fild78xftq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.event-filter-modal-overlay.visible[b-fild78xftq] {
    opacity: 1;
    visibility: visible;
}

.event-filter-modal[b-fild78xftq] {
    background: white;
    width: 100%;
    max-width: 402px;
    height: 100vh;
    max-height: 90vh;
    border-radius: 0;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.event-filter-header[b-fild78xftq] {
    position: relative;
    background: white;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
}

.close-button[b-fild78xftq] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: white;
}

.close-button img[b-fild78xftq] {
    width: 24px;
    height: 24px;
}

.event-filter-title[b-fild78xftq] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    z-index: 5;
}

.clear-filters[b-fild78xftq] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
    color: #CEB185;
    cursor: pointer;
    text-align: right;
    width: 159px;
    flex-shrink: 0;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}

/* Filter Sections */
.event-filter-section[b-fild78xftq] {
    padding: 25px;
}

.event-filter-section-header[b-fild78xftq] {
    margin-bottom: 16px;
}

.event-filter-section-title[b-fild78xftq] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201F1D;
}

/* Dropdown Styles */
.event-filter-dropdown-container[b-fild78xftq] {
    position: relative;
}

.event-filter-dropdown[b-fild78xftq] {
    background: white;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    cursor: pointer;
    position: relative;
}

.event-filter-dropdown-text[b-fild78xftq] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    flex: 1;
}

.event-filter-dropdown-arrow[b-fild78xftq] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.event-filter-dropdown-arrow.rotated[b-fild78xftq] {
    transform: rotate(180deg);
}

.event-filter-dropdown-arrow img[b-fild78xftq] {
    width: 100%;
    height: 100%;
}

.event-filter-dropdown-options[b-fild78xftq] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #E8E5E0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}

.event-filter-dropdown-option[b-fild78xftq] {
    padding: 12px 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    cursor: pointer;
    border-bottom: 1px solid #E8E5E0;
}

.event-filter-dropdown-option:last-child[b-fild78xftq] {
    border-bottom: none;
}

.event-filter-dropdown-option:hover[b-fild78xftq] {
    background-color: #F5F5F5;
}

.event-filter-dropdown-option.selected[b-fild78xftq] {
    background-color: #CEB185;
    color: white;
}

.event-filter-dropdown-option.disabled[b-fild78xftq] {
    color: #999;
    cursor: not-allowed;
}

/* Date Input Styles */
.event-filter-date-container[b-fild78xftq] {
    display: flex;
    gap: 8px;
    width: 100%;
}

.event-filter-date-input-container[b-fild78xftq] {
    flex: 1;
    min-width: 0;
    max-width: 50%;
}

.event-filter-date-input[b-fild78xftq] {
    position: relative;
    background: white;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 44px;
    display: flex;
    align-items: center;
}

.event-filter-date-field[b-fild78xftq] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 15px 0 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    background: transparent;
    box-sizing: border-box;
    min-width: 0;
}

.event-filter-date-icon[b-fild78xftq] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.event-filter-date-icon img[b-fild78xftq] {
    width: 100%;
    height: 100%;
}

/* Divider */
.event-filter-divider[b-fild78xftq] {
    height: 1px;
    background-color: #E8E5E0;
    margin: 0 25px;
}

/* Apply Button */
.event-filter-apply-button-container[b-fild78xftq] {
    padding: 25px;
    padding-top: 40px;
}

.event-filter-apply-button[b-fild78xftq] {
    width: 100%;
    height: 44px;
    background: #201F1D;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.event-filter-apply-button:hover[b-fild78xftq] {
    background-color: #3A3A3A;
}

.event-filter-apply-button:active[b-fild78xftq] {
    background-color: #1A1A1A;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .event-filter-modal[b-fild78xftq] {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
    }

    .event-filter-date-container[b-fild78xftq] {
        flex-direction: column;
        gap: 12px;
    }

    .event-filter-date-input-container[b-fild78xftq] {
        max-width: 100%;
        flex: none;
    }
}

/* Additional responsive adjustments for very small screens */
@media (max-width: 360px) {
    .event-filter-date-field[b-fild78xftq] {
        font-size: 14px;
        padding: 0 12px 0 12px;
    }

    .event-filter-date-input[b-fild78xftq] {
        height: 40px;
    }
}
/* /Components/FilterModal.razor.rz.scp.css */
/* Filter Modal Styles */
.filter-modal-overlay[b-1licq5dn3y] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.filter-modal-overlay.visible[b-1licq5dn3y] {
    opacity: 1;
    visibility: visible;
}

.filter-modal[b-1licq5dn3y] {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filter-modal[b-1licq5dn3y]::-webkit-scrollbar {
    display: none;
}

/* Header */
.filter-header[b-1licq5dn3y] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    z-index: 10;
    flex-shrink: 0;
}

.close-button[b-1licq5dn3y] {
    position: absolute;
    left: 18px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: white;
}

.close-button img[b-1licq5dn3y] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.filter-title[b-1licq5dn3y] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
}

.clear-filters[b-1licq5dn3y] {
    position: absolute;
    right: 20px;
    bottom: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
    color: #CEB185;
    cursor: pointer;
}

/* Filter Sections */
.filter-section[b-1licq5dn3y] {
    padding: 25px;
}

.filter-section-header[b-1licq5dn3y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filter-section-title[b-1licq5dn3y] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201F1D;
}

/* Height Range Dropdowns */
.height-dropdowns-container[b-1licq5dn3y] {
    margin-top: 20px;
}

.height-dropdowns[b-1licq5dn3y] {
    display: flex;
    gap: 16px;
}

.height-dropdown[b-1licq5dn3y] {
    flex: 1;
}

.height-dropdown-label[b-1licq5dn3y] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #201F1D;
    margin-bottom: 8px;
}

/* Dropdowns */
.dropdown-container[b-1licq5dn3y] {
    position: relative;
    margin-top: 20px;
}

.dropdown-button[b-1licq5dn3y] {
    width: 100%;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.dropdown-button:hover[b-1licq5dn3y] {
    border-color: #CEB185;
}

.dropdown-text[b-1licq5dn3y] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
}

.dropdown-arrow[b-1licq5dn3y] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.dropdown-arrow.rotated[b-1licq5dn3y] {
    transform: rotate(180deg);
}

.dropdown-menu[b-1licq5dn3y] {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    min-width: auto;
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: inherit;
    text-align: left;
    list-style: none;
}

.dropdown-item[b-1licq5dn3y] {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    white-space: normal;
    background-color: transparent;
    border: 0;
}

.dropdown-item:hover[b-1licq5dn3y] {
    background-color: #F5F5F5;
}

.dropdown-item.selected[b-1licq5dn3y] {
    background-color: #CEB185;
    color: #FFFFFF;
}

.dropdown-item.disabled[b-1licq5dn3y] {
    color: #999;
    cursor: not-allowed;
}

/* Checkboxes */
.checkbox-list[b-1licq5dn3y] {
    margin-top: 20px;
}

.checkbox-item[b-1licq5dn3y] {
    margin-bottom: 16px;
}

.checkbox-container[b-1licq5dn3y] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkbox-input[b-1licq5dn3y] {
    width: 26px;
    height: 26px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    cursor: pointer;
    appearance: none;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-input:checked[b-1licq5dn3y] {
    background-color: #CEB185;
    border-color: #CEB185;
}

.checkbox-input:checked[b-1licq5dn3y]::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
}

.checkbox-label[b-1licq5dn3y] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    cursor: pointer;
    flex: 1;
}

.view-more-languages[b-1licq5dn3y] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    cursor: pointer;
    margin-top: 16px;
    text-align: left;
}

.additional-languages[b-1licq5dn3y] {
    margin-top: 16px;
}

/* Dividers */
.filter-divider[b-1licq5dn3y] {
    height: 1px;
    background-color: #E8E5E0;
    margin: 0 25px;
}

/* Apply Button */
.apply-button-container[b-1licq5dn3y] {
    padding: 25px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background-color: #FFFFFF;
}

.apply-button[b-1licq5dn3y] {
    width: 100%;
    height: 44px;
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.apply-button:hover[b-1licq5dn3y] {
    background-color: #333;
}


/* Responsive adjustments */
@media (max-width: 402px) {
    .filter-section[b-1licq5dn3y] {
        padding: 20px;
    }

    .filter-divider[b-1licq5dn3y] {
        margin: 0 20px;
    }

    .apply-button-container[b-1licq5dn3y] {
        padding: 20px;
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 360px) {
    .filter-header[b-1licq5dn3y] {
        padding: 0 15px;
    }

    .close-button[b-1licq5dn3y] {
        left: 15px;
    }

    .clear-filters[b-1licq5dn3y] {
        right: 15px;
    }

    .filter-section[b-1licq5dn3y] {
        padding: 15px;
    }

    .filter-divider[b-1licq5dn3y] {
        margin: 0 15px;
    }

    .apply-button-container[b-1licq5dn3y] {
        padding: 15px;
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    }
}
/* /Components/ImageCropper.razor.rz.scp.css */
/* Image Cropper Container */
.image-cropper-container[b-1jeuaqlpth] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    max-width: 100%;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

/* Cropper Header */
.cropper-header[b-1jeuaqlpth] {
    text-align: center;
    margin-bottom: 16px;
}

.cropper-title[b-1jeuaqlpth] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.cropper-subtitle[b-1jeuaqlpth] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Cropper Wrapper */
.cropper-wrapper[b-1jeuaqlpth] {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8f8f8;
    min-height: 200px;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.image-cropper[b-1jeuaqlpth] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Cropper Controls */
.cropper-controls[b-1jeuaqlpth] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Rotation Controls */
.cropper-rotation-controls[b-1jeuaqlpth] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Cropper Actions */
.cropper-actions[b-1jeuaqlpth] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.cropper-btn[b-1jeuaqlpth] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cropper-btn-cancel[b-1jeuaqlpth] {
    background-color: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.cropper-btn-cancel:hover[b-1jeuaqlpth] {
    background-color: #E8E5E0;
    transform: translateY(-1px);
}

.cropper-btn-cancel:active[b-1jeuaqlpth] {
    transform: translateY(0);
}

.cropper-btn-crop[b-1jeuaqlpth] {
    background-color: #201F1D;
    color: #FFFFFF;
}

.cropper-btn-crop:hover:not(:disabled)[b-1jeuaqlpth] {
    background-color: #3A3937;
    transform: translateY(-1px);
}

.cropper-btn-crop:active:not(:disabled)[b-1jeuaqlpth] {
    background-color: #1A1917;
}

.cropper-btn-crop:disabled[b-1jeuaqlpth] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

.cropper-btn-rotate[b-1jeuaqlpth] {
    background-color: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
    min-width: 140px;
}

.cropper-btn-rotate:hover:not(:disabled)[b-1jeuaqlpth] {
    background-color: #E8E5E0;
    transform: translateY(-1px);
}

.cropper-btn-rotate:active:not(:disabled)[b-1jeuaqlpth] {
    transform: translateY(0);
}

.cropper-btn-rotate:disabled[b-1jeuaqlpth] {
    background-color: #F5F5F5;
    cursor: not-allowed;
    opacity: 0.6;
}

.rotate-icon[b-1jeuaqlpth] {
    font-size: 18px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.cropper-btn-rotate:hover:not(:disabled) .rotate-icon[b-1jeuaqlpth] {
    transform: rotate(15deg);
}

.cropper-spinner[b-1jeuaqlpth] {
    width: 16px;
    height: 16px;
    border: 2px solid #FFFFFF;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-1jeuaqlpth 1s linear infinite;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .image-cropper-container[b-1jeuaqlpth] {
        padding: 12px;
        margin: 8px;
        border-radius: 8px;
    }

    .cropper-header[b-1jeuaqlpth] {
        margin-bottom: 12px;
    }

    .cropper-title[b-1jeuaqlpth] {
        font-size: 18px;
    }

    .cropper-subtitle[b-1jeuaqlpth] {
        font-size: 13px;
    }

    .cropper-wrapper[b-1jeuaqlpth] {
        min-height: 180px;
        max-height: 50vh;
        margin-bottom: 12px;
    }

    .cropper-rotation-controls[b-1jeuaqlpth] {
        flex-direction: column;
        gap: 8px;
    }

    .cropper-actions[b-1jeuaqlpth] {
        flex-direction: column;
        gap: 8px;
    }

    .cropper-btn[b-1jeuaqlpth] {
        width: 100%;
        padding: 14px 24px;
    }
}

@media (max-width: 480px) {
    .image-cropper-container[b-1jeuaqlpth] {
        padding: 8px;
        margin: 4px;
        border-radius: 6px;
    }

    .cropper-header[b-1jeuaqlpth] {
        margin-bottom: 8px;
    }

    .cropper-title[b-1jeuaqlpth] {
        font-size: 16px;
    }

    .cropper-subtitle[b-1jeuaqlpth] {
        font-size: 12px;
    }

    .cropper-wrapper[b-1jeuaqlpth] {
        min-height: 150px;
        max-height: 45vh;
        margin-bottom: 8px;
    }
}

/* Desktop Layout Optimization */
@media (min-width: 1024px) {
    .image-cropper-container[b-1jeuaqlpth] {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    .cropper-wrapper[b-1jeuaqlpth] {
        max-height: 500px;
        min-height: 300px;
    }
}

/* Large Desktop Layout */
@media (min-width: 1440px) {
    .image-cropper-container[b-1jeuaqlpth] {
        max-width: 900px;
        padding: 24px;
    }

    .cropper-wrapper[b-1jeuaqlpth] {
        max-height: 600px;
        min-height: 350px;
    }
}

/* Circular crop mask */
.cropper-circle-mode[b-1jeuaqlpth]  .cropper-view-box,
.cropper-circle-mode[b-1jeuaqlpth]  .cropper-face {
    border-radius: 50%;
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .image-cropper[b-1jeuaqlpth] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}
/* /Components/MuxVideoCard.razor.rz.scp.css */
/* Mux Video Card */
.mux-video-card[b-gcj9mm5aem] {
    width: 171px;
    height: 181px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f0f0f0;
    border: 1px solid rgba(232, 229, 224, 0.5);
}

.mux-video-card:hover[b-gcj9mm5aem] {
    transform: scale(1.02);
    border-color: #CEB185;
}

.mux-video-card.selected[b-gcj9mm5aem] {
    border: 3px solid #CEB185;
    transform: scale(0.98);
}

.mux-video-card.selected:hover[b-gcj9mm5aem] {
    transform: scale(1.0);
}

/* Video Thumbnail */
.video-thumbnail[b-gcj9mm5aem] {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.thumbnail-image[b-gcj9mm5aem] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.thumbnail-placeholder[b-gcj9mm5aem] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.play-icon[b-gcj9mm5aem] {
    font-size: 32px;
    color: #666;
    opacity: 0.7;
}

/* Duration Overlay */
.duration-overlay[b-gcj9mm5aem] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}

/* Play Button Overlay */
.play-overlay[b-gcj9mm5aem] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.mux-video-card:hover .play-overlay[b-gcj9mm5aem] {
    opacity: 1;
}

.play-button[b-gcj9mm5aem] {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.play-button:hover[b-gcj9mm5aem] {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

/* Selection Indicators */
.selection-indicator[b-gcj9mm5aem] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 15;
}

.selection-circle[b-gcj9mm5aem] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.selection-check[b-gcj9mm5aem] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #CEB185;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Delete Overlay */
.delete-overlay[b-gcj9mm5aem] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
}

.delete-button[b-gcj9mm5aem] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.delete-button:hover[b-gcj9mm5aem] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

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

.delete-button svg[b-gcj9mm5aem] {
    width: 14px;
    height: 14px;
}

/* Video Info */
.video-info[b-gcj9mm5aem] {
    position: absolute;
    bottom: -35px;
    left: 0;
    width: 163px;
    padding-top: 10px;
    z-index: 1;
}

.video-title[b-gcj9mm5aem] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    line-height: 1.3;
    margin: 0;
    word-break: break-word;
    hyphens: auto;
}

.video-duration[b-gcj9mm5aem] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin-top: 2px;
}

/* Responsive Design */
@media (max-width: 480px) {
    .mux-video-card[b-gcj9mm5aem] {
        width: 100%;
        height: 181px;
    }

    .video-info[b-gcj9mm5aem] {
        width: 100%;
    }

    .video-title[b-gcj9mm5aem] {
        font-size: 14px;
    }

    .video-duration[b-gcj9mm5aem] {
        font-size: 12px;
    }

    .play-button[b-gcj9mm5aem] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .selection-circle[b-gcj9mm5aem],
    .selection-check[b-gcj9mm5aem] {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .delete-button[b-gcj9mm5aem] {
        width: 32px;
        height: 32px;
    }

    .delete-button svg[b-gcj9mm5aem] {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 360px) {
    .video-title[b-gcj9mm5aem] {
        font-size: 13px;
    }

    .video-duration[b-gcj9mm5aem] {
        font-size: 11px;
    }

    .play-button[b-gcj9mm5aem] {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}
/* /Components/MuxVideoPlayer.razor.rz.scp.css */
/* Mux Video Player */
.mux-video-player[b-spslufhbzd] {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}

.video-element[b-spslufhbzd] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background-color: #000;
}

.video-duration[b-spslufhbzd] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    pointer-events: none;
    z-index: 10;
}

.video-placeholder[b-spslufhbzd] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    color: #666;
}

.placeholder-icon[b-spslufhbzd] {
    font-size: 48px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.placeholder-text[b-spslufhbzd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #666;
}

/* Full-screen mode for PortfolioOverlay */
.mux-video-player.fullscreen[b-spslufhbzd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    border-radius: 0;
}

.mux-video-player.fullscreen .video-element[b-spslufhbzd] {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
}

/* Desktop - constrain video to fit viewport */
@media (min-width: 768px) {
    .mux-video-player[b-spslufhbzd] {
        max-width: 80vw;
        max-height: 70vh;
        width: auto;
        height: auto;
    }

    .video-element[b-spslufhbzd] {
        max-width: 80vw;
        max-height: 70vh;
        width: auto;
        height: auto;
    }
}

@media (min-width: 1024px) {
    .mux-video-player[b-spslufhbzd] {
        max-width: 70vw;
        max-height: 75vh;
    }

    .video-element[b-spslufhbzd] {
        max-width: 70vw;
        max-height: 75vh;
    }
}

@media (min-width: 1440px) {
    .mux-video-player[b-spslufhbzd] {
        max-width: 60vw;
        max-height: 80vh;
    }

    .video-element[b-spslufhbzd] {
        max-width: 60vw;
        max-height: 80vh;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .video-duration[b-spslufhbzd] {
        font-size: 12px;
        padding: 2px 6px;
    }

    .placeholder-icon[b-spslufhbzd] {
        font-size: 36px;
    }

    .placeholder-text[b-spslufhbzd] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .video-duration[b-spslufhbzd] {
        font-size: 11px;
        padding: 2px 4px;
    }

    .placeholder-icon[b-spslufhbzd] {
        font-size: 32px;
    }

    .placeholder-text[b-spslufhbzd] {
        font-size: 13px;
    }
}

/* Video controls styling */
.video-element[b-spslufhbzd]::-webkit-media-controls {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}

.video-element[b-spslufhbzd]::-webkit-media-controls-panel {
    background: transparent;
}

.video-element[b-spslufhbzd]::-webkit-media-controls-play-button,
.video-element[b-spslufhbzd]::-webkit-media-controls-pause-button {
    background-color: transparent;
    border: none;
    opacity: 1;
    -webkit-appearance: media-play-button;
}

.video-element[b-spslufhbzd]::-webkit-media-controls-play-button {
    -webkit-appearance: media-play-button;
}

.video-element[b-spslufhbzd]::-webkit-media-controls-pause-button {
    -webkit-appearance: media-pause-button;
}

/* Ensure control icons are visible */
.video-element[b-spslufhbzd]::-webkit-media-controls-play-button,
.video-element[b-spslufhbzd]::-webkit-media-controls-pause-button,
.video-element[b-spslufhbzd]::-webkit-media-controls-mute-button,
.video-element[b-spslufhbzd]::-webkit-media-controls-fullscreen-button {
    color: white;
    background-color: transparent;
    opacity: 1;
}

/* Loading state */
.mux-video-player.loading .video-element[b-spslufhbzd] {
    opacity: 0.5;
}

.mux-video-player.loading[b-spslufhbzd]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-spslufhbzd 1s linear infinite;
    z-index: 20;
}

@keyframes spin-b-spslufhbzd {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Error state */
.mux-video-player.error .video-element[b-spslufhbzd] {
    display: none;
}

.mux-video-player.error .video-placeholder[b-spslufhbzd] {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #d32f2f;
}

.mux-video-player.error .placeholder-icon[b-spslufhbzd] {
    color: #d32f2f;
}

.mux-video-player.error .placeholder-text[b-spslufhbzd] {
    color: #d32f2f;
}
/* /Components/PhotoActionSheet.razor.rz.scp.css */
.photo-action-sheet-overlay[b-ibre0bybvg] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: 24px;
}

.photo-action-sheet-overlay.visible[b-ibre0bybvg] {
    opacity: 1;
    visibility: visible;
}

.photo-action-sheet[b-ibre0bybvg] {
    background: #ffffff;
    width: 100%;
    max-width: 340px;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.photo-action-sheet-title[b-ibre0bybvg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: #201f1d;
    margin: 0;
}

.photo-action-sheet-actions[b-ibre0bybvg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.photo-action-sheet-btn[b-ibre0bybvg] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid #E8E5E0;
    background-color: #ffffff;
    color: #201f1d;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.photo-action-sheet-btn:hover:not(:disabled)[b-ibre0bybvg] {
    background-color: #F5F3EF;
}

.photo-action-sheet-btn.cancel[b-ibre0bybvg] {
    background-color: #201f1d;
    color: #ffffff;
    border-color: #201f1d;
}

.photo-action-sheet-btn.cancel:hover:not(:disabled)[b-ibre0bybvg] {
    background-color: #3a3835;
}
/* /Components/PortfolioOverlay.razor.rz.scp.css */
/* Portfolio Overlay Styles */
.portfolio-overlay[b-71q9gx65pm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(32, 31, 29, 0.6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    touch-action: pan-y;
}

.portfolio-back-button[b-71q9gx65pm] {
    position: absolute;
    top: calc(53px + env(safe-area-inset-top, 0px));
    left: 21px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.2s ease;
}

.portfolio-back-button:hover[b-71q9gx65pm] {
    transform: scale(1.1);
}

.portfolio-back-button img[b-71q9gx65pm] {
    width: 100%;
    height: 100%;
    filter: invert(1);
}

.portfolio-main-image-container[b-71q9gx65pm],
.portfolio-main-media-container[b-71q9gx65pm] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 120px 20px;
    position: relative;
}

.portfolio-main-image[b-71q9gx65pm] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

/* Image Placeholder */
.image-placeholder[b-71q9gx65pm] {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    min-height: 200px;
}

.image-loading[b-71q9gx65pm] {
    font-size: 16px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Desktop-specific sizing for portfolio overlay */
@media (min-width: 768px) {
    .portfolio-main-image-container[b-71q9gx65pm],
    .portfolio-main-media-container[b-71q9gx65pm] {
        padding: 60px 40px 80px 40px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .portfolio-main-image[b-71q9gx65pm] {
        max-width: 80vw;
        max-height: 70vh;
        width: auto;
        height: auto;
        object-fit: contain;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .portfolio-back-button[b-71q9gx65pm] {
        top: 20px;
        left: 20px;
        width: 44px;
        height: 44px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .portfolio-back-button:hover[b-71q9gx65pm] {
        background: rgba(0, 0, 0, 0.7);
        transform: scale(1.1);
    }

    .portfolio-back-button img[b-71q9gx65pm] {
        width: 24px;
        height: 24px;
        filter: invert(1);
    }

    .portfolio-dots-container[b-71q9gx65pm] {
        bottom: 40px;
        background: rgba(0, 0, 0, 0.3);
        padding: 8px 16px;
        border-radius: 20px;
        backdrop-filter: blur(10px);
    }

    .portfolio-dot[b-71q9gx65pm] {
        width: 12px;
        height: 12px;
        margin: 0 4px;
    }

    .portfolio-dot.active[b-71q9gx65pm] {
        transform: scale(1.3);
    }
}

@media (min-width: 1024px) {
    .portfolio-main-image-container[b-71q9gx65pm],
    .portfolio-main-media-container[b-71q9gx65pm] {
        padding: 80px 60px 100px 60px;
        max-width: 1400px;
    }

    .portfolio-main-image[b-71q9gx65pm] {
        max-width: 70vw;
        max-height: 75vh;
    }
}

@media (min-width: 1440px) {
    .portfolio-main-image[b-71q9gx65pm] {
        max-width: 60vw;
        max-height: 80vh;
    }
}

.portfolio-dots-container[b-71q9gx65pm] {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1001;
}

.portfolio-dot[b-71q9gx65pm] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.portfolio-dot.active[b-71q9gx65pm] {
    background: #ceb185;
    transform: scale(1.2);
}

.portfolio-dot:hover[b-71q9gx65pm] {
    background: rgba(255, 255, 255, 0.7);
}

/* Responsive adjustments for portfolio overlay */
@media (max-width: 480px) {
    .portfolio-back-button[b-71q9gx65pm] {
        top: 40px;
        left: 15px;
        width: 35px;
        height: 35px;
    }

    .portfolio-main-image-container[b-71q9gx65pm],
    .portfolio-main-media-container[b-71q9gx65pm] {
        padding: 80px 15px 100px 15px;
    }

    .portfolio-dots-container[b-71q9gx65pm] {
        bottom: 80px;
    }

    .portfolio-dot[b-71q9gx65pm] {
        width: 10px;
        height: 10px;
    }
}
/* /Components/StaffTopHeader.razor.rz.scp.css */
/* Staff Top Header */
.staff-top-header[b-aeq8r2xqwy] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(60px + env(safe-area-inset-top, 0));
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0) 20px 0 20px;
    z-index: 1000;
}

.header-logo[b-aeq8r2xqwy] {
    position: absolute;
    left: 20px;
    top: calc(env(safe-area-inset-top, 0) + 15px);
    height: 29px;
    width: 175px;
}

.header-logo img[b-aeq8r2xqwy] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-actions[b-aeq8r2xqwy] {
    position: absolute;
    right: 20px;
    top: calc(env(safe-area-inset-top, 0) + 10px);
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-notifications[b-aeq8r2xqwy] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notifications:hover[b-aeq8r2xqwy] {
    background-color: #f0f0f0;
    transform: scale(1.1);
}

.header-notifications:active[b-aeq8r2xqwy] {
    transform: scale(0.95);
}

.notification-icon[b-aeq8r2xqwy] {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-aeq8r2xqwy] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-settings[b-aeq8r2xqwy] {
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-settings:hover[b-aeq8r2xqwy] {
    background-color: #f0f0f0;
    transform: scale(1.1);
}

.header-settings:active[b-aeq8r2xqwy] {
    transform: scale(0.95);
}

.header-settings img[b-aeq8r2xqwy] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Responsive Design */
@media (max-width: 480px) {
    .header-logo[b-aeq8r2xqwy] {
        width: 150px;
    }

    .header-actions[b-aeq8r2xqwy] {
        gap: 10px;
    }

    .header-notifications[b-aeq8r2xqwy] {
        width: 36px;
        height: 36px;
    }

    .header-settings[b-aeq8r2xqwy] {
        width: 32px;
        height: 32px;
    }

    .notification-icon[b-aeq8r2xqwy] {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 360px) {
    .header-logo[b-aeq8r2xqwy] {
        width: 130px;
    }

    .header-actions[b-aeq8r2xqwy] {
        gap: 8px;
    }

    .header-notifications[b-aeq8r2xqwy] {
        width: 32px;
        height: 32px;
    }

    .header-settings[b-aeq8r2xqwy] {
        width: 28px;
        height: 28px;
    }

    .notification-icon[b-aeq8r2xqwy] {
        width: 32px;
        height: 32px;
    }
}
/* /Components/VideoOverlay.razor.rz.scp.css */
/* Video Overlay Styles */
.video-overlay[b-w762dki2hx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(32, 31, 29, 0.95);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.video-overlay-back-button[b-w762dki2hx] {
    position: absolute;
    top: calc(53px + env(safe-area-inset-top, 0px));
    left: 21px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.2s ease;
}

.video-overlay-back-button:hover[b-w762dki2hx] {
    transform: scale(1.1);
}

.video-overlay-back-button img[b-w762dki2hx] {
    width: 100%;
    height: 100%;
    filter: invert(1); /* Make the arrow white */
}

.video-overlay-container[b-w762dki2hx] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 120px 20px;
    position: relative;
}

.video-overlay-container .mux-video-player[b-w762dki2hx] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.video-overlay-container .video-element[b-w762dki2hx] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.video-placeholder[b-w762dki2hx] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    color: #666;
    border-radius: 12px;
    min-height: 200px;
}

.placeholder-icon[b-w762dki2hx] {
    font-size: 48px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.placeholder-text[b-w762dki2hx] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #666;
}

/* Desktop-specific sizing for video overlay */
@media (min-width: 768px) {
    .video-overlay-container[b-w762dki2hx] {
        padding: 60px 40px 80px 40px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .video-overlay-container .mux-video-player[b-w762dki2hx] {
        max-width: 80vw;
        max-height: 70vh;
        width: auto;
        height: auto;
    }

    .video-overlay-container .video-element[b-w762dki2hx] {
        max-width: 80vw;
        max-height: 70vh;
        width: auto;
        height: auto;
    }
}

@media (min-width: 1024px) {
    .video-overlay-container[b-w762dki2hx] {
        padding: 80px 60px 100px 60px;
        max-width: 1400px;
    }

    .video-overlay-container .mux-video-player[b-w762dki2hx] {
        max-width: 70vw;
        max-height: 75vh;
    }

    .video-overlay-container .video-element[b-w762dki2hx] {
        max-width: 70vw;
        max-height: 75vh;
    }
}

/* Responsive adjustments for video overlay */
@media (max-width: 480px) {
    .video-overlay-back-button[b-w762dki2hx] {
        top: 40px;
        left: 15px;
        width: 35px;
        height: 35px;
    }

    .video-overlay-container[b-w762dki2hx] {
        padding: 80px 15px 100px 15px;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-layout[b-1qol017b9s] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    max-width: 430px;
    margin: 0 auto;
    width: 100%;
}

.app-content[b-1qol017b9s] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
/* /Pages/AdminClientsView.razor.rz.scp.css */
/* AdminClientsView.razor.css */

.admin-clients-container[b-py28mxabxt] {
    background-color: #FFFFFF;
    height: 100%;
    overflow-y: auto;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.admin-clients-container[b-py28mxabxt]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.search-header[b-py28mxabxt] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-logo[b-py28mxabxt] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-py28mxabxt] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-py28mxabxt] {
    position: absolute;
    right: 20px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
}

.notification-icon[b-py28mxabxt] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-py28mxabxt] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Search Bar Styles */
.search-bar-container[b-py28mxabxt] {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header with spacing */
}

.search-input-container[b-py28mxabxt] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 352px;
}

.search-icon[b-py28mxabxt] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-py28mxabxt] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.search-input[b-py28mxabxt] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-py28mxabxt]::placeholder {
    color: #E8E5E0;
}

/* Filter Buttons */
.filter-buttons[b-py28mxabxt] {
    display: flex;
    gap: 5px;
    padding: 10px 25px; /* Add vertical padding */
    margin-top: 0;
    justify-content: flex-start;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    min-height: 50px; /* Ensure minimum height */
    align-items: center; /* Center buttons vertically */
}

.filter-btn[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 6px 16px;
    border-radius: 44px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent buttons from shrinking */
    min-width: 80px; /* Set minimum width */
    visibility: visible; /* Ensure buttons are visible */
    opacity: 1; /* Ensure buttons are not transparent */
}

.filter-btn.active[b-py28mxabxt] {
    background-color: #201F1D;
    color: #FFFFFF;
    width: 100px;
}

.filter-btn:not(.active)[b-py28mxabxt] {
    background-color: #FFFFFF;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.filter-btn:nth-child(1)[b-py28mxabxt] {
    width: 120px; /* Width for "All Clients" */
}

.filter-btn:nth-child(2)[b-py28mxabxt] {
    width: 120px; /* Width for "Pending" */
}

.filter-btn:nth-child(3)[b-py28mxabxt] {
    width: 96px; /* Width for "Approved" */
}

/* Loading and Error States */
.loading-container[b-py28mxabxt], .error-container[b-py28mxabxt], .no-clients[b-py28mxabxt] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    text-align: center;
}

.loading-container p[b-py28mxabxt], .error-container p[b-py28mxabxt], .no-clients p[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container p[b-py28mxabxt] {
    color: #d32f2f;
}

/* Client Cards */
.client-cards-container[b-py28mxabxt] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.client-card[b-py28mxabxt] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 56px;
    width: 350px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 12px;
}

.client-card:hover[b-py28mxabxt] {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.client-profile-image[b-py28mxabxt] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-img[b-py28mxabxt] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.client-info[b-py28mxabxt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.client-name[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.client-company[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #666666;
    margin: 0;
}

.client-status[b-py28mxabxt] {
    flex-shrink: 0;
    text-align: right;
}

.status-text[b-py28mxabxt] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.status-text.pending[b-py28mxabxt] {
    color: #CEB185;
}

.status-text.approved[b-py28mxabxt] {
    color: #CEB185;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .admin-clients-container[b-py28mxabxt] {
        max-width: 100%;
    }

    .search-bar-container[b-py28mxabxt] {
        padding: 10px 20px;
        padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header + notch on mobile */
    }

    .filter-buttons[b-py28mxabxt] {
        padding: 10px 20px; /* Add vertical padding */
        gap: 3px; /* Reduce gap slightly for mobile */
        min-height: 50px; /* Ensure minimum height */
    }

    .client-cards-container[b-py28mxabxt] {
        padding: 20px;
    }

    .client-card[b-py28mxabxt] {
        width: 100%;
        max-width: 350px;
    }
}

@media (max-width: 360px) {
    .search-header[b-py28mxabxt] {
        padding: 0 15px;
    }

    .header-logo[b-py28mxabxt] {
        left: 15px;
        width: 150px;
    }

    .header-notifications[b-py28mxabxt] {
        right: 15px;
    }

    .search-bar-container[b-py28mxabxt] {
        padding: 10px 15px;
        padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header + notch on very small screens */
    }

    .filter-buttons[b-py28mxabxt] {
        padding: 10px 15px; /* Add vertical padding */
        gap: 2px; /* Even smaller gap for very small screens */
        min-height: 50px; /* Ensure minimum height */
    }

    .filter-btn[b-py28mxabxt] {
        font-size: 14px; /* Slightly smaller font for very small screens */
        padding: 6px 12px; /* Reduce padding */
        min-width: 70px; /* Smaller minimum width */
    }

    .filter-btn:nth-child(1)[b-py28mxabxt] {
        width: 100px; /* Further reduce width for "All Clients" */
    }

    .filter-btn:nth-child(2)[b-py28mxabxt] {
        width: 100px; /* Further reduce width */
    }

    .client-cards-container[b-py28mxabxt] {
        padding: 15px;
    }
}

/* /Pages/AdminCreateEvent.razor.rz.scp.css */
/* Admin Create Event Container */
.create-event-container[b-zw4upkgagb] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.create-event-header[b-zw4upkgagb] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-zw4upkgagb] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-zw4upkgagb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-zw4upkgagb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

/* Content */
.create-event-content[b-zw4upkgagb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 26px 220px 26px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Photo Section */
.photo-section[b-zw4upkgagb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.photo-container[b-zw4upkgagb] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.photo-background[b-zw4upkgagb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.event-image[b-zw4upkgagb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.photo-overlay[b-zw4upkgagb] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-overlay img[b-zw4upkgagb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add-photo-link[b-zw4upkgagb] {
    margin-top: 10px;
}

.add-photo-text[b-zw4upkgagb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Form Groups */
.form-group[b-zw4upkgagb] {
    margin-bottom: 25px;
    display: block !important;
    visibility: visible !important;
}

.form-label[b-zw4upkgagb] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-zw4upkgagb] {
    color: #CEB185;
}

.form-input-container[b-zw4upkgagb] {
    position: relative;
    width: 100%;
}

.form-input[b-zw4upkgagb] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
}

.form-input:focus[b-zw4upkgagb] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-zw4upkgagb]::placeholder {
    color: #E8E5E0;
}

.form-input[type="date"][b-zw4upkgagb] {
    line-height: 44px;
}

.form-input[type="date"][b-zw4upkgagb]::-webkit-datetime-edit {
    padding: 0;
    display: inline-flex;
    align-items: center;
    height: 44px;
}

select.form-input[b-zw4upkgagb] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dropdown-icon[b-zw4upkgagb] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-icon img[b-zw4upkgagb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Submit Section */
.submit-section[b-zw4upkgagb] {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 350px;
    padding: 0 20px;
    text-align: center;
    border: 0px;
    background-color: transparent;
    z-index: 100;
}

.submit-button[b-zw4upkgagb] {
    width: 100%;
    max-width: 290px;
    height: 44px;
    background-color: #000000 !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
    border: none;
}

.submit-button:hover:not(.disabled)[b-zw4upkgagb] {
    background-color: #2a2927 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button .button-text[b-zw4upkgagb] {
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
}

.submit-button.disabled[b-zw4upkgagb] {
    background-color: #d4d4d4 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled:hover[b-zw4upkgagb] {
    background-color: #d4d4d4 !important;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled .button-text[b-zw4upkgagb] {
    color: #666666;
}

/* Error and Success Messages */
.error-message[b-zw4upkgagb] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #FFE6E6;
    color: #D32F2F;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.success-message[b-zw4upkgagb] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #E8F5E8;
    color: #2E7D32;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 480px) {
    .create-event-content[b-zw4upkgagb] {
        padding: 15px 20px 220px 20px;
    }

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

    .photo-container[b-zw4upkgagb] {
        width: 100px;
        height: 100px;
    }

    .photo-overlay[b-zw4upkgagb] {
        width: 50px;
        height: 50px;
    }

    .submit-section[b-zw4upkgagb] {
        padding: 0 15px;
        max-width: 100%;
    }

    .submit-button[b-zw4upkgagb] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .create-event-content[b-zw4upkgagb] {
        padding: 10px 15px 220px 15px;
    }

    .header-title[b-zw4upkgagb] {
        font-size: 20px;
    }

    .form-label[b-zw4upkgagb] {
        font-size: 14px;
    }

    .form-input[b-zw4upkgagb] {
        font-size: 14px;
    }

    .add-photo-text[b-zw4upkgagb] {
        font-size: 14px;
    }

    .submit-button[b-zw4upkgagb] {
        font-size: 14px;
    }

    .submit-section[b-zw4upkgagb] {
        padding: 0 10px;
    }
}

@media (max-height: 700px) {
    .create-event-content[b-zw4upkgagb] {
        padding-bottom: 200px;
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-zw4upkgagb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-zw4upkgagb] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-zw4upkgagb 0.3s ease-out;
}

@keyframes modalSlideIn-b-zw4upkgagb {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-zw4upkgagb] {
        padding: 10px;
    }

    .cropper-modal-container[b-zw4upkgagb] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-zw4upkgagb] {
        padding: 5px;
    }

    .cropper-modal-container[b-zw4upkgagb] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/AdminDashboard.razor.rz.scp.css */
/* Loading and Error States */
.loading-container[b-jgockqfwaz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-jgockqfwaz] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-jgockqfwaz 1s linear infinite;
}

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

.loading-container p[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container[b-jgockqfwaz] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-jgockqfwaz] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

/* Hide scrollbar for admin-dashboard-container */
.admin-dashboard-container[b-jgockqfwaz] {
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    height: 100%; /* Full height */
    overflow-y: auto; /* Enable vertical scrolling */
}

.admin-dashboard-container[b-jgockqfwaz]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Dashboard Content */
.dashboard-content[b-jgockqfwaz] {
    padding: 20px;
    padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header + notch */
    max-width: 402px;
    margin: 0 auto;
}

/* Welcome Section */
.welcome-section[b-jgockqfwaz] {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 0;
}

.dashboard-title[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.dashboard-subtitle[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Stats Grid */
.stats-grid[b-jgockqfwaz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 30px;
}

.stat-card[b-jgockqfwaz] {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-jgockqfwaz] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.stat-icon[b-jgockqfwaz] {
    width: 48px;
    height: 48px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon img[b-jgockqfwaz] {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.stat-content[b-jgockqfwaz] {
    flex: 1;
}

.stat-number[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 1.2;
}

/* Section Titles */
.section-title[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 20px 0;
}

/* Quick Actions Section */
.quick-actions-section[b-jgockqfwaz] {
    margin-bottom: 30px;
}

.quick-actions-grid[b-jgockqfwaz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.action-card[b-jgockqfwaz] {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

.action-card:hover[b-jgockqfwaz] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.action-card:active[b-jgockqfwaz] {
    transform: translateY(0);
}

.action-icon[b-jgockqfwaz] {
    width: 48px;
    height: 48px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
}

.action-icon img[b-jgockqfwaz] {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(69%) sepia(13%) saturate(1234%) hue-rotate(10deg) brightness(94%) contrast(88%);
}

.action-content[b-jgockqfwaz] {
    text-align: center;
}

.action-title[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.action-description[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Recent Activity Section */
.recent-activity-section[b-jgockqfwaz] {
    margin-bottom: 30px;
}

.activity-list[b-jgockqfwaz] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.activity-item[b-jgockqfwaz] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}

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

.activity-icon[b-jgockqfwaz] {
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon img[b-jgockqfwaz] {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(69%) sepia(13%) saturate(1234%) hue-rotate(10deg) brightness(94%) contrast(88%);
}

.activity-content[b-jgockqfwaz] {
    flex: 1;
}

.activity-title[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 4px 0;
}

.activity-description[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.activity-time[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #999;
}

.no-activity[b-jgockqfwaz] {
    padding: 40px 20px;
    text-align: center;
}

.no-activity p[b-jgockqfwaz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-container[b-jgockqfwaz] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }

    .loading-spinner[b-jgockqfwaz] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .loading-container p[b-jgockqfwaz] {
        font-size: 14px;
    }

    .error-container[b-jgockqfwaz] {
        min-height: 40vh;
        padding: 1rem;
    }

    .error-message[b-jgockqfwaz] {
        font-size: 16px;
    }

    .dashboard-content[b-jgockqfwaz] {
        padding: 15px;
        padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header + notch on mobile */
    }

    .dashboard-title[b-jgockqfwaz] {
        font-size: 24px;
    }

    .dashboard-subtitle[b-jgockqfwaz] {
        font-size: 14px;
    }

    .stats-grid[b-jgockqfwaz] {
        gap: 12px;
    }

    .stat-card[b-jgockqfwaz] {
        padding: 16px;
        gap: 12px;
    }

    .stat-icon[b-jgockqfwaz] {
        width: 40px;
        height: 40px;
    }

    .stat-icon img[b-jgockqfwaz] {
        width: 28px;
        height: 28px;
    }

    .stat-number[b-jgockqfwaz] {
        font-size: 20px;
    }

    .stat-label[b-jgockqfwaz] {
        font-size: 12px;
    }

    .quick-actions-grid[b-jgockqfwaz] {
        gap: 12px;
    }

    .action-card[b-jgockqfwaz] {
        padding: 16px;
    }

    .action-icon[b-jgockqfwaz] {
        width: 40px;
        height: 40px;
    }

    .action-icon img[b-jgockqfwaz] {
        width: 20px;
        height: 20px;
    }

    .action-title[b-jgockqfwaz] {
        font-size: 14px;
    }

    .action-description[b-jgockqfwaz] {
        font-size: 12px;
    }

    .activity-item[b-jgockqfwaz] {
        padding: 16px;
        gap: 12px;
    }

    .activity-icon[b-jgockqfwaz] {
        width: 36px;
        height: 36px;
    }

    .activity-icon img[b-jgockqfwaz] {
        width: 18px;
        height: 18px;
    }

    .activity-title[b-jgockqfwaz] {
        font-size: 14px;
    }

    .activity-description[b-jgockqfwaz] {
        font-size: 12px;
    }

    .activity-time[b-jgockqfwaz] {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .quick-actions-grid[b-jgockqfwaz] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dashboard-title[b-jgockqfwaz] {
        font-size: 22px;
    }
}

@media (max-width: 360px) {
    .dashboard-content[b-jgockqfwaz] {
        padding: 15px;
        padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header + notch on very small screens */
    }
}

/* /Pages/AdminEditEvent.razor.rz.scp.css */
/* Admin Edit Event Container */
.edit-event-container[b-tqrymew60s] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.edit-event-header[b-tqrymew60s] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-tqrymew60s] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-tqrymew60s] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-tqrymew60s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

/* Content */
.edit-event-content[b-tqrymew60s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 26px 220px 26px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Photo Section */
.photo-section[b-tqrymew60s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.photo-container[b-tqrymew60s] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.photo-background[b-tqrymew60s] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.event-image[b-tqrymew60s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.photo-overlay[b-tqrymew60s] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-overlay img[b-tqrymew60s] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add-photo-link[b-tqrymew60s] {
    margin-top: 10px;
}

.add-photo-text[b-tqrymew60s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Form Groups */
.form-group[b-tqrymew60s] {
    margin-bottom: 25px;
    display: block !important;
    visibility: visible !important;
}

.form-label[b-tqrymew60s] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-tqrymew60s] {
    color: #CEB185;
}

.form-input-container[b-tqrymew60s] {
    position: relative;
    width: 100%;
}

.form-input[b-tqrymew60s] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
}

.form-input:focus[b-tqrymew60s] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-tqrymew60s]::placeholder {
    color: #E8E5E0;
}

.form-input[type="date"][b-tqrymew60s] {
    line-height: 44px;
}

.form-input[type="date"][b-tqrymew60s]::-webkit-datetime-edit {
    padding: 0;
    display: inline-flex;
    align-items: center;
    height: 44px;
}

select.form-input[b-tqrymew60s] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dropdown-icon[b-tqrymew60s] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-icon img[b-tqrymew60s] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Submit Section */
.submit-section[b-tqrymew60s] {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 350px;
    padding: 0 20px;
    text-align: center;
    border: 0px;
    background-color: transparent;
    z-index: 100;
}

.submit-button[b-tqrymew60s] {
    width: 100%;
    max-width: 290px;
    height: 44px;
    background-color: #000000 !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
    border: none;
}

.submit-button:hover:not(.disabled)[b-tqrymew60s] {
    background-color: #2a2927 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button .button-text[b-tqrymew60s] {
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
}

.submit-button.disabled[b-tqrymew60s] {
    background-color: #d4d4d4 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled:hover[b-tqrymew60s] {
    background-color: #d4d4d4 !important;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled .button-text[b-tqrymew60s] {
    color: #666666;
}

/* Error and Success Messages */
.error-message[b-tqrymew60s] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #FFE6E6;
    color: #D32F2F;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.success-message[b-tqrymew60s] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #E8F5E8;
    color: #2E7D32;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

/* Loading State */
.loading-state[b-tqrymew60s] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    flex: 1;
}

.loading-state p[b-tqrymew60s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201F1D;
    margin: 0;
}

/* Error State */
.error-state[b-tqrymew60s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
    flex: 1;
}

.error-state p[b-tqrymew60s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201F1D;
    margin: 0;
}

.back-to-events[b-tqrymew60s] {
    background-color: #CEB185;
    color: #201F1D;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-tqrymew60s] {
    background-color: #b8a06a;
}

/* Responsive Design */
@media (max-width: 480px) {
    .edit-event-content[b-tqrymew60s] {
        padding: 15px 20px 220px 20px;
    }

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

    .photo-container[b-tqrymew60s] {
        width: 100px;
        height: 100px;
    }

    .photo-overlay[b-tqrymew60s] {
        width: 50px;
        height: 50px;
    }

    .submit-section[b-tqrymew60s] {
        padding: 0 15px;
        max-width: 100%;
    }

    .submit-button[b-tqrymew60s] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .edit-event-content[b-tqrymew60s] {
        padding: 10px 15px 220px 15px;
    }

    .header-title[b-tqrymew60s] {
        font-size: 20px;
    }

    .form-label[b-tqrymew60s] {
        font-size: 14px;
    }

    .form-input[b-tqrymew60s] {
        font-size: 14px;
    }

    .add-photo-text[b-tqrymew60s] {
        font-size: 14px;
    }

    .submit-button[b-tqrymew60s] {
        font-size: 14px;
    }

    .submit-section[b-tqrymew60s] {
        padding: 0 10px;
    }
}

@media (max-height: 700px) {
    .edit-event-content[b-tqrymew60s] {
        padding-bottom: 200px;
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-tqrymew60s] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-tqrymew60s] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-tqrymew60s 0.3s ease-out;
}

@keyframes modalSlideIn-b-tqrymew60s {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-tqrymew60s] {
        padding: 10px;
    }

    .cropper-modal-container[b-tqrymew60s] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-tqrymew60s] {
        padding: 5px;
    }

    .cropper-modal-container[b-tqrymew60s] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/AdminEventDetails.razor.rz.scp.css */
/* Admin Event Details Container */
.admin-event-details-container[b-4a5m445gen] {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.admin-event-details-container[b-4a5m445gen]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header */
.event-header[b-4a5m445gen] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-content[b-4a5m445gen] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-4a5m445gen] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.back-button:hover[b-4a5m445gen] {
    background-color: rgba(0, 0, 0, 0.05);
}

.back-button img[b-4a5m445gen] {
    width: 24px;
    height: 24px;
}

.event-title[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 211px;
}

/* Event Content */
.event-content[b-4a5m445gen] {
    flex: 1;
    padding: 0 0 180px 0; /* Add bottom padding to prevent content from being hidden behind fixed button */
    position: relative;
}

/* Event Main Info */
.event-main-info[b-4a5m445gen] {
    display: flex;
    gap: 15px;
    margin: 20px 25px 30px 25px;
    align-items: flex-start;
}

.event-image[b-4a5m445gen] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.event-image img[b-4a5m445gen] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-image[b-4a5m445gen] {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.placeholder-image img[b-4a5m445gen] {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.event-basic-info[b-4a5m445gen] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
    position: relative;
    width: 100%;
}

.event-name[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0 0 8px 0;
    flex: 1;
}

.event-action-buttons[b-4a5m445gen] {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    right: 0;
    top: 0;
}

.edit-event-button[b-4a5m445gen] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.edit-event-button:hover[b-4a5m445gen] {
    background-color: rgba(0, 0, 0, 0.05);
}

.edit-event-button img[b-4a5m445gen] {
    width: 24px;
    height: 24px;
}

.favorite-button[b-4a5m445gen] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.favorite-button:hover[b-4a5m445gen] {
    background-color: rgba(0, 0, 0, 0.05);
}

.favorite-button img[b-4a5m445gen] {
    width: 24px;
    height: 24px;
}

/* Event Details Grid */
.event-details-grid[b-4a5m445gen] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 25px 40px 25px;
}

.detail-section[b-4a5m445gen] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-label[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

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

.detail-content p[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    margin: 0;
}

/* Vacancies Section */
.vacancies-section[b-4a5m445gen] {
    margin: 0 25px 40px 25px;
}

/* Jobs Accordion */
.jobs-accordion[b-4a5m445gen] {
    margin-top: 8px;
}

.accordion-item[b-4a5m445gen] {
    background-color: #ffffff;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.accordion-header[b-4a5m445gen] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid transparent;
}

.accordion-header:hover[b-4a5m445gen] {
    background-color: #f8f7f5;
}

.accordion-title[b-4a5m445gen] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.accordion-title h4[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.job-count[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #ceb185;
}

.accordion-icon[b-4a5m445gen] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.accordion-icon img[b-4a5m445gen] {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.accordion-icon.expanded img[b-4a5m445gen] {
    transform: rotate(180deg);
}

.accordion-content[b-4a5m445gen] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-content.expanded[b-4a5m445gen] {
    max-height: 1000px; /* Large enough to accommodate content */
}

/* Job Cards */
.job-card[b-4a5m445gen] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    gap: 16px;
}

.job-card:last-child[b-4a5m445gen] {
    border-bottom: none;
}

.job-info[b-4a5m445gen] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-type[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.job-description[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin: 0;
}

.job-details[b-4a5m445gen] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.job-detail[b-4a5m445gen] {
    display: flex;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

.job-detail .detail-label[b-4a5m445gen] {
    color: #666;
    min-width: 80px;
}

.job-detail span:not(.detail-label)[b-4a5m445gen] {
    color: #201f1d;
}

.view-job-button[b-4a5m445gen] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.view-job-button:hover[b-4a5m445gen] {
    color: #b8a06a;
    background-color: rgba(206, 177, 133, 0.1);
}

/* No Jobs State */
.no-jobs[b-4a5m445gen] {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f7f5;
    border-radius: 8px;
    margin-top: 8px;
}

.no-jobs p[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Loading State */
.loading-state[b-4a5m445gen] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

/* Error State */
.error-state[b-4a5m445gen] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
}

.error-state p[b-4a5m445gen] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.back-to-events[b-4a5m445gen] {
    background-color: #ceb185;
    color: #201f1d;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-4a5m445gen] {
    background-color: #b8a06a;
}

/* Responsive Design */
@media (max-width: 480px) {
    .event-details-grid[b-4a5m445gen] {
        grid-template-columns: 1fr;
        gap: 20px; /* Increased gap */
        margin: 0 25px 40px 25px; /* Added margin to prevent squashing */
    }

    .event-main-info[b-4a5m445gen] {
        flex-direction: column;
        gap: 15px; /* Increased gap to prevent squashing */
        margin: 25px 25px 35px 25px; /* Increased margins */
    }

    .event-image[b-4a5m445gen] {
        width: 100%;
        height: 120px;
    }

    .vacancies-section[b-4a5m445gen] {
        margin: 0 25px 40px 25px;
    }
}

/* Extra small screens - ensure button is never clipped */
@media (max-width: 360px) {
    .event-main-info[b-4a5m445gen] {
        gap: 20px; /* Even more gap for very small screens */
        margin: 30px 25px 40px 25px; /* Increased margins */
    }

    .vacancies-section[b-4a5m445gen] {
        margin: 0 20px 40px 20px;
    }
}

/* /Pages/AdminEventsView.razor.rz.scp.css */
/* AdminEventsView.razor.css */

.admin-events-container[b-rz8bnivn48] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Search Bar Styles */
.search-bar-container[b-rz8bnivn48] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header with spacing */
}

.search-input-container[b-rz8bnivn48] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 100%;
}

.search-icon[b-rz8bnivn48] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-rz8bnivn48] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.search-input[b-rz8bnivn48] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-rz8bnivn48]::placeholder {
    color: #E8E5E0;
}

/* Content Area */
.content-area[b-rz8bnivn48] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
}

/* Events List */
.events-list[b-rz8bnivn48] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Event Card */
.event-card[b-rz8bnivn48] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: stretch;
    min-height: 85px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
}

.event-card:hover[b-rz8bnivn48] {
    border-color: #CEB185;
    box-shadow: 0px 2px 8px rgba(206, 177, 133, 0.2);
}

.event-image[b-rz8bnivn48] {
    width: 94px;
    height: 83px;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
}

.event-image img[b-rz8bnivn48] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
}

.event-details[b-rz8bnivn48] {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.event-name[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-location[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-date[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
}


/* Loading State */
.loading-state[b-rz8bnivn48] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.loading-state p[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

/* Error State */
.error-container[b-rz8bnivn48] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.error-container p[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #FF6B6B;
    margin: 0;
}

/* Empty State */
.empty-state[b-rz8bnivn48] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.empty-message[b-rz8bnivn48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

/* Create Event Button */
.create-event-section[b-rz8bnivn48] {
    padding: 0 56px 20px 56px;
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
}

.create-event-btn[b-rz8bnivn48] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.create-event-btn:hover[b-rz8bnivn48] {
    background-color: #3a3a3a;
}

.create-event-btn:active[b-rz8bnivn48] {
    background-color: #1a1a1a;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .admin-events-container[b-rz8bnivn48] {
        max-width: 100%;
    }

    .search-bar-container[b-rz8bnivn48] {
        padding: 10px 20px;
        padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header + notch on mobile */
    }

    .content-area[b-rz8bnivn48] {
        padding: 20px 20px;
    }
}

@media (max-width: 360px) {
    .search-bar-container[b-rz8bnivn48] {
        padding: 10px 15px;
        padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header + notch on very small screens */
    }

    .content-area[b-rz8bnivn48] {
        padding: 20px 15px;
    }
}

/* /Pages/AdminFeedback.razor.rz.scp.css */
/* AdminFeedback.razor.css */

.admin-feedback-container[b-vhqck0b4ak] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.admin-feedback-container[b-vhqck0b4ak]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.feedback-header[b-vhqck0b4ak] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-back-button[b-vhqck0b4ak] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-vhqck0b4ak] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-title[b-vhqck0b4ak] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.feedback-content[b-vhqck0b4ak] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding-bottom: 20px;
}

/* Star Rating Section */
.star-rating-section[b-vhqck0b4ak] {
    padding: 20px 25px 0 25px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-label[b-vhqck0b4ak] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.stars-container[b-vhqck0b4ak] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.star-wrapper[b-vhqck0b4ak] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    transition: transform 0.1s ease;
}

.star-wrapper:hover[b-vhqck0b4ak] {
    transform: scale(1.1);
}

.star-wrapper:active[b-vhqck0b4ak] {
    transform: scale(0.95);
}

.star-icon[b-vhqck0b4ak] {
    width: 100%;
    height: 100%;
    aspect-ratio: 19/18;
    object-fit: contain;
    display: block;
}

/* Feedback Text Section */
.feedback-text-section[b-vhqck0b4ak] {
    padding: 0 25px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feedback-textarea[b-vhqck0b4ak] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 206px;
    width: 100%;
    max-width: 350px;
    padding: 14px 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    resize: none;
    outline: none;
}

.feedback-textarea[b-vhqck0b4ak]::placeholder {
    color: rgba(232, 229, 224, 0.5);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.feedback-textarea:focus[b-vhqck0b4ak] {
    border-color: #CEB185;
}

/* Submit Button Section */
.submit-button-section[b-vhqck0b4ak] {
    padding: 0 25px;
    margin-top: auto;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.submit-button[b-vhqck0b4ak] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.submit-button:hover:not(:disabled)[b-vhqck0b4ak] {
    background-color: #3a3835;
}

.submit-button:active:not(:disabled)[b-vhqck0b4ak] {
    transform: translateY(1px);
}

.submit-button.disabled[b-vhqck0b4ak],
.submit-button:disabled[b-vhqck0b4ak] {
    background-color: #E1E1E1;
    color: #AFAFAF;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .admin-feedback-container[b-vhqck0b4ak] {
        max-width: 100%;
    }

    .header-back-button[b-vhqck0b4ak] {
        left: 15px;
    }

    .star-rating-section[b-vhqck0b4ak] {
        padding: 0 20px;
    }

    .feedback-text-section[b-vhqck0b4ak] {
        padding: 0 20px;
    }

    .submit-button-section[b-vhqck0b4ak] {
        padding: 0 20px;
    }

    .feedback-textarea[b-vhqck0b4ak] {
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .header-back-button[b-vhqck0b4ak] {
        left: 12px;
    }

    .star-rating-section[b-vhqck0b4ak] {
        padding: 0 15px;
    }

    .feedback-text-section[b-vhqck0b4ak] {
        padding: 0 15px;
    }

    .submit-button-section[b-vhqck0b4ak] {
        padding: 0 15px;
    }
}

/* /Pages/AdminFeedbackSubmitted.razor.rz.scp.css */
/* AdminFeedbackSubmitted.razor.css */

.admin-feedback-submitted-container[b-45mf1nb0b0] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.admin-feedback-submitted-container[b-45mf1nb0b0]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.feedback-header[b-45mf1nb0b0] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-title[b-45mf1nb0b0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.feedback-content[b-45mf1nb0b0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding-bottom: 20px;
    align-items: center;
    justify-content: flex-start;
}

/* Thank You Message */
.thank-you-message[b-45mf1nb0b0] {
    margin-top: 204px; /* Position at 310px from top (106px header + 204px = 310px) */
    padding: 0 25px;
    text-align: center;
    width: 100%;
    max-width: 402px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thank-you-message p[b-45mf1nb0b0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    width: 272px;
}

/* Done Button Section */
.done-button-section[b-45mf1nb0b0] {
    margin-top: auto;
    margin-bottom: 20px;
    width: 100%;
    max-width: 402px;
    display: flex;
    justify-content: center;
    padding: 0 56px;
}

.done-button[b-45mf1nb0b0] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    text-align: center;
}

.done-button:hover[b-45mf1nb0b0] {
    background-color: #3a3835;
}

.done-button:active[b-45mf1nb0b0] {
    transform: translateY(1px);
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .admin-feedback-submitted-container[b-45mf1nb0b0] {
        max-width: 100%;
    }

    .thank-you-message[b-45mf1nb0b0] {
        padding: 0 20px;
    }

    .thank-you-message p[b-45mf1nb0b0] {
        width: 100%;
        max-width: 272px;
    }

    .done-button-section[b-45mf1nb0b0] {
        padding: 0 20px;
    }

    .done-button[b-45mf1nb0b0] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 360px) {
    .thank-you-message[b-45mf1nb0b0] {
        padding: 0 15px;
        margin-top: 180px;
    }

    .done-button-section[b-45mf1nb0b0] {
        padding: 0 15px;
    }
}

/* Additional safety margin for very small screens */
@media (max-height: 700px) {
    .thank-you-message[b-45mf1nb0b0] {
        margin-top: 150px;
    }
}
/* /Pages/AdminJobDetails.razor.rz.scp.css */
/* Admin Job Details Page Styles */
.admin-job-details-container[b-egkxy5xoh1] {
    background-color: #FFFFFF;
    position: relative;
    overflow-y: auto; /* Enable scrolling */
    height: 100%; /* Set height to enable scrolling */
    min-height: 100%; /* Ensure minimum height */
}

/* Header Styles */
.job-header[b-egkxy5xoh1] {
    background-color: #FFFFFF;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    position: relative;
    width: 100%;
}

.header-content[b-egkxy5xoh1] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-egkxy5xoh1] {
    background: none;
    border: none;
    cursor: pointer;
    height: 40px;
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button img[b-egkxy5xoh1] {
    width: 100%;
    height: 100%;
}

.job-title[b-egkxy5xoh1] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 223px;
}

/* Job Content Styles */
.job-content[b-egkxy5xoh1] {
    padding: 20px 25px 100px 25px; /* Extra bottom padding to ensure content is scrollable and not hidden */
}

.job-section[b-egkxy5xoh1] {
    margin-bottom: 25px;
}

.section-label[b-egkxy5xoh1] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.section-content[b-egkxy5xoh1] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
    word-wrap: break-word;
}

/* Age and Height Row */
.age-height-row[b-egkxy5xoh1] {
    display: flex;
    gap: 20px;
}

.age-section[b-egkxy5xoh1],
.height-section[b-egkxy5xoh1] {
    flex: 1;
}

/* Loading and Error States */
.loading-state[b-egkxy5xoh1],
.error-state[b-egkxy5xoh1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-egkxy5xoh1],
.error-state p[b-egkxy5xoh1] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 20px 0;
}

.back-to-events[b-egkxy5xoh1] {
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    color: #201F1D;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    padding: 12px 24px;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-egkxy5xoh1] {
    background-color: #B8A070;
}

/* Responsive Design */
@media (max-width: 480px) {
    .admin-job-details-container[b-egkxy5xoh1] {
        padding-bottom: 200px; /* Extra space for small screens */
    }

    .job-content[b-egkxy5xoh1] {
        padding: 15px 20px 120px 20px; /* Extra bottom padding for small screens */
    }

    .age-height-row[b-egkxy5xoh1] {
        flex-direction: column;
        gap: 15px;
    }
}

/* Large screens - center content */
@media (min-width: 768px) {
    .job-content[b-egkxy5xoh1] {
        max-width: 600px;
        margin: 0 auto;
        padding: 40px 25px 100px 25px; /* Maintain bottom padding on large screens */
    }
}
/* /Pages/AdminModelsView.razor.rz.scp.css */
/* AdminModelsView.razor.css */

.admin-models-container[b-t7cwzqdc7j] {
    background-color: #FFFFFF;
    height: 100%;
    overflow-y: auto;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.admin-models-container[b-t7cwzqdc7j]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.search-header[b-t7cwzqdc7j] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-logo[b-t7cwzqdc7j] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-t7cwzqdc7j] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-t7cwzqdc7j] {
    position: absolute;
    right: 20px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
}

.notification-icon[b-t7cwzqdc7j] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-t7cwzqdc7j] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Search Bar Styles */
.search-bar-container[b-t7cwzqdc7j] {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header with spacing */
}


.search-input-container[b-t7cwzqdc7j] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 352px;
}

.search-icon[b-t7cwzqdc7j] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-t7cwzqdc7j] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.search-input[b-t7cwzqdc7j] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-t7cwzqdc7j]::placeholder {
    color: #E8E5E0;
}


/* Filter Buttons */
.filter-buttons[b-t7cwzqdc7j] {
    display: flex;
    gap: 5px;
    padding: 10px 25px; /* Add vertical padding */
    margin-top: 0;
    justify-content: flex-start;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    min-height: 50px; /* Ensure minimum height */
    align-items: center; /* Center buttons vertically */
}

.filter-btn[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 6px 16px;
    border-radius: 44px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent buttons from shrinking */
    min-width: 80px; /* Set minimum width */
    visibility: visible; /* Ensure buttons are visible */
    opacity: 1; /* Ensure buttons are not transparent */
}

.filter-btn.active[b-t7cwzqdc7j] {
    background-color: #201F1D;
    color: #FFFFFF;
    width: 100px;
}

.filter-btn:not(.active)[b-t7cwzqdc7j] {
    background-color: #FFFFFF;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.filter-btn:nth-child(2)[b-t7cwzqdc7j] {
    width: 120px; /* Reduced from 150px */
}

.filter-btn:nth-child(3)[b-t7cwzqdc7j] {
    width: 96px;
}

/* Loading and Error States */
.loading-container[b-t7cwzqdc7j], .error-container[b-t7cwzqdc7j], .no-models[b-t7cwzqdc7j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    text-align: center;
    min-height: 50vh;
    width: 100%;
}

.loading-container p[b-t7cwzqdc7j], .error-container p[b-t7cwzqdc7j], .no-models p[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container p[b-t7cwzqdc7j] {
    color: #d32f2f;
}

/* Model Cards */
.model-cards-container[b-t7cwzqdc7j] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.model-card[b-t7cwzqdc7j] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 80px;
    width: 350px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 12px;
}

.model-card:hover[b-t7cwzqdc7j] {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.model-profile-image[b-t7cwzqdc7j] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-img[b-t7cwzqdc7j] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.model-info[b-t7cwzqdc7j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.model-primary-info[b-t7cwzqdc7j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.model-name[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #201F1D;
    margin: 0;
}

.model-location[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #666666;
    margin: 0;
}

.model-experience[b-t7cwzqdc7j] {
    margin-top: 2px;
}

.experience-text[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    color: #999999;
    margin: 0;
    font-style: italic;
}


.model-status[b-t7cwzqdc7j] {
    flex-shrink: 0;
    text-align: right;
}

.status-text[b-t7cwzqdc7j] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.status-text.pending[b-t7cwzqdc7j] {
    color: #CEB185;
}

.status-text.approved[b-t7cwzqdc7j] {
    color: #CEB185;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .admin-models-container[b-t7cwzqdc7j] {
        max-width: 100%;
    }

    .search-bar-container[b-t7cwzqdc7j] {
        padding: 10px 20px;
        padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header + notch on mobile */
    }

    .filter-buttons[b-t7cwzqdc7j] {
        padding: 10px 20px; /* Add vertical padding */
        gap: 3px; /* Reduce gap slightly for mobile */
        min-height: 50px; /* Ensure minimum height */
    }

    .model-cards-container[b-t7cwzqdc7j] {
        padding: 20px;
    }

    .model-card[b-t7cwzqdc7j] {
        width: 100%;
        max-width: 350px;
    }

    .loading-container[b-t7cwzqdc7j], .error-container[b-t7cwzqdc7j], .no-models[b-t7cwzqdc7j] {
        padding: 20px 15px;
        min-height: 40vh;
    }
}

@media (max-width: 360px) {
    .search-header[b-t7cwzqdc7j] {
        padding: 0 15px;
    }

    .header-logo[b-t7cwzqdc7j] {
        left: 15px;
        width: 150px;
    }

    .header-notifications[b-t7cwzqdc7j] {
        right: 15px;
    }

    .search-bar-container[b-t7cwzqdc7j] {
        padding: 10px 15px;
        padding-top: calc(120px + env(safe-area-inset-top, 0px)); /* Account for fixed header + notch on very small screens */
    }

    .filter-buttons[b-t7cwzqdc7j] {
        padding: 10px 15px; /* Add vertical padding */
        gap: 2px; /* Even smaller gap for very small screens */
        min-height: 50px; /* Ensure minimum height */
    }

    .filter-btn[b-t7cwzqdc7j] {
        font-size: 14px; /* Slightly smaller font for very small screens */
        padding: 6px 12px; /* Reduce padding */
        min-width: 70px; /* Smaller minimum width */
    }

    .filter-btn:nth-child(2)[b-t7cwzqdc7j] {
        width: 100px; /* Further reduce width */
    }

    .model-cards-container[b-t7cwzqdc7j] {
        padding: 15px;
    }
}

/* /Pages/AdminProspectiveClient.razor.rz.scp.css */
/* AdminProspectiveClient Screen Styles (mirrors AdminViewClientProfile) */
.admin-prospective-client-screen[b-zluuuxmdwm] {
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Main Content Area */
.admin-prospective-client-screen .main-content[b-zluuuxmdwm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

/* Header Section */
.admin-prospective-client-screen .header-section[b-zluuuxmdwm] {
    background-color: var(--color-white);
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 21px;
    position: relative;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.admin-prospective-client-screen .back-button[b-zluuuxmdwm] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    position: absolute;
    left: 21px;
}

.admin-prospective-client-screen .back-button:hover[b-zluuuxmdwm] {
    opacity: 0.7;
}

.admin-prospective-client-screen .back-button img[b-zluuuxmdwm] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-prospective-client-screen .page-title[b-zluuuxmdwm] {
    font-family: var(--font-montserrat-semibold);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height);
    color: var(--color-black);
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 163px;
}

/* Loading Container */
.admin-prospective-client-screen .loading-container[b-zluuuxmdwm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}

.admin-prospective-client-screen .loading-spinner[b-zluuuxmdwm] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: prospect-spin-b-zluuuxmdwm 1s linear infinite;
}

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

.admin-prospective-client-screen .loading-text[b-zluuuxmdwm] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

/* Error Container */
.admin-prospective-client-screen .error-container[b-zluuuxmdwm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}

.admin-prospective-client-screen .error-message[b-zluuuxmdwm] {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 16px;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    max-width: 400px;
    font-family: 'Montserrat', sans-serif;
}

.admin-prospective-client-screen .retry-button[b-zluuuxmdwm] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admin-prospective-client-screen .retry-button:hover[b-zluuuxmdwm] {
    background-color: #B89A6B;
}

/* Client Profile Content */
.admin-prospective-client-screen .client-profile-content[b-zluuuxmdwm] {
    flex: 1;
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 30px;
    padding-bottom: 120px;
}

/* Profile Photo Section */
.admin-prospective-client-screen .profile-photo-section[b-zluuuxmdwm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.admin-prospective-client-screen .photo-container[b-zluuuxmdwm] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.admin-prospective-client-screen .profile-image[b-zluuuxmdwm] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

/* Client Details Section */
.admin-prospective-client-screen .client-details-section[b-zluuuxmdwm] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-prospective-client-screen .detail-group[b-zluuuxmdwm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-prospective-client-screen .detail-label[b-zluuuxmdwm] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #201F1D;
}

.admin-prospective-client-screen .detail-value[b-zluuuxmdwm] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    padding: 12px 16px;
    background-color: #F8F7F5;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.admin-prospective-client-screen .no-data[b-zluuuxmdwm] {
    color: #999999;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-prospective-client-screen .client-profile-content[b-zluuuxmdwm] {
        padding: 0 20px;
        padding-top: 20px;
        padding-bottom: 100px;
    }

    .admin-prospective-client-screen .client-details-section[b-zluuuxmdwm] {
        gap: 20px;
    }

    .admin-prospective-client-screen .detail-group[b-zluuuxmdwm] {
        gap: 6px;
    }

    .admin-prospective-client-screen .detail-label[b-zluuuxmdwm] {
        font-size: 15px;
    }

    .admin-prospective-client-screen .detail-value[b-zluuuxmdwm] {
        font-size: 15px;
        padding: 10px 14px;
        min-height: 40px;
    }
}

@media (max-width: 480px) {
    .admin-prospective-client-screen .client-profile-content[b-zluuuxmdwm] {
        padding: 0 16px;
        padding-top: 16px;
        padding-bottom: 100px;
    }

    .admin-prospective-client-screen .photo-container[b-zluuuxmdwm] {
        width: 100px;
        height: 100px;
    }

    .admin-prospective-client-screen .client-details-section[b-zluuuxmdwm] {
        gap: 18px;
    }

    .admin-prospective-client-screen .detail-label[b-zluuuxmdwm] {
        font-size: 14px;
    }

    .admin-prospective-client-screen .detail-value[b-zluuuxmdwm] {
        font-size: 14px;
        padding: 8px 12px;
        min-height: 36px;
    }
}
/* /Pages/AdminSettings.razor.rz.scp.css */
/* AdminSettings Screen Styles */
.admin-settings-container[b-igqbl1th0z] {
    background-color: var(--color-white);
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.admin-settings-container[b-igqbl1th0z]::-webkit-scrollbar {
    display: none;
}

/* Header with Back Button */
.settings-header[b-igqbl1th0z] {
    position: sticky;
    top: 0;
    background-color: var(--color-white);
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
    gap: 12px;
}

.back-button[b-igqbl1th0z] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.back-button:hover[b-igqbl1th0z] {
    background-color: rgba(0, 0, 0, 0.05);
}

.back-button img[b-igqbl1th0z] {
    width: 24px;
    height: 24px;
}

.header-title[b-igqbl1th0z] {
    font-family: var(--font-montserrat-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title);
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0;
}

/* User Profile Section */
.user-profile-section[b-igqbl1th0z] {
    padding: 44px 0 33px 0;
    text-align: center;
    background-color: var(--color-white);
}

.user-name[b-igqbl1th0z] {
    font-family: var(--font-montserrat-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title);
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0 0 16px 0;
}

.user-role[b-igqbl1th0z] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0;
}

/* Content Styles */
.profile-content[b-igqbl1th0z] {
    padding: 0 25px;
    padding-bottom: 30px;
}

.settings-section[b-igqbl1th0z] {
    margin-bottom: 40px;
}

.section-title[b-igqbl1th0z] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0 0 18px 0;
}

.settings-card[b-igqbl1th0z] {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    height: 160px;
    width: 100%;
    overflow: hidden;
}

.setting-item[b-igqbl1th0z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    height: 80px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
}

.setting-item:hover[b-igqbl1th0z] {
    background-color: rgba(206, 177, 133, 0.1);
}

.setting-item:not(:last-child)[b-igqbl1th0z] {
    border-bottom: 1px solid var(--color-border);
}

.setting-info[b-igqbl1th0z] {
    flex: 1;
}

.setting-label[b-igqbl1th0z] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--color-black);
    margin-bottom: 8px;
}

.setting-description[b-igqbl1th0z] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
}

.setting-arrow[b-igqbl1th0z] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
}

.setting-arrow img[b-igqbl1th0z] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Team Count Badge */
.team-count-badge[b-igqbl1th0z] {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-count[b-igqbl1th0z] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
    text-align: center;
}

/* Logout Section */
.logout-section[b-igqbl1th0z] {
    margin: 46px 0 17px 0;
    display: flex;
    justify-content: center;
}

.logout-button[b-igqbl1th0z] {
    width: 290px;
    height: 44px;
    background-color: var(--color-black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.logout-button:hover[b-igqbl1th0z] {
    background-color: #2a2927;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.logout-text[b-igqbl1th0z] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-button);
    line-height: var(--line-height);
    color: var(--color-white);
    text-align: center;
}

/* Delete Account Section */
.delete-account-section[b-igqbl1th0z] {
    text-align: center;
    margin-bottom: 30px;
}

.delete-account-link[b-igqbl1th0z] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.delete-account-link:hover[b-igqbl1th0z] {
    opacity: 0.7;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .admin-settings-container[b-igqbl1th0z] {
        max-width: 100%;
    }

    .profile-content[b-igqbl1th0z] {
        padding: 0 20px;
    }

    .logout-button[b-igqbl1th0z] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 360px) {
    .header-logo[b-igqbl1th0z] {
        width: 150px;
    }

    .user-name[b-igqbl1th0z] {
        font-size: 20px;
    }

    .section-title[b-igqbl1th0z] {
        font-size: 16px;
    }

    .setting-label[b-igqbl1th0z] {
        font-size: 16px;
    }
}
/* /Pages/AdminSignup.razor.rz.scp.css */
/* AdminSignup Screen Styles */
.admin-signup-screen[b-a9uq4xdz35] {
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

.admin-signup-screen .header[b-a9uq4xdz35] {
    background-color: var(--color-white);
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 21px;
    position: relative;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.admin-signup-screen .back-button[b-a9uq4xdz35] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    position: absolute;
    left: 21px;
}

.admin-signup-screen .back-button:hover[b-a9uq4xdz35] {
    opacity: 0.7;
}

.admin-signup-screen .back-button img[b-a9uq4xdz35] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-signup-screen .page-title[b-a9uq4xdz35] {
    font-family: var(--font-montserrat-semibold);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height);
    color: var(--color-black);
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 163px;
}

.page-title[b-a9uq4xdz35] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 23px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    width: 163px;
    margin: 0;
}

.admin-signup-screen .form-container[b-a9uq4xdz35] {
    flex: 1;
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 50px;
    padding-bottom: 134px; /* Space for bottom elements */
}


/* Error message styles */
.error-message[b-a9uq4xdz35] {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.error-text[b-a9uq4xdz35] {
    color: #c33;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Form Group Styles */
.admin-signup-screen .form-group[b-a9uq4xdz35] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-signup-screen .form-label[b-a9uq4xdz35] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
}

/* Form Input Styles - Matching Password Field Styling */
.admin-signup-screen .form-input[b-a9uq4xdz35] {
    height: 44px;
    padding: 0 16px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    outline: none;
    transition: border-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.admin-signup-screen .form-input:focus[b-a9uq4xdz35] {
    border-color: #CEB185;
}

.admin-signup-screen .form-input[b-a9uq4xdz35]::placeholder {
    color: #999999;
}

/* Password Input Container - Already Working Correctly */
.admin-signup-screen .password-input-container[b-a9uq4xdz35] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.admin-signup-screen .password-input-container .form-input[b-a9uq4xdz35] {
    padding-right: 50px;
}

.admin-signup-screen .visibility-toggle[b-a9uq4xdz35] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.admin-signup-screen .visibility-toggle:hover[b-a9uq4xdz35] {
    opacity: 0.7;
}

.admin-signup-screen .visibility-toggle img[b-a9uq4xdz35] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-signup-screen .password-hint[b-a9uq4xdz35] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin-top: 4px;
}

/* Terms and Conditions Styles */
.admin-signup-screen .terms-container[b-a9uq4xdz35] {
    margin-top: 10px;
}

.admin-signup-screen .checkbox-container[b-a9uq4xdz35] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.admin-signup-screen .checkbox[b-a9uq4xdz35] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.admin-signup-screen .terms-text[b-a9uq4xdz35] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    cursor: pointer;
    white-space: nowrap;
    flex: 1;
}

/* Mobile responsive adjustments for terms text */
@media (max-width: 480px) {
    .admin-signup-screen .terms-text[b-a9uq4xdz35] {
        font-size: 14px;
        white-space: normal;
        line-height: 1.4;
    }

    .admin-signup-screen .checkbox-container[b-a9uq4xdz35] {
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 360px) {
    .admin-signup-screen .terms-text[b-a9uq4xdz35] {
        font-size: 13px;
    }
}

.admin-signup-screen .link[b-a9uq4xdz35] {
    color: #CEB185;
    text-decoration: underline;
}

/* Sign Up Button Styles */
.admin-signup-screen .signup-button[b-a9uq4xdz35] {
    width: 100%;
    height: 44px;
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.admin-signup-screen .signup-button:hover:not(.disabled)[b-a9uq4xdz35] {
    background-color: #B89A6B;
}

.admin-signup-screen .signup-button.disabled[b-a9uq4xdz35] {
    background-color: #999999;
    cursor: not-allowed;
}

.admin-signup-screen .button-text[b-a9uq4xdz35] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
}

/* Login Link Styles */
.admin-signup-screen .login-link[b-a9uq4xdz35] {
    text-align: center;
    margin-top: 20px;
}

.admin-signup-screen .login-link p[b-a9uq4xdz35] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

/* Profile photo section styles */
.admin-signup-screen .profile-photo-section[b-a9uq4xdz35] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

/* Profile image styles */
.admin-signup-screen .profile-image[b-a9uq4xdz35] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

.admin-signup-screen .photo-container[b-a9uq4xdz35] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.admin-signup-screen .photo-container:hover[b-a9uq4xdz35] {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.admin-signup-screen .photo-background[b-a9uq4xdz35] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-signup-screen .person-icon[b-a9uq4xdz35] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.admin-signup-screen .add-photo-text[b-a9uq4xdz35] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #CEB185;
    text-decoration: underline;
    cursor: pointer;
}

/* Cropper Modal Styles */
.cropper-modal-overlay[b-a9uq4xdz35] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-a9uq4xdz35] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-a9uq4xdz35 0.3s ease-out;
}

@keyframes modalSlideIn-b-a9uq4xdz35 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-a9uq4xdz35] {
        padding: 10px;
    }

    .cropper-modal-container[b-a9uq4xdz35] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-a9uq4xdz35] {
        padding: 5px;
    }

    .cropper-modal-container[b-a9uq4xdz35] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/AdminUnderReview.razor.rz.scp.css */
/* AdminUnderReview Screen Styles */
.admin-under-review-screen[b-xb0mnnc48k] {
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Main Content */
.admin-under-review-screen .content-container[b-xb0mnnc48k] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
}

.admin-under-review-screen .message-container[b-xb0mnnc48k] {
    text-align: center;
    max-width: 300px;
}

.admin-under-review-screen .review-message[b-xb0mnnc48k] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

/* Close Button Section */
.admin-under-review-screen .close-section[b-xb0mnnc48k] {
    padding: 24px;
    background-color: #FFFFFF;
    border-top: 1px solid #E8E5E0;
    flex-shrink: 0;
}

.admin-under-review-screen .close-button[b-xb0mnnc48k] {
    width: 100%;
    height: 44px;
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admin-under-review-screen .close-button:hover[b-xb0mnnc48k] {
    background-color: #B89A6B;
}

.admin-under-review-screen .close-button:active[b-xb0mnnc48k] {
    transform: translateY(1px);
}

.admin-under-review-screen .button-text[b-xb0mnnc48k] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .admin-under-review-screen .content-container[b-xb0mnnc48k] {
        padding: 30px 20px;
    }

    .admin-under-review-screen .review-message[b-xb0mnnc48k] {
        font-size: 16px;
    }

    .admin-under-review-screen .close-section[b-xb0mnnc48k] {
        padding: 20px;
    }
}
/* /Pages/AdminViewClientProfile.razor.rz.scp.css */
/* AdminViewClientProfile Screen Styles */
.admin-view-client-profile-screen[b-wmp4jrdc1x] {
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Main Content Area */
.admin-view-client-profile-screen .main-content[b-wmp4jrdc1x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

/* Header Section */
.admin-view-client-profile-screen .header-section[b-wmp4jrdc1x] {
    background-color: var(--color-white);
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 21px;
    position: relative;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.admin-view-client-profile-screen .back-button[b-wmp4jrdc1x] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    position: absolute;
    left: 21px;
}

.admin-view-client-profile-screen .back-button:hover[b-wmp4jrdc1x] {
    opacity: 0.7;
}

.admin-view-client-profile-screen .back-button img[b-wmp4jrdc1x] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-view-client-profile-screen .page-title[b-wmp4jrdc1x] {
    font-family: var(--font-montserrat-semibold);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height);
    color: var(--color-black);
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 163px;
}

/* Loading Container */
.admin-view-client-profile-screen .loading-container[b-wmp4jrdc1x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}

.admin-view-client-profile-screen .loading-spinner[b-wmp4jrdc1x] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-wmp4jrdc1x 1s linear infinite;
}

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

.admin-view-client-profile-screen .loading-text[b-wmp4jrdc1x] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

/* Error Container */
.admin-view-client-profile-screen .error-container[b-wmp4jrdc1x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}

.admin-view-client-profile-screen .error-message[b-wmp4jrdc1x] {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 16px;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    max-width: 400px;
    font-family: 'Montserrat', sans-serif;
}

.admin-view-client-profile-screen .retry-button[b-wmp4jrdc1x] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admin-view-client-profile-screen .retry-button:hover[b-wmp4jrdc1x] {
    background-color: #B89A6B;
}

/* Client Profile Content */
.admin-view-client-profile-screen .client-profile-content[b-wmp4jrdc1x] {
    flex: 1;
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 30px;
}

/* Profile Photo Section */
.admin-view-client-profile-screen .profile-photo-section[b-wmp4jrdc1x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.admin-view-client-profile-screen .photo-container[b-wmp4jrdc1x] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.admin-view-client-profile-screen .profile-image[b-wmp4jrdc1x] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

.admin-view-client-profile-screen .photo-background[b-wmp4jrdc1x] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-view-client-profile-screen .person-icon[b-wmp4jrdc1x] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Client Details Section */
.admin-view-client-profile-screen .client-details-section[b-wmp4jrdc1x] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-view-client-profile-screen .detail-group[b-wmp4jrdc1x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-view-client-profile-screen .detail-label[b-wmp4jrdc1x] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #201F1D;
}

.admin-view-client-profile-screen .detail-value[b-wmp4jrdc1x] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    padding: 12px 16px;
    background-color: #F8F7F5;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.admin-view-client-profile-screen .no-data[b-wmp4jrdc1x] {
    color: #999999;
    font-style: italic;
}

.admin-view-client-profile-screen .website-link[b-wmp4jrdc1x] {
    color: #CEB185;
    text-decoration: underline;
    word-break: break-all;
}

.admin-view-client-profile-screen .website-link:hover[b-wmp4jrdc1x] {
    color: #B89A6B;
    text-decoration: none;
}

/* Approve Button Container */
.admin-view-client-profile-screen .approve-button-container[b-wmp4jrdc1x] {
    position: fixed;
    bottom: 80px; /* Position above the bottom navigation bar (80px height) */
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 26px;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
    z-index: 999; /* Below navigation bar but above content */
    box-shadow: 0px -1px 1px 0px rgba(32, 31, 29, 0.1);
}

/* Approve Button */
.admin-view-client-profile-screen .approve-button[b-wmp4jrdc1x] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 100%;
    max-width: 400px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.admin-view-client-profile-screen .approve-button:hover:not(:disabled)[b-wmp4jrdc1x] {
    background-color: #3a3835;
    transform: translateY(-1px);
}

.admin-view-client-profile-screen .approve-button:active:not(:disabled)[b-wmp4jrdc1x] {
    transform: translateY(0);
}

.admin-view-client-profile-screen .approve-button:disabled[b-wmp4jrdc1x] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-view-client-profile-screen .client-profile-content[b-wmp4jrdc1x] {
        padding: 0 20px;
        padding-top: 20px;
        padding-bottom: 120px;
    }

    .admin-view-client-profile-screen .client-details-section[b-wmp4jrdc1x] {
        gap: 20px;
    }

    .admin-view-client-profile-screen .detail-group[b-wmp4jrdc1x] {
        gap: 6px;
    }

    .admin-view-client-profile-screen .detail-label[b-wmp4jrdc1x] {
        font-size: 15px;
    }

    .admin-view-client-profile-screen .detail-value[b-wmp4jrdc1x] {
        font-size: 15px;
        padding: 10px 14px;
        min-height: 40px;
    }

    .admin-view-client-profile-screen .approve-button-container[b-wmp4jrdc1x] {
        padding: 16px 20px;
        bottom: 80px; /* Maintain position above navigation bar */
    }

    .admin-view-client-profile-screen .approve-button[b-wmp4jrdc1x] {
        font-size: 15px;
        height: 42px;
    }

}

@media (max-width: 480px) {
    .admin-view-client-profile-screen .client-profile-content[b-wmp4jrdc1x] {
        padding: 0 16px;
        padding-top: 16px;
        padding-bottom: 140px;
    }

    .admin-view-client-profile-screen .photo-container[b-wmp4jrdc1x] {
        width: 100px;
        height: 100px;
    }

    .admin-view-client-profile-screen .person-icon[b-wmp4jrdc1x] {
        width: 35px;
        height: 35px;
    }

    .admin-view-client-profile-screen .client-details-section[b-wmp4jrdc1x] {
        gap: 18px;
    }

    .admin-view-client-profile-screen .detail-label[b-wmp4jrdc1x] {
        font-size: 14px;
    }

    .admin-view-client-profile-screen .detail-value[b-wmp4jrdc1x] {
        font-size: 14px;
        padding: 8px 12px;
        min-height: 36px;
    }

    .admin-view-client-profile-screen .approve-button-container[b-wmp4jrdc1x] {
        padding: 14px 16px;
        bottom: 80px; /* Maintain position above navigation bar */
    }

    .admin-view-client-profile-screen .approve-button[b-wmp4jrdc1x] {
        font-size: 14px;
        height: 40px;
    }

}
/* /Pages/Availability.razor.rz.scp.css */
/* Availability Container */
.availability-container[b-yiscfrivby] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}

/* On screens smaller than 402px, ensure container fills full width */
@media (max-width: 401px) {
    .availability-container[b-yiscfrivby] {
        max-width: 100%;
    }
}

/* Header - Now using shared StaffTopHeader component */

/* Sticky Year Display */
.sticky-year[b-yiscfrivby] {
    position: sticky;
    top: calc(60px + env(safe-area-inset-top, 0));
    left: 25px;
    z-index: 5;
    pointer-events: none;
    background-color: #FFFFFF;
    padding: 19px 0;
    height: auto;
    width: fit-content;
}

/* On desktop, position sticky year relative to centered 402px container */
@media (min-width: 402px) {
    .sticky-year[b-yiscfrivby] {
        left: calc(50% - 201px + 25px); /* Center at 402px container, then add 25px offset */
    }
}

.sticky-year h1[b-yiscfrivby] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #CEB185;
    margin: 0;
    line-height: 1.5;
    pointer-events: auto;
}

/* Calendar Content */
.calendar-content[b-yiscfrivby] {
    flex: 1;
    overflow-y: auto;
    padding: calc(60px + env(safe-area-inset-top, 0) + 40px) 15px 100px 15px; /* Top padding for fixed header + spacing */
    -webkit-overflow-scrolling: touch;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}

/* Global Day Headers */
.global-day-headers[b-yiscfrivby] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin: 0 0 20px 0;
    padding: 8px 0;
}

.day-header[b-yiscfrivby] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Month Section */
.month-section[b-yiscfrivby] {
    position: relative;
    margin-bottom: 40px;
}

/* Month Names */
.month-name[b-yiscfrivby] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1.5;
    margin-bottom: 0;
    position: sticky;
    top: 0;
    background-color: #FFFFFF;
    z-index: 5;
    padding: 5px 0 8px 0;
    display: inline-block;
}

.month-name.month-left[b-yiscfrivby] {
    text-align: left;
}

.month-name.month-right[b-yiscfrivby] {
    text-align: right;
}

.month-name[b-yiscfrivby]::after {
    content: '';
    display: block;
    height: 1px;
    background-color: #CEB185;
    margin-top: 5px;
    width: 100%;
}

/* Calendar Grid */
.calendar-grid[b-yiscfrivby] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    width: 100%;
}

.calendar-day[b-yiscfrivby] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    padding: 8px 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.calendar-day:hover[b-yiscfrivby] {
    background-color: rgba(206, 177, 133, 0.1);
}

.calendar-day.empty[b-yiscfrivby] {
    cursor: default;
}

.calendar-day.empty:hover[b-yiscfrivby] {
    background-color: transparent;
}

/* Selected day styling */
.calendar-day.selected[b-yiscfrivby] {
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day.selected:hover[b-yiscfrivby] {
    background-color: #B8A073;
}

/* Booking underline indicator */
.calendar-day.booking-indicator[b-yiscfrivby]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 2px;
    background-color: #E8E5E0;
    border-radius: 23px;
    z-index: 1;
}



/* Edit Button */
.edit-button[b-yiscfrivby] {
    position: fixed;
    right: 25px;
    top: calc(121px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    padding-top: 40px;
}

/* On desktop, position edit button relative to centered 402px container */
@media (min-width: 402px) {
    .edit-button[b-yiscfrivby] {
        right: calc(50% - 201px + 25px); /* Center at 402px container, then add 25px offset */
    }
}

.edit-button img[b-yiscfrivby] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Tooltip */
.tooltip[b-yiscfrivby] {
    position: absolute;
    left: -280px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 20;
    pointer-events: none;
}

/* On desktop, adjust tooltip positioning to stay within 402px container */
@media (min-width: 402px) {
    .tooltip[b-yiscfrivby] {
        left: auto;
        right: 50px; /* Position to the left of edit button, within container */
        transform: translateY(-50%);
    }
}

.tooltip-visible[b-yiscfrivby] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tooltip-content[b-yiscfrivby] {
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 260px;
    min-width: 200px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 50px;
}

.tooltip-content span[b-yiscfrivby] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    display: block;
    flex: 1;
}

.tooltip-close[b-yiscfrivby] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.tooltip-close:hover[b-yiscfrivby] {
    opacity: 0.7;
}

.tooltip-close img[b-yiscfrivby] {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Tooltip arrow pointing to the edit button */
.tooltip-content[b-yiscfrivby]::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid #FFFFFF;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.tooltip-content[b-yiscfrivby]::before {
    content: '';
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid #E8E5E0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

/* On desktop, tooltip arrow should point right (towards edit button) */
@media (min-width: 402px) {
    .tooltip-content[b-yiscfrivby]::after {
        right: auto;
        left: -8px;
        border-left: none;
        border-right: 8px solid #FFFFFF;
    }

    .tooltip-content[b-yiscfrivby]::before {
        right: auto;
        left: -9px;
        border-left: none;
        border-right: 9px solid #E8E5E0;
    }
}

/* Close Button */
.close-button[b-yiscfrivby] {
    position: fixed;
    right: 25px;
    top: calc(121px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: white;
    z-index: 10;
}

/* On desktop, position close button relative to centered 402px container */
@media (min-width: 402px) {
    .close-button[b-yiscfrivby] {
        right: calc(50% - 201px + 25px); /* Center at 402px container, then add 25px offset */
    }
}

.close-icon[b-yiscfrivby] {
    font-size: 40px;
    color: #201F1D;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Save Button */
.save-button-container[b-yiscfrivby] {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 100%;
    max-width: 402px;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    box-shadow: none;
}

.save-button[b-yiscfrivby] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    min-width: 290px;
    transition: background-color 0.2s ease;
}

.save-button:hover[b-yiscfrivby] {
    background-color: #3A3936;
}

.save-button:active[b-yiscfrivby] {
    background-color: #1A1917;
}

/* Responsive Design */
@media (max-width: 480px) {

    .calendar-content[b-yiscfrivby] {
        padding: calc(100px + env(safe-area-inset-top, 0px)) 15px 100px 15px;
    }

    .sticky-year[b-yiscfrivby] {
        left: 15px;
    }

    .edit-button[b-yiscfrivby] {
        right: 15px;
        padding-top: 15px;
    }

    .tooltip[b-yiscfrivby] {
        left: -250px;
        max-width: 220px;
        min-width: 180px;
    }

    .tooltip-content[b-yiscfrivby] {
        padding: 10px 14px;
        max-width: 220px;
        min-width: 180px;
        margin-top: 30px;
    }

    .tooltip-content span[b-yiscfrivby] {
        font-size: 14px;
    }

    .tooltip-close[b-yiscfrivby] {
        width: 18px;
        height: 18px;
    }

    .tooltip-close img[b-yiscfrivby] {
        width: 14px;
        height: 14px;
    }

    .close-button[b-yiscfrivby] {
        right: 15px;
    }

    .save-button[b-yiscfrivby] {
        min-width: 250px;
    }

    .calendar-day[b-yiscfrivby] {
        font-size: 20px;
        padding: 8px 0;
        min-height: 36px;
    }

    .day-header[b-yiscfrivby] {
        font-size: 16px;
    }

    .month-name[b-yiscfrivby] {
        font-size: 20px;
    }

    .sticky-year h1[b-yiscfrivby] {
        font-size: 20px;
    }
}

@media (max-width: 360px) {

    .calendar-content[b-yiscfrivby] {
        padding: calc(100px + env(safe-area-inset-top, 0px)) 10px 100px 10px;
    }

    .sticky-year[b-yiscfrivby] {
        left: 10px;
    }

    .edit-button[b-yiscfrivby] {
        right: 10px;
        padding-top: 15px;
    }

    .tooltip[b-yiscfrivby] {
        left: -200px;
        max-width: 180px;
        min-width: 160px;
    }

    .tooltip-content[b-yiscfrivby] {
        padding: 8px 12px;
        max-width: 180px;
        min-width: 160px;
    }

    .tooltip-content span[b-yiscfrivby] {
        font-size: 13px;
    }

    .tooltip-close[b-yiscfrivby] {
        width: 16px;
        height: 16px;
    }

    .tooltip-close img[b-yiscfrivby] {
        width: 12px;
        height: 12px;
    }

    .close-button[b-yiscfrivby] {
        right: 10px;
    }

    .save-button[b-yiscfrivby] {
        min-width: 200px;
    }

    .calendar-day[b-yiscfrivby] {
        font-size: 18px;
        padding: 6px 0;
        min-height: 32px;
    }

    .day-header[b-yiscfrivby] {
        font-size: 14px;
    }

    .month-name[b-yiscfrivby] {
        font-size: 18px;
    }

    .sticky-year h1[b-yiscfrivby] {
        font-size: 18px;
    }
}


/* Loading Overlay */
.loading-overlay[b-yiscfrivby] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner[b-yiscfrivby] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.loading-spinner span[b-yiscfrivby] {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* Error Message */
.error-message[b-yiscfrivby] {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    background-color: #ffebee;
    border: 1px solid #f44336;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
}

.error-message span[b-yiscfrivby] {
    color: #d32f2f;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.error-close[b-yiscfrivby] {
    background: none;
    border: none;
    color: #d32f2f;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.error-close:hover[b-yiscfrivby] {
    background-color: rgba(211, 47, 47, 0.1);
}

/* Disabled Save Button */
.save-button:disabled[b-yiscfrivby] {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #ccc;
}

.save-button:disabled:hover[b-yiscfrivby] {
    background-color: #ccc;
    transform: none;
}
/* /Pages/AvailabilityDayView.razor.rz.scp.css */
/* Availability Day View Container */
.availability-day-container[b-p5396pmaa8] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.availability-header[b-p5396pmaa8] {
    background-color: #FFFFFF;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    position: relative;
    width: 100%;
}

.header-content[b-p5396pmaa8] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-p5396pmaa8] {
    background: none;
    border: none;
    cursor: pointer;
    height: 40px;
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button img[b-p5396pmaa8] {
    width: 100%;
    height: 100%;
}

.availability-title[b-p5396pmaa8] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 223px;
}

/* Page Title */
.page-title[b-p5396pmaa8] {
    padding: 20px 25px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E8E5E0;
}

.page-title h1[b-p5396pmaa8] {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.page-title p[b-p5396pmaa8] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    margin: 0;
    line-height: 1.5;
}

/* Scheduler Container */
.availability-day-container .rz-scheduler[b-p5396pmaa8] {
    flex: 1;
    margin: 0 25px 100px 25px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    overflow: hidden;
}

/* Custom Scheduler Styling */
.availability-day-container .rz-scheduler .rz-scheduler-header[b-p5396pmaa8] {
    background-color: #F8F7F5;
    border-bottom: 1px solid #E8E5E0;
}

.availability-day-container .rz-scheduler .rz-scheduler-header .rz-scheduler-header-cell[b-p5396pmaa8] {
    background-color: #F8F7F5;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    border-right: 1px solid #E8E5E0;
}

.availability-day-container .rz-scheduler .rz-scheduler-time-slots[b-p5396pmaa8] {
    background-color: #FFFFFF;
}

.availability-day-container .rz-scheduler .rz-scheduler-time-slot[b-p5396pmaa8] {
    border-right: 1px solid #E8E5E0;
    border-bottom: 1px solid #E8E5E0;
    color: #666666;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.availability-day-container .rz-scheduler .rz-scheduler-appointment[b-p5396pmaa8] {
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Working Hours Highlight */
.availability-day-container .rz-scheduler .rz-scheduler-time-slot.working-hours[b-p5396pmaa8] {
    background-color: rgba(206, 177, 133, 0.1);
}

/* Appointment Colors */
.availability-day-container .rz-scheduler .rz-scheduler-appointment.available[b-p5396pmaa8] {
    background-color: #4CAF50;
    color: white;
}

.availability-day-container .rz-scheduler .rz-scheduler-appointment.booking[b-p5396pmaa8] {
    background-color: #FF9800;
    color: white;
}

/* Switch Styling */
.availability-day-container .rz-switch[b-p5396pmaa8] {
    margin-left: 8px;
}

.availability-day-container .rz-switch .rz-switch-slider[b-p5396pmaa8] {
    background-color: #E8E5E0;
}

.availability-day-container .rz-switch.rz-switch-checked .rz-switch-slider[b-p5396pmaa8] {
    background-color: #CEB185;
}

/* Loading Overlay */
.loading-overlay[b-p5396pmaa8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner[b-p5396pmaa8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.loading-spinner span[b-p5396pmaa8] {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* Error Message */
.error-message[b-p5396pmaa8] {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    background-color: #ffebee;
    border: 1px solid #f44336;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
}

.error-message span[b-p5396pmaa8] {
    color: #d32f2f;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.error-close[b-p5396pmaa8] {
    background: none;
    border: none;
    color: #d32f2f;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.error-close:hover[b-p5396pmaa8] {
    background-color: rgba(211, 47, 47, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .availability-header[b-p5396pmaa8] {
        padding: 0 15px;
    }

    .header-logo[b-p5396pmaa8] {
        left: 15px;
        width: 150px;
    }

    .header-actions[b-p5396pmaa8] {
        right: 50px;
    }

    .page-title[b-p5396pmaa8] {
        padding: 15px;
    }

    .page-title h1[b-p5396pmaa8] {
        font-size: 20px;
    }

    .page-title p[b-p5396pmaa8] {
        font-size: 14px;
    }

    .availability-day-container .rz-scheduler[b-p5396pmaa8] {
        margin: 0 15px 100px 15px;
    }
}

@media (max-width: 480px) {
    .availability-header[b-p5396pmaa8] {
        padding: 0 10px;
    }

    .header-logo[b-p5396pmaa8] {
        left: 10px;
        width: 130px;
    }

    .header-actions[b-p5396pmaa8] {
        right: 50px;
    }

    .page-title[b-p5396pmaa8] {
        padding: 10px;
    }

    .page-title h1[b-p5396pmaa8] {
        font-size: 18px;
    }

    .page-title p[b-p5396pmaa8] {
        font-size: 12px;
    }

    .availability-day-container .rz-scheduler[b-p5396pmaa8] {
        margin: 0 10px 100px 10px;
    }
}

/* /Pages/AvailabilityOverview.razor.rz.scp.css */
/* Availability Overview Container */
.availability-overview-container[b-2rtjleh16t] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
    width: 100%;
}

/* Header */
.availability-header[b-2rtjleh16t] {
    position: absolute;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
    top: 0;
    left: 0;
}

.header-logo[b-2rtjleh16t] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-2rtjleh16t] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-actions[b-2rtjleh16t] {
    position: absolute;
    right: 50px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    display: flex;
    gap: 5px;
}

.header-notifications[b-2rtjleh16t],
.header-settings[b-2rtjleh16t] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notifications img[b-2rtjleh16t],
.header-settings img[b-2rtjleh16t] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Year Display */
.year-display[b-2rtjleh16t] {
    position: absolute;
    left: 25px;
    top: calc(125px + env(safe-area-inset-top, 0px));
    z-index: 5;
}

.year-navigation[b-2rtjleh16t] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.year-display h1[b-2rtjleh16t] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #CEB185;
    margin: 0;
    line-height: 1.5;
    min-width: 80px;
    text-align: center;
}

.chevron-left[b-2rtjleh16t],
.chevron-right[b-2rtjleh16t] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    color: #CEB185;
    background-color: transparent;
    border: 2px solid transparent;
}

.chevron-left:hover[b-2rtjleh16t],
.chevron-right:hover[b-2rtjleh16t] {
    background-color: rgba(206, 177, 133, 0.1);
    border-color: rgba(206, 177, 133, 0.3);
    transform: scale(1.1);
}

.chevron-left:active[b-2rtjleh16t],
.chevron-right:active[b-2rtjleh16t] {
    transform: scale(0.95);
    background-color: rgba(206, 177, 133, 0.2);
}

.chevron-left svg[b-2rtjleh16t],
.chevron-right svg[b-2rtjleh16t] {
    width: 20px;
    height: 20px;
}

/* Calendar Overview Content */
.calendar-overview-content[b-2rtjleh16t] {
    position: absolute;
    top: calc(173px + env(safe-area-inset-top, 0px));
    left: 25px;
    right: 25px;
    bottom: 120px; /* Increased from 100px to account for bottom nav */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 25px;
    align-content: start;
    padding-bottom: 40px; /* Add padding to ensure content is fully accessible */
}

.calendar-overview-content[b-2rtjleh16t]::-webkit-scrollbar {
    display: none;
}

/* Month Overview Section */
.month-overview-section[b-2rtjleh16t] {
    display: flex;
    flex-direction: column;
    width: 100%;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.month-overview-section:hover[b-2rtjleh16t] {
    background-color: rgba(206, 177, 133, 0.05);
    border-color: rgba(206, 177, 133, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(206, 177, 133, 0.1);
}

.month-overview-section:active[b-2rtjleh16t] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(206, 177, 133, 0.1);
}

.month-overview-header[b-2rtjleh16t] {
    margin-bottom: 8px;
}

.month-overview-header h2[b-2rtjleh16t] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    margin: 0;
    line-height: 1.5;
    transition: color 0.2s ease;
}

.month-overview-section:hover .month-overview-header h2[b-2rtjleh16t] {
    color: #CEB185;
}

/* Calendar Overview Grid */
.calendar-overview-grid[b-2rtjleh16t] {
    width: 100%;
}

/* Calendar Overview Days */
.calendar-overview-days[b-2rtjleh16t] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    width: 100%;
}

.calendar-overview-day[b-2rtjleh16t] {
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    padding: 1px 0;
    min-height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.calendar-overview-day:empty[b-2rtjleh16t] {
    background-color: transparent;
}

/* Available day styling - gold circles */
.calendar-overview-day.available[b-2rtjleh16t] {
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 8px;
    line-height: 1;
}

/* Booking underline indicator */
.calendar-overview-day.booking-indicator[b-2rtjleh16t]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 1px;
    background-color: #E8E5E0;
    border-radius: 10px;
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 480px) {
    .availability-header[b-2rtjleh16t] {
        padding: 0 15px;
    }

    .header-logo[b-2rtjleh16t] {
        left: 15px;
        width: 150px;
    }

    .header-actions[b-2rtjleh16t] {
        right: 50px;
    }

    .calendar-overview-content[b-2rtjleh16t] {
        left: 15px;
        right: 15px;
        gap: 15px 20px;
        bottom: 110px; /* Adjusted for mobile */
        padding-bottom: 50px; /* Extra padding for mobile */
    }

    .year-display[b-2rtjleh16t] {
        left: 15px;
    }

    .month-overview-header h2[b-2rtjleh16t] {
        font-size: 20px;
    }

    .year-display h1[b-2rtjleh16t] {
        font-size: 20px;
    }

    .chevron-left[b-2rtjleh16t],
    .chevron-right[b-2rtjleh16t] {
        width: 28px;
        height: 28px;
    }

    .chevron-left svg[b-2rtjleh16t],
    .chevron-right svg[b-2rtjleh16t] {
        width: 18px;
        height: 18px;
    }

    .calendar-overview-day[b-2rtjleh16t] {
        font-size: 8px;
    }
}

@media (max-width: 360px) {
    .availability-header[b-2rtjleh16t] {
        padding: 0 10px;
    }

    .header-logo[b-2rtjleh16t] {
        left: 10px;
        width: 130px;
    }

    .header-actions[b-2rtjleh16t] {
        right: 50px;
    }

    .calendar-overview-content[b-2rtjleh16t] {
        left: 10px;
        right: 10px;
        gap: 10px 15px;
        bottom: 100px; /* Adjusted for smaller screens */
        padding-bottom: 60px; /* Extra padding for smaller screens */
    }

    .year-display[b-2rtjleh16t] {
        left: 10px;
    }

    .month-overview-header h2[b-2rtjleh16t] {
        font-size: 18px;
    }

    .year-display h1[b-2rtjleh16t] {
        font-size: 18px;
    }

    .chevron-left[b-2rtjleh16t],
    .chevron-right[b-2rtjleh16t] {
        width: 24px;
        height: 24px;
    }

    .chevron-left svg[b-2rtjleh16t],
    .chevron-right svg[b-2rtjleh16t] {
        width: 16px;
        height: 16px;
    }

    .calendar-overview-day[b-2rtjleh16t] {
        font-size: 7px;
    }
}

/* Touch and swipe optimizations */
.availability-overview-container[b-2rtjleh16t] {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.calendar-overview-content[b-2rtjleh16t] {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Smooth transitions for year changes */
.year-display h1[b-2rtjleh16t] {
    transition: color 0.3s ease;
}

.month-overview-section[b-2rtjleh16t] {
    transition: opacity 0.3s ease;
}

/* Enhanced touch responsiveness */
.availability-overview-container[b-2rtjleh16t] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
}

.calendar-overview-content[b-2rtjleh16t] {
    overscroll-behavior: auto;
    scroll-behavior: smooth;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Prevent default touch behaviors that might interfere with swipes */
.availability-overview-container *[b-2rtjleh16t] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Mobile browser specific fixes */
@media screen and (max-width: 768px) {
    .calendar-overview-content[b-2rtjleh16t] {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        position: absolute !important;
        top: 273px !important;
        left: 25px !important;
        right: 25px !important;
        bottom: 120px !important;
        height: auto !important;
        max-height: calc(100vh - 293px) !important;
    }
}

/* Loading Overlay */
.loading-overlay[b-2rtjleh16t] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner[b-2rtjleh16t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.loading-spinner span[b-2rtjleh16t] {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* Error Message */
.error-message[b-2rtjleh16t] {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    background-color: #ffebee;
    border: 1px solid #f44336;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
}

.error-message span[b-2rtjleh16t] {
    color: #d32f2f;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.error-close[b-2rtjleh16t] {
    background: none;
    border: none;
    color: #d32f2f;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.error-close:hover[b-2rtjleh16t] {
    background-color: rgba(211, 47, 47, 0.1);
}
/* /Pages/BookingsClientView.razor.rz.scp.css */
/* BookingsClientView.razor.css */

.bookings-client-container[b-z3xo8dtxr9] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.search-header[b-z3xo8dtxr9] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-logo[b-z3xo8dtxr9] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-z3xo8dtxr9] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-z3xo8dtxr9] {
    position: absolute;
    right: 20px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
}

.notification-icon[b-z3xo8dtxr9] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-z3xo8dtxr9] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Search Bar Styles */
.search-bar-container[b-z3xo8dtxr9] {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    margin-top: calc(80px + env(safe-area-inset-top, 0px));
}

.search-input-container[b-z3xo8dtxr9] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 352px;
}

.search-icon[b-z3xo8dtxr9] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-z3xo8dtxr9] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.search-input[b-z3xo8dtxr9] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-z3xo8dtxr9]::placeholder {
    color: #E8E5E0;
}


/* Filter Buttons */
.filter-buttons[b-z3xo8dtxr9] {
    display: flex;
    gap: 5px;
    padding: 0 25px;
    margin-top: 0;
    justify-content: flex-start;
}

.filter-btn[b-z3xo8dtxr9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 6px 16px;
    border-radius: 44px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-btn.active[b-z3xo8dtxr9] {
    background-color: #201F1D;
    color: #FFFFFF;
    width: 100px;
}

.filter-btn:not(.active)[b-z3xo8dtxr9] {
    background-color: #FFFFFF;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.filter-btn:nth-child(2)[b-z3xo8dtxr9] {
    width: 150px;
}

.filter-btn:nth-child(3)[b-z3xo8dtxr9] {
    width: 96px;
}

/* Loading and Error States */
.loading-container[b-z3xo8dtxr9], .error-container[b-z3xo8dtxr9], .no-bookings[b-z3xo8dtxr9] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    text-align: center;
}

.loading-container p[b-z3xo8dtxr9], .error-container p[b-z3xo8dtxr9], .no-bookings p[b-z3xo8dtxr9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container p[b-z3xo8dtxr9] {
    color: #d32f2f;
}

/* Booking Cards */
.booking-cards-container[b-z3xo8dtxr9] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.booking-card[b-z3xo8dtxr9] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 56px;
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.booking-card:hover[b-z3xo8dtxr9] {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.booking-info[b-z3xo8dtxr9] {
    flex: 1;
}

.talent-name[b-z3xo8dtxr9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.event-name[b-z3xo8dtxr9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    margin-top: 2px;
}

.booking-status[b-z3xo8dtxr9] {
    flex: 1;
    text-align: right;
}

.status-text[b-z3xo8dtxr9] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.status-text.pending[b-z3xo8dtxr9] {
    color: #CEB185;
}

.status-text.upcoming[b-z3xo8dtxr9] {
    color: #CEB185;
}

.status-text.complete[b-z3xo8dtxr9] {
    color: #CEB185;
}

.status-text.cancelled[b-z3xo8dtxr9] {
    color: #CEB185;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .bookings-client-container[b-z3xo8dtxr9] {
        max-width: 100%;
    }

    .search-bar-container[b-z3xo8dtxr9] {
        padding: 10px 20px;
    }

    .filter-buttons[b-z3xo8dtxr9] {
        flex-wrap: wrap;
    }

    .booking-cards-container[b-z3xo8dtxr9] {
        padding: 20px;
    }

    .booking-card[b-z3xo8dtxr9] {
        width: 100%;
        max-width: 350px;
    }
}

@media (max-width: 360px) {
    .search-header[b-z3xo8dtxr9] {
        padding: 0 15px;
    }

    .header-logo[b-z3xo8dtxr9] {
        left: 15px;
        width: 150px;
    }

    .header-notifications[b-z3xo8dtxr9] {
        right: 15px;
    }

    .search-bar-container[b-z3xo8dtxr9] {
        padding: 10px 15px;
    }

    .booking-cards-container[b-z3xo8dtxr9] {
        padding: 15px;
    }
}

/* /Pages/ClientBookingForm.razor.rz.scp.css */
/* ClientBookingForm.razor.css */

.client-booking-form-container[b-34dnqhaueb] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.client-booking-form-container[b-34dnqhaueb]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.booking-form-header[b-34dnqhaueb] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-back-button[b-34dnqhaueb] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-34dnqhaueb] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-title[b-34dnqhaueb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.booking-form-content[b-34dnqhaueb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding: 126px 26px 20px 26px;
    gap: 32px;
}

/* Form Field Styles */
.form-field[b-34dnqhaueb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-label[b-34dnqhaueb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

.required-asterisk[b-34dnqhaueb] {
    color: #CEB185;
}

/* Dropdown Styles */
.dropdown-container[b-34dnqhaueb] {
    position: relative;
}

.dropdown-field[b-34dnqhaueb] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 44px;
    width: 100%;
    max-width: 350px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    cursor: pointer;
    position: relative;
}

.dropdown-placeholder[b-34dnqhaueb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
}

.dropdown-arrow[b-34dnqhaueb] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.dropdown-arrow.rotated[b-34dnqhaueb] {
    transform: translateY(-50%) rotate(180deg);
}

.dropdown-text[b-34dnqhaueb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    flex: 1;
}

.dropdown-options[b-34dnqhaueb] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-option[b-34dnqhaueb] {
    padding: 12px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    cursor: pointer;
    border-bottom: 1px solid #F5F5F5;
    transition: background-color 0.2s ease;
}

.dropdown-option:last-child[b-34dnqhaueb] {
    border-bottom: none;
}

.dropdown-option:hover[b-34dnqhaueb] {
    background-color: #F8F8F8;
}

.dropdown-option.selected[b-34dnqhaueb] {
    background-color: #E8F4FD;
    color: #1976D2;
    font-weight: 500;
}

/* Submit Button */
.submit-button-container[b-34dnqhaueb] {
    position: absolute;
    bottom: 100px; /* Above navigation bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 25px; /* Add horizontal padding to match content */
}

.submit-button[b-34dnqhaueb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.submit-button:hover[b-34dnqhaueb] {
    background-color: #3a3835;
}

.submit-button:active[b-34dnqhaueb] {
    transform: translateY(1px);
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .client-booking-form-container[b-34dnqhaueb] {
        max-width: 100%;
    }

    .header-back-button[b-34dnqhaueb] {
        left: 15px;
    }

    .booking-form-content[b-34dnqhaueb] {
        padding: calc(106px + env(safe-area-inset-top, 0px)) 20px 20px 20px;
    }

    .submit-button-container[b-34dnqhaueb] {
        padding: 0 20px; /* Match mobile content padding */
    }
}

@media (max-width: 360px) {
    .header-back-button[b-34dnqhaueb] {
        left: 12px;
    }

    .booking-form-content[b-34dnqhaueb] {
        padding: calc(106px + env(safe-area-inset-top, 0px)) 15px 20px 15px;
    }

    .submit-button-container[b-34dnqhaueb] {
        padding: 0 15px;
    }
}

/* /Pages/ClientBookingView.razor.rz.scp.css */
/* ClientBookingView.razor.css */

.client-booking-container[b-limnuv1hib] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.client-booking-container[b-limnuv1hib]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.booking-header[b-limnuv1hib] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-back-button[b-limnuv1hib] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-limnuv1hib] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-title[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Loading and Error States */
.loading-container[b-limnuv1hib] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-limnuv1hib] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-limnuv1hib 1s linear infinite;
}

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

.loading-container p[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container[b-limnuv1hib] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-limnuv1hib] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-limnuv1hib] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-limnuv1hib] {
    background-color: #2980b9;
}

.retry-button:active[b-limnuv1hib] {
    transform: translateY(1px);
}

/* Booking Content */
.booking-content[b-limnuv1hib] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding-bottom: 20px;
}

/* Model Image Container */
.model-image-container[b-limnuv1hib] {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
}

.model-image[b-limnuv1hib] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.image-overlay[b-limnuv1hib] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(32, 31, 29, 0.6);
}

.approval-overlay[b-limnuv1hib] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.approval-text[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    width: 261px;
}

/* Model Info */
.model-info[b-limnuv1hib] {
    padding: 20px 25px 0 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.model-name-row[b-limnuv1hib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.model-name[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

.model-role-row[b-limnuv1hib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
}

.model-role[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

/* Action Links */
.view-profile-link[b-limnuv1hib], .view-event-link[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #CEB185;
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
}

.event-status[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #CEB185;
    text-decoration: none;
}

/* Event Details */
.event-details[b-limnuv1hib] {
    padding: 0 25px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-label-row[b-limnuv1hib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-label[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

.event-name[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
    text-decoration: none;
}

.event-name:hover[b-limnuv1hib] {
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Booked By Section */
.booked-by-section[b-limnuv1hib] {
    padding: 0 25px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.booked-by-label[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
    margin: 0;
    width: 158px;
    padding-top: 20px;
}

.booked-by-value[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
    margin-top: 4px;
    text-align: right;
    padding-top: 15px;
}

/* Action Buttons */
.action-buttons[b-limnuv1hib] {
    padding: 0 25px;
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}

.approve-button[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 174px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reject-button[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    background-color: #FFFFFF;
    border: 1px solid #201F1D;
    border-radius: 8px;
    height: 44px;
    width: 174px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Request More Info Section */
.request-info-section[b-limnuv1hib] {
    padding: 0 25px;
    text-align: center;
    margin-bottom: 20px;
}

.request-info-link[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #CEB185;
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
    width: 291px;
    margin: 0 auto;
    display: block;
}

/* Cancel Booking Section */
.cancel-booking-section[b-limnuv1hib] {
    padding: 0 25px;
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.cancel-booking-button[b-limnuv1hib] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-container[b-limnuv1hib] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }

    .loading-spinner[b-limnuv1hib] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .loading-container p[b-limnuv1hib] {
        font-size: 14px;
    }

    .error-container[b-limnuv1hib] {
        min-height: 40vh;
        padding: 1rem;
    }

    .error-message[b-limnuv1hib] {
        font-size: 16px;
    }

    .retry-button[b-limnuv1hib] {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (max-width: 402px) {
    .client-booking-container[b-limnuv1hib] {
        max-width: 100%;
    }

    .header-back-button[b-limnuv1hib] {
        left: 15px;
    }

    .model-info[b-limnuv1hib] {
        padding: 20px 20px 0 20px;
    }

    .event-details[b-limnuv1hib] {
        padding: 0 20px;
    }

    .booked-by-section[b-limnuv1hib] {
        padding: 0 20px;
    }

    .action-buttons[b-limnuv1hib] {
        padding: 0 20px;
    }

    .request-info-section[b-limnuv1hib] {
        padding: 0 20px;
    }
}

@media (max-width: 360px) {
    .header-back-button[b-limnuv1hib] {
        left: 12px;
    }

    .model-info[b-limnuv1hib] {
        padding: 20px 15px 0 15px;
    }

    .event-details[b-limnuv1hib] {
        padding: 0 15px;
    }

    .booked-by-section[b-limnuv1hib] {
        padding: 0 15px;
    }

    .action-buttons[b-limnuv1hib] {
        padding: 0 15px;
    }

    .request-info-section[b-limnuv1hib] {
        padding: 0 15px;
    }
}

/* Modal Styles - Consistent with app design system */
.modal-overlay[b-limnuv1hib] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.modal-content[b-limnuv1hib] {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-limnuv1hib 0.3s ease-out;
}

@keyframes modalSlideIn-b-limnuv1hib {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header[b-limnuv1hib] {
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #E8E5E0;
}

.modal-title[b-limnuv1hib] {
    margin: 0 0 16px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

.modal-close-button[b-limnuv1hib] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    width: 32px;
    height: 32px;
}

.modal-close-button:hover[b-limnuv1hib] {
    background-color: #F5F5F5;
}

.modal-close-button img[b-limnuv1hib] {
    width: 16px;
    height: 16px;
}

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

.modal-message[b-limnuv1hib] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: center;
}

.modal-footer[b-limnuv1hib] {
    padding: 0 24px 24px 24px;
    display: flex;
    justify-content: center;
}

.modal-ok-button[b-limnuv1hib] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    background: #201F1D;
    color: #FFFFFF;
}

.modal-ok-button:hover[b-limnuv1hib] {
    background: #3a3835;
    transform: translateY(-1px);
}

.modal-ok-button:active[b-limnuv1hib] {
    transform: translateY(0);
}
/* /Pages/ClientCancelBookingConfirmation.razor.rz.scp.css */
/* ClientCancelBookingConfirmation.razor.css */

.cancel-booking-container[b-jvwtuxmvkv] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.cancel-booking-header[b-jvwtuxmvkv] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-back-button[b-jvwtuxmvkv] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-back-button img[b-jvwtuxmvkv] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-title[b-jvwtuxmvkv] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    position: absolute;
    left: 50%;
    top: calc(57px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.cancel-booking-content[b-jvwtuxmvkv] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
}

.confirmation-message[b-jvwtuxmvkv] {
    text-align: center;
    max-width: 272px;
}

.confirmation-message p[b-jvwtuxmvkv] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

/* Cancel Button */
.cancel-button-container[b-jvwtuxmvkv] {
    padding: 0 56px 20px 56px;
    display: flex;
    justify-content: center;
}

.cancel-button[b-jvwtuxmvkv] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cancel-button:hover[b-jvwtuxmvkv] {
    background-color: #3A3937;
}

.cancel-button:active[b-jvwtuxmvkv] {
    background-color: #1A1917;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .cancel-booking-container[b-jvwtuxmvkv] {
        max-width: 100%;
    }

    .cancel-booking-content[b-jvwtuxmvkv] {
        padding: 30px 20px;
    }

    .cancel-button-container[b-jvwtuxmvkv] {
        padding: 0 20px 20px 20px;
    }

    .cancel-button[b-jvwtuxmvkv] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 360px) {
    .cancel-booking-header[b-jvwtuxmvkv] {
        padding: 0 15px;
    }

    .header-back-button[b-jvwtuxmvkv] {
        left: 15px;
    }

    .header-title[b-jvwtuxmvkv] {
        font-size: 20px;
        width: 200px;
    }

    .cancel-booking-content[b-jvwtuxmvkv] {
        padding: 20px 15px;
    }

    .confirmation-message p[b-jvwtuxmvkv] {
        font-size: 16px;
    }

    .cancel-button-container[b-jvwtuxmvkv] {
        padding: 0 15px 20px 15px;
    }
}

/* /Pages/ClientEventDetails.razor.rz.scp.css */
/* Event Details Container */
.event-details-container[b-zvhslqww7x] {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.event-details-container[b-zvhslqww7x]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header */
.event-header[b-zvhslqww7x] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-content[b-zvhslqww7x] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-zvhslqww7x] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.back-button:hover[b-zvhslqww7x] {
    background-color: rgba(0, 0, 0, 0.05);
}

.back-button img[b-zvhslqww7x] {
    width: 24px;
    height: 24px;
}

.event-title[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 211px;
}

/* Event Content */
.event-content[b-zvhslqww7x] {
    flex: 1;
    padding: 0 0 180px 0; /* Add bottom padding to prevent content from being hidden behind fixed button */
    position: relative;
}

/* Event Main Info */
.event-main-info[b-zvhslqww7x] {
    display: flex;
    gap: 15px;
    margin: 20px 25px 30px 25px;
    align-items: flex-start;
}

.event-image[b-zvhslqww7x] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.placeholder-image[b-zvhslqww7x] {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.placeholder-image img[b-zvhslqww7x] {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.event-basic-info[b-zvhslqww7x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
}

.event-name[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0 0 8px 0;
}

.event-venue[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

/* Event Details Grid */
.event-details-grid[b-zvhslqww7x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 25px 40px 25px;
}

.detail-section[b-zvhslqww7x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-label[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

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

.detail-content p[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    margin: 0;
}

/* Join Button */
.join-button-container[b-zvhslqww7x] {
    display: flex;
    justify-content: center;
    margin: 0 56px;
    position: fixed;
    bottom: 120px; /* Position just above the bottom navigation bar */
    left: 50%;
    transform: translateX(-50%);
    width: 290px;
    z-index: 5;
}

.join-button[b-zvhslqww7x] {
    background-color: #201f1d;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 290px;
    height: 44px;
}

.join-button:hover[b-zvhslqww7x] {
    background-color: #3a3835;
}

.join-button:active[b-zvhslqww7x] {
    background-color: #1a1917;
}

/* Cancelled Banner */
.event-cancelled-banner[b-zvhslqww7x] {
    margin: 0 25px 40px 25px;
    padding: 14px 18px;
    border-radius: 8px;
    background-color: #fdecea;
    border: 1px solid #f5c2c7;
    color: #842029;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

/* Loading State */
.loading-state[b-zvhslqww7x] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

/* Error State */
.error-state[b-zvhslqww7x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
}

.error-state p[b-zvhslqww7x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.back-to-events[b-zvhslqww7x] {
    background-color: #ceb185;
    color: #201f1d;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-zvhslqww7x] {
    background-color: #b8a06a;
}

/* Responsive Design */
@media (max-width: 480px) {
    .event-details-grid[b-zvhslqww7x] {
        grid-template-columns: 1fr;
        gap: 20px; /* Increased gap */
        margin: 0 25px 40px 25px; /* Added margin to prevent squashing */
    }

    .event-main-info[b-zvhslqww7x] {
        flex-direction: column;
        gap: 15px; /* Increased gap to prevent squashing */
        margin: 25px 25px 35px 25px; /* Increased margins */
    }

    .event-image[b-zvhslqww7x] {
        width: 100%;
        height: 120px;
    }

    .join-button-container[b-zvhslqww7x] {
        margin: 0 20px;
        width: calc(100% - 40px);
        max-width: 290px;
    }

    .join-button[b-zvhslqww7x] {
        width: 100%;
    }
}

/* Extra small screens - ensure button is never clipped */
@media (max-width: 360px) {
    .event-main-info[b-zvhslqww7x] {
        gap: 20px; /* Even more gap for very small screens */
        margin: 30px 25px 40px 25px; /* Increased margins */
    }

    .join-button-container[b-zvhslqww7x] {
        margin: 0 15px;
        width: calc(100% - 30px);
        max-width: 290px;
    }
}

/* /Pages/ClientEventEdit.razor.rz.scp.css */
/* Event Edit Container */
.event-edit-container[b-5bsyf3quxc] {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.event-edit-container[b-5bsyf3quxc]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header */
.event-header[b-5bsyf3quxc] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-content[b-5bsyf3quxc] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-5bsyf3quxc] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.back-button:hover[b-5bsyf3quxc] {
    background-color: rgba(0, 0, 0, 0.05);
}

.back-button img[b-5bsyf3quxc] {
    width: 24px;
    height: 24px;
}

.event-title[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 211px;
}

/* Event Content */
.event-content[b-5bsyf3quxc] {
    flex: 1;
    padding: 0;
    position: relative;
}

.event-cancelled-banner[b-5bsyf3quxc] {
    margin: 0 25px 20px 25px;
    padding: 14px 18px;
    border-radius: 8px;
    background-color: #fdecea;
    border: 1px solid #f5c2c7;
    color: #842029;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.date-error[b-5bsyf3quxc] {
    color: #842029;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    margin: 4px 0 0 0;
}

.cancelled-actions[b-5bsyf3quxc] {
    display: flex;
    justify-content: center;
    margin: 0 25px 20px 25px;
}

.delete-event-btn[b-5bsyf3quxc] {
    background-color: #842029;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease;
    width: 100%;
    max-width: 290px;
}

.delete-event-btn:hover:not(:disabled)[b-5bsyf3quxc] {
    background-color: #6d1a22;
}

.delete-event-btn:disabled[b-5bsyf3quxc] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Event Main Info */
.event-main-info[b-5bsyf3quxc] {
    display: flex;
    gap: 15px;
    margin: 20px 25px 30px 25px;
    align-items: flex-start;
    position: relative;
}

.event-image[b-5bsyf3quxc] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.event-image img[b-5bsyf3quxc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-image[b-5bsyf3quxc] {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.placeholder-image img[b-5bsyf3quxc] {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.event-basic-info[b-5bsyf3quxc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
}

.event-name[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.edit-button[b-5bsyf3quxc] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    position: absolute;
    right: 0;
    top: 0;
}

.edit-button:hover[b-5bsyf3quxc] {
    background-color: rgba(0, 0, 0, 0.05);
}

.edit-button img[b-5bsyf3quxc] {
    width: 24px;
    height: 24px;
}

/* Event Details Grid */
.event-details-grid[b-5bsyf3quxc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 25px 30px 25px;
}

.detail-section[b-5bsyf3quxc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-label[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.detail-content[b-5bsyf3quxc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-content p[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    margin: 0;
}

/* Jobs Section */
.jobs-section[b-5bsyf3quxc] {
    margin: 0 25px 40px 25px;
}

.jobs-section .detail-label[b-5bsyf3quxc] {
    margin-bottom: 8px;
}

.jobs-list[b-5bsyf3quxc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-item[b-5bsyf3quxc] {
    background-color: #ffffff;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    padding: 16px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.job-content[b-5bsyf3quxc] {
    display: flex;
    align-items: center;
    flex: 1;
}

.job-title[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.job-actions[b-5bsyf3quxc] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.edit-job-btn[b-5bsyf3quxc], .remove-job-btn[b-5bsyf3quxc] {
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.edit-job-btn:hover[b-5bsyf3quxc], .remove-job-btn:hover[b-5bsyf3quxc] {
    background-color: rgba(206, 177, 133, 0.1);
}

.no-jobs[b-5bsyf3quxc] {
    text-align: center;
    padding: 20px;
    color: #ceb185;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
}

/* Job Accordion Styles */
.job-accordion-item[b-5bsyf3quxc] {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.job-accordion-header[b-5bsyf3quxc] {
    padding: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s ease;
}

.job-accordion-header:hover[b-5bsyf3quxc] {
    background-color: #f0f0f0;
}

.job-header-content[b-5bsyf3quxc] {
    flex: 1;
}

.job-header-content .job-title[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0 0 4px 0;
}

.job-subtitle[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #6c757d;
    margin: 0;
}

.accordion-arrow[b-5bsyf3quxc] {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-arrow.expanded[b-5bsyf3quxc] {
    transform: rotate(180deg);
}

.accordion-arrow img[b-5bsyf3quxc] {
    width: 20px;
    height: 20px;
}

.job-accordion-content[b-5bsyf3quxc] {
    padding: 16px;
    background-color: #ffffff;
}

/* Form Styles for Accordion Content */
.job-accordion-content .form-group[b-5bsyf3quxc] {
    margin-bottom: 20px;
    display: block;
    visibility: visible;
}

.job-accordion-content .form-label[b-5bsyf3quxc] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    margin-bottom: 8px;
}

.job-accordion-content .required[b-5bsyf3quxc] {
    color: #ceb185;
}

.job-accordion-content .form-input-container[b-5bsyf3quxc] {
    position: relative;
    width: 100%;
}

.job-accordion-content .form-input[b-5bsyf3quxc] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    background-color: #ffffff;
    box-sizing: border-box;
    display: block;
    visibility: visible;
}

.job-accordion-content .form-input.readonly[b-5bsyf3quxc] {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

.job-accordion-content .form-textarea[b-5bsyf3quxc] {
    width: 100%;
    min-height: 100px;
    padding: 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    background-color: #ffffff;
    box-sizing: border-box;
    resize: none;
    display: block;
    visibility: visible;
}

.job-accordion-content .form-textarea.readonly[b-5bsyf3quxc] {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

/* Language Tags */
.job-accordion-content .selected-languages[b-5bsyf3quxc] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.job-accordion-content .language-tag[b-5bsyf3quxc] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #ceb185;
    color: #ffffff;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.job-accordion-content .language-tag.readonly[b-5bsyf3quxc] {
    background-color: #ceb185;
    color: #ffffff;
}

/* Action Buttons */
.action-buttons[b-5bsyf3quxc] {
    display: flex;
    justify-content: center;
    margin: 0 56px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    width: auto;
}

.cancel-event-btn[b-5bsyf3quxc], .update-event-btn[b-5bsyf3quxc] {
    background-color: #201f1d;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 290px;
    height: 44px;
}

.cancel-event-btn:hover[b-5bsyf3quxc], .update-event-btn:hover[b-5bsyf3quxc] {
    background-color: #3a3835;
}

.cancel-event-btn:active[b-5bsyf3quxc], .update-event-btn:active[b-5bsyf3quxc] {
    background-color: #1a1917;
}

.update-event-btn:disabled[b-5bsyf3quxc] {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.update-event-btn:disabled:hover[b-5bsyf3quxc] {
    background-color: #9ca3af;
}

/* Loading State */
.loading-state[b-5bsyf3quxc] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

/* Error State */
.error-state[b-5bsyf3quxc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
}

.error-state p[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.back-to-events[b-5bsyf3quxc] {
    background-color: #ceb185;
    color: #201f1d;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-5bsyf3quxc] {
    background-color: #b8a06a;
}

/* Add Job Form Accordion */
.add-job-accordion[b-5bsyf3quxc] {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    margin-top: 16px;
    overflow: hidden;
}

.add-job-accordion .accordion-header[b-5bsyf3quxc] {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.add-job-accordion .header-text h3[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #201f1d;
    margin: 0 0 4px 0;
}

.add-job-accordion .header-text p[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.add-job-accordion .arrow[b-5bsyf3quxc] {
    transition: transform 0.3s ease;
}

.add-job-accordion .arrow.expanded[b-5bsyf3quxc] {
    transform: rotate(180deg);
}

.add-job-accordion .arrow img[b-5bsyf3quxc] {
    width: 24px;
    height: 24px;
}

.add-job-accordion .accordion-content[b-5bsyf3quxc] {
    padding: 20px;
}

.add-job-accordion .form-group[b-5bsyf3quxc] {
    margin-bottom: 25px;
    display: block;
    visibility: visible;
}

.add-job-accordion .form-label[b-5bsyf3quxc] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    margin-bottom: 8px;
}

.add-job-accordion .required[b-5bsyf3quxc] {
    color: #ceb185;
}

.add-job-accordion .form-input-container[b-5bsyf3quxc] {
    position: relative;
    width: 100%;
}

.add-job-accordion .form-input[b-5bsyf3quxc] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    background-color: #ffffff;
    box-sizing: border-box;
    display: block;
    visibility: visible;
    appearance: none;
}

.add-job-accordion .form-input:focus[b-5bsyf3quxc] {
    outline: none;
    border-color: #ceb185;
}

.add-job-accordion .form-input[b-5bsyf3quxc]::placeholder {
    color: #e8e5e0;
}

select.form-input[b-5bsyf3quxc] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.add-job-accordion .form-textarea[b-5bsyf3quxc] {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201f1d;
    background-color: #ffffff;
    box-sizing: border-box;
    resize: vertical;
    display: block;
    visibility: visible;
}

.add-job-accordion .form-textarea:focus[b-5bsyf3quxc] {
    outline: none;
    border-color: #ceb185;
}

.add-job-accordion .form-textarea[b-5bsyf3quxc]::placeholder {
    color: #e8e5e0;
}

.add-job-accordion .dropdown-icon[b-5bsyf3quxc] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.add-job-accordion .dropdown-icon img[b-5bsyf3quxc] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add-job-accordion .word-limit[b-5bsyf3quxc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ceb185;
    margin-top: 8px;
}

.add-job-accordion .selected-languages[b-5bsyf3quxc] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.add-job-accordion .language-tag[b-5bsyf3quxc] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #ceb185;
    color: #ffffff;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
}

.add-job-accordion .language-tag-remove[b-5bsyf3quxc] {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.add-job-accordion .language-tag-remove:hover[b-5bsyf3quxc] {
    background-color: rgba(255, 255, 255, 0.2);
}

.add-job-accordion .add-job-section[b-5bsyf3quxc] {
    margin-top: 24px;
    text-align: center;
}

.add-job-accordion .add-job-button[b-5bsyf3quxc] {
    background-color: #ceb185;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.add-job-accordion .add-job-button:hover:not(.disabled)[b-5bsyf3quxc] {
    background-color: #b8a06a;
}

.add-job-accordion .add-job-button.disabled[b-5bsyf3quxc] {
    background-color: #6c757d;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 480px) {
    .event-details-grid[b-5bsyf3quxc] {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 0 25px 30px 25px;
    }

    .event-main-info[b-5bsyf3quxc] {
        flex-direction: column;
        gap: 15px;
        margin: 25px 25px 35px 25px;
    }

    .event-image[b-5bsyf3quxc] {
        width: 100%;
        height: 120px;
    }

    .edit-button[b-5bsyf3quxc] {
        position: static;
        align-self: flex-end;
    }

    .action-buttons[b-5bsyf3quxc] {
        margin: 0 20px;
    }

    .cancel-event-btn[b-5bsyf3quxc], .update-event-btn[b-5bsyf3quxc] {
        width: 100%;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .event-main-info[b-5bsyf3quxc] {
        gap: 20px;
        margin: 30px 25px 40px 25px;
    }

    .action-buttons[b-5bsyf3quxc] {
        margin: 0 15px;
    }
}

/* Working hours start/end time inputs */
.working-hours-row[b-5bsyf3quxc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.working-hours-row .form-input-container[b-5bsyf3quxc] {
    flex: 1;
}

.working-hours-row input[type="time"][b-5bsyf3quxc] {
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 44px;
    padding: 0;
}

.working-hours-row input[type="time"][b-5bsyf3quxc]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.working-hours-row input[type="time"][b-5bsyf3quxc]::-webkit-datetime-edit {
    display: block;
    text-align: center;
    padding: 0;
}

.working-hours-row input[type="time"][b-5bsyf3quxc]::-webkit-datetime-edit-fields-wrapper {
    display: inline-block;
}

.working-hours-separator[b-5bsyf3quxc] {
    color: #6B6B6B;
    font-size: 14px;
}

/* /Pages/ClientFeedback.razor.rz.scp.css */
/* ClientFeedback.razor.css */

.client-feedback-container[b-srlhj6rtev] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.client-feedback-container[b-srlhj6rtev]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.feedback-header[b-srlhj6rtev] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-back-button[b-srlhj6rtev] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-srlhj6rtev] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-title[b-srlhj6rtev] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.feedback-content[b-srlhj6rtev] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding-bottom: 20px;
}

/* Star Rating Section */
.star-rating-section[b-srlhj6rtev] {
    padding: 20px 25px 0 25px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-label[b-srlhj6rtev] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.stars-container[b-srlhj6rtev] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.star-wrapper[b-srlhj6rtev] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    transition: transform 0.1s ease;
}

.star-wrapper:hover[b-srlhj6rtev] {
    transform: scale(1.1);
}

.star-wrapper:active[b-srlhj6rtev] {
    transform: scale(0.95);
}

.star-icon[b-srlhj6rtev] {
    width: 100%;
    height: 100%;
    aspect-ratio: 19/18;
    object-fit: contain;
    display: block;
}

/* Feedback Text Section */
.feedback-text-section[b-srlhj6rtev] {
    padding: 0 25px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feedback-textarea[b-srlhj6rtev] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    height: 206px;
    width: 100%;
    max-width: 350px;
    padding: 14px 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    resize: none;
    outline: none;
}

.feedback-textarea[b-srlhj6rtev]::placeholder {
    color: rgba(232, 229, 224, 0.5);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.feedback-textarea:focus[b-srlhj6rtev] {
    border-color: #CEB185;
}

/* Submit Button Section */
.submit-button-section[b-srlhj6rtev] {
    padding: 0 25px;
    margin-top: auto;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.submit-button[b-srlhj6rtev] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.submit-button:hover:not(:disabled)[b-srlhj6rtev] {
    background-color: #3a3835;
}

.submit-button:active:not(:disabled)[b-srlhj6rtev] {
    transform: translateY(1px);
}

.submit-button.disabled[b-srlhj6rtev],
.submit-button:disabled[b-srlhj6rtev] {
    background-color: #E1E1E1;
    color: #AFAFAF;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .client-feedback-container[b-srlhj6rtev] {
        max-width: 100%;
    }

    .header-back-button[b-srlhj6rtev] {
        left: 15px;
    }

    .star-rating-section[b-srlhj6rtev] {
        padding: 0 20px;
    }

    .feedback-text-section[b-srlhj6rtev] {
        padding: 0 20px;
    }

    .submit-button-section[b-srlhj6rtev] {
        padding: 0 20px;
    }

    .feedback-textarea[b-srlhj6rtev] {
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .header-back-button[b-srlhj6rtev] {
        left: 12px;
    }

    .star-rating-section[b-srlhj6rtev] {
        padding: 0 15px;
    }

    .feedback-text-section[b-srlhj6rtev] {
        padding: 0 15px;
    }

    .submit-button-section[b-srlhj6rtev] {
        padding: 0 15px;
    }
}

/* /Pages/ClientFeedbackSubmitted.razor.rz.scp.css */
/* ClientFeedbackSubmitted.razor.css */

.feedback-submitted-container[b-q9nqq27vow] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.feedback-submitted-container[b-q9nqq27vow]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.feedback-header[b-q9nqq27vow] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.header-title[b-q9nqq27vow] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
}

/* Main Content */
.feedback-content[b-q9nqq27vow] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: calc(106px + env(safe-area-inset-top, 0px)); /* Account for fixed header */
    padding-bottom: 20px;
    align-items: center;
    justify-content: flex-start;
}

/* Thank You Message */
.thank-you-message[b-q9nqq27vow] {
    margin-top: 204px; /* Position at 310px from top (106px header + 204px = 310px) */
    padding: 0 25px;
    text-align: center;
    width: 100%;
    max-width: 402px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thank-you-message p[b-q9nqq27vow] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
    width: 272px;
}

/* Done Button Section */
.done-button-section[b-q9nqq27vow] {
    margin-top: auto;
    margin-bottom: 20px;
    width: 100%;
    max-width: 402px;
    display: flex;
    justify-content: center;
    padding: 0 56px;
}

.done-button[b-q9nqq27vow] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    text-align: center;
}

.done-button:hover[b-q9nqq27vow] {
    background-color: #3a3835;
}

.done-button:active[b-q9nqq27vow] {
    transform: translateY(1px);
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .feedback-submitted-container[b-q9nqq27vow] {
        max-width: 100%;
    }

    .thank-you-message[b-q9nqq27vow] {
        padding: 0 20px;
    }

    .thank-you-message p[b-q9nqq27vow] {
        width: 100%;
        max-width: 272px;
    }

    .done-button-section[b-q9nqq27vow] {
        padding: 0 20px;
    }

    .done-button[b-q9nqq27vow] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 360px) {
    .thank-you-message[b-q9nqq27vow] {
        padding: 0 15px;
        margin-top: 180px;
    }

    .done-button-section[b-q9nqq27vow] {
        padding: 0 15px;
    }
}

/* Additional safety margin for very small screens */
@media (max-height: 700px) {
    .thank-you-message[b-q9nqq27vow] {
        margin-top: 150px;
    }
}
/* /Pages/ClientProfile.razor.rz.scp.css */
/* ClientProfile Screen Styles */
.client-profile-container[b-3oxgwrb3mv] {
    background-color: var(--color-white);
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.client-profile-container[b-3oxgwrb3mv]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* User Profile Section */
.user-profile-section[b-3oxgwrb3mv] {
    padding: calc(60px + env(safe-area-inset-top, 0) + 20px) 0 33px 0;
    text-align: center;
    background-color: var(--color-white);
}

.user-name[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title);
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0 0 16px 0;
}

.user-role[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0;
}

/* Content Styles */
.profile-content[b-3oxgwrb3mv] {
    padding: 0 25px;
    padding-bottom: 30px;
}

.settings-section[b-3oxgwrb3mv] {
    margin-bottom: 40px;
}

.section-title[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0 0 18px 0;
}

.settings-card[b-3oxgwrb3mv] {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    height: 160px;
    width: 100%;
    overflow: hidden;
}

.setting-item[b-3oxgwrb3mv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    height: 80px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
}

.setting-item:hover[b-3oxgwrb3mv] {
    background-color: rgba(206, 177, 133, 0.1);
}

.setting-item:not(:last-child)[b-3oxgwrb3mv] {
    border-bottom: 1px solid var(--color-border);
}

.setting-info[b-3oxgwrb3mv] {
    flex: 1;
}

.setting-label[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--color-black);
    margin-bottom: 8px;
}

.setting-description[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
}

.setting-arrow[b-3oxgwrb3mv] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
}

.setting-arrow img[b-3oxgwrb3mv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Team Count Badge */
.team-count-badge[b-3oxgwrb3mv] {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-count[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
    text-align: center;
}

/* Logout Section */
.logout-section[b-3oxgwrb3mv] {
    margin: 46px 0 17px 0;
    display: flex;
    justify-content: center;
}

.logout-button[b-3oxgwrb3mv] {
    width: 290px;
    height: 44px;
    background-color: var(--color-black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.logout-button:hover[b-3oxgwrb3mv] {
    background-color: #2a2927;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.logout-text[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-button);
    line-height: var(--line-height);
    color: var(--color-white);
    text-align: center;
}

/* Delete Account Section */
.delete-account-section[b-3oxgwrb3mv] {
    text-align: center;
    margin-bottom: 30px;
}

.delete-account-link[b-3oxgwrb3mv] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.delete-account-link:hover[b-3oxgwrb3mv] {
    opacity: 0.7;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .client-profile-container[b-3oxgwrb3mv] {
        max-width: 100%;
    }

    .profile-content[b-3oxgwrb3mv] {
        padding: 0 20px;
    }

    .logout-button[b-3oxgwrb3mv] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 360px) {
    .user-name[b-3oxgwrb3mv] {
        font-size: 20px;
    }

    .section-title[b-3oxgwrb3mv] {
        font-size: 16px;
    }

    .setting-label[b-3oxgwrb3mv] {
        font-size: 16px;
    }
}
/* /Pages/ClientSignup.razor.rz.scp.css */
/* ClientSignup specific styles to fix Safari URL bar overlap and Chrome mobile bottom controls */
.client-signup-screen .form-container[b-aly02jsz48] {
    padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px)); /* Space for bottom elements + safe area */
}

/* Profile image styles */
.profile-image[b-aly02jsz48] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

.photo-container[b-aly02jsz48] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.photo-container:hover[b-aly02jsz48] {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Mobile-specific fixes for portrait orientation */
@media (max-width: 768px) and (orientation: portrait) {
    .client-signup-screen .form-container[b-aly02jsz48] {
        padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px));
    }
}

/* Extra padding for mobile devices with browser navigation bars */
@media (max-width: 480px) {
    .client-signup-screen .form-container[b-aly02jsz48] {
        padding-bottom: calc(250px + env(safe-area-inset-bottom, 0px));
    }

    .client-signup-screen .login-link[b-aly02jsz48] {
        margin-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    }
}

/* Terms and Conditions Styles */
.client-signup-screen .terms-container[b-aly02jsz48] {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start !important;
}

.client-signup-screen .checkbox-container[b-aly02jsz48] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    justify-content: flex-start;
    width: 100%;
}

.client-signup-screen .checkbox[b-aly02jsz48] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.client-signup-screen .terms-text[b-aly02jsz48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    cursor: pointer;
    white-space: nowrap;
    flex: 1;
    text-align: left;
}

.client-signup-screen .link[b-aly02jsz48] {
    color: #CEB185;
    text-decoration: underline;
}

/* Mobile responsive adjustments for terms text */
@media (max-width: 480px) {
    .client-signup-screen .terms-text[b-aly02jsz48] {
        font-size: 12px;
        white-space: nowrap;
        line-height: 1.4;
    }

    .client-signup-screen .checkbox-container[b-aly02jsz48] {
        align-items: center;
        gap: 10px;
    }
}

@media (max-width: 360px) {
    .client-signup-screen .terms-text[b-aly02jsz48] {
        font-size: 11px;
        white-space: nowrap;
    }

    .client-signup-screen .login-link[b-aly02jsz48] {
        margin-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

/* ClientSignup Screen Styles */
.client-signup-screen[b-aly02jsz48] {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 40px;
}

.client-signup-screen .header[b-aly02jsz48] {
    background-color: #FFFFFF;
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 21px;
    position: relative;
    border-bottom: none !important;
    flex-shrink: 0;
}

.client-signup-screen .back-button[b-aly02jsz48] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    position: absolute;
    left: 21px;
}

.client-signup-screen .back-button:hover[b-aly02jsz48] {
    opacity: 0.7;
}

.client-signup-screen .back-button img[b-aly02jsz48] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.client-signup-screen .page-title[b-aly02jsz48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 163px;
}

.page-title[b-aly02jsz48] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 23px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    width: 163px;
    margin: 0;
}

.client-signup-screen .form-container[b-aly02jsz48] {
    flex: 1;
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 0px;
}

/* Form Group Styles */
.client-signup-screen .form-group[b-aly02jsz48] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.client-signup-screen .form-label[b-aly02jsz48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
}

/* Form Input Styles */
.client-signup-screen .form-input[b-aly02jsz48] {
    height: 44px;
    padding: 0 16px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    outline: none;
    transition: border-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.client-signup-screen .form-input:focus[b-aly02jsz48] {
    border-color: #CEB185;
}

.client-signup-screen .form-input[b-aly02jsz48]::placeholder {
    color: #999999;
}

/* Select element styles */
.client-signup-screen select.form-input[b-aly02jsz48] {
    cursor: pointer;
    background-color: #FFFFFF;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('assets/keyboard-arrow-down.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
    padding-right: 40px;
}

.client-signup-screen select.form-input:focus[b-aly02jsz48] {
    outline: none;
    border-color: #CEB185;
}

.client-signup-screen select.form-input option[b-aly02jsz48] {
    padding: 8px 12px;
}

.client-signup-screen select.form-input option:first-child[b-aly02jsz48] {
    color: #999;
}

/* Password Input Container */
.client-signup-screen .password-input-container[b-aly02jsz48] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.client-signup-screen .password-input-container .form-input[b-aly02jsz48] {
    padding-right: 50px;
}

.client-signup-screen .visibility-toggle[b-aly02jsz48] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.client-signup-screen .visibility-toggle:hover[b-aly02jsz48] {
    opacity: 0.7;
}

.client-signup-screen .visibility-toggle img[b-aly02jsz48] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.client-signup-screen .password-hint[b-aly02jsz48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin-top: 4px;
}

/* Error text styling */
.client-signup-screen .error-text[b-aly02jsz48] {
    color: #c33;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Error message styles */
.client-signup-screen .error-message[b-aly02jsz48] {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

/* Sign up button styles */
.client-signup-screen .signup-button[b-aly02jsz48] {
    width: 100%;
    height: 60px;
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-top: 10px;
    padding: 8px 0;
}

.client-signup-screen .signup-button:hover:not(.disabled)[b-aly02jsz48] {
    background-color: #B89A6B;
}

.client-signup-screen .signup-button.disabled[b-aly02jsz48] {
    background-color: #E1E1E1;
    cursor: not-allowed;
}

.client-signup-screen .button-text[b-aly02jsz48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
}

.client-signup-screen .signup-button.disabled .button-text[b-aly02jsz48] {
    color: #AFAFAF;
}

/* Login link styles */
.client-signup-screen .login-link[b-aly02jsz48] {
    text-align: center;
    margin-top: 20px;
}

.client-signup-screen .login-link p[b-aly02jsz48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.client-signup-screen .login-link .link[b-aly02jsz48] {
    color: #CEB185;
    text-decoration: underline;
    cursor: pointer;
}

/* Profile photo section styles */
.client-signup-screen .profile-photo-section[b-aly02jsz48] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.client-signup-screen .photo-background[b-aly02jsz48] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.client-signup-screen .person-icon[b-aly02jsz48] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.client-signup-screen .add-photo-text[b-aly02jsz48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #CEB185;
    text-decoration: underline;
    cursor: pointer;
}

.client-signup-screen .required-indicator[b-aly02jsz48] {
    color: #c33;
    font-weight: 500;
    margin-left: 2px;
    text-decoration: none !important;
}

.client-signup-screen .add-photo-text .required-indicator[b-aly02jsz48] {
    text-decoration: none !important;
}

.client-signup-screen .photo-hint[b-aly02jsz48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    margin-top: 4px;
    text-align: center;
    font-style: italic;
}

.client-signup-screen .button-hint[b-aly02jsz48] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #c33;
    margin-top: 10px;
    margin-bottom: 4px;
    text-align: center;
}

/* Cropper Modal Styles */
.cropper-modal-overlay[b-aly02jsz48] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-aly02jsz48] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-aly02jsz48 0.3s ease-out;
}

@keyframes modalSlideIn-b-aly02jsz48 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-aly02jsz48] {
        padding: 10px;
    }

    .cropper-modal-container[b-aly02jsz48] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-aly02jsz48] {
        padding: 5px;
    }

    .cropper-modal-container[b-aly02jsz48] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/CompleteModelReg.razor.rz.scp.css */
/* Header styles */
.header[b-wk916k3idj] {
    background-color: #FFFFFF;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button[b-wk916k3idj] {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.back-button:hover[b-wk916k3idj] {
    background-color: #f8f9fa;
}

.back-button img[b-wk916k3idj] {
    width: 24px;
    height: 24px;
}

.page-title[b-wk916k3idj] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

/* Form container styles */
.form-container[b-wk916k3idj] {
    padding: 24px 24px 80px 24px; /* Increased bottom padding to create more space from submit section */
    background-color: #FFFFFF;
}

/* Form styles */
.form-group[b-wk916k3idj] {
    margin-bottom: 24px;
}

.form-label[b-wk916k3idj] {
    display: block;
    margin-bottom: 8px;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.required[b-wk916k3idj] {
    color: #CEB185;
    margin-left: 4px;
}

.form-input[b-wk916k3idj] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #201F1D;
    background-color: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input[b-wk916k3idj]::placeholder {
    color: #999;
}

.form-input:focus[b-wk916k3idj] {
    outline: none;
    border-color: #CEB185;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.2);
}

/* Submit section styles */
.submit-section[b-wk916k3idj] {
    padding: 24px;
    background-color: #FFFFFF;
    border-top: 1px solid #e9ecef;
}

/* Loading styles */
.loading-container[b-wk916k3idj] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #f8f9fa;
}

.loading-spinner[b-wk916k3idj] {
    width: 40px;
    height: 40px;
    border: 4px solid #e9ecef;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin-b-wk916k3idj 1s linear infinite;
    margin-bottom: 16px;
}

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

.loading-container p[b-wk916k3idj] {
    color: #666;
    font-size: 16px;
    margin: 0;
}

/* Photo upload styles */
.photo-grid[b-wk916k3idj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px; /* Increased bottom margin for better spacing */
    max-width: 360px;
}

/* Large Image Display */
.large-image-container[b-wk916k3idj] {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.large-image-wrapper[b-wk916k3idj] {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 400px;
    background-color: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.large-image[b-wk916k3idj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.large-image-placeholder[b-wk916k3idj] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-loading[b-wk916k3idj] {
    font-size: 14px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.no-large-image[b-wk916k3idj] {
    width: 100%;
    max-width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 12px;
    border: 2px dashed #CCCCCC;
}

.no-large-image p[b-wk916k3idj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Crop Overlay on Large Image */
.crop-overlay-large[b-wk916k3idj] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 10;
}

.crop-button-large[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.crop-button-large:hover[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.crop-button-large:active[b-wk916k3idj] {
    transform: scale(0.95);
}

/* Image Ribbon */
.image-ribbon-container[b-wk916k3idj] {
    margin-bottom: 34px;
}

.ribbon-header[b-wk916k3idj] {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ribbon-title[b-wk916k3idj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
}

.add-photos-button[b-wk916k3idj] {
    background: #CEB185;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.add-photos-button:hover[b-wk916k3idj] {
    background: #B8A078;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(206, 177, 133, 0.3);
}

.add-photos-button:active[b-wk916k3idj] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(206, 177, 133, 0.2);
}

.image-ribbon[b-wk916k3idj] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #CEB185 transparent;
    -webkit-overflow-scrolling: touch;
}

.image-ribbon[b-wk916k3idj]::-webkit-scrollbar {
    height: 4px;
}

.image-ribbon[b-wk916k3idj]::-webkit-scrollbar-track {
    background: transparent;
}

.image-ribbon[b-wk916k3idj]::-webkit-scrollbar-thumb {
    background: #CEB185;
    border-radius: 2px;
}

.ribbon-thumbnail[b-wk916k3idj] {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.ribbon-thumbnail:hover[b-wk916k3idj] {
    transform: scale(1.05);
}

.ribbon-thumbnail.selected[b-wk916k3idj] {
    border-color: #CEB185;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.3);
}

.thumbnail-image[b-wk916k3idj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.thumbnail-placeholder[b-wk916k3idj] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-loading[b-wk916k3idj] {
    font-size: 10px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.no-thumbnails[b-wk916k3idj] {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 8px;
    border: 2px dashed #CCCCCC;
}

.no-thumbnails p[b-wk916k3idj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
    text-align: center;
    padding: 0 16px;
}

/* Thumbnail Overlay */
.thumbnail-overlay[b-wk916k3idj] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.delete-thumbnail-btn[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.delete-thumbnail-btn:hover[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-thumbnail-btn:active[b-wk916k3idj] {
    transform: scale(0.95);
}

.add-image-button[b-wk916k3idj] {
    width: 171px;
    height: 171px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.add-image-button:hover[b-wk916k3idj] {
    border-color: #007bff;
    background-color: #f0f8ff;
}

.add-image-content[b-wk916k3idj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-icon[b-wk916k3idj] {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    opacity: 0.6;
}

.add-icon[b-wk916k3idj] {
    width: 16px;
    height: 16px;
    opacity: 0.4;
}

.uploaded-image[b-wk916k3idj] {
    width: 171px;
    height: 171px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    border: 2px solid #007bff;
}

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

.image-placeholder[b-wk916k3idj] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border: 2px dashed #ddd;
}

.placeholder-icon[b-wk916k3idj] {
    width: 32px;
    height: 32px;
    opacity: 0.4;
}

/* Image Delete Overlay */
.image-delete-overlay[b-wk916k3idj] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.delete-image-btn[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.delete-image-btn:hover[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-image-btn:active[b-wk916k3idj] {
    transform: scale(0.95);
}

/* Crop Overlay */
.crop-overlay[b-wk916k3idj] {
    position: absolute;
    bottom: 4px;
    left: 4px;
    z-index: 10;
}

.crop-button[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.crop-button:hover[b-wk916k3idj] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

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

/* Image Modal Styles */
.image-modal-overlay[b-wk916k3idj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

.image-modal-content[b-wk916k3idj] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
}

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

.modal-header h3[b-wk916k3idj] {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.modal-close-btn[b-wk916k3idj] {
    background: none;
    border: none;
    color: #666;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-wk916k3idj] {
    background-color: #f8f9fa;
}

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

.file-upload-area[b-wk916k3idj] {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

.file-upload-area:hover[b-wk916k3idj] {
    border-color: #007bff;
    background-color: #f0f8ff;
}

.hidden-file-input[b-wk916k3idj] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-area-content[b-wk916k3idj] {
    pointer-events: none;
}

.modal-upload-icon[b-wk916k3idj] {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.upload-area-content p[b-wk916k3idj] {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 16px;
    font-weight: 500;
}

.upload-area-content small[b-wk916k3idj] {
    color: #666;
    font-size: 14px;
}

/* Upload progress styles */
.upload-progress[b-wk916k3idj] {
    margin: 16px 0;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.progress-bar[b-wk916k3idj] {
    width: 100%;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill[b-wk916k3idj] {
    height: 100%;
    background-color: #007bff;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.upload-progress p[b-wk916k3idj] {
    margin: 0;
    font-size: 14px;
    color: #666;
    text-align: center;
}

/* Validation message styles */
.validation-message[b-wk916k3idj] {
    margin: 12px 0 40px 0; /* Increased bottom margin to create more space from submit section */
    padding: 12px;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
}

.validation-message p[b-wk916k3idj] {
    margin: 0;
    color: #856404;
    font-size: 14px;
}

/* Dropdown styles */
.select-container[b-wk916k3idj] {
    position: relative;
}

.dropdown-options[b-wk916k3idj] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hide scrollbar for dropdown options */
.dropdown-options[b-wk916k3idj]::-webkit-scrollbar {
    display: none;
}

.dropdown-options[b-wk916k3idj] {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.dropdown-option[b-wk916k3idj] {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.dropdown-option:hover[b-wk916k3idj] {
    background-color: #f8f9fa;
}

.dropdown-option:last-child[b-wk916k3idj] {
    border-bottom: none;
}

/* Language section styles */
.language-item[b-wk916k3idj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin: 4px 0;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.remove-language-btn[b-wk916k3idj] {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.remove-language-btn:hover[b-wk916k3idj] {
    color: #c82333;
}

/* Language selection modal styles */
.language-selection-modal[b-wk916k3idj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    overflow: visible;
}

.modal-content[b-wk916k3idj] {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow: visible;
}

.modal-content h3[b-wk916k3idj] {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.modal-actions[b-wk916k3idj] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end;
}

.cancel-btn[b-wk916k3idj] {
    padding: 10px 20px;
    border: 1px solid #ddd;
    background: white;
    color: #666;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.cancel-btn:hover[b-wk916k3idj] {
    background: #f8f9fa;
    border-color: #ccc;
}

.confirm-btn[b-wk916k3idj] {
    padding: 10px 20px;
    border: none;
    background: #007bff;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.confirm-btn:hover[b-wk916k3idj] {
    background: #0056b3;
}

.confirm-btn:disabled[b-wk916k3idj] {
    background: #ccc;
    cursor: not-allowed;
}

/* Form input focus styles */
.form-input:focus[b-wk916k3idj] {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Select input styles */
.select-input[b-wk916k3idj] {
    cursor: pointer;
}

.select-input:hover[b-wk916k3idj] {
    border-color: #007bff;
}

/* Date input styles */
input[type="date"][b-wk916k3idj] {
    font-family: inherit;
}

/* Submit button styles */
.submit-button[b-wk916k3idj] {
    width: 100%;
    max-width: 290px;
    height: 44px;
    background-color: #000000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
    border: none;
}

.submit-button:hover[b-wk916k3idj] {
    background-color: #2a2927;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button .button-text[b-wk916k3idj] {
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
}

.submit-button.disabled[b-wk916k3idj] {
    background-color: #d4d4d4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled:hover[b-wk916k3idj] {
    background-color: #d4d4d4;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled .button-text[b-wk916k3idj] {
    color: #666666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .photo-grid[b-wk916k3idj] {
        gap: 12px;
        max-width: 360px;
    }

    .add-image-button[b-wk916k3idj],
    .uploaded-image[b-wk916k3idj] {
        width: 150px;
        height: 150px;
    }

    .large-image-wrapper[b-wk916k3idj] {
        max-width: 350px;
        height: 350px;
    }

    .ribbon-thumbnail[b-wk916k3idj] {
        width: 110px;
        height: 110px;
    }

    .delete-thumbnail-btn[b-wk916k3idj] {
        width: 30px;
        height: 30px;
    }

    .dropdown-options[b-wk916k3idj] {
        max-height: 150px;
    }

    .dropdown-option[b-wk916k3idj] {
        padding: 10px 12px;
    }

    .modal-content[b-wk916k3idj] {
        padding: 20px;
        margin: 20px;
    }

    .modal-actions[b-wk916k3idj] {
        flex-direction: column;
    }

    .cancel-btn[b-wk916k3idj],
    .confirm-btn[b-wk916k3idj] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .large-image-wrapper[b-wk916k3idj] {
        max-width: 300px;
        height: 300px;
    }

    .ribbon-thumbnail[b-wk916k3idj] {
        width: 100px;
        height: 100px;
    }

    .delete-thumbnail-btn[b-wk916k3idj] {
        width: 28px;
        height: 28px;
    }

    .image-ribbon[b-wk916k3idj] {
        gap: 8px;
    }
}

/* Cropper Modal Styles */
.cropper-modal-overlay[b-wk916k3idj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-wk916k3idj] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-wk916k3idj 0.3s ease-out;
}

@keyframes modalSlideIn-b-wk916k3idj {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-wk916k3idj] {
        padding: 10px;
    }

    .cropper-modal-container[b-wk916k3idj] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-wk916k3idj] {
        padding: 5px;
    }

    .cropper-modal-container[b-wk916k3idj] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/CreateEvent.razor.rz.scp.css */
/* Create Event Container */
.create-event-container[b-24mt03fdjg] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.create-event-header[b-24mt03fdjg] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-24mt03fdjg] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

/* Content */
.create-event-content[b-24mt03fdjg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 26px 220px 26px; /* Increased bottom padding for fixed submit button */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Photo Section */
.photo-section[b-24mt03fdjg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.photo-placeholder[b-24mt03fdjg] {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 15px;
}

.photo-placeholder img[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.photo-container[b-24mt03fdjg] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.photo-background[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.event-image[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.photo-overlay[b-24mt03fdjg] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-overlay img[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add-photo-link[b-24mt03fdjg] {
    margin-top: 10px;
}

.add-photo-text[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Form Groups */
.form-group[b-24mt03fdjg] {
    margin-bottom: 25px;
    display: block !important;
    visibility: visible !important;
}

.form-label[b-24mt03fdjg] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-24mt03fdjg] {
    color: #CEB185;
}

.form-input-container[b-24mt03fdjg] {
    position: relative;
    width: 100%;
}

.form-input[b-24mt03fdjg] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
}

.form-input:focus[b-24mt03fdjg] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-24mt03fdjg]::placeholder {
    color: #E8E5E0;
}

.form-input[type="date"][b-24mt03fdjg] {
    line-height: 44px;
}

.form-input[type="date"][b-24mt03fdjg]::-webkit-datetime-edit {
    padding: 0;
    display: inline-flex;
    align-items: center;
    height: 44px;
}

select.form-input[b-24mt03fdjg] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-textarea[b-24mt03fdjg] {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    resize: vertical;
    display: block !important;
    visibility: visible !important;
}

.form-textarea:focus[b-24mt03fdjg] {
    outline: none;
    border-color: #CEB185;
}

.form-textarea[b-24mt03fdjg]::placeholder {
    color: #E8E5E0;
}

.dropdown-icon[b-24mt03fdjg] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-icon img[b-24mt03fdjg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Links */
.manual-address-link[b-24mt03fdjg],
.add-language-link[b-24mt03fdjg] {
    margin-top: 8px;
}

.manual-address-text[b-24mt03fdjg],
.add-language-text[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #CEB185;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Word Limit */
.word-limit[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #CEB185;
    margin-top: 8px;
}

/* Selected Languages */
.selected-languages[b-24mt03fdjg] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.language-tag[b-24mt03fdjg] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
}

.language-tag-remove[b-24mt03fdjg] {
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.language-tag-remove:hover[b-24mt03fdjg] {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Add Job Section */
.add-job-section[b-24mt03fdjg] {
    margin: 30px 0;
    text-align: center;
}

.add-job-button[b-24mt03fdjg] {
    width: 290px;
    height: 44px;
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.add-job-button:hover[b-24mt03fdjg] {
    background-color: #B8A06B;
}

.add-job-button:active[b-24mt03fdjg] {
    background-color: #A68F5A;
}

.add-job-button.disabled[b-24mt03fdjg],
.add-job-button:disabled[b-24mt03fdjg] {
    background-color: #E1E1E1;
    color: #AFAFAF;
    cursor: not-allowed;
    opacity: 0.6;
}

.add-job-button.disabled:hover[b-24mt03fdjg],
.add-job-button:disabled:hover[b-24mt03fdjg] {
    background-color: #E1E1E1;
}

/* Create Job Section */
.create-job-section[b-24mt03fdjg] {
    margin: 20px 0;
    text-align: center;
}

.create-job-button[b-24mt03fdjg] {
    width: 290px;
    height: 44px;
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.create-job-button:hover[b-24mt03fdjg] {
    background-color: #B8A06B;
}

.create-job-button:active[b-24mt03fdjg] {
    background-color: #A68F5A;
}

/* Submit Section */
.submit-section[b-24mt03fdjg] {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 350px;
    padding: 0 20px;
    text-align: center;
    border: 0px;
    background-color: transparent;
    z-index: 100;
}

.submit-button[b-24mt03fdjg] {
    width: 100%;
    max-width: 290px;
    height: 44px;
    background-color: #000000 !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
    border: none;
}

.submit-button:hover:not(.disabled)[b-24mt03fdjg] {
    background-color: #2a2927 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button .button-text[b-24mt03fdjg] {
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
}

.submit-button.disabled[b-24mt03fdjg] {
    background-color: #d4d4d4 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled:hover[b-24mt03fdjg] {
    background-color: #d4d4d4 !important;
    transform: none;
    box-shadow: none;
}

.submit-button.disabled .button-text[b-24mt03fdjg] {
    color: #666666;
}

/* Error and Success Messages */
.error-message[b-24mt03fdjg] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #FFE6E6;
    color: #D32F2F;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.success-message[b-24mt03fdjg] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #E8F5E8;
    color: #2E7D32;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 480px) {
    .create-event-content[b-24mt03fdjg] {
        padding: 15px 20px 220px 20px; /* Increased bottom padding for fixed submit button */
    }
    
    .form-group[b-24mt03fdjg] {
        margin-bottom: 20px;
    }
    
    .photo-placeholder[b-24mt03fdjg] {
        width: 100px;
        height: 100px;
    }
    
    .photo-container[b-24mt03fdjg] {
        width: 100px;
        height: 100px;
    }
    
    .photo-overlay[b-24mt03fdjg] {
        width: 50px;
        height: 50px;
    }
    
    .add-job-button[b-24mt03fdjg] {
        width: 100%;
        max-width: 290px;
    }
    
    .submit-section[b-24mt03fdjg] {
        padding: 0 15px;
        max-width: 100%;
    }
    
    .submit-button[b-24mt03fdjg] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .create-event-content[b-24mt03fdjg] {
        padding: 10px 15px 220px 15px; /* Increased bottom padding for fixed submit button */
    }
    
    .header-title[b-24mt03fdjg] {
        font-size: 20px;
    }
    
    .form-label[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .form-input[b-24mt03fdjg],
    .form-textarea[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .add-photo-text[b-24mt03fdjg],
    .manual-address-text[b-24mt03fdjg],
    .add-language-text[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .add-job-button[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .submit-button[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .submit-section[b-24mt03fdjg] {
        padding: 0 10px;
    }
}

/* Simple Job Form Accordion Styles */
.simple-job-accordion[b-24mt03fdjg] {
    margin: 30px 0;
    background-color: #FFFFFF;
    border: 2px solid #CEB185;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.simple-accordion-header[b-24mt03fdjg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    cursor: pointer;
    background-color: #F8F8F8;
    border-bottom: 1px solid #E8E5E0;
    min-height: 60px;
}

.simple-accordion-header:hover[b-24mt03fdjg] {
    background-color: #F0F0F0;
}

.simple-header-text h3[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 4px 0;
}

.simple-header-text p[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    margin: 0;
}

.simple-arrow[b-24mt03fdjg] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    background-color: #CEB185;
    border-radius: 50%;
}

.simple-arrow.expanded[b-24mt03fdjg] {
    transform: rotate(180deg);
}

.simple-arrow img[b-24mt03fdjg] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.simple-accordion-content[b-24mt03fdjg] {
    padding: 20px;
    background-color: #FFFFFF;
    border-top: 1px solid #E8E5E0;
    display: block !important;
    visibility: visible !important;
    opacity: 1;
    min-height: 200px;
}

/* Jobs Accordion Styles */
.jobs-accordion-section[b-24mt03fdjg] {
    margin: 30px 0;
}

.jobs-section-title[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #201F1D;
    margin-bottom: 15px;
}

.job-accordion-item[b-24mt03fdjg] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.job-accordion-item:hover[b-24mt03fdjg] {
    border-color: #CEB185;
    box-shadow: 0 2px 4px rgba(206, 177, 133, 0.1);
}

.job-accordion-header[b-24mt03fdjg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    cursor: pointer;
    background-color: #F8F8F8;
    transition: background-color 0.3s ease;
}

.job-accordion-header:hover[b-24mt03fdjg] {
    background-color: #F0F0F0;
}

.job-header-content[b-24mt03fdjg] {
    flex: 1;
}

.job-title[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #201F1D;
    margin-bottom: 4px;
}

.job-subtitle[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
}

.job-accordion-actions[b-24mt03fdjg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.remove-job-button[b-24mt03fdjg] {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #666666;
    line-height: 1;
}

.remove-job-button:hover[b-24mt03fdjg] {
    background-color: #FFE6E6;
    color: #FF4444;
}

.accordion-arrow[b-24mt03fdjg] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    background-color: #CEB185;
    border-radius: 50%;
}

.accordion-arrow.expanded[b-24mt03fdjg] {
    transform: rotate(180deg);
}

.accordion-arrow img[b-24mt03fdjg] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.job-accordion-content[b-24mt03fdjg] {
    padding: 20px;
    background-color: #FFFFFF;
    border-top: 1px solid #E8E5E0;
    animation: slideDown-b-24mt03fdjg 0.3s ease;
}

@keyframes slideDown-b-24mt03fdjg {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

.job-detail-row[b-24mt03fdjg] {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    gap: 4px;
}

.job-detail-row:last-child[b-24mt03fdjg] {
    margin-bottom: 0;
}

.job-detail-label[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #201F1D;
}

/* Read-only form elements */
.form-input.readonly[b-24mt03fdjg],
.form-textarea.readonly[b-24mt03fdjg] {
    background-color: #F8F8F8;
    color: #666666;
    cursor: default;
    border-color: #E8E5E0;
}

.form-input.readonly:focus[b-24mt03fdjg],
.form-textarea.readonly:focus[b-24mt03fdjg] {
    outline: none;
    border-color: #E8E5E0;
    box-shadow: none;
}

.language-tag.readonly[b-24mt03fdjg] {
    background-color: #F0F0F0;
    color: #666666;
    cursor: default;
}

.language-tag.readonly:hover[b-24mt03fdjg] {
    background-color: #F0F0F0;
}

.job-detail-value[b-24mt03fdjg] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Responsive Design for Accordion */
@media (max-width: 480px) {
    .job-form-accordion-header[b-24mt03fdjg] {
        padding: 15px;
    }
    
    .job-form-accordion-content[b-24mt03fdjg] {
        padding: 15px;
    }
    
    .job-form-title[b-24mt03fdjg] {
        font-size: 16px;
    }
    
    .job-form-subtitle[b-24mt03fdjg] {
        font-size: 13px;
    }
    
    .job-accordion-header[b-24mt03fdjg] {
        padding: 12px 15px;
    }
    
    .job-accordion-content[b-24mt03fdjg] {
        padding: 15px;
    }
    
    .job-title[b-24mt03fdjg] {
        font-size: 15px;
    }
    
    .job-subtitle[b-24mt03fdjg] {
        font-size: 13px;
    }
    
    .job-detail-label[b-24mt03fdjg],
    .job-detail-value[b-24mt03fdjg] {
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .job-form-accordion-header[b-24mt03fdjg] {
        padding: 12px;
    }
    
    .job-form-accordion-content[b-24mt03fdjg] {
        padding: 12px;
    }
    
    .job-form-title[b-24mt03fdjg] {
        font-size: 15px;
    }
    
    .job-form-subtitle[b-24mt03fdjg] {
        font-size: 12px;
    }
    
    .job-accordion-header[b-24mt03fdjg] {
        padding: 10px 12px;
    }
    
    .job-accordion-content[b-24mt03fdjg] {
        padding: 12px;
    }
    
    .job-title[b-24mt03fdjg] {
        font-size: 14px;
    }
    
    .job-subtitle[b-24mt03fdjg] {
        font-size: 12px;
    }
    
    .job-detail-label[b-24mt03fdjg],
    .job-detail-value[b-24mt03fdjg] {
        font-size: 12px;
    }
}

/* Additional safety margin for very small screens */
@media (max-height: 700px) {
    .create-event-content[b-24mt03fdjg] {
        padding-bottom: 200px;
    }
}

/* Working hours start/end time inputs */
.working-hours-row[b-24mt03fdjg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.working-hours-row .form-input-container[b-24mt03fdjg] {
    flex: 1;
}

.working-hours-row input[type="time"][b-24mt03fdjg] {
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 44px;
    padding: 0;
}

.working-hours-row input[type="time"][b-24mt03fdjg]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.working-hours-row input[type="time"][b-24mt03fdjg]::-webkit-datetime-edit {
    display: block;
    text-align: center;
    padding: 0;
}

.working-hours-row input[type="time"][b-24mt03fdjg]::-webkit-datetime-edit-fields-wrapper {
    display: inline-block;
}

.working-hours-separator[b-24mt03fdjg] {
    color: #6B6B6B;
    font-size: 14px;
}
/* /Pages/CreateFolder.razor.rz.scp.css */
/* Create Folder Container */
.create-folder-container[b-bvg1e56f7t] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-bvg1e56f7t] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
}

.loading-spinner[b-bvg1e56f7t] {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-bvg1e56f7t 1s linear infinite;
    margin-right: 1rem;
}

.loading-spinner[b-bvg1e56f7t]::after {
    content: "Loading...";
    position: absolute;
    margin-top: 50px;
    margin-left: -30px;
    font-size: 14px;
    color: #666;
}

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

/* Header */
.create-folder-header[b-bvg1e56f7t] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-back[b-bvg1e56f7t] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-bvg1e56f7t] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-bvg1e56f7t] {
    opacity: 0.7;
}

.back-button img[b-bvg1e56f7t] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-bvg1e56f7t] {
    text-align: center;
}

.header-title h1[b-bvg1e56f7t] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
}

/* Form Content */
.create-folder-content[b-bvg1e56f7t] {
    flex: 1;
    padding: 20px 25px 20px 25px; /* Reduced bottom padding since button is now separate */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
}

.create-folder-content[b-bvg1e56f7t]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Form Groups */
.form-group[b-bvg1e56f7t] {
    margin-bottom: 29px;
}

.form-label[b-bvg1e56f7t] {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
}

/* Form Inputs */
.form-input[b-bvg1e56f7t] {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-bvg1e56f7t] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-bvg1e56f7t]::placeholder {
    color: #E8E5E0;
}

/* Form Textarea */
.form-textarea[b-bvg1e56f7t] {
    width: 100%;
    min-height: 206px;
    padding: 16px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    resize: vertical;
}

.form-textarea:focus[b-bvg1e56f7t] {
    outline: none;
    border-color: #CEB185;
}

.form-textarea[b-bvg1e56f7t]::placeholder {
    color: #E8E5E0;
}

/* Validation Messages */
.validation-message[b-bvg1e56f7t] {
    display: block;
    color: #dc3545;
    font-size: 14px;
    margin-top: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 1.4;
}

/* Save Button Container - Fixed at bottom */
.save-button-container[b-bvg1e56f7t] {
    position: fixed;
    bottom: 100px; /* Increased margin above bottom navigation bar */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px; /* Match the design width */
    padding: 0 25px;
    z-index: 100;
    background-color: #FFFFFF;
    box-shadow: none !important; /* Remove any box shadow from global styles */
}

.save-button[b-bvg1e56f7t] {
    width: 100%;
    max-width: 290px;
    height: 44px;
    background-color: #E1E1E1;
    border: none;
    border-radius: 8px;
    color: #AFAFAF;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    outline: none;
    box-shadow: none;
}

.save-button:not(.saving):not(:disabled)[b-bvg1e56f7t] {
    background-color: #201F1D;
    color: #FFFFFF;
}

.save-button:not(.saving):not(:disabled):hover[b-bvg1e56f7t] {
    background-color: #2a2a2a;
    transform: translateY(-1px);
}

.save-button:not(.saving):not(:disabled):active[b-bvg1e56f7t] {
    transform: translateY(0);
}

.save-button:disabled[b-bvg1e56f7t] {
    cursor: not-allowed;
    opacity: 0.6;
}

.save-button.saving[b-bvg1e56f7t] {
    background-color: #201F1D;
    color: #FFFFFF;
    cursor: not-allowed;
}

/* Remove all borders and outlines on all states */
.save-button:focus[b-bvg1e56f7t],
.save-button:focus-visible[b-bvg1e56f7t],
.save-button:active[b-bvg1e56f7t],
.save-button:hover[b-bvg1e56f7t] {
    outline: none;
    border: none;
    box-shadow: none;
}

/* Save Spinner */
.save-spinner[b-bvg1e56f7t] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid #FFFFFF;
    border-radius: 50%;
    animation: spin-b-bvg1e56f7t 1s linear infinite;
}

/* Responsive Design */
@media (max-width: 480px) {
    .create-folder-content[b-bvg1e56f7t] {
        padding: 15px 20px 20px 20px;
    }

    .form-group[b-bvg1e56f7t] {
        margin-bottom: 24px;
    }

    .form-label[b-bvg1e56f7t] {
        font-size: 14px;
    }

    .form-input[b-bvg1e56f7t],
    .form-textarea[b-bvg1e56f7t] {
        font-size: 14px;
    }

    .save-button-container[b-bvg1e56f7t] {
        padding: 0 20px;
    }

    .save-button[b-bvg1e56f7t] {
        width: 100%;
        max-width: 290px;
    }

    .header-title h1[b-bvg1e56f7t] {
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    .create-folder-content[b-bvg1e56f7t] {
        padding: 12px 15px 20px 15px;
    }

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

    .form-label[b-bvg1e56f7t] {
        font-size: 13px;
    }

    .form-input[b-bvg1e56f7t],
    .form-textarea[b-bvg1e56f7t] {
        font-size: 13px;
    }

    .save-button-container[b-bvg1e56f7t] {
        padding: 0 15px;
    }

    .header-title h1[b-bvg1e56f7t] {
        font-size: 18px;
    }
}

/* /Pages/CreateJob.razor.rz.scp.css */
/* Create Job Container */
.create-job-container[b-g1eypta49n] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.create-job-header[b-g1eypta49n] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-g1eypta49n] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-back-button img[b-g1eypta49n] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

/* Content */
.create-job-content[b-g1eypta49n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 25px 120px 25px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Event Info Section */
.event-info-section[b-g1eypta49n] {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 15px;
}

.event-image[b-g1eypta49n] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.event-details[b-g1eypta49n] {
    flex: 1;
}

.event-name[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    margin-bottom: 5px;
}

.event-venue[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
}

/* Job Form Section */
.job-form-section[b-g1eypta49n] {
    flex: 1;
}

.form-title[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #201F1D;
    margin-bottom: 25px;
}

/* Form Groups */
.form-group[b-g1eypta49n] {
    margin-bottom: 25px;
}

.form-label[b-g1eypta49n] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-g1eypta49n] {
    color: #CEB185;
}

.form-input-container[b-g1eypta49n] {
    position: relative;
    width: 100%;
}

.form-input[b-g1eypta49n] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.form-input:focus[b-g1eypta49n] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-g1eypta49n]::placeholder {
    color: #E8E5E0;
}

select.form-input[b-g1eypta49n] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-textarea[b-g1eypta49n] {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    resize: vertical;
}

.form-textarea:focus[b-g1eypta49n] {
    outline: none;
    border-color: #CEB185;
}

.form-textarea[b-g1eypta49n]::placeholder {
    color: #E8E5E0;
}

.dropdown-icon[b-g1eypta49n] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-icon img[b-g1eypta49n] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Links */
.add-language-link[b-g1eypta49n] {
    margin-top: 8px;
}

.add-language-text[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #CEB185;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Word Limit */
.word-limit[b-g1eypta49n] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #CEB185;
    margin-top: 8px;
}

/* Update Section */
.update-section[b-g1eypta49n] {
    margin-top: 30px;
    text-align: center;
}

.update-button[b-g1eypta49n] {
    width: 290px;
    height: 44px;
    background-color: #E1E1E1;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #AFAFAF;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.update-button:hover[b-g1eypta49n] {
    background-color: #D0D0D0;
}

.update-button:active[b-g1eypta49n] {
    background-color: #C0C0C0;
}

/* Responsive Design */
@media (max-width: 480px) {
    .create-job-content[b-g1eypta49n] {
        padding: 15px 20px 120px 20px;
    }
    
    .form-group[b-g1eypta49n] {
        margin-bottom: 20px;
    }
    
    .event-image[b-g1eypta49n] {
        width: 50px;
        height: 45px;
    }
    
    .event-name[b-g1eypta49n] {
        font-size: 20px;
    }
    
    .event-venue[b-g1eypta49n] {
        font-size: 14px;
    }
    
    .update-button[b-g1eypta49n] {
        width: 100%;
        max-width: 290px;
    }
    
    .form-title[b-g1eypta49n] {
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .create-job-content[b-g1eypta49n] {
        padding: 10px 15px 120px 15px;
    }
    
    .header-title[b-g1eypta49n] {
        font-size: 20px;
    }
    
    .form-label[b-g1eypta49n] {
        font-size: 14px;
    }
    
    .form-input[b-g1eypta49n],
    .form-textarea[b-g1eypta49n] {
        font-size: 14px;
    }
    
    .add-language-text[b-g1eypta49n] {
        font-size: 14px;
    }
    
    .update-button[b-g1eypta49n] {
        font-size: 14px;
    }
}

/* Working hours start/end time inputs */
.working-hours-row[b-g1eypta49n] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.working-hours-row .form-input-container[b-g1eypta49n] {
    flex: 1;
}

.working-hours-row input[type="time"][b-g1eypta49n] {
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 44px;
    padding: 0;
}

.working-hours-row input[type="time"][b-g1eypta49n]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.working-hours-row input[type="time"][b-g1eypta49n]::-webkit-datetime-edit {
    display: block;
    text-align: center;
    padding: 0;
}

.working-hours-row input[type="time"][b-g1eypta49n]::-webkit-datetime-edit-fields-wrapper {
    display: inline-block;
}

.working-hours-separator[b-g1eypta49n] {
    color: #6B6B6B;
    font-size: 14px;
}

/* /Pages/EditEventJob.razor.rz.scp.css */
/* EditEventJob.razor.css */

.edit-job-container[b-ozgfnw6b1t] {
    background-color: #ffffff;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.edit-job-header[b-ozgfnw6b1t] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    position: relative;
    flex-shrink: 0;
}

.header-content[b-ozgfnw6b1t] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 106px;
    padding: 0 18px;
    position: relative;
}

.back-button[b-ozgfnw6b1t] {
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.back-button img[b-ozgfnw6b1t] {
    width: 100%;
    height: 100%;
}

.page-title[b-ozgfnw6b1t] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
}

/* Content */
.edit-job-content[b-ozgfnw6b1t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 0 220px 0; /* Bottom padding for fixed button */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.edit-job-content[b-ozgfnw6b1t]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Event Info */
.event-info[b-ozgfnw6b1t] {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    gap: 15px;
}

.event-image[b-ozgfnw6b1t] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.placeholder-image[b-ozgfnw6b1t] {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-image img[b-ozgfnw6b1t] {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.event-details[b-ozgfnw6b1t] {
    flex: 1;
}

.event-name[b-ozgfnw6b1t] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0 0 8px 0;
}

.event-location[b-ozgfnw6b1t] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

/* Job Form Section */
.job-form-section[b-ozgfnw6b1t] {
    padding: 0 25px;
}

.section-title[b-ozgfnw6b1t] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #000000;
    margin: 0 0 20px 0;
}

.form-container[b-ozgfnw6b1t] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.form-label[b-ozgfnw6b1t] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

.required[b-ozgfnw6b1t] {
    color: #ceb185;
}

/* Form Controls */
.select-container[b-ozgfnw6b1t] {
    position: relative;
    width: 100%;
}

.form-select[b-ozgfnw6b1t] {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #201f1d;
    appearance: none;
    cursor: pointer;
}

.form-select:focus[b-ozgfnw6b1t] {
    outline: none;
    border-color: #ceb185;
}

.dropdown-icon[b-ozgfnw6b1t] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.textarea-container[b-ozgfnw6b1t] {
    position: relative;
    width: 100%;
}

.form-textarea[b-ozgfnw6b1t] {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #201f1d;
    resize: vertical;
    font-family: 'Montserrat', sans-serif;
}

.form-textarea:focus[b-ozgfnw6b1t] {
    outline: none;
    border-color: #ceb185;
}

.form-textarea[b-ozgfnw6b1t]::placeholder {
    color: #afafaf;
}

.word-limit[b-ozgfnw6b1t] {
    position: absolute;
    bottom: 8px;
    left: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
}

.add-language-btn[b-ozgfnw6b1t] {
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
    cursor: pointer;
    text-align: left;
    padding: 0;
    margin-top: 8px;
}

.add-language-btn:hover[b-ozgfnw6b1t] {
    text-decoration: underline;
}

/* Selected Languages */
.selected-languages[b-ozgfnw6b1t] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.language-tag[b-ozgfnw6b1t] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
}

.language-tag-remove[b-ozgfnw6b1t] {
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.language-tag-remove:hover[b-ozgfnw6b1t] {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Action Buttons */
.action-buttons[b-ozgfnw6b1t] {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 350px;
    padding: 0 20px;
    text-align: center;
    z-index: 100;
}

.update-btn[b-ozgfnw6b1t] {
    background-color: #e1e1e1;
    border: none;
    border-radius: 8px;
    width: 290px;
    height: 44px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #afafaf;
    cursor: pointer;
    transition: all 0.3s ease;
}

.update-btn:hover:not(:disabled)[b-ozgfnw6b1t] {
    background-color: #ceb185;
    color: #ffffff;
}

.update-btn:disabled[b-ozgfnw6b1t] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 480px) {
    .edit-job-content[b-ozgfnw6b1t] {
        padding: 0 0 220px 0; /* Bottom padding for fixed button */
    }

    .header-content[b-ozgfnw6b1t] {
        padding: 0 15px;
    }

    .back-button[b-ozgfnw6b1t] {
        left: 15px;
    }

    .page-title[b-ozgfnw6b1t] {
        width: auto;
        max-width: 200px;
    }

    .event-info[b-ozgfnw6b1t] {
        padding: 20px 15px;
    }

    .job-form-section[b-ozgfnw6b1t] {
        padding: 0 15px;
    }

    .action-buttons[b-ozgfnw6b1t] {
        padding: 0 15px;
        max-width: 100%;
    }

    .update-btn[b-ozgfnw6b1t] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 360px) {
    .edit-job-content[b-ozgfnw6b1t] {
        padding: 0 0 220px 0; /* Bottom padding for fixed button */
    }

    .header-content[b-ozgfnw6b1t] {
        padding: 0 10px;
    }

    .back-button[b-ozgfnw6b1t] {
        left: 10px;
    }

    .page-title[b-ozgfnw6b1t] {
        font-size: 20px;
    }

    .event-info[b-ozgfnw6b1t] {
        padding: 20px 10px;
    }

    .job-form-section[b-ozgfnw6b1t] {
        padding: 0 10px;
    }

    .action-buttons[b-ozgfnw6b1t] {
        padding: 0 10px;
    }

    .form-label[b-ozgfnw6b1t] {
        font-size: 14px;
    }

    .form-select[b-ozgfnw6b1t],
    .form-textarea[b-ozgfnw6b1t] {
        font-size: 14px;
    }
}

/* Focus states for accessibility */
.form-select:focus[b-ozgfnw6b1t],
.form-textarea:focus[b-ozgfnw6b1t] {
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.2);
}

/* Loading state */
.update-btn:disabled[b-ozgfnw6b1t] {
    background-color: #e1e1e1;
    color: #afafaf;
}

/* Error states (for future use) */
.form-select.error[b-ozgfnw6b1t],
.form-textarea.error[b-ozgfnw6b1t] {
    border-color: #ff6b6b;
}

.error-message[b-ozgfnw6b1t] {
    color: #ff6b6b;
    font-size: 14px;
    margin-top: 4px;
}

/* Working hours start/end time inputs */
.working-hours-row[b-ozgfnw6b1t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.working-hours-row .select-container[b-ozgfnw6b1t] {
    flex: 1;
}

.working-hours-row input[type="time"][b-ozgfnw6b1t] {
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 44px;
    padding: 0;
}

.working-hours-row input[type="time"][b-ozgfnw6b1t]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.working-hours-row input[type="time"][b-ozgfnw6b1t]::-webkit-datetime-edit {
    display: block;
    text-align: center;
    padding: 0;
}

.working-hours-row input[type="time"][b-ozgfnw6b1t]::-webkit-datetime-edit-fields-wrapper {
    display: inline-block;
}

.working-hours-separator[b-ozgfnw6b1t] {
    color: #6B6B6B;
    font-size: 14px;
}
/* /Pages/EditNewMediaUploadAdmin.razor.rz.scp.css */
/* New Media Upload Container */
.new-upload-container[b-hoeoxctu63] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-hoeoxctu63] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-hoeoxctu63] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-hoeoxctu63 1s linear infinite;
}

.loading-container p[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

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

/* Header */
.new-upload-header[b-hoeoxctu63] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-back[b-hoeoxctu63] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-hoeoxctu63] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-hoeoxctu63] {
    opacity: 0.7;
}

.back-button img[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-hoeoxctu63] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.page-title[b-hoeoxctu63] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.header-camera[b-hoeoxctu63] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.header-camera img[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content */
.new-upload-content[b-hoeoxctu63] {
    flex: 1;
    padding: 20px 26px 180px 26px; /* Increased bottom padding to prevent button overlap */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
    height: calc(100vh - 186px); /* Fixed height for proper scrolling */
}

.new-upload-content[b-hoeoxctu63]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Album Name Input */
.album-name-input-container[b-hoeoxctu63] {
    margin-bottom: 32px;
}

.album-name-label[b-hoeoxctu63] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.album-name-input[b-hoeoxctu63] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.album-name-input:focus[b-hoeoxctu63] {
    outline: none;
    border-color: #CEB185;
}

.album-name-input[b-hoeoxctu63]::placeholder {
    color: #B8A78C;
}

.album-name-error[b-hoeoxctu63] {
    margin: 8px 0 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #F44336;
}

/* Album Info */
.album-info[b-hoeoxctu63] {
    margin-bottom: 32px;
}

.album-text[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.album-name[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* Large Image Display */
.large-image-container[b-hoeoxctu63] {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.large-image-wrapper[b-hoeoxctu63] {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 400px;
    background-color: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.large-image[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.large-image-placeholder[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-large-image[b-hoeoxctu63] {
    width: 100%;
    max-width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 12px;
    border: 2px dashed #CCCCCC;
}

.no-large-image p[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Crop Overlay */
.crop-overlay[b-hoeoxctu63] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 10;
}

.crop-button[b-hoeoxctu63] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.crop-button:hover[b-hoeoxctu63] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

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

/* Image Ribbon */
.image-ribbon-container[b-hoeoxctu63] {
    margin-bottom: 34px;
}

.ribbon-header[b-hoeoxctu63] {
    margin-bottom: 12px;
}

.ribbon-title[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
}

.image-ribbon[b-hoeoxctu63] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #CEB185 transparent;
    -webkit-overflow-scrolling: touch;
}

.image-ribbon[b-hoeoxctu63]::-webkit-scrollbar {
    height: 4px;
}

.image-ribbon[b-hoeoxctu63]::-webkit-scrollbar-track {
    background: transparent;
}

.image-ribbon[b-hoeoxctu63]::-webkit-scrollbar-thumb {
    background: #CEB185;
    border-radius: 2px;
}

.ribbon-thumbnail[b-hoeoxctu63] {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.ribbon-thumbnail:hover[b-hoeoxctu63] {
    transform: scale(1.05);
}

.ribbon-thumbnail.selected[b-hoeoxctu63] {
    border-color: #CEB185;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.3);
}

.ribbon-thumbnail.thumbnail-selected[b-hoeoxctu63] {
    border-color: #CEB185;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.5);
}

.thumbnail-image[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.thumbnail-placeholder[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-loading[b-hoeoxctu63] {
    font-size: 10px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.no-thumbnails[b-hoeoxctu63] {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 8px;
    border: 2px dashed #CCCCCC;
}

.no-thumbnails p[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Thumbnail Overlay */
.thumbnail-overlay[b-hoeoxctu63] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.delete-thumbnail-btn[b-hoeoxctu63] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.delete-thumbnail-btn:hover[b-hoeoxctu63] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-thumbnail-btn:active[b-hoeoxctu63] {
    transform: scale(0.95);
}

/* Thumbnail Checkmark */
.thumbnail-checkmark[b-hoeoxctu63] {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 15;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.thumbnail-checkmark svg[b-hoeoxctu63] {
    width: 20px;
    height: 20px;
}

/* Set Thumbnail Button Container */
.set-thumbnail-button-container[b-hoeoxctu63] {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.set-thumbnail-main-btn[b-hoeoxctu63] {
    padding: 12px 24px;
    background: #CEB185;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
}

.set-thumbnail-main-btn:hover[b-hoeoxctu63] {
    background: #B8A078;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(206, 177, 133, 0.3);
}

.set-thumbnail-main-btn:active[b-hoeoxctu63] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(206, 177, 133, 0.2);
}


/* Feature Sections */
.feature-section[b-hoeoxctu63] {
    display: flex;
    align-items: center;
    padding: 16px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    margin-bottom: 8px;
}

.feature-section:hover[b-hoeoxctu63] {
    background-color: #f8f8f8;
}

.feature-icon[b-hoeoxctu63] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.feature-icon img[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-content[b-hoeoxctu63] {
    flex: 1;
}

.feature-text[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.feature-subtext[b-hoeoxctu63] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #B8A78C;
    margin: 4px 0 0 0;
}

.feature-arrow[b-hoeoxctu63] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-arrow img[b-hoeoxctu63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Upload Button Container */
.upload-button-container[b-hoeoxctu63] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 1002; /* Ensure buttons stay on top of all content including modals */
}

.upload-button[b-hoeoxctu63] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.upload-button:hover:not(:disabled)[b-hoeoxctu63] {
    background-color: #3A3937;
}

.upload-button:active:not(:disabled)[b-hoeoxctu63] {
    background-color: #1A1917;
}

.upload-button:disabled[b-hoeoxctu63] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

.upload-spinner[b-hoeoxctu63] {
    width: 16px;
    height: 16px;
    border: 2px solid #FFFFFF;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-hoeoxctu63 1s linear infinite;
}


/* Responsive Design */
@media (max-width: 768px) and (min-width: 481px) {
    .large-image-wrapper[b-hoeoxctu63] {
        max-width: 350px;
        height: 350px;
    }
    
    .ribbon-thumbnail[b-hoeoxctu63] {
        width: 110px;
        height: 110px;
    }
    
    .delete-thumbnail-btn[b-hoeoxctu63] {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .new-upload-content[b-hoeoxctu63] {
        padding: 20px 15px 160px 15px; /* Increased bottom padding for mobile */
        height: calc(100vh - 186px);
    }
    
    .large-image-wrapper[b-hoeoxctu63] {
        max-width: 300px;
        height: 300px;
    }
    
    .ribbon-thumbnail[b-hoeoxctu63] {
        width: 100px;
        height: 100px;
    }
    
    .set-thumbnail-button-container[b-hoeoxctu63] {
        max-width: 300px;
    }
    
    .set-thumbnail-main-btn[b-hoeoxctu63] {
        font-size: 14px;
        padding: 10px 20px;
        min-width: 140px;
    }
    
    .delete-thumbnail-btn[b-hoeoxctu63] {
        width: 28px;
        height: 28px;
    }
    
    .image-ribbon[b-hoeoxctu63] {
        gap: 8px;
    }
    
    .page-title[b-hoeoxctu63] {
        font-size: 18px;
    }
    
    .album-text[b-hoeoxctu63] {
        font-size: 15px;
    }
    
    .album-name-label[b-hoeoxctu63] {
        font-size: 15px;
    }
    
    .album-name-input[b-hoeoxctu63] {
        font-size: 15px;
        padding: 10px 14px;
    }
    
    .album-name-error[b-hoeoxctu63] {
        font-size: 13px;
    }
    
    .feature-text[b-hoeoxctu63] {
        font-size: 15px;
    }
    
    .feature-subtext[b-hoeoxctu63] {
        font-size: 13px;
    }
    
    .upload-button-container[b-hoeoxctu63] {
        padding: 0 20px;
    }
    
    .upload-button[b-hoeoxctu63] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
    
    .thumbnail-checkmark[b-hoeoxctu63] {
        width: 24px;
        height: 24px;
    }
    
    .thumbnail-checkmark svg[b-hoeoxctu63] {
        width: 16px;
        height: 16px;
    }
    
}

@media (max-width: 360px) {
    .new-upload-content[b-hoeoxctu63] {
        padding: 15px 10px 160px 10px; /* Increased bottom padding for small screens */
        height: calc(100vh - 186px);
    }
    
    .large-image-wrapper[b-hoeoxctu63] {
        max-width: 280px;
        height: 280px;
    }
    
    .ribbon-thumbnail[b-hoeoxctu63] {
        width: 90px;
        height: 90px;
    }
    
    .set-thumbnail-button-container[b-hoeoxctu63] {
        max-width: 280px;
    }
    
    .set-thumbnail-main-btn[b-hoeoxctu63] {
        font-size: 13px;
        padding: 9px 18px;
        min-width: 120px;
    }
    
    .delete-thumbnail-btn[b-hoeoxctu63] {
        width: 26px;
        height: 26px;
    }
    
    .image-ribbon[b-hoeoxctu63] {
        gap: 6px;
    }
    
    .page-title[b-hoeoxctu63] {
        font-size: 16px;
    }
    
    .album-text[b-hoeoxctu63] {
        font-size: 14px;
    }
    
    .album-name-label[b-hoeoxctu63] {
        font-size: 14px;
    }
    
    .album-name-input[b-hoeoxctu63] {
        font-size: 14px;
        padding: 9px 12px;
    }
    
    .album-name-error[b-hoeoxctu63] {
        font-size: 12px;
    }
    
    .feature-text[b-hoeoxctu63] {
        font-size: 14px;
    }
    
    .feature-subtext[b-hoeoxctu63] {
        font-size: 12px;
    }
    
    .thumbnail-checkmark[b-hoeoxctu63] {
        width: 22px;
        height: 22px;
    }
    
    .thumbnail-checkmark svg[b-hoeoxctu63] {
        width: 14px;
        height: 14px;
    }
    
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .large-image[b-hoeoxctu63],
    .thumbnail-image[b-hoeoxctu63] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* Upload Status Indicators */
.upload-status-indicator[b-hoeoxctu63] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.upload-status-indicator.uploading[b-hoeoxctu63] {
    background: rgba(255, 255, 255, 0.95);
}

.upload-status-indicator.uploaded[b-hoeoxctu63] {
    background: rgba(76, 175, 80, 0.1);
}

.upload-status-indicator.failed[b-hoeoxctu63] {
    background: rgba(244, 67, 54, 0.1);
}

.upload-spinner-small[b-hoeoxctu63] {
    width: 16px;
    height: 16px;
    border: 2px solid #CEB185;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-hoeoxctu63 1s linear infinite;
}

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

/* Cropper Modal Styles */
.cropper-modal-overlay[b-hoeoxctu63] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-hoeoxctu63] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-hoeoxctu63 0.3s ease-out;
}

@keyframes modalSlideIn-b-hoeoxctu63 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-hoeoxctu63] {
        padding: 10px;
    }
    
    .cropper-modal-container[b-hoeoxctu63] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-hoeoxctu63] {
        padding: 5px;
    }
    
    .cropper-modal-container[b-hoeoxctu63] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}

/* Modal Styles - consistent with PortfolioFolder */
.modal-overlay[b-hoeoxctu63] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 20px;
}

.modal-container[b-hoeoxctu63] {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-hoeoxctu63 0.3s ease-out;
}

@keyframes modalSlideIn-b-hoeoxctu63 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header[b-hoeoxctu63] {
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #E8E5E0;
}

.modal-title[b-hoeoxctu63] {
    margin: 0 0 16px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

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

.modal-message[b-hoeoxctu63] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
}

.modal-footer[b-hoeoxctu63] {
    padding: 0 24px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn[b-hoeoxctu63] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.modal-btn-cancel[b-hoeoxctu63] {
    background: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.modal-btn-cancel:hover[b-hoeoxctu63] {
    background: #E8E5E0;
    transform: translateY(-1px);
}

.modal-btn-cancel:active[b-hoeoxctu63] {
    transform: translateY(0);
}

/* Responsive modal styles */
@media (max-width: 480px) {
    .modal-container[b-hoeoxctu63] {
        max-width: 350px;
        margin: 0 10px;
    }
    
    .modal-header[b-hoeoxctu63] {
        padding: 20px 20px 0 20px;
    }
    
    .modal-title[b-hoeoxctu63] {
        font-size: 18px;
    }
    
    .modal-body[b-hoeoxctu63] {
        padding: 20px;
    }
    
    .modal-message[b-hoeoxctu63] {
        font-size: 15px;
    }
    
    .modal-footer[b-hoeoxctu63] {
        padding: 0 20px 20px 20px;
        flex-direction: column;
        gap: 8px;
    }
    
    .modal-btn[b-hoeoxctu63] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

/* Save Metadata Button */
.save-metadata-container[b-hoeoxctu63] {
    padding: 16px;
    display: flex;
    justify-content: center;
}

.save-metadata-btn[b-hoeoxctu63] {
    background-color: #201F1D;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: 'Montserrat', sans-serif;
}

.save-metadata-btn:hover:not(:disabled)[b-hoeoxctu63] {
    background-color: #3A3937;
}

.save-metadata-btn:disabled[b-hoeoxctu63] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

@media (max-width: 480px) {
    .save-metadata-btn[b-hoeoxctu63] {
        font-size: 15px;
        padding: 10px 28px;
    }
}

/* /Pages/EditPortfolioAdmin.razor.rz.scp.css */
/* Portfolio Container */
.portfolio-container[b-2s0qnitpdz] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}

/* On screens smaller than 402px, ensure container fills full width */
@media (max-width: 401px) {
    .portfolio-container[b-2s0qnitpdz] {
        max-width: 100%;
    }
}

/* Loading and Error States */
.loading-container[b-2s0qnitpdz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-2s0qnitpdz] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-2s0qnitpdz 1s linear infinite;
}

.loading-container p[b-2s0qnitpdz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

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

/* Header */
.portfolio-header[b-2s0qnitpdz] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

/* On screens smaller than 402px, ensure header fills full width */
@media (max-width: 401px) {
    .portfolio-header[b-2s0qnitpdz] {
        max-width: 100%;
    }
}

.header-back[b-2s0qnitpdz] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-2s0qnitpdz] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-2s0qnitpdz] {
    opacity: 0.7;
}

.back-button img[b-2s0qnitpdz] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-folder-info[b-2s0qnitpdz] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.folder-title[b-2s0qnitpdz] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-transform: capitalize;
}

/* Portfolio Content */
.portfolio-content[b-2s0qnitpdz] {
    flex: 1;
    padding: 150px 25px 120px 25px; /* Top padding for fixed header, bottom padding for navigation bar and Safari URL bar */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
}

.portfolio-content[b-2s0qnitpdz]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Create Album Container - Full Width */
.create-album-container[b-2s0qnitpdz] {
    position: relative;
    width: 100%;
    max-width: 352px;
    margin: 0 auto 20px auto;
    height: auto;
}

/* Create Album Panel */
.create-album-panel[b-2s0qnitpdz] {
    width: 100%;
    height: 151px;
    border: 1px solid rgba(232, 229, 224, 0.5);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    position: relative;
    background-color: #FFFFFF;
    transition: all 0.2s ease;
    padding: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.create-album-panel:hover[b-2s0qnitpdz] {
    background-color: #f8f8f8;
    transform: scale(1.02);
    border-color: #CEB185;
}

.create-album-panel:active[b-2s0qnitpdz] {
    transform: scale(0.98);
}

.album-icon[b-2s0qnitpdz] {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
}

.album-icon img[b-2s0qnitpdz] {
    width: 100%;
    height: 100%;
}

.album-plus[b-2s0qnitpdz] {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 48px;
    left: calc(50% + 22px);
    transform: translateX(-50%);
    z-index: 2;
}

.album-plus img[b-2s0qnitpdz] {
    width: 100%;
    height: 100%;
}

.album-title[b-2s0qnitpdz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 80px);
    z-index: 1;
}

/* Portfolio Grid - For Folder Thumbnails */
.portfolio-grid[b-2s0qnitpdz] {
    display: grid;
    grid-template-columns: 171px 171px;
    gap: 10px 10px;
    row-gap: 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

/* Folder Container */
.folder-container[b-2s0qnitpdz] {
    position: relative;
    width: 171px;
    height: 171px;
    margin-bottom: 0;
}

/* Folder Thumbnail */
.folder-thumbnail[b-2s0qnitpdz] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: #949494;
}

.folder-thumbnail:hover[b-2s0qnitpdz] {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.folder-thumbnail:active[b-2s0qnitpdz] {
    transform: scale(0.98);
}

.folder-thumbnail img[b-2s0qnitpdz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.folder-placeholder[b-2s0qnitpdz] {
    width: 100%;
    height: 100%;
    background-color: #949494;
    border-radius: 2px;
}

/* Folder Icon */
.folder-icon[b-2s0qnitpdz] {
    position: absolute;
    top: 0;
    right: 0;
    width: 31px;
    height: 31px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.folder-icon img[b-2s0qnitpdz] {
    width: 31px;
    height: 31px;
    object-fit: contain;
    display: block;
}

/* Desktop spacing - add more space between header and portfolio grid */
@media (min-width: 769px) {
    .portfolio-content[b-2s0qnitpdz] {
        padding-top: 150px; /* Increased from 100px for desktop */
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .loading-container[b-2s0qnitpdz] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }
    
    .loading-spinner[b-2s0qnitpdz] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }
    
    .loading-container p[b-2s0qnitpdz] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .portfolio-content[b-2s0qnitpdz] {
        padding: 80px 15px 100px 15px;
    }
    
    .create-album-container[b-2s0qnitpdz] {
        max-width: 100%;
        margin-bottom: 15px;
    }
    
    .portfolio-grid[b-2s0qnitpdz] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
        row-gap: 8px;
    }
    
    .folder-container[b-2s0qnitpdz] {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
    
    .folder-thumbnail[b-2s0qnitpdz] {
        width: 100%;
        height: 100%;
    }
    
    .create-album-panel[b-2s0qnitpdz] {
        height: 130px;
    }
    
    .album-title[b-2s0qnitpdz] {
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .portfolio-content[b-2s0qnitpdz] {
        padding: 150px 10px 100px 10px;
    }
    
    .portfolio-grid[b-2s0qnitpdz] {
        gap: 6px 6px;
        row-gap: 6px;
    }
    
    .album-icon[b-2s0qnitpdz] {
        width: 32px;
        height: 32px;
    }
    
    .album-plus[b-2s0qnitpdz] {
        width: 28px;
        height: 28px;
    }
    
    .album-title[b-2s0qnitpdz] {
        font-size: 14px;
    }
}

/* iPhone 14 Pro Max and larger screens - adjust plus icon positioning */
@media (min-width: 430px) and (min-height: 932px) {
    .album-plus[b-2s0qnitpdz] {
        right: 20px;
    }
}

/* Upload Modal Styles */
.upload-modal-overlay[b-2s0qnitpdz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-modal[b-2s0qnitpdz] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 300px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.upload-content[b-2s0qnitpdz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.upload-spinner[b-2s0qnitpdz] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-2s0qnitpdz 1s linear infinite;
}

.upload-message[b-2s0qnitpdz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
}

.upload-progress-bar-container[b-2s0qnitpdz] {
    width: 100%;
    height: 8px;
    background-color: #E8E5E0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.upload-progress-bar[b-2s0qnitpdz] {
    height: 100%;
    background-color: #CEB185;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Message Modal Styles */
.message-modal-overlay[b-2s0qnitpdz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.message-modal[b-2s0qnitpdz] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.message-content[b-2s0qnitpdz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.message-icon[b-2s0qnitpdz] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

.message-icon.success[b-2s0qnitpdz] {
    background-color: #4CAF50;
}

.message-icon.error[b-2s0qnitpdz] {
    background-color: #F44336;
}

.message-text[b-2s0qnitpdz] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
    line-height: 1.4;
}

.message-button[b-2s0qnitpdz] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.message-button:hover[b-2s0qnitpdz] {
    background-color: #2a2825;
    transform: translateY(-1px);
}

.message-button:active[b-2s0qnitpdz] {
    transform: translateY(0);
    background-color: #1a1917;
}

/* Responsive adjustments for modals */
@media (max-width: 480px) {
    .upload-modal[b-2s0qnitpdz],
    .message-modal[b-2s0qnitpdz] {
        padding: 20px;
        max-width: 280px;
    }
    
    .upload-message[b-2s0qnitpdz],
    .message-text[b-2s0qnitpdz] {
        font-size: 14px;
    }
    
    .message-icon[b-2s0qnitpdz] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Add Introduction Video Button */
.intro-video-button-container[b-2s0qnitpdz] {
    position: fixed;
    bottom: 110px; /* Increased margin above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 25px;
    z-index: 5;
}

.intro-video-button[b-2s0qnitpdz] {
    width: 100%;
    height: 44px;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-video-button:hover[b-2s0qnitpdz] {
    background-color: #2a2825;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(32, 31, 29, 0.3);
}

.intro-video-button:active[b-2s0qnitpdz] {
    transform: translateY(0);
    background-color: #1a1917;
}

/* Responsive adjustments for the button */
@media (max-width: 480px) {
    .intro-video-button-container[b-2s0qnitpdz] {
        padding: 0 15px;
        bottom: 110px; /* Increased margin for mobile */
    }
    
    .intro-video-button[b-2s0qnitpdz] {
        font-size: 14px;
        height: 40px;
    }
}

@media (max-width: 360px) {
    .intro-video-button-container[b-2s0qnitpdz] {
        padding: 0 10px;
        bottom: 85px; /* Increased margin for small screens */
    }
    
    .intro-video-button[b-2s0qnitpdz] {
        font-size: 13px;
        height: 38px;
    }
}

/* /Pages/EditPortfolioFolderAdmin.razor.rz.scp.css */
/* Portfolio Container */
.portfolio-container[b-b0kq6a5ilj] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}

/* On screens smaller than 402px, ensure container fills full width */
@media (max-width: 401px) {
    .portfolio-container[b-b0kq6a5ilj] {
        max-width: 100%;
    }
}

/* Loading and Error States */
.loading-container[b-b0kq6a5ilj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-b0kq6a5ilj] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-b0kq6a5ilj 1s linear infinite;
}

.loading-container p[b-b0kq6a5ilj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

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

/* Header */
.portfolio-header[b-b0kq6a5ilj] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

/* On screens smaller than 402px, ensure header fills full width */
@media (max-width: 401px) {
    .portfolio-header[b-b0kq6a5ilj] {
        max-width: 100%;
    }
}

.header-actions[b-b0kq6a5ilj] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}

.add-media-button[b-b0kq6a5ilj] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.add-media-button:hover[b-b0kq6a5ilj] {
    opacity: 0.7;
}

.add-media-button img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-back[b-b0kq6a5ilj] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-b0kq6a5ilj] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-b0kq6a5ilj] {
    opacity: 0.7;
}

.back-button img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-logo[b-b0kq6a5ilj] {
    position: absolute;
    left: 50%;
    top: calc(58px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%);
    height: 29px;
    width: 175px;
}

.header-logo img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-b0kq6a5ilj] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.header-notifications img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-folder-info[b-b0kq6a5ilj] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.folder-title[b-b0kq6a5ilj] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    text-transform: capitalize;
}

/* Selection Mode Buttons - removed old header button styles */

/* Selection Button Container - matches JobApplied button styling */
.selection-button-container[b-b0kq6a5ilj] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 999; /* Behind portfolio overlay but above regular content */
}

.selection-action-button[b-b0kq6a5ilj] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.selection-action-button:hover[b-b0kq6a5ilj] {
    background-color: #3A3937;
}

.selection-action-button:active[b-b0kq6a5ilj] {
    background-color: #1A1917;
}

.delete-folder-button[b-b0kq6a5ilj] {
    background-color: #DC3545;
}

.delete-folder-button:hover[b-b0kq6a5ilj] {
    background-color: #C82333;
}

.delete-folder-button:active[b-b0kq6a5ilj] {
    background-color: #BD2130;
}

/* Selection buttons group - for when multiple buttons are shown */
.selection-buttons-group[b-b0kq6a5ilj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.selection-buttons-group .selection-action-button[b-b0kq6a5ilj] {
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
}

.set-thumbnail-button[b-b0kq6a5ilj] {
    background-color: #A6895A;
}

.set-thumbnail-button:hover[b-b0kq6a5ilj] {
    background-color: #CEB185;
}

.set-thumbnail-button:active[b-b0kq6a5ilj] {
    background-color: #B89A6F;
}

.cancel-button[b-b0kq6a5ilj] {
    background-color: #484F54;
}

.cancel-button:hover[b-b0kq6a5ilj] {
    background-color: #6C757D;
}

.cancel-button:active[b-b0kq6a5ilj] {
    background-color: #5A6268;
}

/* Note: Delete folder button is conditionally hidden for protected folders 
   ('Portfolio' and 'Profile') via Razor logic in the component */

/* Portfolio Content */
.portfolio-content[b-b0kq6a5ilj] {
    flex: 1;
    padding: 27px 25px 180px 25px; /* Increased bottom padding to prevent button overlap */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
}

/* Extra padding when selection buttons are visible */
.portfolio-content.has-selection-buttons[b-b0kq6a5ilj] {
    padding-bottom: 240px; /* Extra padding for button group (2 buttons + gap) */
}

.portfolio-content[b-b0kq6a5ilj]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Portfolio Grid */
.portfolio-grid[b-b0kq6a5ilj] {
    display: grid;
    grid-template-columns: 196px 196px;
    gap: 10px 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

/* Add Image Container */
.add-image-container[b-b0kq6a5ilj] {
    position: relative;
    width: 196px;
    height: auto;
    margin-bottom: 0;
}

/* Add Image Panel */
.add-image-panel[b-b0kq6a5ilj] {
    width: 196px;
    height: 196px;
    border: 1px solid rgba(232, 229, 224, 0.5);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    background-color: #FFFFFF;
    transition: all 0.2s ease;
    padding: 0;
}

.add-image-panel:hover[b-b0kq6a5ilj] {
    background-color: #f8f8f8;
    transform: scale(1.02);
    border-color: #CEB185;
}

.add-image-panel:active[b-b0kq6a5ilj] {
    transform: scale(0.98);
}

.add-image-icon[b-b0kq6a5ilj] {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.add-image-icon img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
}

.add-image-plus[b-b0kq6a5ilj] {
    width: 36px;
    height: 36px;
    position: absolute;
    bottom: 50px;
    right: 50px;
}

.add-image-plus img[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
}

.add-image-title[b-b0kq6a5ilj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #201F1D;
    text-align: left;
    line-height: 1.5;
    margin: 0;
    width: 163px;
    position: absolute;
    bottom: -35px;
    left: 0;
    padding-top: 10px;
    z-index: 1;
}

/* Portfolio Image Container */
.portfolio-image-container[b-b0kq6a5ilj] {
    width: 196px;
    height: 196px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f0f0f0; /* Light background to see the container */
}

.portfolio-image-container.selected[b-b0kq6a5ilj] {
    border: 3px solid #CEB185;
    transform: scale(0.98);
}

.portfolio-image-container:hover[b-b0kq6a5ilj] {
    transform: scale(1.02);
}

.portfolio-image-container.selected:hover[b-b0kq6a5ilj] {
    transform: scale(1.0);
}

/* Portfolio Images */
.portfolio-image[b-b0kq6a5ilj] {
    width: 196px;
    height: 196px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    display: block;
    z-index: 1;
    position: relative;
    background-color: #e0e0e0; /* Light background to see the image area */
}

/* When image is loaded, remove background */
.portfolio-image-container:has(.portfolio-image)[b-b0kq6a5ilj] {
    background-color: transparent;
}

/* Image Placeholder */
.image-placeholder[b-b0kq6a5ilj] {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.image-loading[b-b0kq6a5ilj] {
    font-size: 13px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Image Overlay */
.image-overlay[b-b0kq6a5ilj] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: auto;
    height: auto;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    opacity: 1;
    transition: opacity 0.2s ease;
    border-radius: 8px;
    pointer-events: auto;
    z-index: 10;
}

.delete-image-btn[b-b0kq6a5ilj] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    z-index: 20;
    position: relative;
}

.delete-image-btn:hover[b-b0kq6a5ilj] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-image-btn:active[b-b0kq6a5ilj] {
    transform: scale(0.95);
}

.delete-image-btn svg[b-b0kq6a5ilj] {
    width: 14px;
    height: 14px;
}

/* Selection Indicators */
.selection-indicator[b-b0kq6a5ilj] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 15;
}

.selection-circle[b-b0kq6a5ilj] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.selection-check[b-b0kq6a5ilj] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #CEB185;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Upload Overlay */
.upload-overlay[b-b0kq6a5ilj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Delete Confirmation Modal */
.modal-overlay[b-b0kq6a5ilj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 20px;
}

.modal-container[b-b0kq6a5ilj] {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-b0kq6a5ilj 0.3s ease-out;
}

@keyframes modalSlideIn-b-b0kq6a5ilj {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header[b-b0kq6a5ilj] {
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #E8E5E0;
}

.modal-title[b-b0kq6a5ilj] {
    margin: 0 0 16px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

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

.modal-message[b-b0kq6a5ilj] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: center;
}

.modal-footer[b-b0kq6a5ilj] {
    padding: 0 24px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn[b-b0kq6a5ilj] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.modal-btn-cancel[b-b0kq6a5ilj] {
    background: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.modal-btn-cancel:hover[b-b0kq6a5ilj] {
    background: #E8E5E0;
    transform: translateY(-1px);
}

.modal-btn-cancel:active[b-b0kq6a5ilj] {
    transform: translateY(0);
}

.modal-btn-delete[b-b0kq6a5ilj] {
    background: #DC3545;
    color: #FFFFFF;
}

.modal-btn-delete:hover[b-b0kq6a5ilj] {
    background: #C82333;
    transform: translateY(-1px);
}

.modal-btn-delete:active[b-b0kq6a5ilj] {
    transform: translateY(0);
}

.upload-progress[b-b0kq6a5ilj] {
    background: #FFFFFF;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.upload-spinner[b-b0kq6a5ilj] {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-b0kq6a5ilj 1s linear infinite;
    margin-bottom: 15px;
}

.upload-progress p[b-b0kq6a5ilj] {
    margin: 0;
    font-size: 16px;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Responsive Design */
@media (max-width: 480px) {
    .portfolio-content[b-b0kq6a5ilj] {
        padding: 20px 15px 160px 15px; /* Increased bottom padding for mobile */
    }
    
    .portfolio-content.has-selection-buttons[b-b0kq6a5ilj] {
        padding-bottom: 220px; /* Extra padding for button group on mobile */
    }
    
    .portfolio-grid[b-b0kq6a5ilj] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
    }
    
    .add-image-container[b-b0kq6a5ilj],
    .portfolio-image-container[b-b0kq6a5ilj] {
        width: 100%;
    }
    
    .add-image-panel[b-b0kq6a5ilj] {
        width: 100%;
        height: 181px;
    }
    
    .portfolio-image-container[b-b0kq6a5ilj] {
        height: 181px;
    }
    
    .add-image-title[b-b0kq6a5ilj],
    .folder-title[b-b0kq6a5ilj] {
        font-size: 16px;
    }
    
    /* Make delete button more touch-friendly on mobile */
    .delete-image-btn[b-b0kq6a5ilj] {
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.7);
    }
    
    .delete-image-btn svg[b-b0kq6a5ilj] {
        width: 16px;
        height: 16px;
    }
    
    /* Modal responsive styles */
    .modal-container[b-b0kq6a5ilj] {
        max-width: 350px;
        margin: 0 10px;
    }
    
    .modal-header[b-b0kq6a5ilj] {
        padding: 20px 20px 0 20px;
    }
    
    .modal-title[b-b0kq6a5ilj] {
        font-size: 18px;
    }
    
    .modal-body[b-b0kq6a5ilj] {
        padding: 20px;
    }
    
    .modal-message[b-b0kq6a5ilj] {
        font-size: 15px;
    }
    
    .modal-footer[b-b0kq6a5ilj] {
        padding: 0 20px 20px 20px;
        flex-direction: column;
        gap: 8px;
    }
    
    .modal-btn[b-b0kq6a5ilj] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
    
    /* Selection mode mobile styles - header actions removed */
    
    .selection-circle[b-b0kq6a5ilj],
    .selection-check[b-b0kq6a5ilj] {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
    
    .selection-indicator[b-b0kq6a5ilj] {
        top: 6px;
        left: 6px;
    }
    
    /* Selection button container mobile styles */
    .selection-button-container[b-b0kq6a5ilj] {
        padding: 0 20px;
    }
    
    .selection-action-button[b-b0kq6a5ilj] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .portfolio-content[b-b0kq6a5ilj] {
        padding: 15px 10px 160px 10px; /* Increased bottom padding for small screens */
    }
    
    .portfolio-grid[b-b0kq6a5ilj] {
        gap: 6px 6px;
        row-gap: 50px;
    }
    
    .add-image-icon[b-b0kq6a5ilj] {
        width: 32px;
        height: 32px;
    }

    .add-image-plus[b-b0kq6a5ilj] {
        width: 28px;
        height: 28px;
    }

    .add-image-title[b-b0kq6a5ilj],
    .folder-title[b-b0kq6a5ilj] {
        font-size: 14px;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .portfolio-image[b-b0kq6a5ilj] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* iPhone 14 Pro Max and larger screens - adjust plus icon positioning */
@media (min-width: 430px) and (min-height: 932px) {
    .add-image-plus[b-b0kq6a5ilj] {
        right: 55px;
    }
}

/* Upload Modal Styles */
.upload-modal-overlay[b-b0kq6a5ilj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-modal[b-b0kq6a5ilj] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 300px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.upload-content[b-b0kq6a5ilj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.upload-progress-bar-container[b-b0kq6a5ilj] {
    width: 100%;
    height: 8px;
    background-color: #E8E5E0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.upload-progress-bar[b-b0kq6a5ilj] {
    height: 100%;
    background-color: #CEB185;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Message Modal Styles */
.message-modal-overlay[b-b0kq6a5ilj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.message-modal[b-b0kq6a5ilj] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.message-content[b-b0kq6a5ilj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.message-icon[b-b0kq6a5ilj] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

.message-icon.success[b-b0kq6a5ilj] {
    background-color: #4CAF50;
}

.message-icon.error[b-b0kq6a5ilj] {
    background-color: #F44336;
}

.message-text[b-b0kq6a5ilj] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
    line-height: 1.4;
}

.message-button[b-b0kq6a5ilj] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.message-button:hover[b-b0kq6a5ilj] {
    background-color: #2a2825;
    transform: translateY(-1px);
}

.message-button:active[b-b0kq6a5ilj] {
    transform: translateY(0);
    background-color: #1a1917;
}

/* Responsive adjustments for modals */
@media (max-width: 480px) {
    .upload-modal[b-b0kq6a5ilj],
    .message-modal[b-b0kq6a5ilj] {
        padding: 20px;
        max-width: 280px;
    }
    
    .upload-message[b-b0kq6a5ilj],
    .message-text[b-b0kq6a5ilj] {
        font-size: 14px;
    }
    
    .message-icon[b-b0kq6a5ilj] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-b0kq6a5ilj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-b0kq6a5ilj] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-b0kq6a5ilj 0.3s ease-out;
}

@keyframes modalSlideIn-b-b0kq6a5ilj {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-b0kq6a5ilj] {
        padding: 10px;
    }
    
    .cropper-modal-container[b-b0kq6a5ilj] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-b0kq6a5ilj] {
        padding: 5px;
    }
    
    .cropper-modal-container[b-b0kq6a5ilj] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}

/* /Pages/EditProfile.razor.rz.scp.css */
/* EditProfile Component Styles */

/* Reset and base styles for this component */
.edit-profile-container[b-59l8m0yvqv] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.edit-profile-container[b-59l8m0yvqv]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

.edit-profile-header[b-59l8m0yvqv] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.back-button[b-59l8m0yvqv] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.back-button img[b-59l8m0yvqv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
}

.profile-image-edit-section[b-59l8m0yvqv] {
    position: relative;
    padding: 20px 0;
    text-align: center;
}

.profile-image-edit-container[b-59l8m0yvqv] {
    position: relative;
    width: 164px;
    height: 164px;
    margin: 0 auto;
}

.profile-image-edit-mask[b-59l8m0yvqv] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%; /* Make the container circular */
}

.profile-image-edit[b-59l8m0yvqv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%; /* Make the image circular */
}

.edit-photo-text[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    margin-top: 10px;
    padding-left: 20px;
}

.edit-form[b-59l8m0yvqv] {
    padding: 0 26px;
    padding-bottom: 156px;
}

.form-field[b-59l8m0yvqv] {
    margin-bottom: 14px;
}

.field-label[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-59l8m0yvqv] {
    color: #CEB185;
}

.input-container[b-59l8m0yvqv] {
    position: relative;
    width: 350px;
    height: 44px;
}

.form-input[b-59l8m0yvqv] {
    width: 100%;
    height: 100%;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    outline: none;
    /* Hide the native dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-input:focus[b-59l8m0yvqv] {
    border-color: #CEB185;
}

.dropdown-arrow[b-59l8m0yvqv] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    pointer-events: none;
}

.dropdown-arrow img[b-59l8m0yvqv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.textarea-container[b-59l8m0yvqv] {
    width: 350px;
    height: 206px;
}

.form-textarea[b-59l8m0yvqv] {
    width: 100%;
    height: 100%;
    padding: 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    outline: none;
    resize: none;
}

.form-textarea:focus[b-59l8m0yvqv] {
    border-color: #CEB185;
}

.add-language-link[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    margin-bottom: 32px;
    cursor: pointer;
}

.edit-profile-word-limit[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    margin-top: 8px;
    margin-bottom: 20px;
}

.edit-profile-save-button-container[b-59l8m0yvqv] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    padding: 20px;
    z-index: 20;
    border: none;
    border-top: none;
}

.edit-profile-save-button[b-59l8m0yvqv] {
    width: 290px;
    height: 44px;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    cursor: pointer;
    margin: 0 auto;
    display: block;
}

.edit-profile-save-button:hover:not(:disabled)[b-59l8m0yvqv] {
    background-color: #333;
}

.edit-profile-save-button:disabled[b-59l8m0yvqv] {
    background-color: #CCCCCC;
    color: #666666;
    cursor: not-allowed;
}

/* Loading and Error States */
.loading-container[b-59l8m0yvqv] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #FFFFFF;
}

.loading-spinner[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    color: #201F1D;
    text-align: center;
}

.error-container[b-59l8m0yvqv] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #FFFFFF;
    padding: 20px;
}

.error-message[b-59l8m0yvqv] {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    color: #201F1D;
    text-align: center;
    margin-bottom: 20px;
}

.retry-button[b-59l8m0yvqv] {
    width: 120px;
    height: 44px;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
}

.retry-button:hover[b-59l8m0yvqv] {
    background-color: #333;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .edit-profile-container[b-59l8m0yvqv] {
        max-width: 100%;
    }

    .input-container[b-59l8m0yvqv] {
        width: 100%;
        max-width: 350px;
    }

    .textarea-container[b-59l8m0yvqv] {
        width: 100%;
        max-width: 350px;
    }

    .edit-profile-save-button[b-59l8m0yvqv] {
        width: 100%;
        max-width: 290px;
    }
}

@media (max-width: 480px) {
    .edit-form[b-59l8m0yvqv] {
        padding: 0 20px;
        padding-bottom: 80px;
    }

    .input-container[b-59l8m0yvqv] {
        width: 100%;
    }

    .textarea-container[b-59l8m0yvqv] {
        width: 100%;
    }

    .edit-profile-word-limit[b-59l8m0yvqv] {
        margin-bottom: 30px;
    }

    .edit-profile-save-button-container[b-59l8m0yvqv] {
        padding: 16px;
    }

    .edit-profile-save-button[b-59l8m0yvqv] {
        width: 100%;
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-59l8m0yvqv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-59l8m0yvqv] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-59l8m0yvqv 0.3s ease-out;
}

@keyframes modalSlideIn-b-59l8m0yvqv {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-59l8m0yvqv] {
        padding: 10px;
    }

    .cropper-modal-container[b-59l8m0yvqv] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-59l8m0yvqv] {
        padding: 5px;
    }

    .cropper-modal-container[b-59l8m0yvqv] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/EditUserDetails.razor.rz.scp.css */
.edit-user-details-screen[b-d1gnxbx4x5] {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

/* Header Styles */
.header-container[b-d1gnxbx4x5] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.header-content[b-d1gnxbx4x5] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button[b-d1gnxbx4x5] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button img[b-d1gnxbx4x5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-title[b-d1gnxbx4x5] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    margin: 0;
}

/* Loading Styles */
.loading-container[b-d1gnxbx4x5] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.loading-spinner[b-d1gnxbx4x5] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #201f1d;
    border-radius: 50%;
    animation: spin-b-d1gnxbx4x5 1s linear infinite;
    margin: 0 auto 16px auto;
}

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

/* Form Styles */
.form-container[b-d1gnxbx4x5] {
    position: absolute;
    top: 106px;
    left: 0;
    right: 0;
    padding: 21px 26px 0 26px;
}

.form-group[b-d1gnxbx4x5] {
    margin-bottom: 32px;
}

.form-label[b-d1gnxbx4x5] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
    margin-bottom: 12px;
}

.form-input[b-d1gnxbx4x5] {
    width: 100%;
    height: 44px;
    background-color: #ffffff;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    padding: 0 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-d1gnxbx4x5] {
    border-color: #201f1d;
}

.form-input.error[b-d1gnxbx4x5] {
    border-color: #dc3545;
}

.form-input[b-d1gnxbx4x5]::placeholder {
    color: #999999;
}

/* Error and Success Messages */
.error-message[b-d1gnxbx4x5],
.success-message[b-d1gnxbx4x5] {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

.error-message[b-d1gnxbx4x5] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.success-message[b-d1gnxbx4x5] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error-text[b-d1gnxbx4x5] {
    display: block;
    margin-top: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #dc3545;
}

/* Save Button Styles */
.save-button-container[b-d1gnxbx4x5] {
    position: absolute;
    bottom: 56px;
    left: 56px;
    right: 56px;
}

.save-button[b-d1gnxbx4x5] {
    width: 100%;
    height: 44px;
    background-color: #201f1d;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.save-button.disabled[b-d1gnxbx4x5] {
    cursor: not-allowed;
    opacity: 0.7;
}

.button-text[b-d1gnxbx4x5] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .form-container[b-d1gnxbx4x5] {
        padding: 21px 16px 0 16px;
    }

    .save-button-container[b-d1gnxbx4x5] {
        left: 16px;
        right: 16px;
        bottom: 32px;
    }

    .page-title[b-d1gnxbx4x5] {
        font-size: 20px;
    }
}

/* Focus and Hover States */
.save-button:hover:not(.disabled)[b-d1gnxbx4x5] {
    background-color: #2d2b29;
}

.back-button:hover[b-d1gnxbx4x5] {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

.back-button:active[b-d1gnxbx4x5] {
    background-color: rgba(0, 0, 0, 0.1);
}
/* /Pages/Events.razor.rz.scp.css */
/* Coming Soon Container */
.coming-soon-container[b-im1a28pww5] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.coming-soon-header[b-im1a28pww5] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-logo[b-im1a28pww5] {
    position: absolute;
    left: 20px;
    top: 58px;
    height: 29px;
    width: 175px;
}

.header-logo img[b-im1a28pww5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-im1a28pww5] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.header-notifications img[b-im1a28pww5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content */
.coming-soon-content[b-im1a28pww5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 120px 20px; /* Bottom padding for navigation bar and Safari URL bar */
    text-align: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.coming-soon-icon[b-im1a28pww5] {
    width: 80px;
    height: 80px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    border-radius: 50%;
    padding: 20px;
}

.coming-soon-icon img[b-im1a28pww5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.coming-soon-title[b-im1a28pww5] {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.coming-soon-description[b-im1a28pww5] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0 0 40px 0;
    line-height: 1.5;
    max-width: 300px;
}

.coming-soon-features[b-im1a28pww5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
    max-width: 320px;
    width: 100%;
}

.feature-item[b-im1a28pww5] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 12px;
    text-align: left;
}

.feature-icon[b-im1a28pww5] {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border-radius: 8px;
    flex-shrink: 0;
}

.feature-text[b-im1a28pww5] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #201F1D;
    line-height: 1.4;
}

.coming-soon-cta[b-im1a28pww5] {
    background-color: #CEB185;
    padding: 20px;
    border-radius: 12px;
    max-width: 320px;
    width: 100%;
}

.coming-soon-cta p[b-im1a28pww5] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
    line-height: 1.4;
}


/* Responsive Design */
@media (max-width: 480px) {
    .coming-soon-content[b-im1a28pww5] {
        padding: 30px 15px 120px 15px;
    }

    .coming-soon-title[b-im1a28pww5] {
        font-size: 24px;
    }

    .coming-soon-description[b-im1a28pww5] {
        font-size: 14px;
        max-width: 280px;
    }

    .coming-soon-features[b-im1a28pww5] {
        max-width: 280px;
        gap: 15px;
    }

    .feature-item[b-im1a28pww5] {
        padding: 12px;
    }

    .feature-icon[b-im1a28pww5] {
        font-size: 20px;
        width: 36px;
        height: 36px;
    }

    .feature-text[b-im1a28pww5] {
        font-size: 13px;
    }

    .coming-soon-cta[b-im1a28pww5] {
        max-width: 280px;
        padding: 16px;
    }

    .coming-soon-cta p[b-im1a28pww5] {
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .coming-soon-content[b-im1a28pww5] {
        padding: 25px 10px 120px 10px;
    }

    .coming-soon-icon[b-im1a28pww5] {
        width: 70px;
        height: 70px;
        margin-bottom: 25px;
        padding: 15px;
    }

    .coming-soon-title[b-im1a28pww5] {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .coming-soon-description[b-im1a28pww5] {
        font-size: 13px;
        max-width: 260px;
        margin-bottom: 30px;
    }

    .coming-soon-features[b-im1a28pww5] {
        max-width: 260px;
        gap: 12px;
        margin-bottom: 30px;
    }

    .feature-item[b-im1a28pww5] {
        padding: 10px;
    }

    .feature-icon[b-im1a28pww5] {
        font-size: 18px;
        width: 32px;
        height: 32px;
    }

    .feature-text[b-im1a28pww5] {
        font-size: 12px;
    }

    .coming-soon-cta[b-im1a28pww5] {
        max-width: 260px;
        padding: 14px;
    }

    .coming-soon-cta p[b-im1a28pww5] {
        font-size: 12px;
    }
}
/* /Pages/EventsClientView.razor.rz.scp.css */
/* EventsClientView.razor.css */

.events-client-container[b-l2gsd9754y] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.search-header[b-l2gsd9754y] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-logo[b-l2gsd9754y] {
    position: absolute;
    left: 20px;
    top: 63px;
    height: 23px;
    width: 145px;
}

.header-logo img[b-l2gsd9754y] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-l2gsd9754y] {
    position: absolute;
    right: 20px;
    top: 56px;
    width: 40px;
    height: 40px;
}

.notification-icon[b-l2gsd9754y] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-l2gsd9754y] {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.notification-badge[b-l2gsd9754y] {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 20px;
    height: 20px;
    background-color: #CEB185;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-badge span[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1;
}

/* Search Bar Styles */
.search-bar-container[b-l2gsd9754y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    margin-top: calc(80px + env(safe-area-inset-top, 0px));
}

.search-input-container[b-l2gsd9754y] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 303px;
}

.search-icon[b-l2gsd9754y] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-l2gsd9754y] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.search-input[b-l2gsd9754y] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-l2gsd9754y]::placeholder {
    color: #E8E5E0;
}

.filter-button[b-l2gsd9754y] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.filter-button-circle[b-l2gsd9754y] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #E8E5E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-button:hover .filter-button-circle[b-l2gsd9754y] {
    background-color: #E0D2B8;
}

.filter-button-circle img[b-l2gsd9754y] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Navigation Tabs */
.nav-tabs[b-l2gsd9754y] {
    display: flex;
    position: relative;
    margin: 20px 0 0 0;
    padding: 0 25px;
    justify-content: center;
}

.tab[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    padding: 0 20px;
    position: relative;
}

.explore-tab[b-l2gsd9754y] {
    color: #201F1D;
}

.explore-tab.active[b-l2gsd9754y] {
    color: #CEB185;
}

.my-events-tab[b-l2gsd9754y] {
    color: #201F1D;
    margin-left: 20px;
}

.my-events-tab.active[b-l2gsd9754y] {
    color: #CEB185;
}

.tab-indicator[b-l2gsd9754y] {
    position: absolute;
    bottom: -2px;
    width: 176px;
    height: 2px;
    background-color: #CEB185;
    transition: left 0.3s ease;
}

.tab-indicator.explore-active[b-l2gsd9754y] {
    left: 25px;
}

.tab-indicator.my-events-active[b-l2gsd9754y] {
    left: 201px;
}

/* Filter Buttons */
.filter-buttons[b-l2gsd9754y] {
    display: flex;
    gap: 7px;
    padding: 7px 25px 0 25px;
    margin-top: 7px;
    justify-content: center;
}

.filter-btn[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 6px 16px;
    border-radius: 44px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-btn.active[b-l2gsd9754y] {
    background-color: #201F1D;
    color: #FFFFFF;
    width: 100px;
}

.filter-btn:not(.active)[b-l2gsd9754y] {
    background-color: #FFFFFF;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.filter-btn:nth-child(2)[b-l2gsd9754y] {
    width: 96px;
}

.filter-btn:nth-child(3)[b-l2gsd9754y] {
    width: 142px;
}

/* Content Area */
.content-area[b-l2gsd9754y] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
}

/* Events List */
.events-list[b-l2gsd9754y] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Event Card */
.event-card[b-l2gsd9754y] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: stretch;
    min-height: 85px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
}

.event-card:hover[b-l2gsd9754y] {
    border-color: #CEB185;
    box-shadow: 0px 2px 8px rgba(206, 177, 133, 0.2);
}

.event-card.cancelled[b-l2gsd9754y] {
    opacity: 0.7;
    background-color: #FAF8F5;
}

.event-name-row[b-l2gsd9754y] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.event-status-pill[b-l2gsd9754y] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.event-status-pill.cancelled[b-l2gsd9754y] {
    background-color: #fdecea;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.event-image[b-l2gsd9754y] {
    width: 94px;
    height: 83px;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
}

.event-image img[b-l2gsd9754y] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
}

.event-details[b-l2gsd9754y] {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.event-name[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-location[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-date[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
}

/* Loading State */
.loading-state[b-l2gsd9754y] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.loading-state p[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.empty-state[b-l2gsd9754y] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.empty-message[b-l2gsd9754y] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

/* Create Event Button */
.create-event-section[b-l2gsd9754y] {
    padding: 0 56px 20px 56px;
    margin-bottom: 80px; /* Space for bottom navigation */
    display: flex;
    justify-content: center;
}

.create-event-btn[b-l2gsd9754y] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.create-event-btn:hover[b-l2gsd9754y] {
    background-color: #3a3a3a;
}

.create-event-btn:active[b-l2gsd9754y] {
    background-color: #1a1a1a;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .events-client-container[b-l2gsd9754y] {
        max-width: 100%;
    }

    .search-bar-container[b-l2gsd9754y] {
        padding: 10px 20px;
    }

    .filter-buttons[b-l2gsd9754y] {
        flex-wrap: wrap;
    }

    .create-event-section[b-l2gsd9754y] {
        padding: 0 20px 20px 20px;
    }

    .create-event-btn[b-l2gsd9754y] {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .search-header[b-l2gsd9754y] {
        padding: 0 15px;
    }

    .header-logo[b-l2gsd9754y] {
        left: 15px;
        width: 150px;
    }

    .header-notifications[b-l2gsd9754y] {
        right: 15px;
    }

    .search-bar-container[b-l2gsd9754y] {
        padding: 10px 15px;
    }
}

/* /Pages/EventsStaffView.razor.rz.scp.css */
/* EventsStaffView.razor.css */

.events-staff-container[b-hzpcuxogwc] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    padding-top: calc(60px + env(safe-area-inset-top, 0)); /* Space for fixed header (60px + safe area) */
}


/* Search Bar Styles */
.search-bar-container[b-hzpcuxogwc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    margin-top: 0;
}

.search-input-container[b-hzpcuxogwc] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 303px;
}

.search-icon[b-hzpcuxogwc] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-hzpcuxogwc] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.search-input[b-hzpcuxogwc] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-hzpcuxogwc]::placeholder {
    color: #E8E5E0;
}

.filter-button[b-hzpcuxogwc] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.filter-button-circle[b-hzpcuxogwc] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #E8E5E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-button:hover .filter-button-circle[b-hzpcuxogwc] {
    background-color: #E0D2B8;
}

.filter-button-circle img[b-hzpcuxogwc] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Content Area */
.content-area[b-hzpcuxogwc] {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
}

/* Events List */
.events-list[b-hzpcuxogwc] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Event Card */
.event-card[b-hzpcuxogwc] {
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: stretch;
    min-height: 85px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
}

.event-card:hover[b-hzpcuxogwc] {
    border-color: #CEB185;
    box-shadow: 0px 2px 8px rgba(206, 177, 133, 0.2);
}

.event-image[b-hzpcuxogwc] {
    width: 94px;
    height: 83px;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
}

.event-image img[b-hzpcuxogwc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
}

.event-details[b-hzpcuxogwc] {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.event-name[b-hzpcuxogwc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-location[b-hzpcuxogwc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-date[b-hzpcuxogwc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
}

/* Loading State */
.loading-container[b-hzpcuxogwc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-hzpcuxogwc] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-hzpcuxogwc 1s linear infinite;
}

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

.loading-container p[b-hzpcuxogwc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.empty-state[b-hzpcuxogwc] {
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.empty-message[b-hzpcuxogwc] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-container[b-hzpcuxogwc] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }

    .loading-spinner[b-hzpcuxogwc] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .loading-container p[b-hzpcuxogwc] {
        font-size: 14px;
    }
}

@media (max-width: 402px) {
    .events-staff-container[b-hzpcuxogwc] {
        max-width: 100%;
    }

    .search-bar-container[b-hzpcuxogwc] {
        padding: 10px 20px;
    }

    .content-area[b-hzpcuxogwc] {
        padding: 20px;
    }
}

@media (max-width: 360px) {
    .search-bar-container[b-hzpcuxogwc] {
        padding: 10px 15px;
    }
}

/* /Pages/Home.razor.rz.scp.css */
.welcome-screen[b-u960suc0wm] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/mgmt-management-image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.background-mask[b-u960suc0wm] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.background-image[b-u960suc0wm] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/background-image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(1px);
    opacity: 0.7;
}

.background-overlay[b-u960suc0wm] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.mgmt-management-image[b-u960suc0wm] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/mgmt-management-image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(1px);
    pointer-events: none;
    z-index: 3;
}

.logo-container[b-u960suc0wm] {
    position: absolute;
    left: 50%;
    top: 200px;
    transform: translateX(-50%);
    width: 220px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.logo-container img[b-u960suc0wm] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.buttons-container[b-u960suc0wm] {
    position: absolute;
    left: 50%;
    top: 650px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
}

.client-button[b-u960suc0wm] {
    width: 290px;
    height: 44px;
    background: #201f1d;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.client-button:hover[b-u960suc0wm] {
    background: #2a2825;
    transform: translateY(-1px);
}

.client-button-text[b-u960suc0wm] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: white;
    text-align: center;
}

.staff-button[b-u960suc0wm] {
    width: 290px;
    height: 44px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.staff-button:hover[b-u960suc0wm] {
    background: #f5f5f5;
    transform: translateY(-1px);
}

.staff-button-text[b-u960suc0wm] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .buttons-container[b-u960suc0wm] {
        left: 50%;
        top: 60%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 290px;
    }
    
    .client-button[b-u960suc0wm],
    .staff-button[b-u960suc0wm] {
        width: 100%;
    }
    
    .logo-container[b-u960suc0wm] {
        top: 200px;
        width: 180px;
        height: 170px;
    }
}

@media (max-width: 480px) {
    .logo-container[b-u960suc0wm] {
        width: 150px;
        height: 140px;
    }
    
    .buttons-container[b-u960suc0wm] {
        gap: 12px;
    }
    
    .client-button[b-u960suc0wm],
    .staff-button[b-u960suc0wm] {
        height: 40px;
    }
    
    .client-button-text[b-u960suc0wm],
    .staff-button-text[b-u960suc0wm] {
        font-size: 14px;
    }
}
/* /Pages/JobApplied.razor.rz.scp.css */
.job-applied-container[b-j1fm63rgbk] {
    background-color: #FFFFFF;
    min-height: 100%;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}


.job-applied-content[b-j1fm63rgbk] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 186px); /* Account for header and bottom nav */
    padding: 20px;
}

.message-container[b-j1fm63rgbk] {
    text-align: center;
    max-width: 272px;
}

.application-message[b-j1fm63rgbk] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

.done-button-container[b-j1fm63rgbk] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
}

.done-button[b-j1fm63rgbk] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: block;
    transition: background-color 0.2s ease;
}

.done-button:hover[b-j1fm63rgbk] {
    background-color: #3A3937;
}

.done-button:active[b-j1fm63rgbk] {
    background-color: #1A1917;
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .job-applied-container[b-j1fm63rgbk] {
        max-width: 100%;
    }

    .done-button-container[b-j1fm63rgbk] {
        padding: 0 20px;
    }

}

/* /Pages/JoinEvent.razor.rz.scp.css */
/* Join Event Container */
.join-event-container[b-xiypt1gxdp] {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.join-event-container[b-xiypt1gxdp]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header */
.join-event-header[b-xiypt1gxdp] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-content[b-xiypt1gxdp] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 18px;
    position: relative;
}

.header-back-button[b-xiypt1gxdp] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.header-back-button:hover[b-xiypt1gxdp] {
    background-color: rgba(0, 0, 0, 0.05);
}

.header-back-button img[b-xiypt1gxdp] {
    width: 24px;
    height: 24px;
}

.header-title[b-xiypt1gxdp] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 211px;
}

/* Content */
.join-event-content[b-xiypt1gxdp] {
    flex: 1;
    padding: 0 0 180px 0; /* Add bottom padding to prevent content from being hidden behind fixed button */
    position: relative;
}

/* Event Info Section */
.event-info-section[b-xiypt1gxdp] {
    background-color: #F8F9FA;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 25px 30px 25px;
    border: 1px solid #E9ECEF;
}

.event-name[b-xiypt1gxdp] {
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.event-venue[b-xiypt1gxdp] {
    font-size: 16px;
    color: #6C757D;
    margin: 0 0 4px 0;
}

.event-date[b-xiypt1gxdp] {
    font-size: 14px;
    color: #6C757D;
    margin: 0;
}

/* Job Accordion */
.job-accordion[b-xiypt1gxdp] {
    background-color: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E9ECEF;
    margin: 0 25px 24px 25px;
    overflow: hidden;
}

.accordion-header[b-xiypt1gxdp] {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F8F9FA;
    border-bottom: 1px solid #E9ECEF;
}

.header-text h3[b-xiypt1gxdp] {
    font-size: 18px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 4px 0;
}

.header-text p[b-xiypt1gxdp] {
    font-size: 14px;
    color: #6C757D;
    margin: 0;
}

.arrow[b-xiypt1gxdp] {
    transition: transform 0.3s ease;
}

.arrow.expanded[b-xiypt1gxdp] {
    transform: rotate(180deg);
}

.arrow img[b-xiypt1gxdp] {
    width: 24px;
    height: 24px;
}

.accordion-content[b-xiypt1gxdp] {
    padding: 20px;
}

/* Form Styles */
.form-group[b-xiypt1gxdp] {
    margin-bottom: 25px;
    display: block !important;
    visibility: visible !important;
}

.form-label[b-xiypt1gxdp] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.required[b-xiypt1gxdp] {
    color: #CEB185;
}

.form-input-container[b-xiypt1gxdp] {
    position: relative;
    width: 100%;
}

.form-input[b-xiypt1gxdp] {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
}

.form-input:focus[b-xiypt1gxdp] {
    outline: none;
    border-color: #CEB185;
}

.form-input[b-xiypt1gxdp]::placeholder {
    color: #E8E5E0;
}

select.form-input[b-xiypt1gxdp] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-input.readonly[b-xiypt1gxdp] {
    background-color: #F8F9FA;
    color: #6C757D;
    cursor: not-allowed;
}

.form-textarea[b-xiypt1gxdp] {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    resize: vertical;
    display: block !important;
    visibility: visible !important;
}

.form-textarea:focus[b-xiypt1gxdp] {
    outline: none;
    border-color: #CEB185;
}

.form-textarea[b-xiypt1gxdp]::placeholder {
    color: #E8E5E0;
}

.form-textarea.readonly[b-xiypt1gxdp] {
    background-color: #F8F9FA;
    color: #6C757D;
    cursor: not-allowed;
}

.dropdown-icon[b-xiypt1gxdp] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-icon img[b-xiypt1gxdp] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.word-limit[b-xiypt1gxdp] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #CEB185;
    margin-top: 8px;
}

/* Language Tags */
.selected-languages[b-xiypt1gxdp] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.language-tag[b-xiypt1gxdp] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
}

.language-tag.readonly[b-xiypt1gxdp] {
    background-color: #CEB185;
    color: #FFFFFF;
}

.language-tag-remove[b-xiypt1gxdp] {
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.language-tag-remove:hover[b-xiypt1gxdp] {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Add Job Section */
.add-job-section[b-xiypt1gxdp] {
    margin-top: 24px;
    text-align: center;
}

.add-job-button[b-xiypt1gxdp] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.add-job-button:hover:not(.disabled)[b-xiypt1gxdp] {
    background-color: #B8A06A;
}

.add-job-button.disabled[b-xiypt1gxdp] {
    background-color: #6C757D;
    cursor: not-allowed;
}

/* Added Jobs Section */
.added-jobs-section[b-xiypt1gxdp] {
    margin: 0 25px 24px 25px;
}

.jobs-section-title[b-xiypt1gxdp] {
    font-size: 18px;
    font-weight: 600;
    color: #201F1D;
    margin-bottom: 16px;
}

.job-accordion-item[b-xiypt1gxdp] {
    background-color: #FFFFFF;
    border: 1px solid #E9ECEF;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.job-accordion-header[b-xiypt1gxdp] {
    padding: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F8F9FA;
    border-bottom: 1px solid #E9ECEF;
}

.job-header-content[b-xiypt1gxdp] {
    flex: 1;
}

.job-title[b-xiypt1gxdp] {
    font-size: 16px;
    font-weight: 600;
    color: #201F1D;
    margin: 0 0 4px 0;
}

.job-subtitle[b-xiypt1gxdp] {
    font-size: 14px;
    color: #6C757D;
    margin: 0;
}

.job-accordion-actions[b-xiypt1gxdp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.remove-job-button[b-xiypt1gxdp] {
    background: none;
    border: none;
    color: #DC3545;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.remove-job-button:hover[b-xiypt1gxdp] {
    background-color: #F8D7DA;
}

.accordion-arrow[b-xiypt1gxdp] {
    transition: transform 0.3s ease;
}

.accordion-arrow.expanded[b-xiypt1gxdp] {
    transform: rotate(180deg);
}

.accordion-arrow img[b-xiypt1gxdp] {
    width: 20px;
    height: 20px;
}

.job-accordion-content[b-xiypt1gxdp] {
    padding: 16px;
}

/* Submit Section */
.submit-section[b-xiypt1gxdp] {
    margin: 0 25px 24px 25px;
    text-align: center;
}

.submit-button[b-xiypt1gxdp] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 290px;
    height: 44px;
    position: fixed;
    bottom: 120px; /* Position just above the bottom navigation bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.submit-button:hover:not(.disabled)[b-xiypt1gxdp] {
    background-color: #B8A06A;
}

.submit-button:active[b-xiypt1gxdp] {
    background-color: #A68B5B;
}

.submit-button.disabled[b-xiypt1gxdp] {
    background-color: #6C757D;
    cursor: not-allowed;
}

.button-text[b-xiypt1gxdp] {
    display: block;
}

/* Messages */
.error-message[b-xiypt1gxdp] {
    color: #DC3545;
    font-size: 14px;
    text-align: center;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 4px;
    max-width: 280px;
}

.success-message[b-xiypt1gxdp] {
    color: #28A745;
    font-size: 14px;
    text-align: center;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 4px;
    max-width: 280px;
}

/* Loading and Error States */
.loading-state[b-xiypt1gxdp] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-xiypt1gxdp] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.error-state[b-xiypt1gxdp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
}

.error-state p[b-xiypt1gxdp] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.back-to-events[b-xiypt1gxdp] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-xiypt1gxdp] {
    background-color: #B8A06A;
}

/* Responsive Design */
@media (max-width: 480px) {
    .join-event-content[b-xiypt1gxdp] {
        padding: 0 0 200px 0; /* Extra padding for small screens */
    }
}

/* Extra small screens - ensure button is never clipped */
@media (max-width: 360px) {
    .join-event-content[b-xiypt1gxdp] {
        padding: 0 0 220px 0; /* Even more padding for very small screens */
    }
}

/* Working hours start/end time inputs */
.working-hours-row[b-xiypt1gxdp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.working-hours-row .form-input-container[b-xiypt1gxdp] {
    flex: 1;
}

.working-hours-row input[type="time"][b-xiypt1gxdp] {
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 44px;
    padding: 0;
}

.working-hours-row input[type="time"][b-xiypt1gxdp]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.working-hours-row input[type="time"][b-xiypt1gxdp]::-webkit-datetime-edit {
    display: block;
    text-align: center;
    padding: 0;
}

.working-hours-row input[type="time"][b-xiypt1gxdp]::-webkit-datetime-edit-fields-wrapper {
    display: inline-block;
}

.working-hours-separator[b-xiypt1gxdp] {
    color: #6B6B6B;
    font-size: 14px;
}

/* /Pages/LoadingScreen.razor.rz.scp.css */
.loading-screen[b-zxkk1zzflq] {
    background-color: var(--color-white);
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-container[b-zxkk1zzflq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo[b-zxkk1zzflq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: none;
}
/* /Pages/Login.razor.rz.scp.css */
/* Login Page Styles - Matching Figma Design */

.login-screen[b-xzjqvs3b93] {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    font-family: 'Montserrat', sans-serif;
}

/* Header Section */
.header[b-xzjqvs3b93] {
    background-color: #FFFFFF;
    height: 70px;
    width: 100%;
    padding: 0 21px;
    position: relative;
    border-bottom: none !important;
    flex-shrink: 0;
}

.back-button[b-xzjqvs3b93] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
}

.back-button:hover[b-xzjqvs3b93] {
    opacity: 0.7;
}

.back-button img[b-xzjqvs3b93] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-title[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 163px;
}

/* Form Container */
.form-container[b-xzjqvs3b93] {
    flex: 1;
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 0px;
}

/* Form Groups */
.form-group[b-xzjqvs3b93] {
    margin-bottom: 24px;
}

.form-label[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    display: block;
    margin-bottom: 0px;
}

/* Form Inputs */
.form-input[b-xzjqvs3b93] {
    width: 100%;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    padding: 0 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #201F1D;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-xzjqvs3b93] {
    border-color: #CEB185;
}

.form-input[b-xzjqvs3b93]::placeholder {
    color: #999999;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

/* Password Input Container */
.password-input-container[b-xzjqvs3b93] {
    position: relative;
    width: 100%;
}

.visibility-toggle[b-xzjqvs3b93] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visibility-toggle img[b-xzjqvs3b93] {
    width: 20px;
    height: 15px;
    object-fit: contain;
}

/* Forgot Password Link */
.forgot-password-link[b-xzjqvs3b93] {
    margin-top: 4px;
    width: 100%;
    max-width: 290px;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
}

.forgot-password-link .link[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: #CEB185;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.forgot-password-link .link:hover[b-xzjqvs3b93] {
    text-decoration: underline;
}

/* Create Account Section */
.create-account-section[b-xzjqvs3b93] {
    margin-top: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.create-account-message[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: #201F1D;
}

.create-account-section .create-account-button[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #CEB185;
    cursor: pointer;
}

.create-account-section .create-account-button:hover[b-xzjqvs3b93] {
    text-decoration: underline;
}

/* Login Button */
.login-button[b-xzjqvs3b93] {
    background-color: #201F1D;
    border-radius: 8px;
    height: 44px;
    width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.login-button:hover[b-xzjqvs3b93] {
    opacity: 0.9;
}

.login-button:active[b-xzjqvs3b93] {
    opacity: 0.8;
}

.button-text[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    text-align: center;
}

/* Error Messages */
.error-message[b-xzjqvs3b93] {
    background-color: #FFEBEE;
    border: 1px solid #F44336;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #D32F2F;
    text-align: center;
}

.error-text[b-xzjqvs3b93] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #D32F2F;
    display: block;
    margin-top: 4px;
}

/* Loading State */
.login-button[style*="opacity: 0.7"][b-xzjqvs3b93] {
    opacity: 0.7 !important;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 480px) {
    .form-container[b-xzjqvs3b93] {
        padding: 0 20px;
    }

    .login-button[b-xzjqvs3b93] {
        width: 100%;
        max-width: 290px;
    }
}
/* /Pages/ModelAvailabilityClientView.razor.rz.scp.css */
/* Client Availability Container */
.client-availability-container[b-w0iiyz2zet] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.client-availability-header[b-w0iiyz2zet] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-w0iiyz2zet] {
    position: absolute;
    left: 18px;
    top: calc(53px + env(safe-area-inset-top, 0px));
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 11;
}

.header-back-button img[b-w0iiyz2zet] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.header-title[b-w0iiyz2zet] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    position: absolute;
    top: calc(57px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
}

/* Sticky Year Display */
.sticky-year[b-w0iiyz2zet] {
    position: sticky;
    top: 106px;
    left: 25px;
    z-index: 5;
    pointer-events: none;
    background-color: #FFFFFF;
    padding: 19px 0;
    height: auto;
    width: fit-content;
}

.sticky-year h1[b-w0iiyz2zet] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #CEB185;
    margin: 0;
    line-height: 1.5;
    pointer-events: auto;
}

/* Calendar Content */
.calendar-content[b-w0iiyz2zet] {
    flex: 1;
    overflow-y: auto;
    padding: 0 25px 100px 25px;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Global Day Headers */
.global-day-headers[b-w0iiyz2zet] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin: 20px 0 30px 0;
    position: sticky;
    top: 0;
    background-color: #FFFFFF;
    z-index: 4;
    padding: 8px 0;
}

.day-header[b-w0iiyz2zet] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Month Section */
.month-section[b-w0iiyz2zet] {
    position: relative;
    margin-bottom: 40px;
}

/* Month Names */
.month-name[b-w0iiyz2zet] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1.5;
    margin-bottom: 20px;
    position: sticky;
    top: 48px;
    background-color: #FFFFFF;
    z-index: 3;
    padding: 5px 0;
    display: inline-block;
}

.month-name.month-left[b-w0iiyz2zet] {
    text-align: left;
}

.month-name.month-right[b-w0iiyz2zet] {
    text-align: right;
}

.month-name[b-w0iiyz2zet]::after {
    content: '';
    display: block;
    height: 1px;
    background-color: #CEB185;
    margin-top: 5px;
    width: 100%;
}

/* Calendar Grid */
.calendar-grid[b-w0iiyz2zet] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    width: 100%;
}

.calendar-day[b-w0iiyz2zet] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    padding: 8px 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.calendar-day.empty[b-w0iiyz2zet] {
    cursor: default;
}

/* Available day styling */
.calendar-day.available[b-w0iiyz2zet] {
    background-color: #CEB185;
    color: #FFFFFF;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 480px) {
    .client-availability-header[b-w0iiyz2zet] {
        padding: 0 15px;
    }

    .header-back-button[b-w0iiyz2zet] {
        left: 15px;
    }

    .calendar-content[b-w0iiyz2zet] {
        padding: 0 15px 100px 15px;
    }

    .sticky-year[b-w0iiyz2zet] {
        left: 15px;
    }

    .calendar-day[b-w0iiyz2zet] {
        font-size: 20px;
        padding: 8px 0;
        min-height: 36px;
    }

    .day-header[b-w0iiyz2zet] {
        font-size: 16px;
    }

    .month-name[b-w0iiyz2zet] {
        font-size: 20px;
    }

    .sticky-year h1[b-w0iiyz2zet] {
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    .client-availability-header[b-w0iiyz2zet] {
        padding: 0 10px;
    }

    .header-back-button[b-w0iiyz2zet] {
        left: 10px;
    }

    .calendar-content[b-w0iiyz2zet] {
        padding: 0 10px 100px 10px;
    }

    .sticky-year[b-w0iiyz2zet] {
        left: 10px;
    }

    .calendar-day[b-w0iiyz2zet] {
        font-size: 18px;
        padding: 6px 0;
        min-height: 32px;
    }

    .day-header[b-w0iiyz2zet] {
        font-size: 14px;
    }

    .month-name[b-w0iiyz2zet] {
        font-size: 18px;
    }

    .sticky-year h1[b-w0iiyz2zet] {
        font-size: 18px;
    }
}


/* Loading Overlay */
.loading-overlay[b-w0iiyz2zet] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner[b-w0iiyz2zet] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.loading-spinner span[b-w0iiyz2zet] {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* Error Message */
.error-message[b-w0iiyz2zet] {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    background-color: #ffebee;
    border: 1px solid #f44336;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
}

.error-message span[b-w0iiyz2zet] {
    color: #d32f2f;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.error-close[b-w0iiyz2zet] {
    background: none;
    border: none;
    color: #d32f2f;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.error-close:hover[b-w0iiyz2zet] {
    background-color: rgba(211, 47, 47, 0.1);
}
/* /Pages/ModelFolderAdminView.razor.rz.scp.css */
/* Folder Admin Container */
.folder-admin-container[b-1s4vqf16ul] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-1s4vqf16ul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-1s4vqf16ul] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-1s4vqf16ul 1s linear infinite;
}

.loading-container p[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

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

.error-container[b-1s4vqf16ul] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-1s4vqf16ul] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-1s4vqf16ul] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-1s4vqf16ul] {
    background-color: #2980b9;
}

.retry-button:active[b-1s4vqf16ul] {
    transform: translateY(1px);
}

/* Header */
.folder-admin-header[b-1s4vqf16ul] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-1s4vqf16ul] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-1s4vqf16ul] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-1s4vqf16ul] {
    width: 100%;
    height: 100%;
}

.header-title[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Portfolio Content */
.folder-admin-content[b-1s4vqf16ul] {
    flex: 1;
    padding: 0 0 180px 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.folder-admin-content[b-1s4vqf16ul]::-webkit-scrollbar {
    display: none;
}

/* Folder Row */
.folder-row[b-1s4vqf16ul] {
    width: 100%;
    margin-bottom: 30px;
    overflow: visible;
}

/* Horizontal Scroll Container */
.horizontal-scroll-container[b-1s4vqf16ul] {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.horizontal-scroll-container[b-1s4vqf16ul]::-webkit-scrollbar {
    display: none;
}

/* Horizontal Media Item */
.horizontal-media-item[b-1s4vqf16ul] {
    flex-shrink: 0;
    width: 100vw;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    background-color: #FFFFFF;
}

.media-display[b-1s4vqf16ul] {
    width: 100%;
    position: relative;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-image[b-1s4vqf16ul] {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    min-height: 400px;
    display: block;
    object-fit: contain;
    object-position: center;
}

/* Video Thumbnail Container */
.video-thumbnail-container[b-1s4vqf16ul] {
    width: 100%;
    position: relative;
    aspect-ratio: 402 / 508;
    overflow: hidden;
}

.video-thumbnail-container .media-image[b-1s4vqf16ul] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: unset;
    max-height: unset;
}

.video-play-overlay[b-1s4vqf16ul] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease;
    z-index: 2;
}

.media-display:hover .video-play-overlay[b-1s4vqf16ul] {
    background-color: rgba(0, 0, 0, 0.5);
}

.play-icon[b-1s4vqf16ul] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #201F1D;
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.media-display:hover .play-icon[b-1s4vqf16ul] {
    transform: scale(1.1);
}

.video-duration-overlay[b-1s4vqf16ul] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    z-index: 3;
}

/* Pagination Indicator */
.pagination-indicator[b-1s4vqf16ul] {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #201F1D;
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 22px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 10;
    margin: 8px;
    min-width: 38px;
    text-align: center;
}

/* Media Placeholder */
.media-placeholder[b-1s4vqf16ul] {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8E5E0;
}

.media-loading[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

/* Metadata */
.media-metadata[b-1s4vqf16ul] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 25px;
    background-color: #FFFFFF;
    min-height: 20px;
    width: 100%;
    box-sizing: border-box;
}

.metadata-label-left[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1.5;
    flex: 0 0 auto;
    max-width: 163px;
}

.metadata-label-right[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: right;
    flex: 0 0 auto;
    max-width: 213px;
    margin-left: auto;
}

/* Loading More Indicator */
.loading-more-container[b-1s4vqf16ul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 12px;
    margin-top: 20px;
}

.loading-spinner-small[b-1s4vqf16ul] {
    width: 30px;
    height: 30px;
    border: 2px solid #E8E5E0;
    border-top: 2px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-1s4vqf16ul 1s linear infinite;
}

.loading-more-container p[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* End of Content Indicator */
.end-of-content[b-1s4vqf16ul] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 20px;
}

.end-of-content p[b-1s4vqf16ul] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    margin: 0;
}

/* Video Container */
.video-container[b-1s4vqf16ul] {
    width: 100%;
    position: relative;
    background-color: #000;
}

.video-container video[b-1s4vqf16ul] {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    min-height: 400px;
    display: block;
    object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 400px) {
    .folder-admin-content[b-1s4vqf16ul] {
        padding: 0 0 180px 0;
    }
    
    .media-metadata[b-1s4vqf16ul] {
        padding: 15px 20px;
    }
    
    .horizontal-media-item[b-1s4vqf16ul] {
        width: 100vw;
    }
}

/* /Pages/ModelFolderClientView.razor.rz.scp.css */
/* Folder Client Container */
.folder-client-container[b-qm6t52gxsa] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-qm6t52gxsa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-qm6t52gxsa] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-qm6t52gxsa 1s linear infinite;
}

.loading-container p[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

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

.error-container[b-qm6t52gxsa] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-qm6t52gxsa] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-qm6t52gxsa] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-qm6t52gxsa] {
    background-color: #2980b9;
}

.retry-button:active[b-qm6t52gxsa] {
    transform: translateY(1px);
}

/* Header */
.folder-client-header[b-qm6t52gxsa] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-qm6t52gxsa] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-qm6t52gxsa] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-qm6t52gxsa] {
    width: 100%;
    height: 100%;
}

.header-title[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Portfolio Content */
.folder-client-content[b-qm6t52gxsa] {
    flex: 1;
    padding: 0 0 180px 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.folder-client-content[b-qm6t52gxsa]::-webkit-scrollbar {
    display: none;
}

/* Folder Row */
.folder-row[b-qm6t52gxsa] {
    width: 100%;
    margin-bottom: 30px;
    overflow: visible;
}

/* Horizontal Scroll Container */
.horizontal-scroll-container[b-qm6t52gxsa] {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.horizontal-scroll-container[b-qm6t52gxsa]::-webkit-scrollbar {
    display: none;
}

/* Horizontal Media Item */
.horizontal-media-item[b-qm6t52gxsa] {
    flex-shrink: 0;
    width: 100vw;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    background-color: #FFFFFF;
}

.media-display[b-qm6t52gxsa] {
    width: 100%;
    position: relative;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-image[b-qm6t52gxsa] {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    min-height: 400px;
    display: block;
    object-fit: contain;
    object-position: center;
}

/* Video Thumbnail Container */
.video-thumbnail-container[b-qm6t52gxsa] {
    width: 100%;
    position: relative;
    aspect-ratio: 402 / 508;
    overflow: hidden;
}

.video-thumbnail-container .media-image[b-qm6t52gxsa] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: unset;
    max-height: unset;
}

.video-play-overlay[b-qm6t52gxsa] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease;
    z-index: 2;
}

.media-display:hover .video-play-overlay[b-qm6t52gxsa] {
    background-color: rgba(0, 0, 0, 0.5);
}

.play-icon[b-qm6t52gxsa] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #201F1D;
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.media-display:hover .play-icon[b-qm6t52gxsa] {
    transform: scale(1.1);
}

.video-duration-overlay[b-qm6t52gxsa] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    z-index: 3;
}

/* Pagination Indicator */
.pagination-indicator[b-qm6t52gxsa] {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #201F1D;
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 22px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 10;
    margin: 8px;
    min-width: 38px;
    text-align: center;
}

/* Media Placeholder */
.media-placeholder[b-qm6t52gxsa] {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8E5E0;
}

.media-loading[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

/* Metadata */
.media-metadata[b-qm6t52gxsa] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 25px;
    background-color: #FFFFFF;
    min-height: 20px;
    width: 100%;
    box-sizing: border-box;
}

.metadata-label-left[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #201F1D;
    line-height: 1.5;
    flex: 0 0 auto;
    max-width: 163px;
}

.metadata-label-right[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: right;
    flex: 0 0 auto;
    max-width: 213px;
    margin-left: auto;
}

/* Loading More Indicator */
.loading-more-container[b-qm6t52gxsa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 12px;
    margin-top: 20px;
}

.loading-spinner-small[b-qm6t52gxsa] {
    width: 30px;
    height: 30px;
    border: 2px solid #E8E5E0;
    border-top: 2px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-qm6t52gxsa 1s linear infinite;
}

.loading-more-container p[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* End of Content Indicator */
.end-of-content[b-qm6t52gxsa] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 20px;
}

.end-of-content p[b-qm6t52gxsa] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    margin: 0;
}

/* Video Container */
.video-container[b-qm6t52gxsa] {
    width: 100%;
    position: relative;
    background-color: #000;
}

.video-container video[b-qm6t52gxsa] {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    min-height: 400px;
    display: block;
    object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 400px) {
    .folder-client-content[b-qm6t52gxsa] {
        padding: 0 0 180px 0;
    }

    .media-metadata[b-qm6t52gxsa] {
        padding: 15px 20px;
    }

    .horizontal-media-item[b-qm6t52gxsa] {
        width: 100vw;
    }
}
/* /Pages/ModelPortfolioAdminView.razor.rz.scp.css */
/* Portfolio Admin Container */
.portfolio-admin-container[b-2gwlj2ss96] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-2gwlj2ss96] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-2gwlj2ss96] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-2gwlj2ss96 1s linear infinite;
}

.loading-container p[b-2gwlj2ss96] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

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

.error-container[b-2gwlj2ss96] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-2gwlj2ss96] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-2gwlj2ss96] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-2gwlj2ss96] {
    background-color: #2980b9;
}

.retry-button:active[b-2gwlj2ss96] {
    transform: translateY(1px);
}

/* Header */
.portfolio-admin-header[b-2gwlj2ss96] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-2gwlj2ss96] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-2gwlj2ss96] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
}

.header-title[b-2gwlj2ss96] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Portfolio Content */
.portfolio-admin-content[b-2gwlj2ss96] {
    flex: 1;
    padding: 27px 25px 180px 25px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.portfolio-admin-content[b-2gwlj2ss96]::-webkit-scrollbar {
    display: none;
}

/* Portfolio Grid - 2 columns matching Portfolio.razor */
.portfolio-admin-grid[b-2gwlj2ss96] {
    display: grid;
    grid-template-columns: 171px 171px;
    gap: 10px 10px;
    row-gap: 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

/* Folder Container */
.folder-container[b-2gwlj2ss96] {
    position: relative;
    width: 171px;
    height: 171px;
    margin-bottom: 0;
}

/* Folder Thumbnail */
.folder-thumbnail[b-2gwlj2ss96] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: #949494;
}

.folder-thumbnail:hover[b-2gwlj2ss96] {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.folder-thumbnail:active[b-2gwlj2ss96] {
    transform: scale(0.98);
}

.folder-thumbnail img[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.folder-placeholder[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
    background-color: #949494;
    border-radius: 2px;
}

/* Folder Icon */
.folder-icon[b-2gwlj2ss96] {
    position: absolute;
    top: 0;
    right: 0;
    width: 31px;
    height: 31px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.folder-icon img[b-2gwlj2ss96] {
    width: 31px;
    height: 31px;
    object-fit: contain;
    display: block;
}

/* Portfolio Media Item (for videos) */
.portfolio-media-item[b-2gwlj2ss96] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #F5F5F5;
}

.portfolio-media-item:hover[b-2gwlj2ss96] {
    transform: scale(1.02);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.portfolio-media-item:active[b-2gwlj2ss96] {
    transform: scale(0.98);
}

.portfolio-media-image[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Media Placeholder */
.media-placeholder[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8E5E0;
    border-radius: 8px;
}

.media-loading[b-2gwlj2ss96] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

/* Video Thumbnail Container */
.video-thumbnail-container[b-2gwlj2ss96] {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-duration-overlay[b-2gwlj2ss96] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    z-index: 2;
}

.video-play-overlay[b-2gwlj2ss96] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease;
}

.portfolio-media-item:hover .video-play-overlay[b-2gwlj2ss96] {
    background-color: rgba(0, 0, 0, 0.5);
}

.play-icon[b-2gwlj2ss96] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #201F1D;
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.portfolio-media-item:hover .play-icon[b-2gwlj2ss96] {
    transform: scale(1.1);
}

/* Loading More Indicator */
.loading-more-container[b-2gwlj2ss96] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 12px;
    margin-top: 20px;
}

.loading-spinner-small[b-2gwlj2ss96] {
    width: 30px;
    height: 30px;
    border: 2px solid #E8E5E0;
    border-top: 2px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-2gwlj2ss96 1s linear infinite;
}

.loading-more-container p[b-2gwlj2ss96] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* End of Content Indicator */
.end-of-content[b-2gwlj2ss96] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 20px;
}

.end-of-content p[b-2gwlj2ss96] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    margin: 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 400px) {
    .portfolio-admin-grid[b-2gwlj2ss96] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
        row-gap: 8px;
    }
    
    .folder-container[b-2gwlj2ss96] {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
    
    .folder-thumbnail[b-2gwlj2ss96] {
        width: 100%;
        height: 100%;
    }
    
    .portfolio-media-item[b-2gwlj2ss96] {
        width: 100%;
        aspect-ratio: 1;
    }
    
    .portfolio-admin-content[b-2gwlj2ss96] {
        padding: 20px 15px 180px 15px;
    }
}

/* /Pages/ModelPortfolioClientView.razor.rz.scp.css */
/* Portfolio Client Container */
.portfolio-client-container[b-44nrdb6feh] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-44nrdb6feh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-44nrdb6feh] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-44nrdb6feh 1s linear infinite;
}

.loading-container p[b-44nrdb6feh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

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

.error-container[b-44nrdb6feh] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-44nrdb6feh] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-44nrdb6feh] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-44nrdb6feh] {
    background-color: #2980b9;
}

.retry-button:active[b-44nrdb6feh] {
    transform: translateY(1px);
}

/* Header */
.portfolio-client-header[b-44nrdb6feh] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

.header-back-button[b-44nrdb6feh] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-44nrdb6feh] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
}

.header-title[b-44nrdb6feh] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Portfolio Content */
.portfolio-client-content[b-44nrdb6feh] {
    flex: 1;
    padding: 27px 25px 180px 25px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.portfolio-client-content[b-44nrdb6feh]::-webkit-scrollbar {
    display: none;
}

/* Portfolio Grid - 2 columns matching Portfolio.razor */
.portfolio-client-grid[b-44nrdb6feh] {
    display: grid;
    grid-template-columns: 171px 171px;
    gap: 10px 10px;
    row-gap: 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

/* Folder Container */
.folder-container[b-44nrdb6feh] {
    position: relative;
    width: 171px;
    height: 171px;
    margin-bottom: 0;
}

/* Folder Thumbnail */
.folder-thumbnail[b-44nrdb6feh] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: #949494;
}

.folder-thumbnail:hover[b-44nrdb6feh] {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.folder-thumbnail:active[b-44nrdb6feh] {
    transform: scale(0.98);
}

.folder-thumbnail img[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.folder-placeholder[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
    background-color: #949494;
    border-radius: 2px;
}

/* Folder Icon */
.folder-icon[b-44nrdb6feh] {
    position: absolute;
    top: 0;
    right: 0;
    width: 31px;
    height: 31px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.folder-icon img[b-44nrdb6feh] {
    width: 31px;
    height: 31px;
    object-fit: contain;
    display: block;
}

/* Portfolio Media Item (for videos) */
.portfolio-media-item[b-44nrdb6feh] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #F5F5F5;
}

.portfolio-media-item:hover[b-44nrdb6feh] {
    transform: scale(1.02);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.portfolio-media-item:active[b-44nrdb6feh] {
    transform: scale(0.98);
}

.portfolio-media-image[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Media Placeholder */
.media-placeholder[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8E5E0;
    border-radius: 8px;
}

.media-loading[b-44nrdb6feh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

/* Video Thumbnail Container */
.video-thumbnail-container[b-44nrdb6feh] {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-duration-overlay[b-44nrdb6feh] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    z-index: 2;
}

.video-play-overlay[b-44nrdb6feh] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease;
}

.portfolio-media-item:hover .video-play-overlay[b-44nrdb6feh] {
    background-color: rgba(0, 0, 0, 0.5);
}

.play-icon[b-44nrdb6feh] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #201F1D;
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.portfolio-media-item:hover .play-icon[b-44nrdb6feh] {
    transform: scale(1.1);
}

/* Loading More Indicator */
.loading-more-container[b-44nrdb6feh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 12px;
    margin-top: 20px;
}

.loading-spinner-small[b-44nrdb6feh] {
    width: 30px;
    height: 30px;
    border: 2px solid #E8E5E0;
    border-top: 2px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-44nrdb6feh 1s linear infinite;
}

.loading-more-container p[b-44nrdb6feh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* End of Content Indicator */
.end-of-content[b-44nrdb6feh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 20px;
}

.end-of-content p[b-44nrdb6feh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    margin: 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 400px) {
    .portfolio-client-grid[b-44nrdb6feh] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
        row-gap: 8px;
    }

    .folder-container[b-44nrdb6feh] {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .folder-thumbnail[b-44nrdb6feh] {
        width: 100%;
        height: 100%;
    }

    .portfolio-media-item[b-44nrdb6feh] {
        width: 100%;
        aspect-ratio: 1;
    }

    .portfolio-client-content[b-44nrdb6feh] {
        padding: 20px 15px 180px 15px;
    }
}
/* /Pages/ModelProfile.razor.rz.scp.css */
/* Loading and Error States */
.loading-container[b-sd9p5vv22i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-sd9p5vv22i] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-sd9p5vv22i 1s linear infinite;
}

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

.loading-container p[b-sd9p5vv22i] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container[b-sd9p5vv22i] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-sd9p5vv22i] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-sd9p5vv22i] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-sd9p5vv22i] {
    background-color: #2980b9;
}

.retry-button:active[b-sd9p5vv22i] {
    transform: translateY(1px);
}

/* Hide scrollbar for model-profile-container */
.model-profile-container[b-sd9p5vv22i] {
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: calc(60px + env(safe-area-inset-top, 0));
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}

/* On screens smaller than 402px, ensure container fills full width */
@media (max-width: 401px) {
    .model-profile-container[b-sd9p5vv22i] {
        max-width: 100%;
    }

    .profile-image-container[b-sd9p5vv22i] {
        width: 100%;
        max-width: 100%;
    }
}

.model-profile-container[b-sd9p5vv22i]::-webkit-scrollbar {
    display: none;
}

/* Profile Image */
.profile-image-container[b-sd9p5vv22i] {
    position: relative;
    width: 402px;
    height: 402px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.profile-image-container:hover[b-sd9p5vv22i] {
    transform: scale(1.02);
}

.profile-image-mask[b-sd9p5vv22i] {
    width: 100%;
    height: 100%;
    position: relative;
}

.profile-image[b-sd9p5vv22i] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 8px;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Unit Toggle Styles */
.unit-toggle-container[b-sd9p5vv22i] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 20px 0;
    padding: 12px 0;
    background-color: white;
    border-radius: 8px;
}

.unit-label[b-sd9p5vv22i] {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    transition: color 0.3s ease;
}

.unit-label.active[b-sd9p5vv22i] {
    color: #333;
    font-weight: 600;
}

.toggle-switch[b-sd9p5vv22i] {
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}

.toggle-switch.toggled[b-sd9p5vv22i] {
    transform: rotate(180deg);
}

.toggle-switch:hover[b-sd9p5vv22i] {
    transform: scale(1.1);
}

.toggle-switch.toggled:hover[b-sd9p5vv22i] {
    transform: rotate(180deg) scale(1.1);
}

.toggle-switch:active[b-sd9p5vv22i] {
    transform: scale(0.95);
}

.toggle-switch.toggled:active[b-sd9p5vv22i] {
    transform: rotate(180deg) scale(0.95);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-container[b-sd9p5vv22i] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }

    .loading-spinner[b-sd9p5vv22i] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .loading-container p[b-sd9p5vv22i] {
        font-size: 14px;
    }

    .error-container[b-sd9p5vv22i] {
        min-height: 40vh;
        padding: 1rem;
    }

    .error-message[b-sd9p5vv22i] {
        font-size: 16px;
    }

    .retry-button[b-sd9p5vv22i] {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* Make profile image responsive on mobile */
    .profile-image-container[b-sd9p5vv22i] {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0;
        padding: 0;
    }

    .profile-image-mask[b-sd9p5vv22i] {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .profile-image[b-sd9p5vv22i] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}

/* Portfolio Section Styles */
.portfolio-section[b-sd9p5vv22i] {
    margin-top: 30px;
}

.portfolio-title[b-sd9p5vv22i] {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

/* Mobile-specific padding adjustments */
@media (max-width: 401px) {
    .portfolio-section[b-sd9p5vv22i] {
        padding-left: 0;
        margin-left: -25px;
    }

    .portfolio-title[b-sd9p5vv22i] {
        padding-left: 25px;
    }
}

.portfolio-images[b-sd9p5vv22i] {
    display: flex;
    flex-wrap: wrap;
}

.portfolio-image[b-sd9p5vv22i] {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.portfolio-image:first-child[b-sd9p5vv22i] {
    margin-right: 2px;
}

.portfolio-image:last-child[b-sd9p5vv22i] {
    margin-left: 2px;
}

.portfolio-image img[b-sd9p5vv22i] {
    border-radius: 0;
    object-fit: cover;
}

.portfolio-image:hover[b-sd9p5vv22i] {
    transform: scale(1.02);
}

/* Profile name styles to ensure it stays on one line */
.profile-header-info[b-sd9p5vv22i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}

.profile-location[b-sd9p5vv22i] {
    margin-top: 0;
    margin-bottom: 0;
}

.profile-name[b-sd9p5vv22i] {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.edit-icon[b-sd9p5vv22i] {
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s ease;
}

.edit-icon:hover[b-sd9p5vv22i] {
    transform: scale(1.1);
}

.edit-icon img[b-sd9p5vv22i] {
    width: 40px;
    height: 40px;
}

/* Responsive adjustments for profile name */
@media (max-width: 480px) {
    .profile-name[b-sd9p5vv22i] {
        font-size: 20px;
    }

    .edit-icon img[b-sd9p5vv22i] {
        width: 32px;
        height: 32px;
    }

    .profile-image-container[b-sd9p5vv22i] {
        width: 100%;
        margin-top: 0;
    }
}

@media (max-width: 360px) {
    .profile-name[b-sd9p5vv22i] {
        font-size: 18px;
    }

    .edit-icon img[b-sd9p5vv22i] {
        width: 28px;
        height: 28px;
    }

    .profile-image-container[b-sd9p5vv22i] {
        width: 100%;
        margin-top: 0;
    }
}

/* /Pages/ModelProfileAdminView.razor.rz.scp.css */
/* Loading and Error States */
.loading-container[b-wwj4s7xl2s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-wwj4s7xl2s] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-wwj4s7xl2s 1s linear infinite;
}

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

.loading-container p[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container[b-wwj4s7xl2s] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-wwj4s7xl2s] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-wwj4s7xl2s] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-wwj4s7xl2s] {
    background-color: #2980b9;
}

.retry-button:active[b-wwj4s7xl2s] {
    transform: translateY(1px);
}

/* Main Container */
.admin-model-profile-container[b-wwj4s7xl2s] {
    background-color: white;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Header */
.admin-profile-header[b-wwj4s7xl2s] {
    position: relative;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background-color: white;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    flex-shrink: 0;
}

.header-back-button[b-wwj4s7xl2s] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-wwj4s7xl2s] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-wwj4s7xl2s] {
    width: 100%;
    height: 100%;
}

.header-title[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    text-align: center;
}

/* Scrollable Content Area */
.admin-profile-content[b-wwj4s7xl2s] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
}

.admin-profile-content[b-wwj4s7xl2s]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Profile Image */
.admin-profile-image-section[b-wwj4s7xl2s] {
    position: relative;
    padding: 20px 0;
    text-align: center;
}

.admin-profile-image-container[b-wwj4s7xl2s] {
    position: relative;
    width: 402px;
    height: 402px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20px;
}

.admin-profile-image-mask[b-wwj4s7xl2s] {
    width: 100%;
    height: 100%;
    position: relative;
}

.admin-profile-image[b-wwj4s7xl2s] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
}

.edit-photo-text[b-wwj4s7xl2s] {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    margin-top: 10px;
    padding-left: 20px;
}

/* Profile Details */
.admin-profile-details[b-wwj4s7xl2s] {
    padding: 25px 25px 25px 25px; /* Removed bottom padding since no book button */
    background-color: white;
}

.profile-header-info[b-wwj4s7xl2s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.admin-profile-name[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.view-availability-link[b-wwj4s7xl2s] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #ceb185;
    color: #ceb185;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    transition: opacity 0.2s ease;
}

.view-availability-link:hover[b-wwj4s7xl2s] {
    opacity: 0.8;
}

.view-availability-link img[b-wwj4s7xl2s] {
    width: 16px;
    height: 16px;
}

.admin-profile-location[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin-bottom: 20px;
}

/* Unit Toggle Styles */
.unit-toggle-container[b-wwj4s7xl2s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.unit-label[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #201f1d;
    transition: color 0.3s ease;
}

.unit-label.active[b-wwj4s7xl2s] {
    color: #201f1d;
    font-weight: 500;
}

.toggle-switch[b-wwj4s7xl2s] {
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}

.toggle-switch.toggled[b-wwj4s7xl2s] {
    transform: rotate(180deg);
}

.toggle-switch:hover[b-wwj4s7xl2s] {
    transform: scale(1.1);
}

.toggle-switch.toggled:hover[b-wwj4s7xl2s] {
    transform: rotate(180deg) scale(1.1);
}

.toggle-switch:active[b-wwj4s7xl2s] {
    transform: scale(0.95);
}

.toggle-switch.toggled:active[b-wwj4s7xl2s] {
    transform: rotate(180deg) scale(0.95);
}

/* Measurements Grid */
.measurements-grid[b-wwj4s7xl2s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 0;
    margin: 30px 0;
}

.measurement-item[b-wwj4s7xl2s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.measurement-label[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #201f1d;
}

.measurement-value[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
}

/* Additional Information */
.additional-info[b-wwj4s7xl2s] {
    margin: 30px 0;
}

.info-section[b-wwj4s7xl2s] {
    margin-bottom: 25px;
}

.info-label[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #201f1d;
    margin-bottom: 8px;
}

.info-value[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
    line-height: 1.5;
}

/* Portfolio Section */
.portfolio-section[b-wwj4s7xl2s] {
    margin: 30px 0;
}

.portfolio-header-info[b-wwj4s7xl2s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.portfolio-title[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.portfolio-images[b-wwj4s7xl2s] {
    display: flex;
    gap: 2px;
}

.portfolio-image[b-wwj4s7xl2s] {
    flex: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.portfolio-image:hover[b-wwj4s7xl2s] {
    transform: scale(1.02);
}

.portfolio-image img[b-wwj4s7xl2s] {
    width: 100%;
    height: 207px;
    object-fit: cover;
    border-radius: 8px;
}

/* Feedback Section */
.feedback-section[b-wwj4s7xl2s] {
    margin: 30px 0;
    padding-bottom: 100px; /* Add padding to prevent content from being cropped by bottom nav bar */
}

.feedback-header[b-wwj4s7xl2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.feedback-title[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.feedback-rating[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #201f1d;
}

.feedback-item[b-wwj4s7xl2s] {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.feedback-item:last-child[b-wwj4s7xl2s] {
    border-bottom: none;
    margin-bottom: 0;
}

.feedback-content[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 16px;
    color: #ceb185;
    line-height: 1.5;
    margin-bottom: 10px;
}

.feedback-author[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #201f1d;
    text-align: right;
}

.no-feedback[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    text-align: center;
    padding: 20px;
}

/* Leave Feedback Section */
.leave-feedback-section[b-wwj4s7xl2s] {
    margin-top: 30px;
    padding: 0 25px;
    display: flex;
    justify-content: center;
}

.leave-feedback-button[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 100%;
    max-width: 290px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.leave-feedback-button:hover[b-wwj4s7xl2s] {
    background-color: #3a3835;
    transform: translateY(-1px);
}

.leave-feedback-button:active[b-wwj4s7xl2s] {
    transform: translateY(0);
}

/* Portfolio Navigation Bar */
.portfolio-nav-container[b-wwj4s7xl2s] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0px -1px 1px 0px rgba(32, 31, 29, 0.2);
    z-index: 1002;
}

.portfolio-nav-item[b-wwj4s7xl2s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s ease;
}

.portfolio-nav-item img[b-wwj4s7xl2s] {
    width: 26px;
    height: 26px;
    margin-bottom: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.portfolio-nav-item span[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #201f1d;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.portfolio-nav-item.active img[b-wwj4s7xl2s] {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(69%) sepia(13%) saturate(1234%) hue-rotate(10deg) brightness(94%) contrast(88%);
}

.portfolio-nav-item.active span[b-wwj4s7xl2s] {
    opacity: 1;
    color: #ceb185;
    font-weight: 500;
}

.portfolio-nav-item:hover img[b-wwj4s7xl2s] {
    opacity: 0.8;
}

.portfolio-nav-item:hover span[b-wwj4s7xl2s] {
    opacity: 0.8;
}

/* Portfolio Overlay Styles */
.portfolio-overlay[b-wwj4s7xl2s] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(32, 31, 29, 0.6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    touch-action: pan-y;
}

.portfolio-back-button[b-wwj4s7xl2s] {
    position: absolute;
    top: calc(53px + env(safe-area-inset-top, 0px));
    left: 21px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.2s ease;
}

.portfolio-back-button:hover[b-wwj4s7xl2s] {
    transform: scale(1.1);
}

.portfolio-back-button img[b-wwj4s7xl2s] {
    width: 100%;
    height: 100%;
    filter: invert(1); /* Make the arrow white */
}

.portfolio-main-image-container[b-wwj4s7xl2s] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 120px 20px;
    position: relative;
}

.portfolio-main-image[b-wwj4s7xl2s] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.portfolio-dots-container[b-wwj4s7xl2s] {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1001;
}

.portfolio-dot[b-wwj4s7xl2s] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.portfolio-dot.active[b-wwj4s7xl2s] {
    background: #ceb185;
    transform: scale(1.2);
}

.portfolio-dot:hover[b-wwj4s7xl2s] {
    background: rgba(255, 255, 255, 0.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-container[b-wwj4s7xl2s] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }
    
    .loading-spinner[b-wwj4s7xl2s] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }
    
    .loading-container p[b-wwj4s7xl2s] {
        font-size: 14px;
    }
    
    .error-container[b-wwj4s7xl2s] {
        min-height: 40vh;
        padding: 1rem;
    }
    
    .error-message[b-wwj4s7xl2s] {
        font-size: 16px;
    }
    
    .retry-button[b-wwj4s7xl2s] {
        padding: 10px 20px;
        font-size: 14px;
    }

    .admin-profile-details[b-wwj4s7xl2s] {
        padding: 20px 20px 20px 20px; /* Removed bottom padding for mobile */
    }

    .measurements-grid[b-wwj4s7xl2s] {
        gap: 15px 0;
    }
}

/* Desktop responsive adjustments */
@media (min-width: 769px) {
    .admin-model-profile-container[b-wwj4s7xl2s] {
        max-width: 402px;
        margin: 0 auto;
    }
    
    .admin-profile-image-container[b-wwj4s7xl2s] {
        width: 402px;
        height: 402px;
    }
    
    .admin-profile-details[b-wwj4s7xl2s] {
        max-width: 402px;
        margin: 0 auto;
    }
}

/* Large desktop adjustments */
@media (min-width: 1024px) {
    .admin-profile-image-container[b-wwj4s7xl2s] {
        width: 402px;
        height: 402px;
    }
}

/* Extra large desktop adjustments */
@media (min-width: 1440px) {
    .admin-profile-image-container[b-wwj4s7xl2s] {
        width: 402px;
        height: 402px;
    }
}

/* Model Approval Section Styles */
.model-approval-section[b-wwj4s7xl2s] {
    margin: 30px 0;
    padding: 25px;
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e8e5e0;
}

.approval-section-title[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #201f1d;
    margin: 0 0 10px 0;
}

.approval-section-description[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    margin: 0 0 25px 0;
    line-height: 1.5;
}

/* Action Buttons - Same styling as ClientBookingView */
.action-buttons[b-wwj4s7xl2s] {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}

.approve-button[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    height: 44px;
    width: 174px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.approve-button:hover:not(:disabled)[b-wwj4s7xl2s] {
    background-color: #3a3835;
    transform: translateY(-1px);
}

.approve-button:active:not(:disabled)[b-wwj4s7xl2s] {
    transform: translateY(0);
}

.approve-button:disabled[b-wwj4s7xl2s] {
    opacity: 0.6;
    cursor: not-allowed;
}

.reject-button[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    background-color: #FFFFFF;
    border: 1px solid #201F1D;
    border-radius: 8px;
    height: 44px;
    width: 174px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.reject-button:hover:not(:disabled)[b-wwj4s7xl2s] {
    background-color: #f5f5f5;
    transform: translateY(-1px);
}

.reject-button:active:not(:disabled)[b-wwj4s7xl2s] {
    transform: translateY(0);
}

.reject-button:disabled[b-wwj4s7xl2s] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Request More Info Section - Same styling as ClientBookingView */
.request-info-section[b-wwj4s7xl2s] {
    text-align: center;
    margin-bottom: 20px;
}

.request-info-link[b-wwj4s7xl2s] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #CEB185;
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
    width: 291px;
    margin: 0 auto;
    display: block;
    transition: opacity 0.2s ease;
}

.request-info-link:hover[b-wwj4s7xl2s] {
    opacity: 0.8;
}

/* Responsive adjustments for approval section */
@media (max-width: 402px) {
    .model-approval-section[b-wwj4s7xl2s] {
        padding: 20px;
        margin-bottom: 100px; /* Add extra bottom margin to prevent buttons from being hidden behind bottom nav bar */
    }
    
    .action-buttons[b-wwj4s7xl2s] {
        flex-direction: column;
        gap: 8px;
    }
    
    .approve-button[b-wwj4s7xl2s],
    .reject-button[b-wwj4s7xl2s] {
        width: 100%;
    }
    
    .request-info-link[b-wwj4s7xl2s] {
        width: 100%;
    }
}

/* Additional mobile spacing for approval section on all mobile devices */
@media (max-width: 768px) {
    .model-approval-section[b-wwj4s7xl2s] {
        margin-bottom: 100px; /* Add extra bottom margin to prevent buttons from being hidden behind bottom nav bar */
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-wwj4s7xl2s] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-wwj4s7xl2s] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-wwj4s7xl2s 0.3s ease-out;
}

@keyframes modalSlideIn-b-wwj4s7xl2s {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-wwj4s7xl2s] {
        padding: 10px;
    }
    
    .cropper-modal-container[b-wwj4s7xl2s] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-wwj4s7xl2s] {
        padding: 5px;
    }
    
    .cropper-modal-container[b-wwj4s7xl2s] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/ModelProfileClientView.razor.rz.scp.css */
/* Loading and Error States */
.loading-container[b-7c8aabv3in] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-7c8aabv3in] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-7c8aabv3in 1s linear infinite;
}

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

.loading-container p[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container[b-7c8aabv3in] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
}

.error-message[b-7c8aabv3in] {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.retry-button[b-7c8aabv3in] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-7c8aabv3in] {
    background-color: #2980b9;
}

.retry-button:active[b-7c8aabv3in] {
    transform: translateY(1px);
}

/* Main Container */
.client-model-profile-container[b-7c8aabv3in] {
    background-color: white;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-width: 402px;
    margin: 0 auto;
}

/* Header */
.client-profile-header[b-7c8aabv3in] {
    position: relative;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background-color: white;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    flex-shrink: 0;
}

.header-back-button[b-7c8aabv3in] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-back-button:hover[b-7c8aabv3in] {
    transform: translateY(-50%) scale(1.1);
}

.header-back-button img[b-7c8aabv3in] {
    width: 100%;
    height: 100%;
}

.header-title[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    text-align: center;
}

/* Scrollable Content Area */
.client-profile-content[b-7c8aabv3in] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.client-profile-content[b-7c8aabv3in]::-webkit-scrollbar {
    display: none;
}

/* Profile Image */
.client-profile-image-container[b-7c8aabv3in] {
    position: relative;
    width: 402px;
    height: 402px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.client-profile-image-container:hover[b-7c8aabv3in] {
    transform: scale(1.02);
}

.client-profile-image-mask[b-7c8aabv3in] {
    width: 100%;
    height: 100%;
    position: relative;
}

.client-profile-image[b-7c8aabv3in] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 8px;
}

/* Profile Details */
.client-profile-details[b-7c8aabv3in] {
    padding: 25px 25px 180px 25px;
    background-color: white;
}

.profile-header-info[b-7c8aabv3in] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.client-profile-name[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.view-availability-link[b-7c8aabv3in] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #ceb185;
    color: #ceb185;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    transition: opacity 0.2s ease;
}

.view-availability-link:hover[b-7c8aabv3in] {
    opacity: 0.8;
}

.view-availability-link img[b-7c8aabv3in] {
    width: 16px;
    height: 16px;
}

.client-profile-location[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin-bottom: 20px;
}

/* Unit Toggle Styles */
.unit-toggle-container[b-7c8aabv3in] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.unit-label[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #201f1d;
    transition: color 0.3s ease;
}

.unit-label.active[b-7c8aabv3in] {
    color: #201f1d;
    font-weight: 500;
}

.toggle-switch[b-7c8aabv3in] {
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}

.toggle-switch.toggled[b-7c8aabv3in] {
    transform: rotate(180deg);
}

.toggle-switch:hover[b-7c8aabv3in] {
    transform: scale(1.1);
}

.toggle-switch.toggled:hover[b-7c8aabv3in] {
    transform: rotate(180deg) scale(1.1);
}

.toggle-switch:active[b-7c8aabv3in] {
    transform: scale(0.95);
}

.toggle-switch.toggled:active[b-7c8aabv3in] {
    transform: rotate(180deg) scale(0.95);
}

/* Measurements Grid */
.measurements-grid[b-7c8aabv3in] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 0;
    margin: 30px 0;
}

.measurement-item[b-7c8aabv3in] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.measurement-label[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #201f1d;
}

.measurement-value[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
}

/* Additional Information */
.additional-info[b-7c8aabv3in] {
    margin: 30px 0;
}

.info-section[b-7c8aabv3in] {
    margin-bottom: 25px;
}

.info-label[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #201f1d;
    margin-bottom: 8px;
}

.info-value[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ceb185;
    line-height: 1.5;
}

/* Portfolio Section */
.portfolio-section[b-7c8aabv3in] {
    margin: 30px 0;
}

.portfolio-header-info[b-7c8aabv3in] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.portfolio-title[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.portfolio-images[b-7c8aabv3in] {
    display: flex;
    gap: 2px;
}

.portfolio-image[b-7c8aabv3in] {
    flex: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.portfolio-image:hover[b-7c8aabv3in] {
    transform: scale(1.02);
}

.portfolio-image img[b-7c8aabv3in] {
    width: 100%;
    height: 207px;
    object-fit: cover;
    border-radius: 8px;
}

/* Feedback Section */
.feedback-section[b-7c8aabv3in] {
    margin: 30px 0;
}

.feedback-header[b-7c8aabv3in] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.feedback-title[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #201f1d;
    margin: 0;
}

.feedback-rating[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #201f1d;
}

.feedback-item[b-7c8aabv3in] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.feedback-item:last-child[b-7c8aabv3in] {
    border-bottom: none;
    margin-bottom: 0;
}

.feedback-content[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 16px;
    color: #ceb185;
    line-height: 1.5;
    flex: 1;
    margin: 0;
}

.feedback-author[b-7c8aabv3in] {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}

.feedback-author img[b-7c8aabv3in] {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.no-feedback[b-7c8aabv3in] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    text-align: center;
    padding: 20px;
}

/* Book Button */
.book-button-container[b-7c8aabv3in] {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 25px;
}

.book-button[b-7c8aabv3in] {
    background-color: #201f1d;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-width: 290px;
}

.book-button:hover[b-7c8aabv3in] {
    background-color: #333;
}

.book-button:active[b-7c8aabv3in] {
    transform: translateY(1px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-container[b-7c8aabv3in],
    .error-container[b-7c8aabv3in] {
        min-height: 40vh;
        padding: 1rem;
    }

    .loading-spinner[b-7c8aabv3in] {
        width: 30px;
        height: 30px;
        border-width: 3px;
    }

    .error-message[b-7c8aabv3in] {
        font-size: 16px;
    }

    .retry-button[b-7c8aabv3in] {
        padding: 10px 20px;
        font-size: 14px;
    }

    .client-profile-details[b-7c8aabv3in] {
        padding: 20px 20px 200px 20px;
    }

    .measurements-grid[b-7c8aabv3in] {
        gap: 15px 0;
    }

    .book-button[b-7c8aabv3in] {
        min-width: 250px;
        padding: 10px 20px;
        font-size: 14px;
    }

    .book-button-container[b-7c8aabv3in] {
        padding: 0 20px;
    }
}


/* Additional safety margin for very small screens */
@media (max-height: 700px) {
    .client-profile-details[b-7c8aabv3in] {
        padding-bottom: 240px;
    }

    .book-button-container[b-7c8aabv3in] {
        bottom: 160px;
    }
}
/* /Pages/NewMediaUpload.razor.rz.scp.css */
/* New Media Upload Container */
.new-upload-container[b-xilahkke6v] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-xilahkke6v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-xilahkke6v] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-xilahkke6v 1s linear infinite;
}

.loading-container p[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

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

/* Header */
.new-upload-header[b-xilahkke6v] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-back[b-xilahkke6v] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-xilahkke6v] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-xilahkke6v] {
    opacity: 0.7;
}

.back-button img[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-xilahkke6v] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.page-title[b-xilahkke6v] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.header-camera[b-xilahkke6v] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.header-camera img[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content */
.new-upload-content[b-xilahkke6v] {
    flex: 1;
    padding: 20px 26px 180px 26px; /* Increased bottom padding to prevent button overlap */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
    height: calc(100vh - 186px); /* Fixed height for proper scrolling */
}

.new-upload-content[b-xilahkke6v]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Album Name Input */
.album-name-input-container[b-xilahkke6v] {
    margin-bottom: 32px;
}

.album-name-label[b-xilahkke6v] {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin-bottom: 8px;
}

.album-name-input[b-xilahkke6v] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    background-color: #FFFFFF;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.album-name-input:focus[b-xilahkke6v] {
    outline: none;
    border-color: #CEB185;
}

.album-name-input[b-xilahkke6v]::placeholder {
    color: #B8A78C;
}

.album-name-error[b-xilahkke6v] {
    margin: 8px 0 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #F44336;
}

/* Album Info */
.album-info[b-xilahkke6v] {
    margin-bottom: 32px;
}

.album-text[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.album-name[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* Large Image Display */
.large-image-container[b-xilahkke6v] {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.large-image-wrapper[b-xilahkke6v] {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 400px;
    background-color: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Crop Icon Button */
.crop-icon-btn[b-xilahkke6v] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #E8E5E0;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    padding: 0;
}

.crop-icon-btn:hover[b-xilahkke6v] {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.crop-icon-btn:active[b-xilahkke6v] {
    transform: scale(0.95);
}

.crop-icon-btn svg[b-xilahkke6v] {
    width: 24px;
    height: 24px;
    color: #201F1D;
}

.large-image[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.large-image-placeholder[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-large-image[b-xilahkke6v] {
    width: 100%;
    max-width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 12px;
    border: 2px dashed #CCCCCC;
}

.no-large-image p[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Crop Overlay */
.crop-overlay[b-xilahkke6v] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 10;
}

.crop-button[b-xilahkke6v] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.crop-button:hover[b-xilahkke6v] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

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

/* Image Ribbon */
.image-ribbon-container[b-xilahkke6v] {
    margin-bottom: 34px;
}

.ribbon-header[b-xilahkke6v] {
    margin-bottom: 12px;
}

.ribbon-title[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
}

.image-ribbon[b-xilahkke6v] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #CEB185 transparent;
    -webkit-overflow-scrolling: touch;
}

.image-ribbon[b-xilahkke6v]::-webkit-scrollbar {
    height: 4px;
}

.image-ribbon[b-xilahkke6v]::-webkit-scrollbar-track {
    background: transparent;
}

.image-ribbon[b-xilahkke6v]::-webkit-scrollbar-thumb {
    background: #CEB185;
    border-radius: 2px;
}

.ribbon-thumbnail[b-xilahkke6v] {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.ribbon-thumbnail:hover[b-xilahkke6v] {
    transform: scale(1.05);
}

.ribbon-thumbnail.selected[b-xilahkke6v] {
    border-color: #CEB185;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.3);
}

.ribbon-thumbnail.thumbnail-selected[b-xilahkke6v] {
    border-color: #CEB185;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(206, 177, 133, 0.5);
}

.thumbnail-image[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.thumbnail-placeholder[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-loading[b-xilahkke6v] {
    font-size: 10px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.no-thumbnails[b-xilahkke6v] {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    border-radius: 8px;
    border: 2px dashed #CCCCCC;
}

.no-thumbnails p[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Thumbnail Overlay */
.thumbnail-overlay[b-xilahkke6v] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.delete-thumbnail-btn[b-xilahkke6v] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.delete-thumbnail-btn:hover[b-xilahkke6v] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-thumbnail-btn:active[b-xilahkke6v] {
    transform: scale(0.95);
}

/* Thumbnail Checkmark */
.thumbnail-checkmark[b-xilahkke6v] {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 15;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.thumbnail-checkmark svg[b-xilahkke6v] {
    width: 20px;
    height: 20px;
}

/* Set Thumbnail Button Container */
.set-thumbnail-button-container[b-xilahkke6v] {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.set-thumbnail-main-btn[b-xilahkke6v] {
    padding: 12px 24px;
    background: #CEB185;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
}

.set-thumbnail-main-btn:hover[b-xilahkke6v] {
    background: #B8A078;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(206, 177, 133, 0.3);
}

.set-thumbnail-main-btn:active[b-xilahkke6v] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(206, 177, 133, 0.2);
}


/* Feature Sections */
.feature-section[b-xilahkke6v] {
    display: flex;
    align-items: center;
    padding: 16px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    margin-bottom: 8px;
}

.feature-section:hover[b-xilahkke6v] {
    background-color: #f8f8f8;
}

.feature-icon[b-xilahkke6v] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.feature-icon img[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-content[b-xilahkke6v] {
    flex: 1;
}

.feature-text[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.feature-subtext[b-xilahkke6v] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #B8A78C;
    margin: 4px 0 0 0;
}

.feature-arrow[b-xilahkke6v] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-arrow img[b-xilahkke6v] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Upload Button Container */
.upload-button-container[b-xilahkke6v] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 1002; /* Ensure buttons stay on top of all content including modals */
}

.upload-button[b-xilahkke6v] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.upload-button:hover:not(:disabled)[b-xilahkke6v] {
    background-color: #3A3937;
}

.upload-button:active:not(:disabled)[b-xilahkke6v] {
    background-color: #1A1917;
}

.upload-button:disabled[b-xilahkke6v] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

.upload-spinner[b-xilahkke6v] {
    width: 16px;
    height: 16px;
    border: 2px solid #FFFFFF;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-xilahkke6v 1s linear infinite;
}


/* Responsive Design */
@media (max-width: 768px) and (min-width: 481px) {
    .large-image-wrapper[b-xilahkke6v] {
        max-width: 350px;
        height: 350px;
    }

    .ribbon-thumbnail[b-xilahkke6v] {
        width: 110px;
        height: 110px;
    }

    .delete-thumbnail-btn[b-xilahkke6v] {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .new-upload-content[b-xilahkke6v] {
        padding: 20px 15px 160px 15px; /* Increased bottom padding for mobile */
        height: calc(100vh - 186px);
    }

    .large-image-wrapper[b-xilahkke6v] {
        max-width: 300px;
        height: 300px;
    }

    .ribbon-thumbnail[b-xilahkke6v] {
        width: 100px;
        height: 100px;
    }

    .set-thumbnail-button-container[b-xilahkke6v] {
        max-width: 300px;
    }

    .set-thumbnail-main-btn[b-xilahkke6v] {
        font-size: 14px;
        padding: 10px 20px;
        min-width: 140px;
    }

    .delete-thumbnail-btn[b-xilahkke6v] {
        width: 28px;
        height: 28px;
    }

    .image-ribbon[b-xilahkke6v] {
        gap: 8px;
    }

    .page-title[b-xilahkke6v] {
        font-size: 18px;
    }

    .album-text[b-xilahkke6v] {
        font-size: 15px;
    }

    .album-name-label[b-xilahkke6v] {
        font-size: 15px;
    }

    .album-name-input[b-xilahkke6v] {
        font-size: 15px;
        padding: 10px 14px;
    }

    .album-name-error[b-xilahkke6v] {
        font-size: 13px;
    }

    .feature-text[b-xilahkke6v] {
        font-size: 15px;
    }

    .feature-subtext[b-xilahkke6v] {
        font-size: 13px;
    }

    .upload-button-container[b-xilahkke6v] {
        padding: 0 20px;
    }

    .upload-button[b-xilahkke6v] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }

    .thumbnail-checkmark[b-xilahkke6v] {
        width: 24px;
        height: 24px;
    }

    .thumbnail-checkmark svg[b-xilahkke6v] {
        width: 16px;
        height: 16px;
    }

}

@media (max-width: 360px) {
    .new-upload-content[b-xilahkke6v] {
        padding: 15px 10px 160px 10px; /* Increased bottom padding for small screens */
        height: calc(100vh - 186px);
    }

    .large-image-wrapper[b-xilahkke6v] {
        max-width: 280px;
        height: 280px;
    }

    .ribbon-thumbnail[b-xilahkke6v] {
        width: 90px;
        height: 90px;
    }

    .set-thumbnail-button-container[b-xilahkke6v] {
        max-width: 280px;
    }

    .set-thumbnail-main-btn[b-xilahkke6v] {
        font-size: 13px;
        padding: 9px 18px;
        min-width: 120px;
    }

    .delete-thumbnail-btn[b-xilahkke6v] {
        width: 26px;
        height: 26px;
    }

    .image-ribbon[b-xilahkke6v] {
        gap: 6px;
    }

    .page-title[b-xilahkke6v] {
        font-size: 16px;
    }

    .album-text[b-xilahkke6v] {
        font-size: 14px;
    }

    .album-name-label[b-xilahkke6v] {
        font-size: 14px;
    }

    .album-name-input[b-xilahkke6v] {
        font-size: 14px;
        padding: 9px 12px;
    }

    .album-name-error[b-xilahkke6v] {
        font-size: 12px;
    }

    .feature-text[b-xilahkke6v] {
        font-size: 14px;
    }

    .feature-subtext[b-xilahkke6v] {
        font-size: 12px;
    }

    .thumbnail-checkmark[b-xilahkke6v] {
        width: 22px;
        height: 22px;
    }

    .thumbnail-checkmark svg[b-xilahkke6v] {
        width: 14px;
        height: 14px;
    }

}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .large-image[b-xilahkke6v],
    .thumbnail-image[b-xilahkke6v] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* Cropper Modal Styles */
.cropper-modal-overlay[b-xilahkke6v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-xilahkke6v] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-xilahkke6v 0.3s ease-out;
}

@keyframes modalSlideIn-b-xilahkke6v {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-xilahkke6v] {
        padding: 10px;
    }

    .cropper-modal-container[b-xilahkke6v] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-xilahkke6v] {
        padding: 5px;
    }

    .cropper-modal-container[b-xilahkke6v] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}

/* Modal Styles - consistent with PortfolioFolder */
.modal-overlay[b-xilahkke6v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 20px;
}

.modal-container[b-xilahkke6v] {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-xilahkke6v 0.3s ease-out;
}

.modal-header[b-xilahkke6v] {
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #E8E5E0;
}

.modal-title[b-xilahkke6v] {
    margin: 0 0 16px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

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

.modal-message[b-xilahkke6v] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
}

.modal-footer[b-xilahkke6v] {
    padding: 0 24px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn[b-xilahkke6v] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.modal-btn-cancel[b-xilahkke6v] {
    background: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.modal-btn-cancel:hover[b-xilahkke6v] {
    background: #E8E5E0;
    transform: translateY(-1px);
}

.modal-btn-cancel:active[b-xilahkke6v] {
    transform: translateY(0);
}

/* Responsive modal styles */
@media (max-width: 480px) {
    .modal-container[b-xilahkke6v] {
        max-width: 350px;
        margin: 0 10px;
    }

    .modal-header[b-xilahkke6v] {
        padding: 20px 20px 0 20px;
    }

    .modal-title[b-xilahkke6v] {
        font-size: 18px;
    }

    .modal-body[b-xilahkke6v] {
        padding: 20px;
    }

    .modal-message[b-xilahkke6v] {
        font-size: 15px;
    }

    .modal-footer[b-xilahkke6v] {
        padding: 0 20px 20px 20px;
        flex-direction: column;
        gap: 8px;
    }

    .modal-btn[b-xilahkke6v] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

/* Save Metadata Button */
.save-metadata-container[b-xilahkke6v] {
    padding: 16px;
    display: flex;
    justify-content: center;
}

.save-metadata-btn[b-xilahkke6v] {
    background-color: #201F1D;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: 'Montserrat', sans-serif;
}

.save-metadata-btn:hover:not(:disabled)[b-xilahkke6v] {
    background-color: #3A3937;
}

.save-metadata-btn:disabled[b-xilahkke6v] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

@media (max-width: 480px) {
    .save-metadata-btn[b-xilahkke6v] {
        font-size: 15px;
        padding: 10px 28px;
    }
}
/* /Pages/Notification.razor.rz.scp.css */
.notification-container[b-m3wm35l5ix] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.notification-container[b-m3wm35l5ix]::-webkit-scrollbar {
    display: none;
}

.notification-header[b-m3wm35l5ix] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.back-button[b-m3wm35l5ix] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.back-button:hover[b-m3wm35l5ix] {
    opacity: 0.7;
}

.back-button img[b-m3wm35l5ix] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.notification-title[b-m3wm35l5ix] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    margin: 0;
}

.notification-content[b-m3wm35l5ix] {
    background-color: #FFFFFF;
    min-height: 330px;
    padding: 0;
    position: relative;
}

.notification-item[b-m3wm35l5ix] {
    display: flex;
    align-items: flex-start;
    padding: 25px;
    position: relative;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.notification-item:hover[b-m3wm35l5ix] {
    background-color: #F8F6F3;
}

.notification-item.read[b-m3wm35l5ix] {
    opacity: 0.7;
}

.notification-item.unread[b-m3wm35l5ix] {
    opacity: 1;
}

.notification-indicator[b-m3wm35l5ix] {
    position: absolute;
    left: 9px;
    top: 55px;
    transform: translateY(-6px);
    width: 12px;
    height: 12px;
    background-color: #CEB185;
    border-radius: 50%;
    z-index: 2;
}

.notification-indicator.read[b-m3wm35l5ix] {
    background-color: #E8E5E0;
}

.notification-indicator.unread[b-m3wm35l5ix] {
    background-color: #CEB185;
}

.notification-avatar[b-m3wm35l5ix] {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    flex-shrink: 0;
}

.notification-avatar img[b-m3wm35l5ix] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

.notification-details[b-m3wm35l5ix] {
    flex: 1;
    min-width: 0;
}

.notification-subtitle[b-m3wm35l5ix] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.notification-message[b-m3wm35l5ix] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.notification-time[b-m3wm35l5ix] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.notification-divider[b-m3wm35l5ix] {
    height: 1px;
    background-color: #E8E5E0;
    margin: 0 25px;
}

/* Loading, Error, and Empty States */
.loading-container[b-m3wm35l5ix],
.error-container[b-m3wm35l5ix],
.empty-container[b-m3wm35l5ix] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    text-align: center;
    min-height: 200px;
}

.loading-container p[b-m3wm35l5ix],
.error-container p[b-m3wm35l5ix],
.empty-container p[b-m3wm35l5ix] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201F1D;
    margin: 0;
}

.retry-button[b-m3wm35l5ix] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    margin-top: 16px;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-m3wm35l5ix] {
    background-color: #B89A6B;
}

/* Load More Button */
.load-more-container[b-m3wm35l5ix] {
    display: flex;
    justify-content: center;
    padding: 20px 25px;
}

.load-more-button[b-m3wm35l5ix] {
    background-color: #CEB185;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.load-more-button:hover[b-m3wm35l5ix] {
    background-color: #B89A6B;
}
/* /Pages/Portfolio.razor.rz.scp.css */
/* Portfolio Container */
.portfolio-container[b-zhzbek6yek] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Loading and Error States */
.loading-container[b-zhzbek6yek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-zhzbek6yek] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-zhzbek6yek 1s linear infinite;
}

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

.loading-container p[b-zhzbek6yek] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

/* Header */
.portfolio-header[b-zhzbek6yek] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-logo[b-zhzbek6yek] {
    position: absolute;
    left: 20px;
    top: calc(58px + env(safe-area-inset-top, 0px));
    height: 29px;
    width: 175px;
}

.header-logo img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-zhzbek6yek] {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notifications:hover[b-zhzbek6yek] {
    background-color: #f0f0f0;
    transform: translateY(-50%) scale(1.1);
}

.header-notifications:active[b-zhzbek6yek] {
    transform: translateY(-50%) scale(0.95);
}

.header-notifications img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-settings[b-zhzbek6yek] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-settings:hover[b-zhzbek6yek] {
    background-color: #f0f0f0;
    transform: translateY(-50%) scale(1.1);
}

.header-settings:active[b-zhzbek6yek] {
    transform: translateY(-50%) scale(0.95);
}

.header-settings img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Portfolio Content */
.portfolio-content[b-zhzbek6yek] {
    flex: 1;
    padding: calc(150px + env(safe-area-inset-top, 0px)) 25px 120px 25px; /* Top padding for fixed header, bottom padding for navigation bar and Safari URL bar */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
}

.portfolio-content[b-zhzbek6yek]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Webkit browsers */
}

/* Create Album Container - Full Width */
.create-album-container[b-zhzbek6yek] {
    position: relative;
    width: 100%;
    max-width: 352px;
    margin: 0 auto 20px auto;
    height: auto;
}

/* Create Album Panel */
.create-album-panel[b-zhzbek6yek] {
    width: 100%;
    height: 151px;
    border: 1px solid rgba(232, 229, 224, 0.5);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    position: relative;
    background-color: #FFFFFF;
    transition: all 0.2s ease;
    padding: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Portfolio Grid - For Folder Thumbnails */
.portfolio-grid[b-zhzbek6yek] {
    display: grid;
    grid-template-columns: 171px 171px;
    gap: 10px 10px;
    row-gap: 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

.create-album-panel:hover[b-zhzbek6yek] {
    background-color: #f8f8f8;
    transform: scale(1.02);
    border-color: #CEB185;
}

.create-album-panel:active[b-zhzbek6yek] {
    transform: scale(0.98);
}

.album-icon[b-zhzbek6yek] {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
}

.album-icon img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
}

.album-plus[b-zhzbek6yek] {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 48px;
    left: calc(50% + 22px);
    transform: translateX(-50%);
    z-index: 2;
}

.album-plus img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
}

.album-title[b-zhzbek6yek] {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #201F1D;
    text-align: center;
    line-height: 1.5;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 80px);
    z-index: 1;
}

/* Folder Container */
.folder-container[b-zhzbek6yek] {
    position: relative;
    width: 171px;
    height: 171px;
    margin-bottom: 0;
}

/* Folder Thumbnail */
.folder-thumbnail[b-zhzbek6yek] {
    width: 171px;
    height: 171px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: #949494;
}

.folder-thumbnail:hover[b-zhzbek6yek] {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.folder-thumbnail:active[b-zhzbek6yek] {
    transform: scale(0.98);
}

.folder-thumbnail img[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.folder-placeholder[b-zhzbek6yek] {
    width: 100%;
    height: 100%;
    background-color: #949494;
    border-radius: 2px;
}

/* Folder Icon */
.folder-icon[b-zhzbek6yek] {
    position: absolute;
    top: 0;
    right: 0;
    width: 31px;
    height: 31px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.folder-icon img[b-zhzbek6yek] {
    width: 31px;
    height: 31px;
    object-fit: contain;
    display: block;
}

/* Desktop spacing - add more space between header and portfolio grid */
@media (min-width: 769px) {
    .portfolio-content[b-zhzbek6yek] {
        padding-top: calc(150px + env(safe-area-inset-top, 0px)); /* Increased from 100px for desktop */
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .loading-container[b-zhzbek6yek] {
        padding: 20px 15px;
        width: calc(100% - 30px);
    }

    .loading-spinner[b-zhzbek6yek] {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .loading-container p[b-zhzbek6yek] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .portfolio-content[b-zhzbek6yek] {
        padding: calc(80px + env(safe-area-inset-top, 0px)) 15px 100px 15px;
    }

    .create-album-container[b-zhzbek6yek] {
        max-width: 100%;
        margin-bottom: 15px;
    }

    .portfolio-grid[b-zhzbek6yek] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
        row-gap: 8px;
    }

    .folder-container[b-zhzbek6yek] {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .folder-thumbnail[b-zhzbek6yek] {
        width: 100%;
        height: 100%;
    }

    .create-album-panel[b-zhzbek6yek] {
        height: 130px;
    }

    .album-title[b-zhzbek6yek] {
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .portfolio-content[b-zhzbek6yek] {
        padding: calc(150px + env(safe-area-inset-top, 0px)) 10px 100px 10px;
    }

    .portfolio-grid[b-zhzbek6yek] {
        gap: 6px 6px;
        row-gap: 6px;
    }

    .album-icon[b-zhzbek6yek] {
        width: 32px;
        height: 32px;
    }

    .album-plus[b-zhzbek6yek] {
        width: 28px;
        height: 28px;
    }

    .album-title[b-zhzbek6yek] {
        font-size: 14px;
    }
}

/* iPhone 14 Pro Max and larger screens - adjust plus icon positioning */
@media (min-width: 430px) and (min-height: 932px) {
    .album-plus[b-zhzbek6yek] {
        right: 20px;
    }
}

/* Upload Modal Styles */
.upload-modal-overlay[b-zhzbek6yek] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-modal[b-zhzbek6yek] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 300px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.upload-content[b-zhzbek6yek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.upload-spinner[b-zhzbek6yek] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-zhzbek6yek 1s linear infinite;
}

.upload-message[b-zhzbek6yek] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
}

/* Message Modal Styles */
.message-modal-overlay[b-zhzbek6yek] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.message-modal[b-zhzbek6yek] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.message-content[b-zhzbek6yek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.message-icon[b-zhzbek6yek] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

.message-icon.success[b-zhzbek6yek] {
    background-color: #4CAF50;
}

.message-icon.error[b-zhzbek6yek] {
    background-color: #F44336;
}

.message-text[b-zhzbek6yek] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
    line-height: 1.4;
}

.message-button[b-zhzbek6yek] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.message-button:hover[b-zhzbek6yek] {
    background-color: #2a2825;
    transform: translateY(-1px);
}

.message-button:active[b-zhzbek6yek] {
    transform: translateY(0);
    background-color: #1a1917;
}

/* Responsive adjustments for modals */
@media (max-width: 480px) {
    .upload-modal[b-zhzbek6yek],
    .message-modal[b-zhzbek6yek] {
        padding: 20px;
        max-width: 280px;
    }

    .upload-message[b-zhzbek6yek],
    .message-text[b-zhzbek6yek] {
        font-size: 14px;
    }

    .message-icon[b-zhzbek6yek] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Add Introduction Video Button */
.intro-video-button-container[b-zhzbek6yek] {
    position: fixed;
    bottom: 110px; /* Increased margin above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 25px;
    z-index: 5;
}

.intro-video-button[b-zhzbek6yek] {
    width: 100%;
    height: 44px;
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-video-button:hover[b-zhzbek6yek] {
    background-color: #2a2825;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(32, 31, 29, 0.3);
}

.intro-video-button:active[b-zhzbek6yek] {
    transform: translateY(0);
    background-color: #1a1917;
}

/* Responsive adjustments for the button */
@media (max-width: 480px) {
    .intro-video-button-container[b-zhzbek6yek] {
        padding: 0 15px;
        bottom: 110px; /* Increased margin for mobile */
    }

    .intro-video-button[b-zhzbek6yek] {
        font-size: 14px;
        height: 40px;
    }
}

@media (max-width: 360px) {
    .intro-video-button-container[b-zhzbek6yek] {
        padding: 0 10px;
        bottom: 85px; /* Increased margin for small screens */
    }

    .intro-video-button[b-zhzbek6yek] {
        font-size: 13px;
        height: 38px;
    }
}
/* /Pages/PortfolioFolder.razor.rz.scp.css */
/* Portfolio Container */
.portfolio-container[b-e780w4gzen] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
}

/* On screens smaller than 402px, ensure container fills full width */
@media (max-width: 401px) {
    .portfolio-container[b-e780w4gzen] {
        max-width: 100%;
    }
}

/* Loading and Error States */
.loading-container[b-e780w4gzen] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-e780w4gzen] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-e780w4gzen 1s linear infinite;
}

.loading-container p[b-e780w4gzen] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

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

/* Header */
.portfolio-header[b-e780w4gzen] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

@media (max-width: 401px) {
    .portfolio-header[b-e780w4gzen] {
        max-width: 100%;
    }
}

.header-actions[b-e780w4gzen] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}

.add-media-button[b-e780w4gzen] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.add-media-button:hover[b-e780w4gzen] {
    opacity: 0.7;
}

.add-media-button img[b-e780w4gzen] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-back[b-e780w4gzen] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-e780w4gzen] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-e780w4gzen] {
    opacity: 0.7;
}

.back-button img[b-e780w4gzen] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-folder-info[b-e780w4gzen] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.folder-title[b-e780w4gzen] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    text-transform: capitalize;
}

/* Selection Button Container */
.selection-button-container[b-e780w4gzen] {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 999;
}

.selection-action-button[b-e780w4gzen] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.selection-action-button:hover[b-e780w4gzen] {
    background-color: #3A3937;
}

.selection-action-button:active[b-e780w4gzen] {
    background-color: #1A1917;
}

.delete-folder-button[b-e780w4gzen] {
    background-color: #DC3545;
}

.delete-folder-button:hover[b-e780w4gzen] {
    background-color: #C82333;
}

.delete-folder-button:active[b-e780w4gzen] {
    background-color: #BD2130;
}

.selection-buttons-group[b-e780w4gzen] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.selection-buttons-group .selection-action-button[b-e780w4gzen] {
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
}

.set-thumbnail-button[b-e780w4gzen] {
    background-color: #A6895A;
}

.set-thumbnail-button:hover[b-e780w4gzen] {
    background-color: #CEB185;
}

.set-thumbnail-button:active[b-e780w4gzen] {
    background-color: #B89A6F;
}

.cancel-button[b-e780w4gzen] {
    background-color: #484F54;
}

.cancel-button:hover[b-e780w4gzen] {
    background-color: #6C757D;
}

.cancel-button:active[b-e780w4gzen] {
    background-color: #5A6268;
}

/* Portfolio Content */
.portfolio-content[b-e780w4gzen] {
    flex: 1;
    padding: 27px 25px 180px 25px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.portfolio-content.has-selection-buttons[b-e780w4gzen] {
    padding-bottom: 240px;
}

.portfolio-content[b-e780w4gzen]::-webkit-scrollbar {
    display: none;
}

/* Portfolio Grid */
.portfolio-grid[b-e780w4gzen] {
    display: grid;
    grid-template-columns: 196px 196px;
    gap: 10px 10px;
    max-width: 100%;
    min-height: min-content;
    justify-content: center;
}

/* Portfolio Image Container */
.portfolio-image-container[b-e780w4gzen] {
    width: 196px;
    height: 196px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f0f0f0;
}

.portfolio-image-container.selected[b-e780w4gzen] {
    border: 3px solid #CEB185;
    transform: scale(0.98);
}

.portfolio-image-container:hover[b-e780w4gzen] {
    transform: scale(1.02);
}

.portfolio-image-container.selected:hover[b-e780w4gzen] {
    transform: scale(1.0);
}

/* Portfolio Images */
.portfolio-image[b-e780w4gzen] {
    width: 196px;
    height: 196px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    display: block;
    z-index: 1;
    position: relative;
    background-color: #e0e0e0;
}

.portfolio-image-container:has(.portfolio-image)[b-e780w4gzen] {
    background-color: transparent;
}

/* Image Placeholder */
.image-placeholder[b-e780w4gzen] {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.image-loading[b-e780w4gzen] {
    font-size: 13px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Image Overlay */
.image-overlay[b-e780w4gzen] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: auto;
    height: auto;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    opacity: 1;
    transition: opacity 0.2s ease;
    border-radius: 8px;
    pointer-events: auto;
    z-index: 10;
}

.delete-image-btn[b-e780w4gzen] {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    z-index: 20;
    position: relative;
}

.delete-image-btn:hover[b-e780w4gzen] {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.delete-image-btn:active[b-e780w4gzen] {
    transform: scale(0.95);
}

.delete-image-btn svg[b-e780w4gzen] {
    width: 14px;
    height: 14px;
}

/* Selection Indicators */
.selection-indicator[b-e780w4gzen] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 15;
}

.selection-circle[b-e780w4gzen] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.selection-check[b-e780w4gzen] {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #CEB185;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Upload Overlay */
.upload-overlay[b-e780w4gzen] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Delete Confirmation Modal */
.modal-overlay[b-e780w4gzen] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 20px;
}

.modal-container[b-e780w4gzen] {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-e780w4gzen 0.3s ease-out;
}

@keyframes modalSlideIn-b-e780w4gzen {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header[b-e780w4gzen] {
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #E8E5E0;
}

.modal-title[b-e780w4gzen] {
    margin: 0 0 16px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #201F1D;
    text-align: center;
}

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

.modal-message[b-e780w4gzen] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
    text-align: center;
}

.modal-footer[b-e780w4gzen] {
    padding: 0 24px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn[b-e780w4gzen] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.modal-btn-cancel[b-e780w4gzen] {
    background: #F5F5F5;
    color: #201F1D;
    border: 1px solid #E8E5E0;
}

.modal-btn-cancel:hover[b-e780w4gzen] {
    background: #E8E5E0;
    transform: translateY(-1px);
}

.modal-btn-cancel:active[b-e780w4gzen] {
    transform: translateY(0);
}

.modal-btn-delete[b-e780w4gzen] {
    background: #DC3545;
    color: #FFFFFF;
}

.modal-btn-delete:hover[b-e780w4gzen] {
    background: #C82333;
    transform: translateY(-1px);
}

.modal-btn-delete:active[b-e780w4gzen] {
    transform: translateY(0);
}

.upload-progress[b-e780w4gzen] {
    background: #FFFFFF;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.upload-spinner[b-e780w4gzen] {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-e780w4gzen 1s linear infinite;
    margin-bottom: 15px;
}

.upload-progress p[b-e780w4gzen] {
    margin: 0;
    font-size: 16px;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Responsive Design */
@media (max-width: 480px) {
    .portfolio-content[b-e780w4gzen] {
        padding: 20px 15px 160px 15px;
    }

    .portfolio-content.has-selection-buttons[b-e780w4gzen] {
        padding-bottom: 220px;
    }

    .portfolio-grid[b-e780w4gzen] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
    }

    .portfolio-image-container[b-e780w4gzen] {
        width: 100%;
        height: 181px;
    }

    .folder-title[b-e780w4gzen] {
        font-size: 16px;
    }

    .delete-image-btn[b-e780w4gzen] {
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.7);
    }

    .delete-image-btn svg[b-e780w4gzen] {
        width: 16px;
        height: 16px;
    }

    .modal-container[b-e780w4gzen] {
        max-width: 350px;
        margin: 0 10px;
    }

    .modal-header[b-e780w4gzen] {
        padding: 20px 20px 0 20px;
    }

    .modal-title[b-e780w4gzen] {
        font-size: 18px;
    }

    .modal-body[b-e780w4gzen] {
        padding: 20px;
    }

    .modal-message[b-e780w4gzen] {
        font-size: 15px;
    }

    .modal-footer[b-e780w4gzen] {
        padding: 0 20px 20px 20px;
        flex-direction: column;
        gap: 8px;
    }

    .modal-btn[b-e780w4gzen] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }

    .selection-circle[b-e780w4gzen],
    .selection-check[b-e780w4gzen] {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .selection-indicator[b-e780w4gzen] {
        top: 6px;
        left: 6px;
    }

    .selection-button-container[b-e780w4gzen] {
        padding: 0 20px;
    }

    .selection-action-button[b-e780w4gzen] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .portfolio-content[b-e780w4gzen] {
        padding: 15px 10px 160px 10px;
    }

    .portfolio-grid[b-e780w4gzen] {
        gap: 6px 6px;
        row-gap: 50px;
    }

    .folder-title[b-e780w4gzen] {
        font-size: 14px;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .portfolio-image[b-e780w4gzen] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* Upload Modal Styles */
.upload-modal-overlay[b-e780w4gzen] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-modal[b-e780w4gzen] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 300px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.upload-content[b-e780w4gzen] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.upload-progress-bar-container[b-e780w4gzen] {
    width: 100%;
    height: 8px;
    background-color: #E8E5E0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.upload-progress-bar[b-e780w4gzen] {
    height: 100%;
    background-color: #CEB185;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Message Modal Styles */
.message-modal-overlay[b-e780w4gzen] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.message-modal[b-e780w4gzen] {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.message-content[b-e780w4gzen] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.message-icon[b-e780w4gzen] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

.message-icon.success[b-e780w4gzen] {
    background-color: #4CAF50;
}

.message-icon.error[b-e780w4gzen] {
    background-color: #F44336;
}

.message-text[b-e780w4gzen] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
    margin: 0;
    line-height: 1.4;
}

.message-button[b-e780w4gzen] {
    background-color: #201F1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.message-button:hover[b-e780w4gzen] {
    background-color: #2a2825;
    transform: translateY(-1px);
}

.message-button:active[b-e780w4gzen] {
    transform: translateY(0);
    background-color: #1a1917;
}

@media (max-width: 480px) {
    .upload-modal[b-e780w4gzen],
    .message-modal[b-e780w4gzen] {
        padding: 20px;
        max-width: 280px;
    }

    .upload-message[b-e780w4gzen],
    .message-text[b-e780w4gzen] {
        font-size: 14px;
    }

    .message-icon[b-e780w4gzen] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Image Cropper Modal */
.cropper-modal-overlay[b-e780w4gzen] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-e780w4gzen] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-e780w4gzen 0.3s ease-out;
}

@media (max-width: 768px) {
    .cropper-modal-overlay[b-e780w4gzen] {
        padding: 10px;
    }

    .cropper-modal-container[b-e780w4gzen] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-e780w4gzen] {
        padding: 5px;
    }

    .cropper-modal-container[b-e780w4gzen] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/Search.razor.rz.scp.css */
/* Search Page Styles */
.search-container[b-f8j7q7hnrd] {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.search-container[b-f8j7q7hnrd]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header Styles */
.search-header[b-f8j7q7hnrd] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 20px 0 20px;
    z-index: 10;
}

.header-logo[b-f8j7q7hnrd] {
    position: absolute;
    left: 20px;
    top: 63px;
    height: 23px;
    width: 145px;
}

.header-logo img[b-f8j7q7hnrd] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-notifications[b-f8j7q7hnrd] {
    position: absolute;
    right: 20px;
    top: 56px;
    width: 40px;
    height: 40px;
}

.notification-icon[b-f8j7q7hnrd] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon img[b-f8j7q7hnrd] {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.notification-badge[b-f8j7q7hnrd] {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 20px;
    height: 20px;
    background-color: #CEB185;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-badge span[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1;
}

/* Search Bar Styles */
.search-bar-container[b-f8j7q7hnrd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    margin-top: calc(80px + env(safe-area-inset-top, 0px));
}

.search-input-container[b-f8j7q7hnrd] {
    position: relative;
    flex: 1;
    height: 44px;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 303px;
}

.search-icon[b-f8j7q7hnrd] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-f8j7q7hnrd] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.search-input[b-f8j7q7hnrd] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    line-height: 1.5;
}

.search-input[b-f8j7q7hnrd]::placeholder {
    color: #E8E5E0;
}

.filter-button[b-f8j7q7hnrd] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.filter-button-circle[b-f8j7q7hnrd] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #E8E5E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-button:hover .filter-button-circle[b-f8j7q7hnrd] {
    background-color: #E0D2B8;
}

.filter-button-circle img[b-f8j7q7hnrd] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Search Results Styles */
.search-results[b-f8j7q7hnrd] {
    padding: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    min-height: 400px;
}

.model-card[b-f8j7q7hnrd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.model-card:hover[b-f8j7q7hnrd] {
    transform: translateY(-2px);
}

.model-image-container[b-f8j7q7hnrd] {
    position: relative;
    border-radius: 8px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.model-image[b-f8j7q7hnrd] {
    border-radius: 8px;
}

.model-info-grid[b-f8j7q7hnrd] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
    width: 100%;
    align-items: center;
    padding: 0 25px;
    overflow: hidden;
    min-width: 0;
}

.model-name[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 4vw, 20px);
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.rating-stars[b-f8j7q7hnrd] {
    display: flex;
    gap: 2px;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

.model-location[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 4vw, 20px);
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.model-experience[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: start;
}

.rating-stars img[b-f8j7q7hnrd] {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Loading, Error, and No Models States */
.loading-container[b-f8j7q7hnrd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.loading-spinner[b-f8j7q7hnrd] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E5E0;
    border-top: 3px solid #CEB185;
    border-radius: 50%;
    animation: spin-b-f8j7q7hnrd 1s linear infinite;
}

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

.loading-container p[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.error-container[b-f8j7q7hnrd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    gap: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.error-container p[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
    text-align: center;
}

.retry-button[b-f8j7q7hnrd] {
    background-color: #CEB185;
    color: #201F1D;
    border: none;
    border-radius: 24px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover[b-f8j7q7hnrd] {
    background-color: #E0D2B8;
}

.no-models-container[b-f8j7q7hnrd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
}

.no-models-container p[b-f8j7q7hnrd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
    text-align: center;
}


/* Desktop responsive adjustments */
@media (min-width: 769px) {
    .search-container[b-f8j7q7hnrd] {
        max-width: 402px;
        margin: 0 auto;
    }

    .search-results[b-f8j7q7hnrd] {
        padding: 20px 25px 0 25px;
    }

    .model-info-grid[b-f8j7q7hnrd] {
        padding: 0;
    }
}

/* Responsive adjustments */
@media (max-width: 402px) {
    .search-container[b-f8j7q7hnrd] {
        max-width: 100%;
    }

    .search-bar-container[b-f8j7q7hnrd] {
        padding: 10px 20px;
    }
}

@media (max-width: 360px) {
    .search-header[b-f8j7q7hnrd] {
        padding: 0 15px;
    }

    .header-logo[b-f8j7q7hnrd] {
        left: 15px;
        width: 150px;
    }

    .header-notifications[b-f8j7q7hnrd] {
        right: 15px;
    }

    .search-bar-container[b-f8j7q7hnrd] {
        padding: 10px 15px;
    }
}
/* /Pages/Settings.razor.rz.scp.css */
/* Settings Screen Styles */
.settings-screen[b-kql6c03vx8] {
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 402px;
    margin: 0 auto;
}

.settings-header[b-kql6c03vx8] {
    position: relative;
    background-color: var(--color-white);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.settings-header .back-button[b-kql6c03vx8] {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.settings-header .back-button:hover[b-kql6c03vx8] {
    opacity: 0.7;
}

.settings-header .back-button img[b-kql6c03vx8] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.settings-title[b-kql6c03vx8] {
    font-family: var(--font-montserrat-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title);
    line-height: var(--line-height);
    color: var(--color-black);
    text-align: center;
    margin: 0;
}

.user-profile-section[b-kql6c03vx8] {
    padding: 44px 0 33px 0;
    text-align: center;
    background-color: var(--color-white);
}

.user-name[b-kql6c03vx8] {
    font-family: var(--font-montserrat-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title);
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0 0 16px 0;
}

.user-role[b-kql6c03vx8] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0;
}

.settings-content[b-kql6c03vx8] {
    flex: 1;
    padding: 0 25px;
    padding-bottom: 30px;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.settings-content[b-kql6c03vx8]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

.settings-section[b-kql6c03vx8] {
    margin-bottom: 40px;
}

.section-title[b-kql6c03vx8] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--color-black);
    margin: 0 0 18px 0;
}

.settings-card[b-kql6c03vx8] {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    height: 160px;
    width: 100%;
    overflow: hidden;
}

.setting-item[b-kql6c03vx8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    height: 80px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.setting-item:hover[b-kql6c03vx8] {
    background-color: #f8f8f8;
}

.setting-item:not(:last-child)[b-kql6c03vx8] {
    border-bottom: 1px solid var(--color-border);
}

.setting-info[b-kql6c03vx8] {
    flex: 1;
}

.setting-label[b-kql6c03vx8] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--color-black);
    margin-bottom: 8px;
}

.setting-description[b-kql6c03vx8] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
}

.setting-arrow[b-kql6c03vx8] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
}

.setting-arrow img[b-kql6c03vx8] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logout-section[b-kql6c03vx8] {
    margin: 46px 0 17px 0;
    display: flex;
    justify-content: center;
}

.logout-button[b-kql6c03vx8] {
    width: 290px;
    height: 44px;
    background-color: var(--color-black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logout-button:hover[b-kql6c03vx8] {
    background-color: #2a2927;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.logout-text[b-kql6c03vx8] {
    font-family: var(--font-montserrat-medium);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-button);
    line-height: var(--line-height);
    color: var(--color-white);
    text-align: center;
}

.delete-account-section[b-kql6c03vx8] {
    text-align: center;
    margin-bottom: 30px;
}

.delete-account-link[b-kql6c03vx8] {
    font-family: var(--font-montserrat-regular);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
    line-height: var(--line-height);
    color: #201f1d;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.delete-account-link:hover[b-kql6c03vx8] {
    opacity: 0.7;
}
/* /Pages/StaffEventDetails.razor.rz.scp.css */
/* Staff Event Details Container */
.staff-event-details-container[b-i2y5hltakg] {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.staff-event-details-container[b-i2y5hltakg]::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Header */
.event-header[b-i2y5hltakg] {
    background-color: #ffffff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-content[b-i2y5hltakg] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-i2y5hltakg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.back-button:hover[b-i2y5hltakg] {
    background-color: rgba(0, 0, 0, 0.05);
}

.back-button img[b-i2y5hltakg] {
    width: 24px;
    height: 24px;
}

.event-title[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 211px;
}

/* Event Content */
.event-content[b-i2y5hltakg] {
    flex: 1;
    padding: 0 0 180px 0; /* Add bottom padding to prevent content from being hidden behind fixed button */
    position: relative;
}

/* Event Main Info */
.event-main-info[b-i2y5hltakg] {
    display: flex;
    gap: 15px;
    margin: 20px 25px 30px 25px;
    align-items: flex-start;
}

.event-image[b-i2y5hltakg] {
    width: 60px;
    height: 53px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.placeholder-image[b-i2y5hltakg] {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.placeholder-image img[b-i2y5hltakg] {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.event-basic-info[b-i2y5hltakg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
    position: relative;
    width: 100%;
}

.event-name[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0 0 8px 0;
    flex: 1;
}

.favorite-button[b-i2y5hltakg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    position: absolute;
    right: 0;
    top: 0;
}

.favorite-button:hover[b-i2y5hltakg] {
    background-color: rgba(0, 0, 0, 0.05);
}

.favorite-button img[b-i2y5hltakg] {
    width: 24px;
    height: 24px;
}

/* Event Details Grid */
.event-details-grid[b-i2y5hltakg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 25px 40px 25px;
}

.detail-section[b-i2y5hltakg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-label[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

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

.detail-content p[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    margin: 0;
}

/* Vacancies Section */
.vacancies-section[b-i2y5hltakg] {
    margin: 0 25px 40px 25px;
}

/* Jobs Accordion */
.jobs-accordion[b-i2y5hltakg] {
    margin-top: 8px;
}

.accordion-item[b-i2y5hltakg] {
    background-color: #ffffff;
    border: 1px solid #e8e5e0;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.accordion-header[b-i2y5hltakg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid transparent;
}

.accordion-header:hover[b-i2y5hltakg] {
    background-color: #f8f7f5;
}

.accordion-title[b-i2y5hltakg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.accordion-title h4[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.job-count[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #ceb185;
}

.accordion-icon[b-i2y5hltakg] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.accordion-icon img[b-i2y5hltakg] {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.accordion-icon.expanded img[b-i2y5hltakg] {
    transform: rotate(180deg);
}

.accordion-content[b-i2y5hltakg] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-content.expanded[b-i2y5hltakg] {
    max-height: 1000px; /* Large enough to accommodate content */
}

/* Job Cards */
.job-card[b-i2y5hltakg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    gap: 16px;
}

.job-card:last-child[b-i2y5hltakg] {
    border-bottom: none;
}

.job-info[b-i2y5hltakg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-type[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #201f1d;
    margin: 0;
}

.job-description[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin: 0;
}

.job-details[b-i2y5hltakg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.job-detail[b-i2y5hltakg] {
    display: flex;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

.job-detail .detail-label[b-i2y5hltakg] {
    color: #666;
    min-width: 80px;
}

.job-detail span:not(.detail-label)[b-i2y5hltakg] {
    color: #201f1d;
}

.view-job-button[b-i2y5hltakg] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ceb185;
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.view-job-button:hover[b-i2y5hltakg] {
    color: #b8a06a;
    background-color: rgba(206, 177, 133, 0.1);
}

/* No Jobs State */
.no-jobs[b-i2y5hltakg] {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f7f5;
    border-radius: 8px;
    margin-top: 8px;
}

.no-jobs p[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Cancelled Banner */
.event-cancelled-banner[b-i2y5hltakg] {
    margin: 0 25px 20px 25px;
    padding: 14px 18px;
    border-radius: 8px;
    background-color: #fdecea;
    border: 1px solid #f5c2c7;
    color: #842029;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

/* Loading State */
.loading-state[b-i2y5hltakg] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

/* Error State */
.error-state[b-i2y5hltakg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
}

.error-state p[b-i2y5hltakg] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #201f1d;
    margin: 0;
}

.back-to-events[b-i2y5hltakg] {
    background-color: #ceb185;
    color: #201f1d;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-i2y5hltakg] {
    background-color: #b8a06a;
}

/* Responsive Design */
@media (max-width: 480px) {
    .event-details-grid[b-i2y5hltakg] {
        grid-template-columns: 1fr;
        gap: 20px; /* Increased gap */
        margin: 0 25px 40px 25px; /* Added margin to prevent squashing */
    }

    .event-main-info[b-i2y5hltakg] {
        flex-direction: column;
        gap: 15px; /* Increased gap to prevent squashing */
        margin: 25px 25px 35px 25px; /* Increased margins */
    }

    .event-image[b-i2y5hltakg] {
        width: 100%;
        height: 120px;
    }

    .vacancies-section[b-i2y5hltakg] {
        margin: 0 25px 40px 25px;
    }
}

/* Extra small screens - ensure button is never clipped */
@media (max-width: 360px) {
    .event-main-info[b-i2y5hltakg] {
        gap: 20px; /* Even more gap for very small screens */
        margin: 30px 25px 40px 25px; /* Increased margins */
    }

    .vacancies-section[b-i2y5hltakg] {
        margin: 0 20px 40px 20px;
    }
}

/* /Pages/StaffSignup.razor.rz.scp.css */
/* StaffSignup specific styles to fix Safari URL bar overlap and Chrome mobile bottom controls */
.staff-signup-screen .form-container[b-8nwpgxcggq] {
    padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px)); /* Space for bottom elements + safe area */
}

/* Profile image styles */
.profile-image[b-8nwpgxcggq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

.photo-container[b-8nwpgxcggq] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.photo-container:hover[b-8nwpgxcggq] {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Mobile-specific fixes for portrait orientation */
@media (max-width: 768px) and (orientation: portrait) {
    .staff-signup-screen .form-container[b-8nwpgxcggq] {
        padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px));
    }
}

/* Extra padding for mobile devices with browser navigation bars */
@media (max-width: 480px) {
    .staff-signup-screen .form-container[b-8nwpgxcggq] {
        padding-bottom: calc(250px + env(safe-area-inset-bottom, 0px));
    }

    .staff-signup-screen .login-link[b-8nwpgxcggq] {
        margin-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    }
}

/* Terms and Conditions Styles */
.staff-signup-screen .terms-container[b-8nwpgxcggq] {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start !important;
}

.staff-signup-screen .checkbox-container[b-8nwpgxcggq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    justify-content: flex-start;
    width: 100%;
}

.staff-signup-screen .checkbox[b-8nwpgxcggq] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.staff-signup-screen .terms-text[b-8nwpgxcggq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    cursor: pointer;
    white-space: nowrap;
    flex: 1;
    text-align: left;
}

.staff-signup-screen .link[b-8nwpgxcggq] {
    color: #CEB185;
    text-decoration: underline;
}

/* Mobile responsive adjustments for terms text */
@media (max-width: 480px) {
    .staff-signup-screen .terms-text[b-8nwpgxcggq] {
        font-size: 12px;
        white-space: nowrap;
        line-height: 1.4;
    }

    .staff-signup-screen .checkbox-container[b-8nwpgxcggq] {
        align-items: center;
        gap: 10px;
    }
}

@media (max-width: 360px) {
    .staff-signup-screen .terms-text[b-8nwpgxcggq] {
        font-size: 11px;
        white-space: nowrap;
    }

    .staff-signup-screen .login-link[b-8nwpgxcggq] {
        margin-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

/* StaffSignup Screen Styles */
.staff-signup-screen[b-8nwpgxcggq] {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 40px;
}

.staff-signup-screen .header[b-8nwpgxcggq] {
    background-color: #FFFFFF;
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 21px;
    position: relative;
    border-bottom: none !important;
    flex-shrink: 0;
}

.staff-signup-screen .back-button[b-8nwpgxcggq] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    position: absolute;
    left: 21px;
}

.staff-signup-screen .back-button:hover[b-8nwpgxcggq] {
    opacity: 0.7;
}

.staff-signup-screen .back-button img[b-8nwpgxcggq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.staff-signup-screen .page-title[b-8nwpgxcggq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 163px;
}

.page-title[b-8nwpgxcggq] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 23px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    width: 163px;
    margin: 0;
}

.staff-signup-screen .form-container[b-8nwpgxcggq] {
    flex: 1;
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 0px;
}

/* Form Group Styles */
.staff-signup-screen .form-group[b-8nwpgxcggq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.staff-signup-screen .form-label[b-8nwpgxcggq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
}

/* Form Input Styles */
.staff-signup-screen .form-input[b-8nwpgxcggq] {
    height: 44px;
    padding: 0 16px;
    border: 1px solid #E8E5E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    outline: none;
    transition: border-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.staff-signup-screen .form-input:focus[b-8nwpgxcggq] {
    border-color: #CEB185;
}

.staff-signup-screen .form-input[b-8nwpgxcggq]::placeholder {
    color: #999999;
}

/* Password Input Container */
.staff-signup-screen .password-input-container[b-8nwpgxcggq] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.staff-signup-screen .password-input-container .form-input[b-8nwpgxcggq] {
    padding-right: 50px;
}

.staff-signup-screen .visibility-toggle[b-8nwpgxcggq] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.staff-signup-screen .visibility-toggle:hover[b-8nwpgxcggq] {
    opacity: 0.7;
}

.staff-signup-screen .visibility-toggle img[b-8nwpgxcggq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.staff-signup-screen .password-hint[b-8nwpgxcggq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    margin-top: 4px;
}

/* Error text styling */
.staff-signup-screen .error-text[b-8nwpgxcggq] {
    color: #c33;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Error message styles */
.staff-signup-screen .error-message[b-8nwpgxcggq] {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

/* Sign up button styles */
.staff-signup-screen .signup-button[b-8nwpgxcggq] {
    width: 100%;
    height: 60px;
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-top: 10px;
    padding: 8px 0;
}

.staff-signup-screen .signup-button:hover:not(.disabled)[b-8nwpgxcggq] {
    background-color: #B89A6B;
}

.staff-signup-screen .signup-button.disabled[b-8nwpgxcggq] {
    background-color: #E1E1E1;
    cursor: not-allowed;
}

.staff-signup-screen .button-text[b-8nwpgxcggq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
}

.staff-signup-screen .signup-button.disabled .button-text[b-8nwpgxcggq] {
    color: #AFAFAF;
}

/* Login link styles */
.staff-signup-screen .login-link[b-8nwpgxcggq] {
    text-align: center;
    margin-top: 20px;
}

.staff-signup-screen .login-link p[b-8nwpgxcggq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #201F1D;
    margin: 0;
}

.staff-signup-screen .login-link .link[b-8nwpgxcggq] {
    color: #CEB185;
    text-decoration: underline;
    cursor: pointer;
}

/* Profile photo section styles */
.staff-signup-screen .profile-photo-section[b-8nwpgxcggq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.staff-signup-screen .photo-background[b-8nwpgxcggq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.staff-signup-screen .person-icon[b-8nwpgxcggq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.staff-signup-screen .add-photo-text[b-8nwpgxcggq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #CEB185;
    text-decoration: underline;
    cursor: pointer;
}

.staff-signup-screen .required-indicator[b-8nwpgxcggq] {
    color: #c33;
    font-weight: 500;
    margin-left: 2px;
    text-decoration: none !important;
}

.staff-signup-screen .add-photo-text .required-indicator[b-8nwpgxcggq] {
    text-decoration: none !important;
}

.staff-signup-screen .photo-hint[b-8nwpgxcggq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    margin-top: 4px;
    text-align: center;
    font-style: italic;
}

.staff-signup-screen .button-hint[b-8nwpgxcggq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #c33;
    margin-top: 10px;
    margin-bottom: 4px;
    text-align: center;
}

/* Cropper Modal Styles */
.cropper-modal-overlay[b-8nwpgxcggq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cropper-modal-container[b-8nwpgxcggq] {
    background: #FFFFFF;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-8nwpgxcggq 0.3s ease-out;
}

@keyframes modalSlideIn-b-8nwpgxcggq {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive cropper modal */
@media (max-width: 768px) {
    .cropper-modal-overlay[b-8nwpgxcggq] {
        padding: 10px;
    }

    .cropper-modal-container[b-8nwpgxcggq] {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .cropper-modal-overlay[b-8nwpgxcggq] {
        padding: 5px;
    }

    .cropper-modal-container[b-8nwpgxcggq] {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 8px;
    }
}
/* /Pages/StaffViewEventJob.razor.rz.scp.css */
/* Staff View Event Job Page Styles */
.staff-view-event-job-container[b-7lhaahn14j] {
    background-color: #FFFFFF;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Header Styles */
.job-header[b-7lhaahn14j] {
    background-color: #FFFFFF;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    position: relative;
    width: 100%;
}

.header-content[b-7lhaahn14j] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 18px;
    position: relative;
}

.back-button[b-7lhaahn14j] {
    background: none;
    border: none;
    cursor: pointer;
    height: 40px;
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button img[b-7lhaahn14j] {
    width: 100%;
    height: 100%;
}

.job-title[b-7lhaahn14j] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #201F1D;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 223px;
}

/* Job Content Styles */
.job-content[b-7lhaahn14j] {
    padding: 20px 25px;
    min-height: calc(100vh - 106px); /* Full height minus header */
}

.job-section[b-7lhaahn14j] {
    margin-bottom: 25px;
}

.section-label[b-7lhaahn14j] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 8px 0;
}

.section-content[b-7lhaahn14j] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #CEB185;
    margin: 0;
    word-wrap: break-word;
}

/* Age and Height Row */
.age-height-row[b-7lhaahn14j] {
    display: flex;
    gap: 20px;
}

.age-section[b-7lhaahn14j],
.height-section[b-7lhaahn14j] {
    flex: 1;
}

/* Apply Button Styles */
.apply-button-container[b-7lhaahn14j] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation (80px nav + 20px gap) */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 999;
    pointer-events: none;
}

.apply-button-container button[b-7lhaahn14j] {
    pointer-events: auto;
}

.apply-button[b-7lhaahn14j] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: block;
    transition: background-color 0.2s ease;
}

.apply-button:hover[b-7lhaahn14j] {
    background-color: #3A3937;
}

.apply-button:active[b-7lhaahn14j] {
    background-color: #1A1917;
}

/* Loading and Error States */
.loading-state[b-7lhaahn14j],
.error-state[b-7lhaahn14j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state p[b-7lhaahn14j],
.error-state p[b-7lhaahn14j] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #201F1D;
    margin: 0 0 20px 0;
}

.back-to-events[b-7lhaahn14j] {
    background-color: #CEB185;
    border: none;
    border-radius: 8px;
    color: #201F1D;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    padding: 12px 24px;
    transition: background-color 0.2s ease;
}

.back-to-events:hover[b-7lhaahn14j] {
    background-color: #B8A070;
}

/* Responsive Design */
@media (max-width: 480px) {
    .job-content[b-7lhaahn14j] {
        padding: 15px 20px;
        padding-bottom: 300px; /* Even more space on mobile for better scrolling experience */
    }

    .apply-button-container[b-7lhaahn14j] {
        padding: 0 20px;
        bottom: 100px; /* Keep button above bottom nav */
    }

    .age-height-row[b-7lhaahn14j] {
        flex-direction: column;
        gap: 15px;
    }
}

/* Large screens - center content */
@media (min-width: 768px) {
    .job-content[b-7lhaahn14j] {
        max-width: 600px;
        margin: 0 auto;
        padding: 40px 25px;
        padding-bottom: 220px; /* Extra bottom padding for fixed button on larger screens */
    }

    .apply-button-container[b-7lhaahn14j] {
        max-width: 600px;
        margin: 0 auto;
        padding: 0 25px;
    }
}
/* /Pages/TagABrand.razor.rz.scp.css */
/* Tag Brand Container */
.tag-brand-container[b-uebec6mczh] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.tag-brand-header[b-uebec6mczh] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-back[b-uebec6mczh] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-uebec6mczh] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-uebec6mczh] {
    opacity: 0.7;
}

.back-button img[b-uebec6mczh] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-uebec6mczh] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.page-title[b-uebec6mczh] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}


/* Search Section */
.search-section[b-uebec6mczh] {
    padding: 20px 25px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-container[b-uebec6mczh] {
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    height: 44px;
    width: 284px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.search-icon[b-uebec6mczh] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-uebec6mczh] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-input[b-uebec6mczh] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    padding: 0;
}

.search-input[b-uebec6mczh]::placeholder {
    color: #E8E5E0;
}

/* Brand List */
.brand-list[b-uebec6mczh] {
    flex: 1;
    padding: 0 25px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 120px; /* Space for done button */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.brand-list[b-uebec6mczh]::-webkit-scrollbar {
    display: none;
}

.brand-item[b-uebec6mczh] {
    display: flex;
    align-items: center;
    padding: 16px 16px 16px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.brand-item:hover[b-uebec6mczh] {
    background-color: #f8f8f8;
}

.brand-item.selected[b-uebec6mczh] {
    background-color: #F5F1E8;
    border: 1px solid #CEB185;
    padding: 15px 15px 15px 15px; /* Slightly reduced to account for border */
    width: 100%;
    box-sizing: border-box;
}

.brand-avatar[b-uebec6mczh] {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    flex-shrink: 0;
}

.brand-avatar-image[b-uebec6mczh] {
    width: 100%;
    height: 100%;
    border-radius: 60px;
    object-fit: cover;
    object-position: 50% 50%;
}

.brand-avatar-placeholder[b-uebec6mczh] {
    width: 100%;
    height: 100%;
    border-radius: 60px;
    background-color: #E8E5E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-initial[b-uebec6mczh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
}

.brand-info[b-uebec6mczh] {
    flex: 1;
}

.brand-name[b-uebec6mczh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.no-results[b-uebec6mczh],
.no-brands[b-uebec6mczh],
.loading-state[b-uebec6mczh],
.error-state[b-uebec6mczh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    flex-direction: column;
}

.no-results p[b-uebec6mczh],
.no-brands p[b-uebec6mczh],
.loading-state p[b-uebec6mczh],
.error-state p[b-uebec6mczh] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0 0 16px 0;
}

.retry-button[b-uebec6mczh] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    height: 36px;
    padding: 0 16px;
    transition: background-color 0.2s ease;
}

.retry-button:hover[b-uebec6mczh] {
    background-color: #3A3937;
}

.retry-button:active[b-uebec6mczh] {
    background-color: #1A1917;
}

/* Done Button Container */
.done-button-container[b-uebec6mczh] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 1002;
}

.done-button[b-uebec6mczh] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.done-button:hover:not(:disabled)[b-uebec6mczh] {
    background-color: #3A3937;
}

.done-button:active:not(:disabled)[b-uebec6mczh] {
    background-color: #1A1917;
}

.done-button:disabled[b-uebec6mczh] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Desktop Design - Center brand items */
@media (min-width: 769px) {
    .brand-list[b-uebec6mczh] {
        align-items: center;
        max-width: 600px;
        margin: 0 auto;
    }

    .brand-item[b-uebec6mczh] {
        max-width: 400px;
    }
}

/* Responsive Design */
@media (max-width: 480px) {
    .search-section[b-uebec6mczh] {
        padding: 20px 15px;
        justify-content: center;
    }

    .search-container[b-uebec6mczh] {
        width: 100%;
        max-width: 284px;
    }

    .brand-list[b-uebec6mczh] {
        padding: 0 15px;
    }

    .page-title[b-uebec6mczh] {
        font-size: 18px;
    }

    .done-button-container[b-uebec6mczh] {
        padding: 0 20px;
    }

    .done-button[b-uebec6mczh] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .search-section[b-uebec6mczh] {
        padding: 15px 10px;
        justify-content: center;
    }

    .brand-list[b-uebec6mczh] {
        padding: 0 10px;
    }

    .page-title[b-uebec6mczh] {
        font-size: 16px;
    }
}

/* /Pages/TagAEvent.razor.rz.scp.css */
/* Tag Event Container */
.tag-event-container[b-ws2c29zatr] {
    background-color: #FFFFFF;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
}

/* Header */
.tag-event-header[b-ws2c29zatr] {
    position: relative;
    background-color: #FFFFFF;
    height: calc(106px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 10;
}

.header-back[b-ws2c29zatr] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.back-button[b-ws2c29zatr] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover[b-ws2c29zatr] {
    opacity: 0.7;
}

.back-button img[b-ws2c29zatr] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-title[b-ws2c29zatr] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.page-title[b-ws2c29zatr] {
    margin: 0;
    color: #201F1D;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}


/* Search Section */
.search-section[b-ws2c29zatr] {
    padding: 20px 25px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-container[b-ws2c29zatr] {
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #CEB185;
    border-radius: 24px;
    height: 44px;
    width: 284px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.search-icon[b-ws2c29zatr] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-icon img[b-ws2c29zatr] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-input[b-ws2c29zatr] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201F1D;
    padding: 0;
}

.search-input[b-ws2c29zatr]::placeholder {
    color: #E8E5E0;
}

/* Event List */
.event-list[b-ws2c29zatr] {
    flex: 1;
    padding: 0 25px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 120px; /* Space for done button */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.event-list[b-ws2c29zatr]::-webkit-scrollbar {
    display: none;
}

.event-item[b-ws2c29zatr] {
    display: flex;
    align-items: center;
    padding: 16px 16px 16px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.event-item:hover[b-ws2c29zatr] {
    background-color: #f8f8f8;
}

.event-item.selected[b-ws2c29zatr] {
    background-color: #F5F1E8;
    border: 1px solid #CEB185;
    padding: 15px 15px 15px 15px; /* Slightly reduced to account for border */
    width: 100%;
    box-sizing: border-box;
}

.event-avatar[b-ws2c29zatr] {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    flex-shrink: 0;
}

.event-avatar-image[b-ws2c29zatr] {
    width: 100%;
    height: 100%;
    border-radius: 60px;
    object-fit: cover;
    object-position: 50% 50%;
}

.event-avatar-placeholder[b-ws2c29zatr] {
    width: 100%;
    height: 100%;
    border-radius: 60px;
    background-color: #E8E5E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-initial[b-ws2c29zatr] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201F1D;
}

.event-info[b-ws2c29zatr] {
    flex: 1;
}

.event-name[b-ws2c29zatr] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #201F1D;
    margin: 0;
}

.no-results[b-ws2c29zatr],
.no-events[b-ws2c29zatr],
.loading-state[b-ws2c29zatr],
.error-state[b-ws2c29zatr] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    flex-direction: column;
}

.no-results p[b-ws2c29zatr],
.no-events p[b-ws2c29zatr],
.loading-state p[b-ws2c29zatr],
.error-state p[b-ws2c29zatr] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0 0 16px 0;
}

.retry-button[b-ws2c29zatr] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    height: 36px;
    padding: 0 16px;
    transition: background-color 0.2s ease;
}

.retry-button:hover[b-ws2c29zatr] {
    background-color: #3A3937;
}

.retry-button:active[b-ws2c29zatr] {
    background-color: #1A1917;
}

/* Done Button Container */
.done-button-container[b-ws2c29zatr] {
    position: fixed;
    bottom: 100px; /* Above bottom navigation */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 402px;
    padding: 0 56px;
    box-sizing: border-box;
    z-index: 1002;
}

.done-button[b-ws2c29zatr] {
    background-color: #201F1D;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    height: 44px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.done-button:hover:not(:disabled)[b-ws2c29zatr] {
    background-color: #3A3937;
}

.done-button:active:not(:disabled)[b-ws2c29zatr] {
    background-color: #1A1917;
}

.done-button:disabled[b-ws2c29zatr] {
    background-color: #CCCCCC;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Desktop Design - Center event items */
@media (min-width: 769px) {
    .event-list[b-ws2c29zatr] {
        align-items: center;
        max-width: 600px;
        margin: 0 auto;
    }

    .event-item[b-ws2c29zatr] {
        max-width: 400px;
    }
}

/* Responsive Design */
@media (max-width: 480px) {
    .search-section[b-ws2c29zatr] {
        padding: 20px 15px;
        justify-content: center;
    }

    .search-container[b-ws2c29zatr] {
        width: 100%;
        max-width: 284px;
    }

    .event-list[b-ws2c29zatr] {
        padding: 0 15px;
    }

    .page-title[b-ws2c29zatr] {
        font-size: 18px;
    }

    .done-button-container[b-ws2c29zatr] {
        padding: 0 20px;
    }

    .done-button[b-ws2c29zatr] {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .search-section[b-ws2c29zatr] {
        padding: 15px 10px;
        justify-content: center;
    }

    .event-list[b-ws2c29zatr] {
        padding: 0 10px;
    }

    .page-title[b-ws2c29zatr] {
        font-size: 16px;
    }
}