/* Google - fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');



/* ===== PLUGIN ISOLATION AND RESET ===== */
#hrs-app, #hrs-app * {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    font: inherit !important;
    vertical-align: baseline !important;
    text-decoration: none !important;
    outline: none !important;
}

body {
    font-family: "Inter Tight", sans-serif !important;
}

#hrs-app {
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important; */
    font-family: "Inter Tight", sans-serif !important;
    line-height: 1.5 !important;
    color: #333 !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.hrs-task-list {
    min-height: 500px !important;
}
/* Override WordPress theme container constraints - Mobile-like width */
#hrs-app {
max-width: 570px !important;
  margin: 0 auto !important;
  min-height: 100vh !important;
}

/* Reset WordPress theme interference */
#hrs-app a {
    color: inherit !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

#hrs-app button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit !important;
    color: inherit !important;
    cursor: pointer !important;
}

#hrs-app ul, #hrs-app li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#hrs-app h1, #hrs-app h2, #hrs-app h3, #hrs-app h4, #hrs-app h5, #hrs-app h6 {
    font-weight: inherit !important;
    font-size: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

#hrs-app p {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

#hrs-app input, #hrs-app select, #hrs-app textarea {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    outline: none !important;
}

#hrs-app img {
    max-width: 100% !important;
    height: auto !important;
    border: none !important;
}

/* ===== GENERAL STYLES ===== */
#hrs-app .hrs-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    min-height: 100vh !important;
    padding: 0 !important;
    position: relative !important;
}

#hrs-app .hrs-step {
    display: none !important;
    animation: fadeIn 0.3s ease-in !important;
    padding: 20px !important;
    min-height: 100vh !important;
    position: relative !important;
    background-image: url('../images/img/shape-bg.png') !important;
    background-size: 100% auto !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    max-width: 100% !important;
}

#hrs-app .hrs-step.active {
    display: block !important;
}

@keyframes fadeIn {
    from { 
        opacity: 0 !important; 
        transform: translateY(10px) !important; 
    }
    to { 
        opacity: 1 !important; 
        transform: translateY(0) !important; 
    }
}

/* ===== TYPOGRAPHY ===== */
#hrs-app h2 {
    color: #1a1a1a !important;
    font-size: 24px !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
}

#hrs-app h3 {
    color: #333 !important;
    font-size: 18px !important;
    margin-bottom: 10px !important;
    font-weight: 600 !important;
}

#hrs-app small {
    font-size: 12px !important;
    color: #666 !important;
}

/* ===== BUTTONS ===== */
#hrs-app .btn, #hrs-app button[type="button"] {
    width: 100% !important;
    padding: 12px 20px !important;
    border: none !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: ruby !important;
    text-decoration: none !important;
   
    font-family: inherit !important;
    height: 44px !important;
}



/* ===== FORM ELEMENTS ===== */
#hrs-app .input, #hrs-app input[type="text"], #hrs-app input[type="email"], #hrs-app input[type="tel"], #hrs-app input[type="number"], #hrs-app select, #hrs-app textarea {
    width: 100% !important;
    padding: 10px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: transparent !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

#hrs-app .input:valid, 
#hrs-app input[type="text"]:valid, 
#hrs-app input[type="tel"]:valid, 
#hrs-app input[type="email"]:valid,
#hrs-app input[type="number"]:valid, 
#hrs-app select:valid, 
#hrs-app textarea:valid {
    background-color: transparent !important;
}

#hrs-app .input:focus, #hrs-app input:focus, #hrs-app select:focus, #hrs-app textarea:focus {
    outline: none !important;
    border-color: #f39c12 !important;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1) !important;
}

#hrs-app .input::placeholder, #hrs-app input::placeholder, #hrs-app textarea::placeholder {
    color: #999 !important;
}

/* ===== SERVICE LIST STYLES ===== */
#hrs-app .link__item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 12px !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: #333 !important;
    position: relative !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
    background: white !important;
}

#hrs-app .link__item:hover {
    border-color: #9CABB3 !important;
    background-color: #0270AD !important;
    color: white !important;
    box-shadow: 0px 4px 16.6px 0px #45556687 !important;
}

#hrs-app .link__item:hover .box__span {
    background-color: #FFFFFF57 !important;
    border-color: transparent !important;
}

#hrs-app .link__item:hover .box__span img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(33deg) brightness(150%) contrast(200%) !important;
    transition: all 0.3s ease !important;
}

#hrs-app .link__item:hover i {
    color: white !important;
}

#hrs-app .link__item:hover p {
    color: white !important;
}

#hrs-app .link__item:hover small {
    color: rgba(255, 255, 255, 0.8) !important;
}

#hrs-app .box__span {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    border: 1px solid #EEEEEE !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

#hrs-app .box__span img {
    transition: all 0.3s ease !important;
    max-width: 24px !important;
    max-height: 24px !important;
}

#hrs-app .link__item .fa-angle-right {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    color: #999 !important;
}

#hrs-app .link__item p {
    margin: 0 !important;
    flex: 1 !important;
}

#hrs-app .link__item small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 12px !important;
    font-weight: normal !important;
}

/* ===== TAB STYLES ===== */
#hrs-app .flex.gap-1.items-center a {
    padding: 4px 8px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.3s ease !important;
}

#hrs-app .flex.gap-1.items-center a span {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    #hrs-app .hrs-container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    #hrs-app .hrs-step {
        padding: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #hrs-app h2 {
        font-size: 20px !important;
    }
}

/* Ensure full width on all screen sizes */
@media (min-width: 481px) {

    
    #hrs-app .hrs-step {
   
        padding: 20px !important;
    }
}

/* ===== MAINTENANCE LIST ===== */
#hrs-app .hrs-maintenance-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 80px !important;
}

#hrs-app .hrs-maintenance-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 8px 12px 8px 8px !important;
    background: white !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 2px solid #f0f0f0 !important;
}

#hrs-app .hrs-maintenance-item:hover {
    background: #f9f9f9 !important;
    border-color: #e0e0e0 !important;
}

/* #hrs-app .hrs-maintenance-item.selected {
    background: #e8f4fd !important;
    border-color: #0066cc !important;
} */

#hrs-app .hrs-maintenance-icon {
    font-size: 28px !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f5f5f5 !important;
    border-radius: 12px !important;
}

#hrs-app .hrs-maintenance-item.selected .hrs-maintenance-icon {
    background: #d4e9f7 !important;
}

#hrs-app .hrs-maintenance-name {
    flex: 1 !important;
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 16px !important;
}

#hrs-app .hrs-maintenance-checkbox {
    font-size: 28px !important;
    color: #999 !important;
}

#hrs-app .hrs-maintenance-item.selected .hrs-maintenance-checkbox {
    color: #0066cc !important;
}

/* ===== STATUS BADGES ===== */
#hrs-app .hrs-status-badge {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

#hrs-app .hrs-status-pending {
    background: #fff3cd !important;
    color: #856404 !important;
}

#hrs-app .hrs-status-assigned {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
}

#hrs-app .hrs-status-ontheway {
    background: #cfe2ff !important;
    color: #084298 !important;
}

#hrs-app .hrs-status-completed {
    background: #d1e7dd !important;
    color: #0f5132 !important;
}

#hrs-app .hrs-status-submitted {
    background: #fff3cd !important;
    color: #856404 !important;
}

#hrs-app .hrs-status-cancelled {
    background: #f8d7da !important;
    color: #721c24 !important;
}

/* ===== QUANTITY CONTROLS ===== */
#hrs-app .hrs-quantity-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    max-width: 120px !important;
    margin: 0 auto !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 4px;
}

#hrs-app .hrs-qty-btn {
    width: 40px !important;
    height: 40px !important;
    border: 2px solid #e0e0e0 !important;
    background: white !important;
    border-radius: 8px !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hrs-app .hrs-qty-btn:hover {
    border-color: #f39c12 !important;
    color: #f39c12 !important;
}

#hrs-app #hrs-quantity {
    width: 30px !important;
    text-align: center !important;
    border: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
}

/* ===== SUCCESS STYLES ===== */
#hrs-app .hrs-success-container {
    text-align: center !important;
    margin-bottom: 30px !important;
    padding: 30px 0 !important;
}

#hrs-app .hrs-success-icon {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 20px !important;
    background: #d4edda !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 40px !important;
    color: #28a745 !important;
}

/* ===== TIMELINE STYLES ===== */
#hrs-app .hrs-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

#hrs-app .hrs-timeline-marker {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    color: white !important;
    flex-shrink: 0 !important;
    font-size: 18px !important;
}

#hrs-app .hrs-timeline-marker.completed {
    background: #28a745 !important;
}

#hrs-app .hrs-timeline-marker.pending {
    background: #f39c12 !important;
}

#hrs-app .hrs-timeline-marker.inactive {
    background: #ddd !important;
}

/* ===== WAKEUP CALL STYLES ===== */
#hrs-app .hrs-time-select {
    flex: 1 !important;
    max-width: 100px !important;
    padding: 14px 12px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: center !important;
    background: white !important;
    color: #333 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    appearance: none !important;
}

#hrs-app .hrs-time-select:focus {
    outline: none !important;
    border-color: #2c5f8d !important;
    box-shadow: 0 0 0 3px rgba(44, 95, 141, 0.1) !important;
}

#hrs-app .hrs-time-select:hover {
    border-color: #2c5f8d !important;
}
/* ===== FOOD PICKUP CONFIRMATION STYLES ===== */
#hrs-app .hrs-food-confirmation-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
    display: block !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#hrs-app .hrs-food-confirmation-header-content {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

#hrs-app .hrs-food-confirmation-logo {
    max-width: 140px !important;
    height: auto !important;
}

#hrs-app .hrs-food-confirmation-content {
    padding: 20px !important;
    text-align: center !important;
}

#hrs-app .hrs-food-confirmation-icon-container {
    margin-bottom: 24px !important;
}

#hrs-app .hrs-food-confirmation-icon-circle {
    width: 80px !important;
    height: 80px !important;
    background: #d4edda !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

#hrs-app .hrs-food-confirmation-check-icon {
    font-size: 40px !important;
    color: #28a745 !important;
}

#hrs-app .hrs-food-confirmation-text-section {
    margin-bottom: 32px !important;
}

#hrs-app .hrs-food-confirmation-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-food-confirmation-subtitle {
    font-size: 16px !important;
    color: #666 !important;
    font-weight: 400 !important;
}

#hrs-app .hrs-food-confirmation-details {
    background: #f8f9fa !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 32px !important;
    text-align: left !important;
}

#hrs-app .hrs-food-confirmation-detail-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: none !important;
}

#hrs-app .hrs-food-confirmation-detail-row:last-child {
    border-bottom: none !important;
}

#hrs-app .hrs-food-confirmation-detail-label {
    font-size: 14px !important;
    color: #666 !important;
    font-weight: 500 !important;
}

#hrs-app .hrs-food-confirmation-detail-value {
    font-size: 14px !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

#hrs-app .hrs-food-confirmation-payment-badge {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

#hrs-app .hrs-food-confirmation-payment-badge.hrs-payment-paid {
    background: #d1e7dd !important;
    color: #0f5132 !important;
}

#hrs-app .hrs-food-confirmation-payment-badge.hrs-payment-unpaid {
    background: #f8d7da !important;
    color: #721c24 !important;
}

#hrs-app .hrs-food-confirmation-payment-badge.hrs-payment-cod {
    background: #fff3cd !important;
    color: #856404 !important;
}

#hrs-app .hrs-food-confirmation-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
}

#hrs-app .hrs-food-confirmation-back-btn,
#hrs-app .hrs-food-confirmation-request-btn {
    flex: 1 !important;
    max-width: 160px !important;
    padding: 12px 20px !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

#hrs-app .hrs-food-confirmation-back-btn {
    background: #f8f9fa !important;
    color: #666 !important;
    border: 1px solid #e9ecef !important;
}

#hrs-app .hrs-food-confirmation-back-btn:hover {
    background: #e9ecef !important;
    color: #333 !important;
    text-decoration: none !important;
}

#hrs-app .hrs-food-confirmation-request-btn {
    background: #0270AD !important;
    color: white !important;
    border: 1px solid #0270AD !important;
}

#hrs-app .hrs-food-confirmation-request-btn:hover {
    background: #025a8a !important;
    border-color: #025a8a !important;
    color: white !important;
    text-decoration: none !important;
}

/* ===== FOOD PICKUP FORM STYLES ===== */
#hrs-app .hrs-food-pickup-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
    display: block !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#hrs-app .hrs-food-pickup-header-content {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

#hrs-app .hrs-food-pickup-logo {
    max-width: 140px !important;
    height: auto !important;
}

#hrs-app .hrs-food-pickup-content {
    padding: 20px !important;
}

#hrs-app .hrs-food-pickup-title-section {
    margin-bottom: 24px !important;
}

#hrs-app .hrs-food-pickup-main-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-food-pickup-main-description {
    font-size: 16px !important;
    color: #666 !important;
    font-weight: 400 !important;
}

#hrs-app .hrs-food-pickup-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

#hrs-app .hrs-food-pickup-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#hrs-app .hrs-food-pickup-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
}

#hrs-app .hrs-required {
    color: #dc3545 !important;
    margin-left: 4px !important;
}

#hrs-app .hrs-food-pickup-input,
#hrs-app .hrs-food-pickup-select,
#hrs-app .hrs-food-pickup-textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: white !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

#hrs-app .hrs-food-pickup-input:focus,
#hrs-app .hrs-food-pickup-select:focus,
#hrs-app .hrs-food-pickup-textarea:focus {
    border-color: #0270AD !important;
    box-shadow: 0 0 0 3px rgba(2, 112, 173, 0.1) !important;
}

#hrs-app .hrs-food-pickup-textarea {
    min-height: 80px !important;
    resize: vertical !important;
}

#hrs-app .hrs-food-pickup-send-request-btn {
    width: 100% !important;
    padding: 14px 20px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 20px !important;
}

#hrs-app .hrs-food-pickup-send-request-btn:hover {
    background: #025a8a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(2, 112, 173, 0.3) !important;
}

#hrs-app .hrs-food-pickup-send-request-btn:disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Provider Selection Dropdown */
#hrs-app .hrs-food-pickup-provider-container {
    position: relative !important;
}

#hrs-app .hrs-provider-select-wrapper {
    position: relative !important;
}

#hrs-app .hrs-provider-select-display {
    width: 100% !important;
    padding: 10px 16px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 40px !important;
    background: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    height: 50px !important;
    font-size: 16px !important;
    background-image: url("../images/icons/arrow-down-round.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 20px !important;
}

#hrs-app .hrs-provider-select-display:hover {
    border-color: #0270AD !important;
}

#hrs-app .hrs-provider-select-display i {
    opacity: 0 !important;
}

#hrs-app .hrs-provider-placeholder {
    color: #999 !important;
    font-size: 14px !important;
}

#hrs-app .hrs-provider-dropdown {
    position: absolute !important;
    top: 108% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border: 1px solid #DEE2E6 !important;
    border-radius: 8px !important;
    box-shadow: 0px 20px 30px 0px #00000042 !important;
    z-index: 1000 !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

#hrs-app .hrs-provider-search-box {
    position: relative !important;
}

#hrs-app .search__label {
    position: absolute !important;
    top: 24px !important;
    left: 26px !important;
}

#hrs-app #hrs-provider-search {
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding-left: 42px !important;
}

#hrs-app #hrs-provider-search:focus {
    border: 1px solid #0270AD !important;
}

#hrs-app #hrs-provider-search::placeholder {
    color: #98A2B3 !important;
}

#hrs-app .hrs-provider-search-box {
    padding: 12px !important;
    border-bottom: none !important;
}

#hrs-app .hrs-provider-search-input {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    outline: none !important;
}

#hrs-app .hrs-provider-list {
    max-height: 200px !important;
    overflow-y: auto !important;
}

#hrs-app .hrs-provider-item {
    padding: 12px 16px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background-color 0.2s ease !important;
}

#hrs-app .hrs-provider-item:hover {
    background-color: #f8f9fa !important;
}

#hrs-app .hrs-provider-item:last-child {
    border-bottom: none !important;
}

#hrs-app .hrs-provider-no-results {
    padding: 20px !important;
    text-align: center !important;
    color: #666 !important;
}

#hrs-app .hrs-provider-no-results p {
    font-weight: 500 !important;
    font-size: 14px !important;
    text-align: center !important;
    color: #344054 !important;
    margin-bottom: 16px !important;
    margin-top: 8px !important;
}

#hrs-app .hrs-provider-no-results img {
    margin-top: -15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#hrs-app .hrs-add-provider-inline-btn {
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
}

#hrs-app .hrs-add-provider-inline-btn:hover {
    background: #025a8a !important;
}

/* ===== FONTAWESOME ICON FALLBACKS ===== */
#hrs-app .fa-solid, #hrs-app .fa-regular {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
}

#hrs-app .fa-regular {
    font-weight: 400 !important;
}

/* Fallback for missing FontAwesome */
#hrs-app .fa-arrow-left:before {
    content: "←" !important;
}

#hrs-app .fa-chevron-right:before {
    content: "›" !important;
}

#hrs-app .fa-bell:before {
    content: "🔔" !important;
}

#hrs-app .fa-check:before {
    content: "✓" !important;
}

/* Search Icon Styling */
#hrs-app .hrs-search-icon {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(89%) contrast(89%) !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-search-input:focus + .hrs-search-icon-container .hrs-search-icon,
#hrs-app .hrs-search-input:hover + .hrs-search-icon-container .hrs-search-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

/* Additional icon fallbacks */
#hrs-app .fa-times:before {
    content: "×" !important;
}

#hrs-app .fa-clock:before {
    content: "🕐" !important;
}

#hrs-app .fa-star.hrs-star-filled:before {
    content: "★" !important;
}

#hrs-app .fa-star.hrs-star-empty:before {
  content: "★" !important;
  color: #e5e7eb !important;
}

#hrs-app .fa-suitcase:before {
    content: "🧳" !important;
}

#hrs-app .fa-minus:before {
    content: "−" !important;
}

#hrs-app .fa-plus:before {
    content: "+" !important;
}

#hrs-app .fa-bed:before {
    content: "🛏️" !important;
}

#hrs-app .fa-building:before {
    content: "🏢" !important;
}

#hrs-app .fa-trash:before {
    content: "🗑️" !important;
}

#hrs-app .fa-box:before {
    content: "📦" !important;
}

/* Delete Icon Styling */
#hrs-app .hrs-delete-icon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-delete-btn:hover .hrs-delete-icon {
    filter: brightness(0) saturate(100%) invert(11%) sepia(100%) saturate(4456%) hue-rotate(349deg) brightness(101%) contrast(107%) !important;
    transform: scale(1.1) !important;
}

#hrs-app .hrs-notification-delete-btn .hrs-delete-icon {
    width: 18px !important;
    height: 18px !important;
}

#hrs-app .hrs-notification-delete-btn:hover .hrs-delete-icon {
    filter: brightness(0) saturate(100%) invert(11%) sepia(100%) saturate(4456%) hue-rotate(349deg) brightness(101%) contrast(107%) !important;
    transform: scale(1.1) !important;
}

#hrs-app .hrs-delete-modal-icon {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

/* Loading spinner animation */
#hrs-app .fa-spinner {
    animation: hrs-spin 1s linear infinite !important;
}

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

/* Alternative approach - use Unicode directly if FontAwesome fails */
#hrs-app .fa-arrow-left {
    font-family: inherit !important;
}

#hrs-app .fa-arrow-left::before {
    content: "" !important;
    font-family: inherit !important;
    font-weight: normal !important;
    background-image: url(../images/icons/back-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 2px !important;
}

#hrs-app .hrs-notice-detail-header .fa-arrow-left::before {
    top: 0px !important;
}

#hrs-app .fa-chevron-right::before {
    content: "" !important;
    font-family: inherit !important;
    font-weight: normal !important;
    background-image: url(../images/icons/arrow-right-round.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
}

#hrs-app .hrs-maintenance-arrow .fa-chevron-right::before {
    right: 30px !important;
}

#hrs-app .hrs-service-item:hover .fa-chevron-right::before {
    content: "" !important;
    background-image: url(../images/icons/arrow-right-round-white.svg);
}

#hrs-app .fa-bell {
    font-family: inherit !important;
}

#hrs-app .fa-bell::before {
    content: "" !important;
    font-family: inherit !important;
    font-weight: normal !important;
    background-image: url(../images//icons/notification.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 20px !important;
    position: absolute;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#hrs-app .fa-check {
    font-family: inherit !important;
}

#hrs-app .hrs-maintenance-check-icon {
    position: relative !important;
}

#hrs-app .hrs-maintenance-items-list .fa-check::before {
    opacity: 0 !important;
}

#hrs-app .hrs-maintenance-items-list .fa-check {
    background-image: url(../images/icons/right.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 8px !important;
    height: 6px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

#hrs-app .fa-check::before {
    content: "✔" !important;
    font-family: inherit !important;
    font-weight: normal !important;
}

/* ===== CLEAN ITEM LIST STYLES (Request an Item) ===== */
#hrs-app .hrs-clean-item {
   margin: 10px 0px !important;
    padding: 0 !important;
    list-style: none !important;
}

#hrs-app .hrs-clean-item-link {
display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px !important;
  border: 1px solid #f0f0f0 !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  border-radius: 10px;
}

#hrs-app .hrs-clean-item-link:hover {
    background-color: #f8f9fa !important;
    color: inherit !important;
    text-decoration: none !important;
}

#hrs-app .hrs-clean-item.selected .hrs-clean-item-link,
#hrs-app .hrs-clean-item-link.selected {
    background-color: #e8f4fd !important;
    border-color: #0066cc !important;
}

#hrs-app .hrs-clean-item-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
}

#hrs-app .hrs-clean-item-icon {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    color: #666 !important;
    flex-shrink: 0 !important;
}

#hrs-app .hrs-clean-item-title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
}

#hrs-app .hrs-clean-item-arrow {
  color: #000 !important;
  flex-shrink: 0 !important;
}

#hrs-app .hrs-clean-item-link:hover .hrs-clean-item-arrow {
    color: #666 !important;
}

/* Remove spacing from the list container */
#hrs-app #hrs-items-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#hrs-app #hrs-items-list.space-y-0 {
    gap: 0 !important;
}
/* ===== SEARCH INPUT STYLES ===== */
#hrs-app #hrs-item-search,
#hrs-app .hrs-search-input,
#hrs-app #hrs-maintenance-search,
#searchInput {
    width: 100% !important;
    padding: 10px 20px 10px 40px !important;
    border: 1px solid #0270AD57 !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: white !important;
    color: #000000 !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
    height: auto !important;
    letter-spacing: normal !important;
    font-weight: 500 !important;
    box-shadow: 0px 15px 35.5px 0px #B8C6D340 !important;

    outline-style: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
}

#hrs-app #hrs-item-search:focus,
#hrs-app .hrs-search-input:focus,
#hrs-app #hrs-maintenance-search:focus,
#searchInput:focus {
    outline: none !important;
    border-color: #0270AD !important;
    box-shadow: 0px 15px 35.5px 0px #B8C6D340 !important;

    outline-style: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
}

#hrs-app #hrs-item-search::placeholder,
#hrs-app .hrs-search-input::placeholder,
#hrs-app #hrs-maintenance-search::placeholder,
#searchInput::placeholder {
    color: #9ca3af !important;
    font-size: 14px !important;
}

#hrs-app .hrs-search-icon {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(89%) contrast(89%) !important;
    transition: all 0.2s ease !important;
}

/* Ensure search icon displays properly */
#hrs-app .hrs-search-icon-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Search input focus states */
#hrs-app .hrs-search-input:focus ~ .hrs-search-icon-container .hrs-search-icon,
#hrs-app .hrs-search-wrapper:hover .hrs-search-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}
/* ===== DYNAMIC ITEM IMAGES ===== */
#hrs-app .hrs-item-image {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    transition: 0.2s all ease-in-out !important;
}

#hrs-app .hrs-default-icon {
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background: white !important;
    text-align: center !important;
    line-height: 1 !important;
}

#hrs-app .hrs-text-icon {
    font-family: "Segoe UI", "Arial", sans-serif !important;
    color: #666 !important;
}

/* Ensure icon container works with both images and emojis */
#hrs-app .hrs-clean-item-icon {
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Request Details Item Images */
#hrs-app .hrs-item-uploaded-image {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    display: block !important;
    background: white !important;
}

#hrs-app .hrs-item-admin-image {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    display: block !important;
    background: white !important;
}

#hrs-app .hrs-fallback-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

#hrs-app .hrs-fallback-icon .hrs-item-type-image {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    display: block !important;
    background: white !important;
}

#hrs-app .hrs-item-type-image {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 8px !important;
    display: block !important;
    background: transparent !important;
    padding: 5px !important;
}
/* ===== DASHBOARD DESIGN (MATCHING PROVIDED IMAGE) ===== */

/* Dashboard Header */
#hrs-app .hrs-dashboard-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-back-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #1B1B1B !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    margin-bottom: 20px !important;
    position: relative !important;
}

#hrs-app .hrs-back-btn span {
    margin-left: 16px !important;
}

#hrs-app .hrs-back-btn:hover {
    color: #333 !important;
    text-decoration: none !important;
}

#hrs-app .hrs-logo-container {
    margin-bottom: 24px !important;
}

#hrs-app #hrs-all-requests-overlay .hrs-logo-container,
#hrs-app #hrs-step-4 .hrs-logo-container,
#hrs-app #hrs-step-5 .hrs-logo-container,
#hrs-app #hrs-step-6 .hrs-logo-container,
#hrs-app #hrs-step-7 .hrs-logo-container,
#hrs-app #hrs-step-8 .hrs-logo-container,
#hrs-app #hrs-step-10 .hrs-logo-container,
#hrs-app #hrs-step-12 .hrs-logo-container,
#hrs-app #hrs-step-13 .hrs-logo-container,
#hrs-app #hrs-step-14 .hrs-logo-container,
#hrs-app #hrs-step-15 .hrs-logo-container,
#hrs-app #hrs-step-16 .hrs-logo-container,
#hrs-app #hrs-step-17 .hrs-logo-container,
#hrs-app #hrs-step-18 .hrs-logo-container {
    margin-bottom: 0 !important;
}

#hrs-app .hrs-dashboard-logo {
    max-width: 140px !important;
    height: auto !important;
}

/* Welcome Section */
@media (max-width: 575px) {
  .page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header), body:not([class*="elementor-page-"]) .site-main {
    padding-inline-end: 0px !important;
    padding-inline-start: 0px !important;
  }
}

#hrs-app .hrs-welcome-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 5px !important;
}

#hrs-app .hrs-welcome-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    letter-spacing: -2%;
}

#hrs-app .hrs-notification-btn {
    width: 38px !important;
    height: 38px !important;
    background: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
    color: #666 !important;
    position: relative !important;
}

#hrs-app #hrs-services-list .hrs-notification-btn {
    margin-top: 0 !important;
}

#hrs-app .hrs-notification-btn:hover {
    background: #f8f9fa !important;
    text-decoration: none !important;
    color: #333 !important;
}

#hrs-app .hrs-notification-dot {
    position: absolute !important;
    top: 9px !important;
    right: 9px !important;
    width: 8px !important;
    height: 8px !important;
    background: #ff4444 !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
}

#hrs-app .hrs-welcome-description {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

/* Dashboard Content */
#hrs-app .hrs-dashboard-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px !important;
    min-height: 60vh !important;
    margin-top: 16px !important;
}

/* Service Boxes Grid - Match image design */
#hrs-app .hrs-service-boxes-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

#hrs-app .hrs-service-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 16px !important;
    background: white !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; */
    min-height: 128px !important;
    position: relative !important;
}

#hrs-app .hrs-service-box:hover {
    border-color: #3b82f6 !important;
    background: #f8faff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15) !important;
}

#hrs-app .hrs-service-box-icon {
    /* width: 48px !important;
    height: 48px !important; */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
    /* background: #f0f9ff !important;
    border-radius: 12px !important;
    padding: 8px !important; */
}

#hrs-app .hrs-service-box-icon img {
    width: 32px !important;
    height: 32px !important;
    filter: brightness(0) saturate(100%) invert(22%) sepia(90%) saturate(2088%) hue-rotate(182deg) brightness(99%) contrast(102%);
}

#hrs-app .hrs-service-box-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
    text-align: center !important;
    line-height: 20px !important;
    letter-spacing: -1%;
}


/* 12-01-26 */
#hrs-app .hrs-coming-soon-badge {
    position: absolute !important;
    top:-5px !important;
    right: 8px !important;
    background: #f59e0b !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Track Status Section */
#hrs-app .hrs-track-status-section {
    margin-top: 32px !important;
}

#hrs-app .hrs-track-status-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-track-status-title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    letter-spacing: -2%;
    margin: 0 !important;
}

#hrs-app .hrs-view-all-btn {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    color: #1B1B1B !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-view-all-btn:hover {
    color: #2563eb !important;
    text-decoration: none !important;
}

#hrs-app .hrs-view-all-btn i {
    font-size: 12px !important;
}

/* Recent Requests Slider */
#hrs-app .hrs-recent-requests-container {
    overflow: hidden !important;
    border-radius: 12px !important;
}

#hrs-app .hrs-recent-requests-slider {
    display: flex !important;
    gap: 12px !important;
    transition: transform 0.3s ease !important;
}

/* All Requests Overlay - New Interface */
#hrs-app .hrs-all-requests-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: white !important;
    z-index: 1000 !important;
    overflow-y: hidden !important;
    min-height: 100vh !important;
    /* max-height: 100vh !important; */
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;

    background-image: url('../images/img/shape-bg.png') !important;
    background-size: 100% auto !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    max-width: 100% !important;
}

#hrs-app .hrs-all-requests-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px !important;
    background: transparent !important;
    border-bottom: 1px solid #e5e7eb !important;
}

#hrs-app .hrs-all-requests-logo {
    max-width: 140px !important;
    height: auto !important;
}

#hrs-app .hrs-all-requests-content {
    padding: 20px !important;
    background: #f8fafc !important;
    min-height: calc(100vh - 80px) !important;
    overflow-y: visible !important;
}

#hrs-app .hrs-all-requests-content::-webkit-scrollbar {
    width: 6px !important;
}

#hrs-app .hrs-all-requests-content::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 3px !important;
}

#hrs-app .hrs-all-requests-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3) !important;
    border-radius: 3px !important;
}

#hrs-app .hrs-all-requests-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5) !important;
}

/* Track Status Title Section */
#hrs-app .hrs-track-status-title-section {
    margin-bottom: 24px !important;
    text-align: center !important;
}

#hrs-app .hrs-track-status-main-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 8px 0 !important;
}

#hrs-app .hrs-track-status-description {
    font-size: 16px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* Status Filter Tabs */
#hrs-app .hrs-status-tabs-container {
    display: flex !important;
    gap: 0 !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}

#hrs-app .hrs-status-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    text-align: left !important;
    position: relative !important;
}

#hrs-app .hrs-status-tab:hover {
    color: #6b7280 !important;
}

#hrs-app .hrs-status-tab.hrs-status-tab-active {
    color: #0270AD !important;
    /* border-bottom-color: #0891b2 !important; */
}

#hrs-app .hrs-status-tab.hrs-status-tab-active::after {
    content: "" !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background-color: #F04438 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 4px !important;
    position: absolute !important;
}

#hrs-app .hrs-status-tab-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #0891b2 !important;
    display: inline-block !important;
    display: none !important;
}

#hrs-app .hrs-status-tab:not(.hrs-status-tab-active) .hrs-status-tab-dot {
    display: none !important;
}

/* All tab specific styling - no dot needed */
#hrs-app #hrs-tab-all .hrs-status-tab-dot {
    display: none !important;
}

/* Filtered Requests List */
#hrs-app #hrs-filtered-requests-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    padding-bottom: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

/* Custom scrollbar for filtered requests list */
#hrs-app #hrs-filtered-requests-list::-webkit-scrollbar {
    width: 6px !important;
}

#hrs-app #hrs-filtered-requests-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 3px !important;
}

#hrs-app #hrs-filtered-requests-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 3px !important;
}

#hrs-app #hrs-filtered-requests-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Mobile responsive for Track Status */
@media (max-width: 768px) {
    #hrs-app #hrs-filtered-requests-list {
        /* max-height: calc(100vh - 180px) !important; */
        padding-bottom: 40px !important;
    }
    
    #hrs-app .hrs-all-requests-content {
        padding: 15px !important;
        min-height: calc(100vh - 60px) !important;
    }
}

@media (max-width: 480px) {
    #hrs-app #hrs-filtered-requests-list {
        /* max-height: calc(100vh - 160px) !important; */
        gap: 12px !important;
    }
    
    #hrs-app .hrs-all-requests-content {
        padding: 10px !important;
        min-height: calc(100vh - 50px) !important;
    }
}

/* Request Item Cards in Overlay */
#hrs-app .hrs-overlay-request-item {
    background: white !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-overlay-request-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px) !important;
}

#hrs-app .hrs-overlay-request-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-overlay-request-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
}

#hrs-app .hrs-overlay-request-details {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-overlay-request-detail {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#hrs-app .hrs-overlay-request-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#hrs-app .hrs-overlay-request-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

#hrs-app .hrs-overlay-request-actions {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

#hrs-app .hrs-overlay-view-details-btn {
    flex: 1 !important;
    padding: 10px 16px !important;
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-overlay-view-details-btn:hover {
    background: #2563eb !important;
}

#hrs-app .hrs-overlay-delete-btn {
    width: 40px !important;
    height: 40px !important;
    background: #fee2e2 !important;
    border: none !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-overlay-delete-btn:hover {
    background: #fecaca !important;
}

/* No Requests Message */
#hrs-app .hrs-no-filtered-requests {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #6b7280 !important;
    font-size: 16px !important;
}

/* ===== NEW TRACK STATUS INTERFACE DESIGN ===== */

/* New Status Item Container */
#hrs-app .hrs-new-status-item {
    background: white !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

#hrs-app .hrs-new-status-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* Header Section: Request Name + Status Badge */
#hrs-app .hrs-new-status-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

#hrs-app .hrs-new-request-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

#hrs-app .hrs-new-status-badge {
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.025em !important;
}

/* Status Badge Colors - Orange for Pending */
#hrs-app .hrs-new-status-badge.hrs-status-pending {
    background: #FDB022 !important;
    color: white !important;
}

#hrs-app .hrs-new-status-badge.hrs-status-assigned {
    background: #dbeafe !important;
    color: #2563eb !important;
}

#hrs-app .hrs-new-status-badge.hrs-status-ontheway {
    background: #c7d2fe !important;
    color: #4338ca !important;
}

#hrs-app .hrs-new-status-badge.hrs-status-completed {
    background: #bbf7d0 !important;
    color: #059669 !important;
}

#hrs-app .hrs-new-status-badge.hrs-status-cancelled {
    background: #fecaca !important;
    color: #dc2626 !important;
}

/* Body Section: Request ID, Est. Time, Progress */
#hrs-app .hrs-new-status-body {
    margin-bottom: 16px !important;
}

#hrs-app .hrs-new-status-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-new-status-row:last-child {
    margin-bottom: 0 !important;
}

#hrs-app .hrs-new-status-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#hrs-app .hrs-new-status-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* Progress Section */
#hrs-app .hrs-new-progress-section {
    margin-top: 12px !important;
    padding-top: 0px !important;
    /* border-top: 1px solid #f3f4f6 !important; */
}

#hrs-app .hrs-new-progress-container {
    width: 100% !important;
    height: 6px !important;
    background: #f3f4f6 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    position: relative !important;
}

#hrs-app .hrs-new-progress-bar {
    height: 100% !important;
    /* background: linear-gradient(90deg, #3b82f6, #1d4ed8) !important; */
    background: #039855 !important;
    border-radius: 3px !important;
    /* width: 0% !important; */
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

#hrs-app .hrs-new-progress-bar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 20px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3)) !important;
    animation: hrs-progress-shine 2s ease-in-out infinite !important;
}

@keyframes hrs-progress-shine {
    0% { transform: translateX(-20px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(20px); opacity: 0; }
}

#hrs-app .hrs-new-progress-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#hrs-app .hrs-new-progress-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#hrs-app .hrs-new-progress-percent {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-shadow: 0 1px 2px rgba(234, 88, 12, 0.1) !important;
}

/* Footer Section: View Details + Delete Button */
#hrs-app .hrs-new-status-footer {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

#hrs-app .hrs-new-view-details-btn {
    flex: 1 !important;
    padding: 10px 16px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    height: 44px;
}

#hrs-app .hrs-new-view-details-btn:hover {
    background: #2563eb !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

#hrs-app .hrs-new-delete-btn {
    width: 40px !important;
    height: 40px !important;
    background: #FEE4E2 !important;
    border: 1px solid #FEE4E2 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

#hrs-app .hrs-new-delete-btn:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

#hrs-app .hrs-new-delete-icon {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-new-delete-btn:hover .hrs-new-delete-icon {
    filter: brightness(0) saturate(100%) invert(11%) sepia(100%) saturate(4456%) hue-rotate(349deg) brightness(101%) contrast(107%) !important;
    transform: scale(1.1) !important;
}

/* Responsive Design for New Status Items */
@media (max-width: 480px) {
    #hrs-app .hrs-new-status-item {
        padding: 14px !important;
        margin-bottom: 10px !important;
    }
    
    #hrs-app .hrs-new-request-name {
        font-size: 14px !important;
    }
    
    #hrs-app .hrs-new-status-badge {
        font-size: 11px !important;
        padding: 3px 10px !important;
    }
    
    #hrs-app .hrs-new-view-details-btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
    
    #hrs-app .hrs-new-delete-btn {
        width: 36px !important;
        height: 36px !important;
    }
    
    #hrs-app .hrs-new-delete-icon {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Mobile scrolling adjustments */
    #hrs-app .hrs-request-content {
        /* max-height: calc(100vh - 100px) !important; */
        padding: 16px !important;
    }

    #hrs-baggage-list-interface .hrs-request-content {
        height: 100% !important;
    }
    
    #hrs-app #hrs-filtered-requests-list {
        /* max-height: calc(100vh - 240px) !important; */
        gap: 12px !important;
    }
    
    /* Home request card mobile adjustments */
    #hrs-app .hrs-home-request-card {
        padding: 14px !important;
        margin-bottom: 10px !important;
    }
    
    /* 12-01-26 */
    #hrs-app .hrs-home-request-name {
        font-size: 12px !important;
    }
    
    /* 12-01-26 */
    #hrs-app .hrs-home-status-badge {
        font-size: 10px !important;
        padding: 3px 10px !important;
    }
    
    #hrs-app .hrs-home-view-details-btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
    
    #hrs-app .hrs-home-delete-btn {
        width: 36px !important;
        height: 36px !important;
    }
    
    #hrs-app .hrs-home-delete-icon {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Animation for Progress Bars */
#hrs-app .hrs-new-progress-bar[data-progress="0"] {
    width: 0% !important;
    background: #e5e7eb !important;
}

#hrs-app .hrs-new-progress-bar[data-progress="25"] {
    animation: hrs-progress-fill-25 1.5s ease-out forwards !important;
}

#hrs-app .hrs-new-progress-bar[data-progress="50"] {
    animation: hrs-progress-fill-50 1.5s ease-out forwards !important;
}

#hrs-app .hrs-new-progress-bar[data-progress="75"] {
    animation: hrs-progress-fill-75 1.5s ease-out forwards !important;
}

#hrs-app .hrs-new-progress-bar[data-progress="100"] {
    animation: hrs-progress-fill-100 1.5s ease-out forwards !important;
    background: linear-gradient(90deg, #10b981, #059669) !important;
}

@keyframes hrs-progress-fill-25 {
    0% { width: 0%; }
    100% { width: 25%; }
}

@keyframes hrs-progress-fill-50 {
    0% { width: 0%; }
    100% { width: 50%; }
}

@keyframes hrs-progress-fill-75 {
    0% { width: 0%; }
    100% { width: 75%; }
}

@keyframes hrs-progress-fill-100 {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Staggered Animation for Multiple Items */
#hrs-app .hrs-new-status-item:nth-child(1) {
    animation: hrs-fade-in-up 0.6s ease-out 0.1s both !important;
}

#hrs-app .hrs-new-status-item:nth-child(2) {
    animation: hrs-fade-in-up 0.6s ease-out 0.2s both !important;
}

#hrs-app .hrs-new-status-item:nth-child(3) {
    animation: hrs-fade-in-up 0.6s ease-out 0.3s both !important;
}

#hrs-app .hrs-new-status-item:nth-child(4) {
    animation: hrs-fade-in-up 0.6s ease-out 0.4s both !important;
}

#hrs-app .hrs-new-status-item:nth-child(n+5) {
    animation: hrs-fade-in-up 0.6s ease-out 0.5s both !important;
}

@keyframes hrs-fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Status Badge Styling */
#hrs-app .hrs-new-status-badge {
    position: relative !important;
    overflow: hidden !important;
}

#hrs-app .hrs-new-status-badge::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s ease !important;
}

#hrs-app .hrs-new-status-item:hover .hrs-new-status-badge::before {
    left: 100% !important;
}

/* Loading State for New Status Items */
#hrs-app .hrs-new-status-item.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

#hrs-app .hrs-new-status-item.loading .hrs-new-progress-bar {
    background: #e5e7eb !important;
    animation: hrs-loading-pulse 1.5s ease-in-out infinite !important;
}

@keyframes hrs-loading-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Loading States */
#hrs-app .hrs-loading-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    gap: 16px !important;
}

#hrs-app .hrs-loading-spinner {
    width: 32px !important;
    height: 32px !important;
    border: 3px solid #e5e7eb !important;
    border-top: 3px solid #3b82f6 !important;
    border-radius: 50% !important;
    animation: hrs-spin 1s linear infinite !important;
}

#hrs-app .hrs-loading-text {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* ===== FOOD PICKUP REQUEST STYLES ===== */

/* Food Pickup Header */
#hrs-app .hrs-food-pickup-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-food-pickup-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-food-pickup-header-content,
#hrs-app .hrs-food-confirmation-header-content,
#hrs-app .hrs-baggage-header-content,
#hrs-app .hrs-feedback-header-content,
#hrs-app #hrs-step-4 .hrs-request-header-content,
#hrs-app .hrs-confirmation-header-content,
#hrs-app .hrs-item-detail-header-content,
#hrs-app .hrs-luggage-header-content,
#hrs-app #hrs-all-requests-overlay .hrs-request-header-content,
#hrs-app #hrs-step-7 .hrs-request-header-content,
#hrs-app .hrs-other-maintenance-header-content {
    margin-top: -9px !important;
}

#hrs-app .hrs-food-pickup-logo {
    max-width: 140px !important;
    height: auto !important;
}

/* Food Pickup Content */
#hrs-app .hrs-food-pickup-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px !important;
    min-height: 60vh !important;
    margin-top: 25px !important;
}

#hrs-app .hrs-food-pickup-title-section {
    margin-bottom: 20px !important;
}

#hrs-app .hrs-food-pickup-main-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-food-pickup-main-description {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: -2% !important;
}

/* Food Pickup Form */
#hrs-app .hrs-food-pickup-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 17px !important;
}

#hrs-app .hrs-food-pickup-field > label {
    margin-bottom: 0 !important;
    display: block !important;
}

/* #hrs-app .hrs-food-pickup-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

#hrs-app .hrs-food-pickup-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
} */

#hrs-app .hrs-food-pickup-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 !important;
}

#hrs-app .hrs-food-pickup-select-container {
    position: relative !important;
}

#hrs-app .hrs-food-pickup-select {
    width: 100% !important;
    padding: 14px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: white !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    height: 50px !important;
    background-image: url("../images/icons/arrow-down-round.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 20px !important;
}

#hrs-app .hrs-food-pickup-select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: none !important;
}

#hrs-app .hrs-food-pickup-select::placeholder {
    color: #9ca3af !important;
}

/* Custom dropdown arrow */
#hrs-app .hrs-food-pickup-select-container::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    /* border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-top: 6px solid #6b7280 !important;
    pointer-events: none !important; */
    background-image: url(../images/icons/arrow-down-round.svg);
    background-repeat: no-repeat;
    background-position: center;
}

#hrs-app .hrs-food-pickup-input[type="text"] {
    height: 50px !important;
}

#hrs-app .hrs-food-pickup-input {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    background: white !important;
    color: #374151 !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

#hrs-app .hrs-food-pickup-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#hrs-app .hrs-food-pickup-input::placeholder {
    color: #9ca3af !important;
}

#hrs-app .hrs-food-pickup-textarea {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    background: white !important;
    color: #374151 !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    min-height: 100px !important;
    resize: vertical !important;
}

#hrs-app .hrs-food-pickup-textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#hrs-app .hrs-food-pickup-textarea::placeholder {
    color: #9ca3af !important;
}

#hrs-app .hrs-food-pickup-send-request-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 16px !important;
    letter-spacing: -1% !important;
}

#hrs-app .hrs-food-pickup-send-request-btn:hover {
    background: #0284c7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3) !important;
}


#hrs-app #hrs-food-image-preview {
    max-width: 200px !important;
    max-height: 150px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    margin: 0 auto !important;
}

/* ===== FOOD PICKUP CONFIRMATION STYLES ===== */

/* Food Confirmation Header */
#hrs-app .hrs-food-confirmation-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-food-confirmation-header-content,
#hrs-app .hrs-food-confirmation-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-food-confirmation-logo {
    max-width: 140px !important;
    height: auto !important;
}

/* Food Confirmation Content */
#hrs-app .hrs-food-confirmation-content,
#hrs-app .hrs-gym-confirmation-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 40px 20px !important;
    min-height: 60vh !important;
    margin-top: 25px !important;
    text-align: center !important;
}

#hrs-app .hrs-food-confirmation-icon-container,
#hrs-app .hrs-gym-confirmation-icon-container {
    margin-bottom: 16px !important;
    margin-top: 20px !important;
}

#hrs-app .hrs-food-confirmation-icon-circle,
#hrs-app .hrs-gym-confirmation-icon-circle {
    /* width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3) !important; */

    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    background: #00C851 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-image: url(../images/icons/thank-you.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    box-shadow: 0px 12.5px 25px -6px #00000040 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#hrs-app .hrs-food-confirmation-check-icon,
#hrs-app .hrs-gym-confirmation-check-icon {
    font-size: 0px !important;
    color: white !important;
}

#hrs-app .hrs-food-confirmation-text-section,
#hrs-app .hrs-gym-confirmation-text-section {
    margin-bottom: 20px !important;
}

#hrs-app .hrs-food-confirmation-title,
#hrs-app .hrs-gym-confirmation-title {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 0 8px 0 !important;
}

#hrs-app .hrs-food-confirmation-subtitle,
#hrs-app .hrs-gym-confirmation-subtitle {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 20px !important;
    letter-spacing: -1% !important;
    font-weight: 400 !important;
}

#hrs-app .hrs-food-confirmation-details,
#hrs-app .hrs-gym-confirmation-details {
    background: transparent !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    border: 1px solid #EEEEEE !important;
}

#hrs-app .hrs-food-confirmation-details > div:last-child,
#hrs-app .hrs-gym-confirmation-details > div:last-child {
    padding-bottom: 0 !important;
}

#hrs-app .hrs-food-confirmation-detail-row,
#hrs-app .hrs-gym-confirmation-detail-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 0 10px !important;
}

#hrs-app .hrs-food-confirmation-detail-row:last-child,
#hrs-app .hrs-gym-confirmation-detail-row:last-child {
    border-bottom: none !important;
}

#hrs-app .hrs-food-confirmation-detail-label,
#hrs-app .hrs-gym-confirmation-detail-label {
    font-size: 14px !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
    letter-spacing: -1% !important;
}

#hrs-app .hrs-food-confirmation-detail-value,
#hrs-app .hrs-gym-confirmation-detail-value {
    font-size: 14px !important;
    color: #1B1B1B !important;
    font-weight: 500 !important;
    letter-spacing: -1% !important;
}

#hrs-app .hrs-food-confirmation-payment-badge {
    padding: 3px 12px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    /* text-transform: uppercase !important; */
    letter-spacing: -1% !important;
}

#hrs-app .hrs-payment-paid {
    background: #10b981 !important;
    color: white !important;
}

#hrs-app .hrs-payment-unpaid {
    background: #ef4444 !important;
    color: white !important;
}

#hrs-app .hrs-payment-cod {
    background: #f59e0b !important;
    color: white !important;
}

#hrs-app .hrs-food-confirmation-actions {
    display: flex !important;
    gap: 16px !important;
}

#hrs-app .hrs-food-confirmation-back-btn[type="button"] {
    flex: 1 !important;
    padding: 6px 24px !important;
    background: white !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    max-width: none !important;
}

#hrs-app .hrs-food-confirmation-back-btn[type="button"]:hover {
    border: 1px solid #333 !important;
}

#hrs-app .hrs-food-confirmation-back-btn:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

#hrs-app .hrs-food-confirmation-request-btn[type="button"] {
    flex: 1 !important;
    padding: 6px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    max-width: none !important;
}

#hrs-app .hrs-food-confirmation-request-btn:hover {
    background: #0284c7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3) !important;
}

/* ===== BAGGAGE TAG STYLES ===== */

/* Baggage Header */
#hrs-app .hrs-baggage-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-baggage-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-baggage-logo {
    max-width: 140px !important;
    height: auto !important;
}

/* Baggage Content */
#hrs-app .hrs-baggage-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px !important;
    min-height: 60vh !important;
}

#hrs-app .hrs-baggage-title-section {
    margin-bottom: 24px !important;
}

#hrs-app .hrs-baggage-main-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-baggage-main-description {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: -2% !important;
}

/* Baggage Form */
#hrs-app .hrs-baggage-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

#hrs-app .hrs-baggage-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#hrs-app .hrs-baggage-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#hrs-app .hrs-baggage-tooltip {
    position: relative !important;
    display: inline-block !important;
    margin-right: 10px !important;
}

#hrs-app .hrs-baggage-tooltip i {
    color: #6b7280 !important;
    cursor: help !important;
    background-image: url(../images/icons/info-symbol.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
}

#hrs-app .hrs-baggage-tooltip i::before {
    display: none !important;
}

#hrs-app .hrs-baggage-tooltip:hover .hrs-baggage-tooltip-content {
    visibility: visible !important;
    opacity: 1 !important;
}

#hrs-app .hrs-baggage-tooltip-content {
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: 92% !important;
    right: 0 !important;
    /* transform: translateX(-50%) !important; */
    background: #1B1B1B !important;
    color: white !important;
    padding: 8px 10px !important;
    border-radius: 8px 0 8px 8px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    width: 174px !important;
    z-index: 1000 !important;
    transition: all 0.3s ease !important;
    letter-spacing: -1% !important;
    box-shadow: 0px 15px 30px 0px #00000040 !important;
}

#hrs-app .hrs-baggage-tooltip-content::before {
    content: '' !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 6px solid transparent !important;
    border-bottom-color: #1f2937 !important;
    opacity: 0 !important;
}

#hrs-app .hrs-baggage-input[type="text"] {
    height: 50px !important;
    background: transparent !important;
}

#hrs-app .hrs-baggage-input {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    background: white !important;
    color: #374151 !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

#hrs-app .hrs-baggage-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#hrs-app .hrs-baggage-input:read-only {
    background: #f9fafb !important;
    color: #6b7280 !important;
}

#hrs-app .hrs-baggage-input::placeholder {
    color: #9ca3af !important;
}

/* Or Section */
#hrs-app .hrs-baggage-or-section {
    text-align: center !important;
    position: relative !important;
}

#hrs-app .hrs-baggage-or-text {
    background: white !important;
    padding: 0 16px !important;
    color: #6b7280 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    position: relative !important;
    z-index: 1 !important;
    list-style: 24px !important;
}

/* #hrs-app .hrs-baggage-or-section::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: #e5e7eb !important;
    z-index: 0 !important;
} */

/* Upload Section */
#hrs-app .hrs-baggage-upload-section {
    margin: 0 !important;
}

#hrs-app .hrs-baggage-upload-area {
    border: 2px dashed #286CE3 !important;
    border-radius: 10px !important;
    padding: 15px 20px !important;
    text-align: center !important;
    background: #F9FAFB !important;
    transition: all 0.3s ease !important;
}

#hrs-app .hrs-baggage-upload-area:hover {
    border-color: #3b82f6 !important;
    background: #f0f9ff !important;
}

#hrs-app .hrs-baggage-upload-icon {
    color: #94a3b8 !important;
    margin-bottom: 0px !important;
    background-image: url(../images/icons/upload-image.svg);
    background-repeat: no-repeat;
    background-size: 55px;
    background-position: center;
    height: 50px;
}

#hrs-app .hrs-baggage-upload-icon i {
    opacity: 0 !important;
}

#hrs-app .hrs-baggage-upload-btn[type="button"] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
}

#hrs-app .hrs-baggage-upload-area .hrs-baggage-upload-btn[type="button"] {
    background: transparent !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1976D2 !important;
    text-decoration: underline !important;
}

#hrs-app .hrs-baggage-upload-area .hrs-baggage-upload-btn[type="button"] i::before {
    opacity: 0 !important;
}

#hrs-app .hrs-baggage-upload-area .hrs-baggage-upload-btn[type="button"] i {
    background-image: url(../images/icons/flowbite_upload-solid.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px !important;
}

#hrs-app .hrs-baggage-upload-area .hrs-baggage-upload-btn[type="button"]:hover {
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
}

#hrs-app .hrs-baggage-upload-btn:hover {
    background: #2563eb !important;
}

#hrs-app .hrs-baggage-uploaded-image {
    position: relative !important;
    display: inline-block !important;
}

#hrs-app .hrs-baggage-preview-image {
    max-width: 200px !important;
    max-height: 150px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

#hrs-app .hrs-baggage-remove-image[type="button"] {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 24px !important;
    height: 24px !important;
    background: #ef4444 !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Date and Time Section */
#hrs-app .hrs-baggage-datetime-section {
    margin-top: 24px !important;
}

#hrs-app .hrs-baggage-datetime-field {
    position: relative !important;
    cursor: pointer !important;
    margin-top: 8px !important;
}

#hrs-app .hrs-baggage-datetime-input {
    width: 100% !important;
    padding: 16px 50px 16px 20px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    background: white !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

#hrs-app .hrs-baggage-datetime-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#hrs-app .hrs-baggage-datetime-input::placeholder {
    color: #9ca3af !important;
}

#hrs-app .hrs-baggage-calendar-icon {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #6b7280 !important;
    font-size: 18px !important;
    pointer-events: none !important;
}

/* Calendar Popup */
#hrs-app .hrs-baggage-calendar-popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hrs-app .hrs-baggage-calendar-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

#hrs-app .hrs-baggage-calendar-modal {
    position: relative !important;
    background: white !important;
    border-radius: 16px !important;
    padding: 24px !important;
    max-width: 400px !important;
    width: 90% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    animation: hrs-popup-fade-in 0.3s ease-out !important;
}

@keyframes hrs-popup-fade-in {
    from {
        opacity: 0 !important;
        transform: scale(0.9) translateY(-20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: scale(1) translateY(0) !important;
    }
}

#hrs-app .hrs-baggage-date-section {
    margin-bottom: 24px !important;
}

#hrs-app .hrs-baggage-date-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-baggage-date-label {
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 100% !important;
    color: #757575 !important;
}

#hrs-app .hrs-baggage-date-controls {
    display: flex !important;
    gap: 8px !important;
}

#hrs-app .hrs-baggage-clear-btn,
#hrs-app .hrs-baggage-today-btn,
#hrs-app .hrs-baggage-close-btn {
    padding: 6px 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: white !important;
    color: #374151 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-baggage-clear-btn:hover,
#hrs-app .hrs-baggage-today-btn:hover {
    background: #f9fafb !important;
}

#hrs-app .hrs-baggage-close-btn:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

/* Calendar */
#hrs-app .hrs-baggage-calendar {
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: white !important;
    overflow: hidden !important;
}

#hrs-app .hrs-baggage-calendar-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e5e7eb !important;
}

#hrs-app .hrs-baggage-prev-month,
#hrs-app .hrs-baggage-next-month {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hrs-app .hrs-baggage-prev-month:hover,
#hrs-app .hrs-baggage-next-month:hover {
    background: #e5e7eb !important;
}

#hrs-app .hrs-baggage-month-year {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

#hrs-app .hrs-baggage-calendar-grid {
    padding: 16px !important;
}

#hrs-app .hrs-baggage-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-baggage-weekdays span {
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    padding: 8px 4px !important;
}

#hrs-app .hrs-baggage-calendar-days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
}

#hrs-app .hrs-baggage-calendar-day {
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: transparent !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hrs-app .hrs-baggage-calendar-day:hover {
    background: #f3f4f6 !important;
}

#hrs-app .hrs-baggage-calendar-day.hrs-baggage-today {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    font-weight: 600 !important;
}

#hrs-app .hrs-baggage-calendar-day.hrs-baggage-selected {
    background: #3b82f6 !important;
    color: white !important;
    font-weight: 600 !important;
}

#hrs-app .hrs-baggage-calendar-day.hrs-baggage-prev-month-day,
#hrs-app .hrs-baggage-calendar-day.hrs-baggage-next-month-day {
    color: #d1d5db !important;
    cursor: not-allowed !important;
}

/* Time Section - New Beautiful Design */
#hrs-app .hrs-baggage-time-section {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid #e5e7eb !important;
}

#hrs-app .hrs-baggage-time-label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 16px !important;
    display: block !important;
}

#hrs-app .hrs-baggage-time-picker {
    display: flex !important;
    justify-content: center !important;
}

#hrs-app .hrs-baggage-time-container {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px !important;
    background: #f8fafc !important;
    border-radius: 16px !important;
    border: 2px solid #e5e7eb !important;
}

/* Time Spinner Controls */
#hrs-app .hrs-baggage-time-spinner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

#hrs-app .hrs-baggage-time-up,
#hrs-app .hrs-baggage-time-down {
    width: 32px !important;
    height: 24px !important;
    border: 1px solid #d1d5db !important;
    background: white !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #6b7280 !important;
}

#hrs-app .hrs-baggage-time-up:hover,
#hrs-app .hrs-baggage-time-down:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #374151 !important;
}

#hrs-app .hrs-baggage-time-up:active,
#hrs-app .hrs-baggage-time-down:active {
    transform: scale(0.95) !important;
}

#hrs-app .hrs-baggage-time-display {
    width: 60px !important;
    height: 48px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    background: white !important;
    outline: none !important;
    cursor: default !important;
}

#hrs-app .hrs-baggage-time-separator {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    margin: 0 8px !important;
}

/* Circular AM/PM Toggle */
#hrs-app .hrs-baggage-ampm-circular {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hrs-app .hrs-baggage-ampm-circle {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 3px solid transparent !important;
    position: relative !important;
}

#hrs-app .hrs-baggage-ampm-circle.hrs-baggage-am-active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
}

#hrs-app .hrs-baggage-ampm-circle.hrs-baggage-pm-active {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4) !important;
}

#hrs-app .hrs-baggage-ampm-circle:hover {
    transform: scale(1.05) !important;
}

#hrs-app .hrs-baggage-ampm-circle:active {
    transform: scale(0.95) !important;
}

#hrs-app #hrs-baggage-ampm-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

/* Animation for AM/PM toggle */
#hrs-app .hrs-baggage-ampm-circle {
    animation: hrs-ampm-pulse 0.3s ease-out !important;
}

@keyframes hrs-ampm-pulse {
    0% {
        transform: scale(1) !important;
    }
    50% {
        transform: scale(1.1) !important;
    }
    100% {
        transform: scale(1) !important;
    }
}

/* Mobile Responsiveness for New Time Picker */
@media (max-width: 480px) {
    #hrs-app .hrs-baggage-time-container {
        padding: 16px !important;
        gap: 12px !important;
    }
    
    #hrs-app .hrs-baggage-time-display {
        width: 50px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    
    #hrs-app .hrs-baggage-time-up,
    #hrs-app .hrs-baggage-time-down {
        width: 28px !important;
        height: 20px !important;
    }
    
    #hrs-app .hrs-baggage-ampm-circle {
        width: 48px !important;
        height: 48px !important;
    }
    
    #hrs-app #hrs-baggage-ampm-text {
        font-size: 14px !important;
    }
}

/* Calendar Actions */
#hrs-app .hrs-baggage-calendar-actions {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid #e5e7eb !important;
}

#hrs-app .hrs-baggage-calendar-confirm-btn {
    width: 100% !important;
    padding: 12px 24px !important;
    background: #0ea5e9 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#hrs-app .hrs-baggage-calendar-confirm-btn:hover {
    background: #0284c7 !important;
}

/* Mobile Responsiveness for Calendar Popup */
@media (max-width: 480px) {
    #hrs-app .hrs-baggage-calendar-modal {
        width: 95% !important;
        padding: 20px !important;
        margin: 20px !important;
    }
    
    #hrs-app .hrs-baggage-date-controls {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    #hrs-app .hrs-baggage-clear-btn,
    #hrs-app .hrs-baggage-today-btn,
    #hrs-app .hrs-baggage-close-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    
    #hrs-app .hrs-baggage-calendar-days {
        gap: 2px !important;
    }
    
    #hrs-app .hrs-baggage-calendar-day {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
    
    #hrs-app .hrs-baggage-time-input-group {
        padding: 12px 16px !important;
        gap: 6px !important;
    }
    
    #hrs-app .hrs-baggage-time-input {
        width: 45px !important;
        padding: 6px !important;
        font-size: 14px !important;
    }
}

/* Enhanced Visual Effects */
#hrs-app .hrs-baggage-datetime-field:hover .hrs-baggage-datetime-input {
    border-color: #d1d5db !important;
}

#hrs-app .hrs-baggage-datetime-field:hover .hrs-baggage-calendar-icon {
    color: #3b82f6 !important;
}

/* Loading State for Calendar */
#hrs-app .hrs-baggage-calendar-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    color: #6b7280 !important;
}

/* Success Animation for Date Selection */
#hrs-app .hrs-baggage-calendar-day.hrs-baggage-selected {
    animation: hrs-date-select 0.3s ease-out !important;
}

@keyframes hrs-date-select {
    0% {
        transform: scale(1) !important;
        background: #3b82f6 !important;
    }
    50% {
        transform: scale(1.1) !important;
        background: #2563eb !important;
    }
    100% {
        transform: scale(1) !important;
        background: #3b82f6 !important;
    }
}

/* Improved Focus States */
#hrs-app .hrs-baggage-time-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

#hrs-app .hrs-baggage-ampm-btn:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* Calendar Navigation Improvements */
#hrs-app .hrs-baggage-prev-month:disabled,
#hrs-app .hrs-baggage-next-month:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Tooltip for Calendar Icon */
#hrs-app .hrs-baggage-calendar-icon:hover::after {
    content: 'Click to select date and time' !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    background: #1f2937 !important;
    color: white !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
    margin-top: 4px !important;
}

#hrs-app .hrs-baggage-send-request-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    background: #0ea5e9 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 24px !important;
}

#hrs-app .hrs-baggage-send-request-btn:hover {
    background: #0284c7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3) !important;
}

/* ===== BAGGAGE CONFIRMATION STYLES ===== */

/* Baggage Confirmation Header */
#hrs-app .hrs-baggage-confirmation-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-baggage-confirmation-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
}

#hrs-app .hrs-baggage-confirmation-logo {
   max-width: 140px !important;
    height: auto !important;
}

/* Baggage Confirmation Content */
#hrs-app .hrs-baggage-confirmation-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 40px 20px !important;
    min-height: 60vh !important;
    margin-top: 25px !important;
    text-align: center !important;
}

#hrs-app .hrs-baggage-confirmation-icon-container {
    margin-bottom: 32px !important;
}

#hrs-app .hrs-baggage-confirmation-icon-circle {
    width: 80px !important;
    height: 80px !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3) !important;
}

#hrs-app .hrs-baggage-confirmation-check-icon {
    font-size: 36px !important;
    color: white !important;
}

#hrs-app .hrs-baggage-confirmation-text-section {
    margin-bottom: 40px !important;
}

#hrs-app .hrs-baggage-confirmation-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 12px 0 !important;
}

#hrs-app .hrs-baggage-confirmation-subtitle {
    font-size: 16px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

#hrs-app .hrs-baggage-confirmation-details {
    background: #f8fafc !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 32px !important;
    text-align: left !important;
}

#hrs-app .hrs-baggage-confirmation-detail-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

#hrs-app .hrs-baggage-confirmation-detail-row:last-child {
    border-bottom: none !important;
}

#hrs-app .hrs-baggage-confirmation-detail-label {
    font-size: 14px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}

#hrs-app .hrs-baggage-confirmation-detail-value {
    font-size: 16px !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
}

#hrs-app .hrs-baggage-confirmation-actions {
    display: flex !important;
    gap: 16px !important;
}

#hrs-app .hrs-baggage-confirmation-back-btn {
    flex: 1 !important;
    padding: 16px 24px !important;
    background: white !important;
    color: #374151 !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#hrs-app .hrs-baggage-confirmation-back-btn:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

#hrs-app .hrs-baggage-confirmation-request-btn {
    flex: 1 !important;
    padding: 16px 24px !important;
    background: #0ea5e9 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#hrs-app .hrs-baggage-confirmation-request-btn:hover {
    background: #0284c7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3) !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
}

#hrs-app .hrs-service-box.hrs-coming-soon:hover {
    transform: none !important;
    border-color: #e5e7eb !important;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Disabled Service Box Styling */
#hrs-app .hrs-service-box.hrs-disabled {

    cursor: not-allowed !important;
    pointer-events: none !important;
}

#hrs-app .hrs-service-box.hrs-disabled:hover {
    transform: none !important;
    border-color: #e5e7eb !important;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Track Status Section - Match image design */
#hrs-app .hrs-track-status-section {
    margin-bottom: 24px !important;
}

#hrs-app .hrs-track-status-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-track-status-title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    letter-spacing: -2%;
    margin: 0 !important;
}

#hrs-app .hrs-view-all-btn {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    color: #1B1B1B !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
}

#hrs-app .hrs-view-all-btn:hover {
    color: #2563eb !important;
    text-decoration: none !important;
    /* background: rgba(59, 130, 246, 0.1) !important; */
}

#hrs-app .hrs-view-all-btn i {
    font-size: 12px !important;
    margin-left: 2px !important;
}

/* Recent Requests Slider - Match image design */
#hrs-app .hrs-recent-requests-container {
    overflow: visible !important;
    border-radius: 12px !important;
}

#hrs-app .hrs-recent-requests-slider 
{   display: flex !important;
       gap: 12px !important;
     overflow-x: auto !important;
     scroll-behavior: smooth !important;
    cursor: grab !important;
    -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
    }
      
#hrs-app .hrs-recent-requests-slider::-webkit-scrollbar {
        display: none !important;
    }
    
    #hrs-app .hrs-recent-requests-slider:active {  cursor: grabbing !important;
    }

/* Home Request Card - New Design to Match Image */
#hrs-app .hrs-home-request-card {
    width: 100% !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

#hrs-app .hrs-home-request-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* Header Section: Request Name + Status Badge */
#hrs-app .hrs-home-request-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

/* 12-01-26 */
#hrs-app .hrs-home-request-name {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* 12-01-26 */
#hrs-app .hrs-home-status-badge {
    padding: 3px 12px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.025em !important;
}

/* Status Badge Colors - Orange for Pending */
#hrs-app .hrs-home-status-badge.hrs-status-pending {
    background: #FDB022 !important;
    color: white !important;
}

#hrs-app .hrs-home-status-badge.hrs-status-assigned {
    background: #dbeafe !important;
    color: #2563eb !important;
}

#hrs-app .hrs-home-status-badge.hrs-status-ontheway {
    background: #c7d2fe !important;
    color: #4338ca !important;
}

#hrs-app .hrs-home-status-badge.hrs-status-completed {
    background: #bbf7d0 !important;
    color: #059669 !important;
}

/* Body Section: Request ID, Est. Time, Progress */
#hrs-app .hrs-home-request-body {
    margin-bottom: 16px !important;
}

#hrs-app .hrs-home-request-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-home-request-row:last-child {
    margin-bottom: 0 !important;
}

#hrs-app .hrs-home-request-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#hrs-app .hrs-home-request-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* Progress Section */
#hrs-app .hrs-home-progress-section {
    margin-top: 12px !important;
    padding-top: 0px !important;
    /* border-top: 1px solid #f3f4f6 !important; */
}

#hrs-app .hrs-home-progress-container {
    width: 100% !important;
    height: 6px !important;
    background: #f3f4f6 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    position: relative !important;
}

#hrs-app .hrs-home-progress-bar {
    height: 100% !important;
    /* background: linear-gradient(90deg, #3b82f6, #1d4ed8) !important; */
    background: #039855;
    border-radius: 3px !important;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

#hrs-app .hrs-home-progress-bar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 20px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3)) !important;
    animation: hrs-progress-shine 2s ease-in-out infinite !important;
}

#hrs-app .hrs-home-progress-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#hrs-app .hrs-home-progress-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#hrs-app .hrs-home-progress-percent {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-shadow: 0 1px 2px rgba(234, 88, 12, 0.1) !important;
}

/* Footer Section: View Details + Delete Button */
#hrs-app .hrs-home-request-footer {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

#hrs-app .hrs-home-view-details-btn {
    flex: 1 !important;
    padding: 10px 16px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    height: 44px !important;
}

#hrs-app .hrs-home-view-details-btn:hover {
    background: #2563eb !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

#hrs-app .hrs-home-delete-btn {
    width: 40px !important;
    height: 40px !important;
    background: #FEE4E2 !important;
    border: 1px solid #FEE4E2 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

#hrs-app .hrs-home-delete-btn:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

#hrs-app .hrs-home-delete-icon {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-home-delete-btn:hover .hrs-home-delete-icon {
    filter: brightness(0) saturate(100%) invert(11%) sepia(100%) saturate(4456%) hue-rotate(349deg) brightness(101%) contrast(107%) !important;
    transform: scale(1.1) !important;
}

/* Hidden Services List */
#hrs-app .hrs-services-list {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #e8f0f5 !important;
    z-index: 10 !important;
    border-radius: 24px 24px 0 0 !important;
}

#hrs-app #hrs-services-list {
    border-radius: 0 !important;
    background-color: white !important;
    background-image: url('../images/img/shape-bg.png') !important;
    background-size: 100% auto !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Services Items Container */
#hrs-app .hrs-services-items-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Status Page Styles */
#hrs-app .hrs-status-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

#hrs-app .hrs-status-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
}

/* Service Item Styles */

#hrs-app .hrs-service-item {
display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border: 1px solid #f0f0f0 !important;
  text-decoration: none !important;
  color: #1a1a1a !important;
  transition: all 0.2s ease !important;
  border-radius: 12px;
  margin: 6px 0px !important;
  position: relative !important;
}

#hrs-app .hrs-service-item:hover {
    background-color: #0270AD !important;
    color: #FFF !important;
    text-decoration: none !important;
    box-shadow: 0px 4px 16.6px 0px #45556687;
    border: 1px solid #9CABB3 !important;
}

#hrs-app .hrs-service-item:hover .hrs-service-title,
#hrs-app .hrs-service-item:hover .hrs-service-subtitle {
    color: #FFF !important;
}

#hrs-app .hrs-service-item:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(62deg) brightness(107%) contrast(101%);
}

#hrs-app .hrs-service-item:hover .hrs-service-icon {
    background-color: #FFFFFF57 !important;
}


#hrs-app .hrs-service-icon {
    width: 40px !important;
    height: 40px !important;
   border: 1px solid #eee !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#hrs-app .hrs-service-icon img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}

#hrs-app .hrs-service-title {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
}

#hrs-app .hrs-service-arrow {
    font-size: 28px !important;
    color: #000 !important;
    flex-shrink: 0 !important;
}

#hrs-app .hrs-service-item:hover .hrs-service-arrow {
    color: #666 !important;
}

/* Feedback Item Special Layout */
#hrs-app .hrs-service-item-feedback {
    align-items: flex-start !important;

}

#hrs-app .hrs-service-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#hrs-app .hrs-service-subtitle {
    font-size: 12px !important;
    color: #999 !important;
    font-weight: 400 !important;
}

#hrs-app .hrs-service-item-feedback .hrs-service-arrow {
    margin-top: 8px !important;
}
/* ===== LOADING AND ERROR STATES ===== */

/* Loading Container */
#hrs-app .hrs-loading-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    text-align: center !important;
}

#hrs-app .hrs-loading-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid #f0f0f0 !important;
    border-top: 3px solid #0066cc !important;
    border-radius: 50% !important;
    animation: hrs-spin 1s linear infinite !important;
    margin-bottom: 16px !important;
}

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

#hrs-app .hrs-loading-text {
    font-size: 16px !important;
    color: #666 !important;
    margin: 0 !important;
}

#hrs-app .hrs-error-message {
    text-align: center !important;
    color: #ff4444 !important;
    padding: 40px 20px !important;
    font-size: 16px !important;
    margin: 0 !important;
    background: #fff5f5 !important;
    border: 1px solid #ffebee !important;
    border-radius: 8px !important;
}

/* ===== WAKEUP CALL DESIGN (STEP 9 - MATCHING PROVIDED IMAGE) ===== */

/* Wakeup Header */
#hrs-app .hrs-wakeup-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-wakeup-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    margin-top: -9px !important;
}

#hrs-app .hrs-wakeup-header-content .hrs-logo-container {
    margin-bottom: 0 !important;
}

#hrs-app .hrs-wakeup-logo {
   max-width: 140px !important;
    height: auto !important;
}

/* Wakeup Content - White container */
#hrs-app .hrs-wakeup-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px !important;
    min-height: 60vh !important;
}

/* Title Section - Inside white container */
#hrs-app .hrs-wakeup-title-section {
    margin-bottom: 20px !important;
}

#hrs-app .hrs-wakeup-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-wakeup-description {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    /* background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 32px 24px 40px 24px !important;
    min-height: 60vh !important;
    margin-top: 0 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 1 !important; */
}

/* Wakeup Image Container */
#hrs-app .hrs-wakeup-image-container {
    display: flex !important;
    justify-content: center !important;
}

#hrs-app .hrs-wakeup-image-container .hrs-wakeup-image-circle i::before {
    opacity: 0;
}

#hrs-app .hrs-wakeup-image-container .hrs-wakeup-image-circle i {
    background-image: url(../images/icons/wakeup-call.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 48px;
    height: 48px;
}



#hrs-app .hrs-wakeup-icon {
    font-size: 48px !important;
    color: #0066cc !important;
}

/* Wakeup Info Section */
#hrs-app .hrs-wakeup-info-section {
    margin-bottom: 40px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #EEEEEE !important;
}

#hrs-app .hrs-wakeup-service-name {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
}

#hrs-app .hrs-wakeup-service-description {
    font-size: 14px !important;
    color: #999 !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* Wakeup Time Display */
#hrs-app .hrs-wakeup-display-section {
    margin-bottom: 40px !important;
}

/* 12-01-26 */
#hrs-app .hrs-wakeup-time-display {
    font-size: 30px !important;
    font-weight: 500 !important;
    color: #0066cc !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Wakeup Image Container */
#hrs-app .hrs-wakeup-image-container {
    display: flex !important;
    justify-content: center !important;
}



#hrs-app .hrs-wakeup-icon {
    font-size: 48px !important;
    color: #0066cc !important;
}

/* Wakeup Info Section */
#hrs-app .hrs-wakeup-info-section {
    margin-bottom: 40px !important;
}

#hrs-app .hrs-wakeup-service-name {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
}

#hrs-app .hrs-wakeup-service-description {
    font-size: 14px !important;
    color: #999 !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* Wakeup Time Display */
#hrs-app .hrs-wakeup-display-section {
    margin-bottom: 40px !important;
}

/* 12-01-26 */
#hrs-app .hrs-wakeup-time-display {
    font-size: 30px !important;
    font-weight: 500 !important;
    color: #0066cc !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Wakeup Selectors Section */
#hrs-app .hrs-wakeup-selectors-section {
    margin-bottom: 20px !important;
    text-align: left !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 5 !important;
}

#hrs-app .hrs-wakeup-selectors-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 10px !important;
    margin-top: 16px !important;
}

#hrs-app .hrs-wakeup-selectors-label:first-child {
    margin-top: 0 !important;
}

/* Date Selector Styling */
#hrs-app .hrs-wakeup-date-selector {
    margin-bottom: 16px !important;
}

#hrs-app .hrs-wakeup-date-input {
    width: 100% !important;
    height: 44px !important;
    padding: 12px 16px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #1B1B1B !important;
    background: white !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

#hrs-app .hrs-wakeup-date-input:focus {
    border: 1px solid #18181B !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.1) !important;
}

#hrs-app .hrs-wakeup-selectors {
    display: grid !important;
    gap: 12px !important;
    align-items: flex-start !important;
    position: relative !important;
    z-index: 10 !important;
    grid-template-columns: repeat(3, 1fr);
}

#hrs-app .hrs-wakeup-selector-group {
    position: relative !important;
    z-index: 15 !important;
}

/* Override nice-select for wakeup dropdowns - use normal HTML select */
#hrs-app .hrs-wakeup-select.nice-select {
    display: none !important;
}

#hrs-app .hrs-wakeup-select {
    width: 100% !important;
    height: 44px !important;
    padding: 0 16px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: white !important;
    color: #333 !important;
    cursor: pointer !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("../images/icons/arrow-down-round.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    font-weight: 600 !important;
    position: relative !important;
    z-index: 10 !important;
    display: block !important;
    font-weight: 500 !important;
}

#hrs-app .hrs-wakeup-select:focus {
    border: 1px solid #18181B !important;
    outline: none !important;
    z-index: 20 !important;
}

/* Fix dropdown options styling */
#hrs-app .hrs-wakeup-select option {
    background: white !important;
    color: #333 !important;
    padding: 8px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Send Request Button */
#hrs-app .hrs-wakeup-send-request-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    font-family: inherit !important;
    margin-top: 20px !important;
    position: relative !important;
    z-index: 5 !important;
}

#hrs-app .hrs-wakeup-send-request-btn:hover {
    background: #0052a3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
}

/* Responsive adjustments for wakeup selectors */
@media (max-width: 480px) {
    #hrs-app .hrs-wakeup-selectors {
        gap: 8px !important;
    }

    
    #hrs-app .hrs-wakeup-select {
        font-size: 14px !important;
        height: 45px !important;
        padding: 0 12px !important;
    }
    
    /* 12-01-26 */
    #hrs-app .hrs-wakeup-time-display {
        font-size: 25px !important;
    }
    
    #hrs-app .hrs-wakeup-content {
        padding: 24px 16px 32px 16px !important;
    }
    
    #hrs-app .hrs-wakeup-selectors-section {
        margin-bottom: 20px !important;
    }
}

/* Ensure proper stacking context */
#hrs-app .hrs-step {
    position: relative !important;
    z-index: 1 !important;
}

#hrs-app #hrs-step-9 {
    overflow: visible !important;
}

/* Hide any nice-select elements in wakeup step */
#hrs-app #hrs-step-9 .nice-select {
    display: none !important;
}

/* Ensure wakeup selectors are always visible as normal selects */
#hrs-app #hrs-step-9 select.hrs-wakeup-select {
    display: block !important;
    visibility: visible !important;
}

/* Override any nice-select interference */
#hrs-app .hrs-wakeup-selector-group .nice-select {
    display: none !important;
}

#hrs-app .hrs-wakeup-selector-group select {
    display: block !important;
}

/* ===== FEEDBACK DESIGN (STEP 10 - MATCHING PROVIDED IMAGE) ===== */

/* Feedback Header */
#hrs-app .hrs-feedback-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-feedback-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    margin-top: -9px !important;
}

#hrs-app .hrs-feedback-logo {
    max-width: 140px !important;
    height: auto !important;
}

/* Feedback Content - White container */
#hrs-app .hrs-feedback-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px !important;
    min-height: 60vh !important;
    margin-top: 25px !important;
}

/* Title Section - Inside white container */
#hrs-app .hrs-feedback-title-section {
    margin-bottom: 20px !important;
}

#hrs-app .hrs-feedback-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-feedback-description {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.4 !important;

}

/* Feedback Content - White container */
#hrs-app .hrs-feedback-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px 20px 20px !important;
    min-height: 60vh !important;
    margin-top: 0 !important;
}

/* Rating Section */
#hrs-app .hrs-rating-section {
    margin-bottom: 14px !important;
}

#hrs-app .hrs-rating-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 !important;
}

#hrs-app .hrs-required {
    color: #ff4444 !important;
    margin-left: 2px !important;
}

#hrs-app .hrs-rating-container {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    line-height: 1 !important;
}

#hrs-app .hrs-stars-container {
    display: flex !important;
    gap: 8px !important;
}

#hrs-app .hrs-star {
    font-size: 32px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #e0e0e0 !important;
}

#hrs-app .hrs-star.active {
    color: #ffa500 !important;
}

#hrs-app .hrs-star:hover {
    transform: scale(1.1) !important;
}

#hrs-app .hrs-rating-text {
    font-weight: 400 !important;
    line-height: 100% !important;
    color: #000000 !important;
    font-size: 14px !important;
}

/* Feedback Text Section */
#hrs-app .hrs-feedback-text-section {
    margin-bottom: 32px !important;
}

#hrs-app .hrs-feedback-text-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 !important;
}

#hrs-app .hrs-feedback-textarea {
    width: 100% !important;
    min-height: 120px !important;
    padding: 16px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: white !important;
    color: #333 !important;
    resize: vertical !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
}

#hrs-app .hrs-feedback-textarea:focus {
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
}

#hrs-app .hrs-feedback-textarea::placeholder {
    color: #999 !important;
    font-style: italic !important;
}

/* Submit Button */
#hrs-app .hrs-feedback-submit-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    font-family: inherit !important;
}

#hrs-app .hrs-feedback-submit-btn:hover {
    background: #0052a3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
}

/* Responsive adjustments for feedback */
@media (max-width: 480px) {
    #hrs-app .hrs-rating-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    
    #hrs-app .hrs-stars-container {
        gap: 6px !important;
    }
    
    #hrs-app .hrs-star {
        font-size: 28px !important;
    }
    
    #hrs-app .hrs-feedback-content {
        padding: 20px 20px 20px 20px !important;
    }
}

/* ===== CONFIRMATION SCREEN DESIGN (STEP 6 - MATCHING PROVIDED IMAGE) ===== */

/* Confirmation Header */
#hrs-app .hrs-confirmation-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-confirmation-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-confirmation-logo {
   max-width: 140px !important;
    height: auto !important;
}

/* Confirmation Content - White container */
#hrs-app .hrs-confirmation-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 40px 24px 24px 24px !important;
    min-height: 70vh !important;
    margin-top: 0 !important;
    text-align: center !important;
}

/* Confirmation Icon */
#hrs-app .hrs-confirmation-icon-container {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-confirmation-icon-circle {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    /* background: #00C851 !important; */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-image: url(../images/icons/thank-you.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    box-shadow: 0px 12.5px 25px -6px #00000040 !important;
}

#hrs-app #hrs-step-6 .hrs-confirmation-icon-circle i::before {
    opacity: 0 !important;
}

#hrs-app .hrs-confirmation-check-icon {
    font-size: 36px !important;
    color: white !important;
}

/* Confirmation Text Section */
#hrs-app .hrs-confirmation-text-section {
    margin-bottom: 20px !important;
}

#hrs-app .hrs-confirmation-title {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
}

#hrs-app .hrs-confirmation-subtitle {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    letter-spacing: -1%;
}

/* Confirmation Details */
#hrs-app .hrs-confirmation-details {
    margin-bottom: 20px !important;
    text-align: left !important;
    padding: 8px 16px !important;
    border-radius: 12px !important;
    border: 1px solid #EEEEEE !important;
}

#hrs-app .hrs-confirmation-details > div:last-child {
    padding-bottom: 0 !important;
}

#hrs-app .hrs-confirmation-detail-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 10px !important;
}

#hrs-app .hrs-confirmation-detail-row:last-child {
    border-bottom: none !important;
}

#hrs-app #hrs-step-6 .hrs-confirmation-status-badge {
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 3px 12px !important;
}

#hrs-app .hrs-confirmation-detail-label {
    font-size: 14px !important;
    color: #667085 !important;
    font-weight: 400 !important;
}

#hrs-app .hrs-confirmation-detail-value {
    font-size: 14px !important;
    color: #1B1B1B !important;
    font-weight: 500 !important;
}

#hrs-app .hrs-confirmation-status-badge {
    background: #FFA726 !important;
    color: white !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Confirmation Actions */
#hrs-app .hrs-confirmation-actions {
    display: flex !important;
    gap: 16px !important;
}

#hrs-app .hrs-confirmation-back-btn[type="button"] {
    flex: 1 !important;
    padding: 6px 24px !important;
    background: white !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#hrs-app .hrs-confirmation-back-btn[type="button"]:hover {
    border: 1px solid rgb(51, 51, 51) !important;
}

#hrs-app .hrs-confirmation-track-btn {
    flex: 1 !important;
    padding: 16px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    font-family: inherit !important;
}

#hrs-app .hrs-confirmation-track-btn:hover {
    background: #0052a3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
}

/* Override default step styles for confirmation screen */
#hrs-app #hrs-step-6 {
    background-image: none !important;
    padding: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    /* 12-01-26 */
    #hrs-app .hrs-confirmation-actions {
        /* flex-direction: column !important; */
        gap: 12px !important;
    }
    
    #hrs-app .hrs-confirmation-back-btn,
    #hrs-app .hrs-confirmation-track-btn {
        width: 100% !important;
    }
}

/* Luggage Header */
#hrs-app .hrs-luggage-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-luggage-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-luggage-logo {
   max-width: 140px !important;
    height: auto !important;
}

/* Luggage Content - White container */
#hrs-app .hrs-luggage-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 32px 20px 24px 20px !important;
    min-height: 70vh !important;
    margin-top: 0 !important;
    text-align: center !important;
}

/* Title Section */
#hrs-app .hrs-luggage-title-section {
    margin-bottom: 40px !important;
}

#hrs-app .hrs-luggage-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
    margin: 0 0 8px 0 !important;
    text-align: left !important;
}

#hrs-app .hrs-luggage-description {
    font-size: 14px !important;
    color: #667085 !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    letter-spacing: -2% !important;
}

/* Luggage Image Container */
#hrs-app .hrs-luggage-image-container {
    display: flex !important;
    justify-content: center !important;
}


#hrs-app .hrs-luggage-icon {
    font-size: 48px !important;
    color: #0066cc !important;
}

#hrs-app .hrs-luggage-image-container .hrs-luggage-icon {
    background-image: url(../images/icons/luggage-fill1.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 48px;
    height: 48px;
}

#hrs-app .hrs-luggage-image-container .hrs-luggage-icon::before {
    opacity: 0 !important;
}

#hrs-app .hrs-pickup-option-icon i::before {
    opacity: 0 !important;
}

#hrs-app .hrs-pickup-option-icon i.fa-bed {
    background-image: url(../images/icons/room-key.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 48px;
    height: 48px;
}

#hrs-app .hrs-pickup-option-icon i.fa-building {
    background-image: url(../images/icons/lobby.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 48px;
    height: 48px;
}

/* Luggage Info Section */
#hrs-app .hrs-luggage-info-section {
    margin-bottom: 40px !important;
}

#hrs-app .hrs-luggage-service-name {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 0 6px 0 !important;
    text-align: center !important;
}

#hrs-app .hrs-luggage-service-description {
    font-size: 12px !important;
    color: #98A2B3 !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
    letter-spacing: -2% !important;
}

/* Bags Section */
#hrs-app .hrs-bags-section {
    margin-bottom: 16px !important;
    text-align: left !important;
}

#hrs-app .hrs-bags-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 12px !important;
}

#hrs-app .hrs-bags-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    max-width: 120px !important;
    margin: 0 auto !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 4px !important;
    padding: 8px !important;
}

#hrs-app .hrs-bags-btn[type="button"] {
    width: 25px !important;
    height: 25px !important;
    border: 2px solid #A5A5A5 !important;
    background: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #A5A5A5 !important;
    font-size: 16px !important;
    padding: 6px !important;
    font-weight: 600 !important;
}

#hrs-app .hrs-bags-btn[type="button"]:hover {
    border-color: #1B1B1B !important;
    color: #1B1B1B !important;
    background: transparent !important;
    transform: translateY(0px) !important;
    box-shadow: none !important;
}

#hrs-app #hrs-bag-quantity {
    width: 30px !important;
    text-align: center !important;
    border: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
}

/* Pickup Location Section */
#hrs-app .hrs-pickup-location-section {
    margin-bottom: 16px !important;
    text-align: left !important;
}

#hrs-app .hrs-pickup-location-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-pickup-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#hrs-app .hrs-pickup-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 12px 7px 8px !important;
    background: white !important;
    border: 1px solid rgb(238, 238, 238) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: 0.2s !important;
}

#hrs-app .hrs-pickup-option:hover {
    border-color: #e0e0e0 !important;
    background: #f8f9fa !important;
}

/* #hrs-app .hrs-pickup-option.selected {
    border-color: #0066cc !important;
    background: #f8f9fa !important;
} */

#hrs-app .hrs-pickup-option-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

#hrs-app .hrs-pickup-option-icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    border: 1px solid #EEEEEE !important;
}

#hrs-app .hrs-pickup-option-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#hrs-app .hrs-pickup-option-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    letter-spacing: -1% !important;
}

#hrs-app .hrs-pickup-option-subtitle {
    font-size: 10px !important;
    color: #6b7280 !important;
    letter-spacing: -1% !important;
    font-weight: 400 !important;
}

#hrs-app .hrs-pickup-radio {
    width: 16px !important;
    height: 16px !important;
    border: 4px solid #98A2B3 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-pickup-option.selected .hrs-pickup-radio {
    border-color: #000000 !important;
}

#hrs-app .hrs-radio-inner {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-pickup-option.selected .hrs-radio-inner {
    background: #0066cc !important;
}

/* Pickup Time Section */
#hrs-app .hrs-pickup-time-section {
    margin-bottom: 16px !important;
    text-align: left !important;
}

#hrs-app .hrs-pickup-time-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-pickup-time-select-container {
    position: relative !important;
}

#hrs-app .hrs-pickup-time-select,
#hrs-app #hrs-laundry-pickup-time {
    width: 100% !important;
    padding: 7px 20px !important;
    border: 1px solid rgb(227, 227, 227) !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: url("../images/icons/arrow-down-round.svg") right 16px center / 20px no-repeat !important;
    color: rgb(73, 73, 73) !important;
    cursor: pointer !important;
    outline: none !important;
    appearance: none !important;
    transition: 0.3s !important;
    height: 50px;
    font-weight: 500 !important;
}

#hrs-app .hrs-laundry-pickup-section {
    margin-bottom: 16px !important;
}

#hrs-app .hrs-pickup-time-select:focus,
#hrs-app #hrs-laundry-pickup-time:focus {
    border: 1px solid #1B1B1B !important;
    box-shadow: none !important;
}

/* Instructions Section */
#hrs-app .hrs-luggage-instructions-section {
    margin-bottom: 32px !important;
    text-align: left !important;
}

#hrs-app .hrs-luggage-instructions-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
}

/* 12-01-26 */
#hrs-app .hrs-luggage-instructions-textarea {
    width: 100% !important;
    min-height: 120px !important;
    padding: 16px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 14px !important;
    color: #374151 !important;
    resize: vertical !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

#hrs-app .hrs-luggage-instructions-textarea:focus {
    border: 1px solid #1B1B1B !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 12-01-26 */
#hrs-app .hrs-luggage-instructions-textarea::placeholder {
    color: #999 !important;
    font-size: 14px !important;
}

/* Send Request Button */
#hrs-app .hrs-luggage-send-request-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    font-family: inherit !important;
}

#hrs-app .hrs-luggage-send-request-btn:hover {
    background: #0052a3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
}

/* ===== REGISTRATION SCREEN DESIGN (STEP 2 - MATCHING PROVIDED IMAGE) ===== */

/* Registration Container */
#hrs-app .hrs-registration-container {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 24px !important;
    /* background: linear-gradient(180deg, #E8F4FD 0%, #F8F9FA 100%) !important; */
}

#hrs-app .hrs-registration-content {
    width: 100% !important;
    max-width: 400px !important;
    text-align: center !important;
}

/* Logo Section */
#hrs-app .hrs-registration-logo-container {
    margin-bottom: 24px !important;
}

#hrs-app .hrs-registration-logo {
    max-width: 120px !important;
    height: auto !important;
}

/* Registration Text Section */
#hrs-app .hrs-registration-text-section {
    margin-bottom: 32px !important;
    text-align: left;
}

#hrs-app .hrs-registration-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -2%;
}

#hrs-app .hrs-registration-subtitle {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    letter-spacing: -1%;
}

/* Registration Form */
#hrs-app .hrs-registration-form {
    text-align: left !important;
}

#hrs-app .hrs-form-group {
    margin-bottom: 16px !important;
}

#hrs-app .hrs-form-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-required {
    color: #ff4444 !important;
    margin-left: 2px !important;
}

#hrs-app .hrs-optional {
    color: #ff4444 !important;
    margin-left: 2px !important;
}

#hrs-app .hrs-form-input {
    width: 100% !important;
    height: 50px !important;
    padding: 0 20px !important;
    border: 2px solid #e8e8e8 !important;
    border-radius: 28px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    background: white !important;
    color: #333 !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

#hrs-app .hrs-form-input::placeholder {
    opacity: 0.7 !important;
}

#hrs-app .hrs-form-input:focus {
    border: 1px solid #18181B !important;
    box-shadow: none !important;
}

/* #hrs-app .hrs-form-input:hover {
    border-color: #ccc !important;
} */

#hrs-app .hrs-form-input::placeholder {
    color: #494949 !important;
    font-size: 14px !important;
}

/* Submit Button */
#hrs-app .hrs-registration-submit-btn {
    width: 100% !important;
    height: 45px !important;
    padding: 0 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    font-family: inherit !important;
    margin-top: 0 !important;
}

#hrs-app .hrs-registration-submit-btn:hover {
    background: #0052a3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
}

/* Override default step styles for registration screen */
#hrs-app #hrs-step-2 {
    background-image: none !important;
    padding: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    #hrs-app .hrs-registration-container {
        padding: 20px 16px !important;
    }
    
    #hrs-app .hrs-registration-title {
        font-size: 24px !important;
    }
    
    #hrs-app .hrs-registration-subtitle {
        font-size: 12px !important;
    }
    
    #hrs-app .hrs-form-input {
        height: 50px !important;
        font-size: 14px !important;
    }
    
    #hrs-app .hrs-registration-submit-btn {
        height: 52px !important;
        font-size: 15px !important;
    }
}

/* Welcome Container */
#hrs-app .hrs-welcome-container {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 24px !important;
    /* background: linear-gradient(180deg, #E8F4FD 0%, #F8F9FA 100%) !important; */
}

#hrs-app .hrs-welcome-content {
    width: 100% !important;
    max-width: 400px !important;
    text-align: center !important;
}

/* Logo Section */
#hrs-app .hrs-welcome-logo-container {
    margin-bottom: 24px !important;
}

#hrs-app .hrs-welcome-logo {
    max-width: 120px !important;
    height: auto !important;
}

/* Welcome Text Section */
#hrs-app .hrs-welcome-text-section {
    margin-bottom: 32px !important;
    text-align: left;
}

#hrs-app .hrs-welcome-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

#hrs-app .hrs-welcome-subtitle {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    letter-spacing: -1%;
}

/* Language Section */
#hrs-app .hrs-language-section {
    margin-bottom: 16px !important;
    text-align: left !important;
}

#hrs-app .hrs-language-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-language-select-container {
    position: relative !important;
}

#hrs-app .hrs-language-select {
    width: 100% !important;
    padding: 7px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: white !important;
    color: #494949 !important;
    cursor: pointer !important;
    outline: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 20px !important;
    transition: all 0.3s ease !important;
    height: 50px;
    font-weight: 500 !important;
}

#hrs-app .hrs-language-select:focus {
    border: 1px solid #18181B !important;
    box-shadow: none !important;
}

/* #hrs-app .hrs-language-select:hover {
    border-color: #ccc !important;
} */

/* Continue Button */
#hrs-app .hrs-welcome-continue-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    background: #0066cc !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    font-family: inherit !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-welcome-continue-btn:hover {
    background: #0052a3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
}

/* Footer Text */
#hrs-app .hrs-welcome-footer-text {
    font-size: 12px !important;
    color: #A5A5A5 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    letter-spacing: -1%;
}

/* Override default step styles for welcome screen */
#hrs-app #hrs-step-1 {
    background-image: none !important;
    padding: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    #hrs-app .hrs-welcome-container {
        padding: 20px 20px !important;
    }
    
    #hrs-app .hrs-welcome-title {
        font-size: 24px !important;
    }
    
    #hrs-app .hrs-welcome-subtitle {
        font-size: 12px !important;
    }
}

/* Item Detail Header */
#hrs-app .hrs-item-detail-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-item-detail-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-item-detail-logo {
   max-width: 140px !important;
    height: auto !important;
}

/* Item Detail Content - White container */
#hrs-app .hrs-item-detail-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 32px 24px 24px 24px !important;
    min-height: 70vh !important;
    margin-top: 0 !important;
    text-align: center !important;
}

/* Title Section */
#hrs-app .hrs-item-detail-title-section {
    margin-bottom: 40px !important;
}

#hrs-app .hrs-item-detail-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Item Image Container */
#hrs-app .hrs-item-image-container {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
}



#hrs-app .hrs-selected-item-image {
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
}

/* Item Info Section */
#hrs-app .hrs-item-info-section {
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #EEEEEE !important;
}

#hrs-app .hrs-item-image-circle {
    width: 48px !important;
    height: 48px !important;
    background-color: #0270AD1F !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hrs-app #hrs-selected-item-display-title.hrs-item-name {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 0 6px 0 !important;
    text-align: center !important;
}

#hrs-app .hrs-item-description {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
    letter-spacing: -2%;
    font-weight: 400 !important;
}

/* Quantity Section */
#hrs-app .hrs-quantity-section {
    margin-bottom: 16px !important;
    text-align: left !important;
}

#hrs-app .hrs-quantity-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 12px !important;
}

#hrs-app .hrs-quantity-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

#hrs-app .hrs-quantity-btn[type="button"] {
    width: 25px !important;
    height: 25px !important;
    border: 2px solid #A5A5A5 !important;
    background: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #A5A5A5 !important;
    font-size: 16px !important;
    padding: 6px !important;
    font-weight: 600 !important;
}

#hrs-app .hrs-quantity-btn[type="button"] i {
    font-weight: 900 !important;
}

#hrs-app .hrs-quantity-btn[type="button"]:hover {
    border-color: #1B1B1B !important;
    color: #1B1B1B !important;
    background: transparent !important;
    transform: translateY(0px) !important;
    box-shadow: none !important;
}

#hrs-app .hrs-quantity-input {
    width: 60px !important;
    height: 48px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
}

/* Instructions Section */
#hrs-app .hrs-instructions-section {
    margin-bottom: 16px !important;
    text-align: left !important;
}

#hrs-app .hrs-instructions-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
}

/* 12-01-26 */
#hrs-app .hrs-instructions-textarea {
    width: 100% !important;
    min-height: 120px !important;
    padding: 16px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 14px !important;
    color: #374151 !important;
    resize: vertical !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

#hrs-app .hrs-instructions-textarea:focus {
    outline: none !important;
    border: 1px solid #1B1B1B !important;
    box-shadow: none !important;
}

#hrs-app .hrs-instructions-textarea::placeholder {
    color: #A5A5A5 !important;
    font-size: 14px !important;
}

/* Send Request Button */
#hrs-app .hrs-send-request-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
    text-align: center !important;
    font-family: inherit !important;
}

#hrs-app .hrs-send-request-btn:hover {
    background: #025a8a !important;
    box-shadow: 0 4px 12px rgba(2, 112, 173, 0.3) !important;
}

#hrs-app .hrs-send-request-btn.hrs-added-to-cart {
    background: #22c55e !important;
    cursor: default !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    justify-content: center !important;
}

#hrs-app .hrs-send-request-btn.hrs-added-to-cart:hover {
    background: #22c55e !important;
    box-shadow: none !important;
}

/* Request Header */
#hrs-app .hrs-request-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app #hrs-services-list .hrs-request-header-content {
    margin-bottom: 0px !important;
}

#hrs-app .hrs-request-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-request-logo {
    max-width: 140px !important;
    height: auto !important;
}

/* Request Content - White container starts here and includes title */
#hrs-app .hrs-request-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px !important;
    /* min-height: calc(100vh - 120px) !important; */
    /* max-height: calc(100vh - 120px) !important; */
    overflow-y: auto !important;
    margin-top: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    position: relative !important;
}

#hrs-app .hrs-request-content .hrs-search-wrapper .hrs-search-icon {
    left: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* Custom scrollbar for request content */
#hrs-app .hrs-request-content::-webkit-scrollbar {
    width: 6px !important;
}

#hrs-app .hrs-request-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 3px !important;
}

#hrs-app .hrs-request-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 3px !important;
}

#hrs-app .hrs-request-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Request Title Section - Now inside white container */
#hrs-app .hrs-request-title-section {
    margin-bottom: 20px !important;
    display: block !important;
}

#hrs-app .hrs-request-title {
    color: #1B1B1B !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 100% !important;
    letter-spacing: -2% !important;
    margin: 0 0 8px 0 !important;
}

#hrs-app .hrs-request-description {
    color: #667085 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    letter-spacing: -2% !important;
}

/* Search Container */
#hrs-app .hrs-search-container {
    margin-bottom: 20px !important;
}

#hrs-app .hrs-search-wrapper {
    position: relative !important;
    width: 100% !important;
}

#hrs-app .hrs-search-input {
    width: 100% !important;
    padding: 16px 20px 16px 50px !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    background: #f8f9fa !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

#hrs-app .hrs-search-input:focus {
    outline: none !important;
    border-color: #0066cc !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
}

#hrs-app .hrs-search-wrapper:hover .hrs-search-icon,
#hrs-app .hrs-search-input:focus ~ .hrs-search-icon-container .hrs-search-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

#hrs-app .hrs-search-input::placeholder {
    color: #999 !important;
    font-size: 16px !important;
}

#hrs-app .hrs-search-wrapper .hrs-search-icon-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

#hrs-app .hrs-search-wrapper .hrs-search-icon {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(89%) contrast(89%) !important;
    transition: all 0.2s ease !important;
}

/* Items Container */
#hrs-app .hrs-items-container {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Updated Clean Item Styles for Request Page */
#hrs-app .hrs-items-container .hrs-clean-item {
    margin: 12px 0px !important;
    padding: 0 !important;
    list-style: none !important;
}

#hrs-app .hrs-items-container .hrs-clean-item-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 8px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    position: relative !important;
}

#hrs-app .hrs-items-container .hrs-clean-item-link:hover {
    background-color: #B4D8FF29 !important;
    color: inherit !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
}

#hrs-app .hrs-items-container .hrs-clean-item-link:hover .hrs-clean-item-icon,
#hrs-app .hrs-other-request-option:hover .others__icon {
    background-color: #007AFF1F !important;
    border: 1px solid transparent !important;
    transition: 0.2s all ease-in-out !important;
}

#hrs-app .hrs-items-container .hrs-clean-item-link:hover .hrs-clean-item-icon img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(84%) saturate(5368%) hue-rotate(201deg) brightness(104%) contrast(105%) !important;
    transition: 0.2s all ease-in-out !important;
}


#hrs-app .hrs-items-container .hrs-clean-item-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
}

#hrs-app .hrs-items-container .hrs-clean-item-icon,
#hrs-app .others__icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background: white !important;
    transition: 0.2s all ease-in-out !important;
}


#hrs-app .hrs-items-container .hrs-default-icon {
    font-size: 20px !important;
    display: block !important;
    text-align: center !important;
}

#hrs-app .hrs-items-container .hrs-clean-item-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
}

#hrs-app .hrs-items-container .hrs-clean-item-arrow {
    font-size: 28px !important;
    flex-shrink: 0 !important;
}

#hrs-app .hrs-items-container .hrs-clean-item-link:hover .hrs-clean-item-arrow {
    color: #666 !important;
}

/* Maintenance Item Checkbox Styles */
#hrs-app .hrs-items-container .hrs-item-checkbox {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

#hrs-app .hrs-items-container .hrs-item-checkbox input[type="checkbox"] {
    display: none !important;
}

#hrs-app .hrs-items-container .hrs-checkbox-label {
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #98A2B3 !important;
    border-radius: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-items-container .hrs-item-checkbox input[type="checkbox"]:checked + .hrs-checkbox-label {
    background: #000000 !important;
    border-color: #000000 !important;
}

#hrs-app .hrs-items-container .hrs-item-checkbox input[type="checkbox"]:checked + .hrs-checkbox-label::after {
    content: '✓' !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: bold !important;
}
/* ===== STATUS TAB DESIGN (MATCHING PROVIDED IMAGE) ===== */

/* No Requests Message */
#hrs-app .hrs-no-requests {
    text-align: center !important;
    color: #999 !important;
    padding: 40px 20px !important;
    font-size: 16px !important;
    margin: 0 !important;
}

/* Status Item Container */
#hrs-app .hrs-status-item {
    background: white !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

#hrs-app .hrs-status-item:last-child {
    margin-bottom: 0 !important;
}

/* Status Header */
#hrs-app .hrs-status-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #EEEEEE !important;
}

#hrs-app .hrs-status-title {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 !important;
    letter-spacing: -1%;
}

#hrs-app .hrs-status-badge {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
}

#hrs-app .hrs-status-badge.hrs-status-submitted {
    background: #3B82F6 !important;
    color: white !important;
}

#hrs-app .hrs-status-badge.hrs-status-pending {
    background: #6B7280 !important;
    color: white !important;
}

#hrs-app .hrs-status-badge.hrs-status-assigned {
    background: #8B5CF6 !important;
    color: white !important;
}

#hrs-app .hrs-status-badge.hrs-status-ontheway {
    background: #F59E0B !important;
    color: white !important;
}

#hrs-app .hrs-status-badge.hrs-status-completed {
    background: #10B981 !important;
    color: white !important;
}

/* Status Details */
#hrs-app .hrs-status-details {
    margin-bottom: 20px !important;
}

#hrs-app .hrs-status-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-status-row:last-child {
    margin-bottom: 0 !important;
}

#hrs-app .hrs-status-label {
    font-size: 12px !important;
    color: #667085 !important;
    font-weight: 400 !important;
    letter-spacing: -1%;
}

#hrs-app .hrs-status-value {
    font-size: 14px !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

/* ===== FRESH PROGRESS BAR DESIGN ===== */

/* Progress Section */
#hrs-app .hrs-progress-section {
    margin-top: 8px !important;
}

#hrs-app .hrs-progress-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-progress-percent {
    font-size: 14px !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

/* Fresh Progress Bar Container */
.hrs-progress-container {
    width: 100% !important;
    height: 5px !important;
    background-color: #e5e7eb !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid #d1d5db !important;
}

/* Fresh Progress Fill */
.hrs-progress-active {
    height: 100% !important;
    width: 0%;
    border-radius: 0 !important;
    transition: width 1.5s ease-out !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Progress Colors */
.hrs-progress-red {
    background-color: #ef4444 !important;
}

.hrs-progress-orange {
    background-color: #f97316 !important;
}

.hrs-progress-green {
    background-color: #22c55e !important;
}

.hrs-progress-dark-green {
    background-color: #16a34a !important;
}

/* Status Actions */
#hrs-app .hrs-status-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#hrs-app .hrs-view-details-btn {
    flex: 1 !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    letter-spacing: -1%;
}

#hrs-app .hrs-view-details-btn:hover {
    background: #0052a3 !important;
    transform: translateY(-1px) !important;
}

#hrs-app .hrs-delete-btn {
    width: 44px !important;
    height: 44px !important;
    background: #FEE4E2 !important;
    color: #DC2626 !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 16px !important;
}

#hrs-app .hrs-delete-btn:hover {
    background: #FECACA !important;
    transform: translateY(-1px) !important;
}

/* ===== DELETE MODAL STYLES ===== */
.hrs-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Notification Delete Modal Specific Styles */
#hrs-notification-delete-modal .hrs-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

#hrs-notification-delete-modal .hrs-modal-content {
    background: white !important;
    border-radius: 20px !important;
    padding: 32px 24px !important;
    max-width: 380px !important;
    width: 100% !important;
    text-align: center !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
    z-index: 100000 !important;
    margin: auto !important;
    transform: scale(1) !important;
    transition: all 0.2s ease-out !important;
}

#hrs-notification-delete-modal .hrs-modal-icon {
    width: 64px !important;
    height: 64px !important;
    background: #FEE4E2 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 24px auto !important;
    font-size: 24px !important;
    color: #DC2626 !important;
}

#hrs-notification-delete-modal .hrs-modal-icon .hrs-delete-modal-icon {
    width: 24px !important;
    height: 24px !important;
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

#hrs-notification-delete-modal .hrs-modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
}

#hrs-notification-delete-modal .hrs-modal-description {
    font-size: 14px !important;
    color: #667085 !important;
    margin: 0 0 32px 0 !important;
    line-height: 1.5 !important;
    font-family: inherit !important;
    font-weight: 400 !important;
}

#hrs-notification-delete-modal .hrs-modal-actions {
    display: flex !important;
    gap: 12px !important;
    flex-direction: row !important;
}

/* 12-01-26 */
#hrs-notification-delete-modal .hrs-modal-btn {
    flex: 1 !important;
    padding: 11px 20px !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    font-family: inherit !important;
    outline: none !important;
}

#hrs-notification-delete-modal .hrs-modal-btn-keep {
    background: #0270AD !important;
    color: white !important;
    border: none !important;
}

#hrs-notification-delete-modal .hrs-modal-btn-keep:hover {
    background: #0052a3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(2, 112, 173, 0.3) !important;
}

#hrs-notification-delete-modal .hrs-modal-btn-delete {
    background: white !important;
    color: #344054 !important;
    border: 1px solid #D0D5DD !important;
}

#hrs-notification-delete-modal .hrs-modal-btn-delete:hover {
    background: #f8f9fa !important;
    border-color: #98A2B3 !important;
}

.hrs-modal-content {
    background: white !important;
    border-radius: 20px !important;
    padding: 32px 24px !important;
    max-width: 380px !important;
    width: 100% !important;
    text-align: center !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
    z-index: 100000 !important;
    margin: auto !important;
    transform: scale(1) !important;
    transition: all 0.2s ease-out !important;
}

.hrs-modal-icon {
    width: 64px !important;
    height: 64px !important;
    background: #FEE4E2 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 24px auto !important;
    font-size: 24px !important;
    color: #DC2626 !important;
}

#hrs-add-provider-modal .hrs-modal-icon {
    width: 48px !important;
    height: 48px !important;
    background: #A4FDC2 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    color: white !important;
    font-size: 32px !important;
    margin-bottom: 16px !important;
    position: relative !important;
}

#hrs-add-provider-modal .hrs-modal-icon i {
    line-height: 1 !important;
    opacity: 0;
}

#hrs-add-provider-modal .hrs-modal-icon::before {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    background-image: url("../images/icons/home-icon.svg");
    background-repeat: no-repeat;
    background-position: center;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 11;
}

#hrs-app #hrs-add-provider-modal .hrs-modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    line-height: 1 !important;
    font-size: 20px !important;
}

.hrs-modal-icon .hrs-delete-modal-icon {
    width: 24px !important;
    height: 24px !important;
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

.hrs-modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
}

.hrs-modal-description {
    font-size: 14px !important;
    color: #667085 !important;
    margin: 0 0 32px 0 !important;
    line-height: 1.5 !important;
    font-family: inherit !important;
    font-weight: 400 !important;
}

.hrs-modal-actions {
    display: flex !important;
    gap: 12px !important;
    flex-direction: row !important;
}

/* 12-01-26 */
.hrs-modal-btn {
    flex: 1 !important;
    padding: 11px 20px !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    font-family: inherit !important;
    outline: none !important;
    height: 44px !important;
}

.hrs-modal-btn-keep {
    background: #0270AD !important;
    color: white !important;
    border: none !important;
}

.hrs-modal-btn-keep:hover {
    background: #0052a3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(2, 112, 173, 0.3) !important;
}

.hrs-modal-btn-delete {
    background: white !important;
    color: #344054 !important;
    border: 1px solid #D0D5DD !important;
}

.hrs-modal-btn-delete:hover {
    background: #f8f9fa !important;
    border-color: #98A2B3 !important;
}

/* Responsive modal design */
@media (max-width: 480px) {
    .hrs-modal-content {
        margin: 20px !important;
        padding: 24px 20px !important;
        max-width: calc(100vw - 40px) !important;
    }
    
    .hrs-modal-title {
        font-size: 16px !important;
    }
    
    .hrs-modal-description {
        font-size: 13px !important;
        margin-bottom: 24px !important;
    }
    
    /* 12-01-26 */
    .hrs-modal-actions {
        flex-direction: row !important;
        gap: 8px !important;
    }
    
    /* 12-01-26 */
    .hrs-modal-btn {
        width: 100% !important;
        padding: 11px 20px !important;
    }
}
/* ===== REQUEST DETAILS PAGE DESIGN (MATCHING PROVIDED IMAGE) ===== */

/* Details Title Section */
#hrs-app .hrs-details-title-section {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 32px !important;
}

#hrs-app .hrs-details-title {
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 100% !important;
    letter-spacing: -2% !important;
    color: #1B1B1B !important;
    margin: 0 !important;
}

#hrs-app .hrs-details-status-badge {
    padding: 3px 12px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    background: #FDB022 !important;
    color: white !important;
    letter-spacing: -1% !important;
}

/* Details Grid - Each section in bordered box */
#hrs-app .hrs-details-grid {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 24px !important;
}

#hrs-app .hrs-details-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    border-bottom: 1px solid #EEEEEE !important;
    padding-bottom: 8px !important;
}

#hrs-app .hrs-details-item:last-child,
#hrs-app .hrs-details-item:nth-child(5) {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

#hrs-app .hrs-details-label {
    font-size: 12px !important;
    color: #667085 !important;
    font-weight: 400 !important;
    letter-spacing: -1%;
}

#hrs-app .hrs-details-value {
    font-size: 16px !important;
    color: #1B1B1B !important;
    font-weight: 500 !important;
    letter-spacing: -1%;
}

/* Section Titles */
#hrs-app .hrs-section-title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #EEEEEE !important;
}

/* Requested Item Section - Bordered Box */
#hrs-app .hrs-requested-item-section {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-item-display {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    /* padding: 16px 0 !important; */
}

#hrs-app #hrs-detail-item-wrapper #hrs-detail-item {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 12px 8px !important;
}

#hrs-app .hrs-item-icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0270AD1F !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
}

#hrs-app .hrs-item-icon img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
}

#hrs-app .hrs-item-icon-emoji {
    font-size: 28px !important;
}

#hrs-app .hrs-item-name {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    letter-spacing: -1% !important;
}

/* Staff Section - Bordered Box */
#hrs-app .hrs-staff-section {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-staff-info {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

#hrs-app .hrs-staff-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: white !important;
    flex-shrink: 0 !important;
}

#hrs-app .hrs-staff-details {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

#hrs-app .hrs-staff-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
}

#hrs-app .hrs-staff-role {
    font-size: 12px !important;
    color: #666 !important;
    font-weight: 400 !important;
}

#hrs-app .hrs-staff-status {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    background: #D1FADF !important;
    color: #039855 !important;
}

/* Progress Tracking Section - Bordered Box */
#hrs-app .hrs-progress-tracking-section {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 40px !important;
}

#hrs-app .hrs-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

#hrs-app .hrs-timeline-step {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 0 !important;
    position: relative !important;
}

#hrs-app .hrs-timeline-step:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    left: 20px !important;
    top: 56px !important;
    width: 2px !important;
    height: 33px !important;
    background: #22c55e !important;
}

#hrs-app .hrs-timeline-step.inactive::after {
    background: #e5e7eb !important;
}

#hrs-app .hrs-timeline-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#hrs-app .hrs-timeline-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: white !important;
    flex-shrink: 0 !important;
}

#hrs-app .hrs-timeline-icon.completed {
    background: #22c55e !important;
}

#hrs-app .hrs-timeline-icon.current,
#hrs-app .hrs-timeline-icon.completed {
    background: #00C950 !important;
    background-image: url(../images/icons/right.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
}

#hrs-app .hrs-timeline-icon.current i,
#hrs-app .hrs-timeline-icon.completed i {
    opacity: 0 !important;
}

#hrs-app .hrs-timeline-icon.inactive {
    background: #e5e7eb !important;
    color: #9ca3af !important;
}

#hrs-app .hrs-timeline-icon.inactive i {
    width: 10px !important;
    height: 10px !important;
    background-color: #D0D5DD !important;
    border-radius: 50% !important;
}

#hrs-app .hrs-timeline-icon.inactive i::before {
    opacity: 0 !important;
}

#hrs-app .hrs-timeline-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
}

#hrs-app .hrs-timeline-text.inactive {
    color: #9ca3af !important;
}

#hrs-app .hrs-timeline-time {
    font-size: 12px !important;
    color: #666 !important;
    font-weight: 400 !important;
}

/* Action Buttons */
#hrs-app .hrs-details-actions {
    display: flex !important;
    gap: 16px !important;
}

#hrs-app .hrs-cancel-btn[type="button"] {
    flex: 1 !important;
    padding: 6px 24px !important;
    background: white !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#hrs-app .hrs-cancel-btn[type="button"]:hover {
    border: 1px solid #333 !important;
}

#hrs-app .hrs-another-btn {
    flex: 1 !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 25px !important;
    background: #0270AD !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#hrs-app .hrs-another-btn:hover {
    background: #0052a3 !important;
    transform: translateY(-1px) !important;
}

#hrs-app .hrs-edit-btn {
    flex: 1 !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 25px !important;
    background: #0270AD !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#hrs-app .hrs-edit-btn:hover {
    background: #0052a3 !important;
    transform: translateY(-1px) !important;
}
/* Prevent emoji conversion for default icons */
#hrs-app .hrs-default-item-icon {
    font-size: 24px !important;
    display: block !important;
    text-align: center !important;
    font-family: inherit !important;
    line-height: 1 !important;
}

/* Ensure emoji doesn't get converted to external SVG */
#hrs-app .hrs-item-icon .emoji {
    display: none !important;
}

/* Prevent WordPress from converting emojis to external SVGs */
#hrs-app .hrs-default-icon img.emoji {
    display: none !important;
}

#hrs-app .hrs-default-icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

/* Allow admin uploaded images, wp-content images, and our icon assets to display */
#hrs-app .hrs-item-icon img:not([src*="admin"]):not([src*="upload"]):not([src*="wp-content"]):not([src*="assets/images/icons/"]):not(.hrs-item-type-image):not(.hrs-item-admin-image) {
    display: none !important;
}

/* Ensure our type-based icons always display */
#hrs-app .hrs-item-icon .hrs-item-type-image,
#hrs-app .hrs-item-icon .hrs-item-admin-image {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
}

#hrs-app .hrs-item-icon .hrs-item-admin-image {
    width: 24px !important;
    height: 24px !important;
    background-color: transparent !important;
}
/* Item type specific icons */
#hrs-app .hrs-item-type-icon {
    font-size: 24px !important;
    display: block !important;
    text-align: center !important;
    font-family: inherit !important;
    line-height: 1 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===== NOTIFICATION PANEL DESIGN ===== */

/* Notification Panel - Full screen overlay */
#hrs-app .hrs-notification-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1002 !important;
    display: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 20px !important;
    overflow-y: auto !important;
}

#hrs-app .hrs-notification-panel.active {
    display: flex !important;
}

/* Notification Modal Container */
#hrs-app .hrs-notification-modal {
    background: white !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 400px !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    margin-top: 100px !important;
}

/* Notification Header */
#hrs-app .hrs-notification-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px 16px 24px !important;
    border-bottom: none !important;
    background: white !important;
    border-radius: 16px 16px 0 0 !important;
}

#hrs-app .hrs-notification-title {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
}

#hrs-app .hrs-notification-close {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #666 !important;
    transition: all 0.2s ease !important;
    font-size: 18px !important;
}

#hrs-app .hrs-notification-close:hover {
    background: #f5f5f5 !important;
    color: #333 !important;
}

/* Notification Content */
#hrs-app .hrs-notification-content {
    padding: 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    background: white !important;
}

/* Individual Notification Item */
#hrs-app .hrs-notification-item {
    background: white !important;
    margin: 0 0 16px 0 !important;
    padding: 16px 16px !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
}

#hrs-app .hrs-notification-item:hover {
    background: #f8f9fa !important;
    border-color: #e0e0e0 !important;
}

#hrs-app .hrs-notification-item:last-child {
    margin-bottom: 20px !important;
}

/* Notification Item Header */
#hrs-app .hrs-notification-item-header {
    /* display: flex !important; */
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #EEEEEE !important;
}

#hrs-app .hrs-notification-request-id {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin: 0 0 0 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -1% !important;
    margin-bottom: 4px !important;
}

#hrs-app .hrs-notification-time-status {
    display: flex !important;
    /* flex-direction: column !important; */
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

#hrs-app .hrs-notification-time {
    font-size: 12px !important;
    color: #999 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

#hrs-app .hrs-notification-status {
    padding: 4px 9px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    white-space: nowrap !important;
    margin-top: -10px !important;
    display: inline-block !important;
    height: 23px;
}

/* Status Colors - Matching your image */
#hrs-app .hrs-notification-status.pending {
    background: #FFA500 !important;
    color: white !important;
}

#hrs-app .hrs-notification-status.submitted {
    background: #FFA500 !important;
    color: white !important;
}

#hrs-app .hrs-notification-status.assigned {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
}

#hrs-app .hrs-notification-status.ontheway {
    background: #cfe2ff !important;
    color: #084298 !important;
}

#hrs-app .hrs-notification-status.completed {
    background: #28a745 !important;
    color: white !important;
}

#hrs-app .hrs-notification-status.success {
    background: #039855 !important;
    color: white !important;
}

#hrs-app .hrs-notification-status.cancelled {
    background: #dc3545 !important;
    color: white !important;
}

/* Notification Item Content */
#hrs-app .hrs-notification-item-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
}

#hrs-app .hrs-notification-item-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: #e8f4fd !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#hrs-app .hrs-notification-item-icon img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
}

#hrs-app .hrs-notification-item-details {
    flex: 1 !important;
}

#hrs-app .hrs-notification-item-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -1% !important;
}

#hrs-app .hrs-notification-item-message {
    font-size: 12px !important;
    color: #98A2B3 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: -1% !important;
}

/* Notification Actions */
#hrs-app .hrs-notification-actions {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

#hrs-app .hrs-notification-view-btn {
    flex: 1 !important;
    padding: 12px 24px !important;
    background: #0066cc !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hrs-app .hrs-notification-view-btn:hover {
    background: #0052a3 !important;
}

#hrs-app .hrs-notification-delete-btn {
    width: 44px !important;
    height: 44px !important;
    background: #ffe6e6 !important;
    color: #ff4444 !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

#hrs-app .hrs-notification-delete-btn:hover {
    background: #ffcccc !important;
}

/* Empty State */
#hrs-app .hrs-notification-empty {
    text-align: center !important;
    padding: 40px 24px !important;
    color: #999 !important;
}

#hrs-app .hrs-notification-empty-icon {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

#hrs-app .hrs-notification-empty-text {
    font-size: 16px !important;
    margin: 0 !important;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    #hrs-app .hrs-notification-panel {
        padding: 10px !important;
    }
    
    #hrs-app .hrs-notification-modal {
        max-width: 100% !important;
     
    }
    
    #hrs-app .hrs-notification-item {
        padding: 16px 16px !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
    
    #hrs-app .hrs-notification-item-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    #hrs-app .hrs-notification-time-status {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    /* Keep buttons side by side on mobile too */
    #hrs-app .hrs-notification-actions {
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
    }
    
    #hrs-app .hrs-notification-view-btn {
        flex: 1 !important;
        height: 44px !important;
    }
    
    #hrs-app .hrs-notification-delete-btn {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }
}




/* hrs-step-3 */

#hrs-app #hrs-step-3,
#hrs-app #hrs-step-4,
#hrs-app #hrs-step-7,
#hrs-app #hrs-step-5,
#hrs-app #hrs-step-15,
#hrs-app #hrs-step-25 {
    padding: 0 !important;
}

/* ===== SWIMMING POOL SLIDER STYLES ===== */

/* CSS */
#hrs-swimming-pool-slider {
    opacity: 0;
    transition: opacity 3s ease; /* smooth fade-in */
}

#hrs-swimming-pool-slider.ready {
    opacity: 1 !important;
}

/* Swimming Pool Slider Container */
#hrs-app .hrs-swimming-pool-slider-container {
    position: relative !important;
    width: 100% !important;
    height: 190px !important;
    margin-bottom: 24px !important;
    overflow: visible !important;
    padding: 0 40px !important;
}

/* Swimming Pool Slider */
#hrs-app .hrs-swimming-pool-slider {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Swimming Pool Slide */
#hrs-app .hrs-swimming-pool-slide {
    position: absolute !important;
    width: 100% !important;
    height: 220px !important;
    opacity: 0.6 !important;
    transform: scale(1) translateX(-95%) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

#hrs-app .hrs-swimming-pool-slide:nth-child(3) {
    transform: scale(1) translateX(128%) !important;
}

/* Active Slide - Center */
#hrs-app .hrs-swimming-pool-slide.active {
    opacity: 1 !important;
    transform: scale(1) translateX(0) !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 220px !important;
}

/* Previous Slide - Left */
#hrs-app .hrs-swimming-pool-slide.prev {
    opacity: 0.6 !important;
    transform: scale(1) translateX(-95%) !important;
    z-index: 2 !important;
}

/* Next Slide - Right */
#hrs-app .hrs-swimming-pool-slide.next {
    opacity: 0.6 !important;
    transform: scale(0.75) translateX(125%) !important;
    z-index: 2 !important;
}

/* Swimming Pool Image */
#hrs-app .hrs-swimming-pool-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

#hrs-app .hrs-swimming-pool-slide.active .hrs-swimming-pool-image {
    box-shadow: none !important;
}

/* Navigation Buttons */
#hrs-app .hrs-swimming-pool-nav {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

#hrs-app .hrs-swimming-pool-prev,
#hrs-app .hrs-swimming-pool-next {
    width: 40px !important;
    height: 40px !important;
    background: white !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    pointer-events: auto !important;
    color: #333 !important;
    font-size: 18px !important;
}

#hrs-app .hrs-swimming-pool-prev:hover,
#hrs-app .hrs-swimming-pool-next:hover {
    background: #0270AD !important;
    color: white !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 16px rgba(2, 112, 173, 0.3) !important;
}

#hrs-app .hrs-swimming-pool-prev {
    margin-left: 0 !important;
}

#hrs-app .hrs-swimming-pool-next {
    margin-right: 0 !important;
}

/* Slider Dots */
#hrs-app .hrs-swimming-pool-dots {
    position: absolute !important;
    bottom: -30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 4 !important;
}

#hrs-app .hrs-swimming-pool-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #D0D5DD !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#hrs-app .hrs-swimming-pool-dot.active {
    /* width: 24px !important; */
    /* border-radius: 4px !important; */
    background: #0270AD !important;
}

#hrs-app .hrs-swimming-pool-dot:hover {
    background: #98A2B3 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #hrs-app .hrs-swimming-pool-slider-container {
        height: 190px !important;
        padding: 0 30px !important;
    }
    
    #hrs-app .hrs-swimming-pool-slide {
        height: 200px !important;
    }
    
    #hrs-app .hrs-swimming-pool-slide.active,
    #hrs-app .hrs-swimming-pool-slide.prev,
    #hrs-app .hrs-swimming-pool-slide.next {
        height: 200px !important;
    }
    
    #hrs-app .hrs-swimming-pool-prev,
    #hrs-app .hrs-swimming-pool-next {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
}


@media (min-width: 481px) {

    #hrs-app .hrs-swimming-pool-slider-container {
        height: 220px !important;
    }

    #hrs-app .hrs-swimming-pool-slide:nth-child(3) {
        transform: scale(1) translateX(96%) !important;
    }

    #hrs-app .hrs-swimming-pool-slide:nth-child(2) {
        transform: scale(1) translateX(-96%) !important;
    }

    #hrs-app .hrs-swimming-pool-slide.active {
        transform: scale(1) translateX(0) !important;
    }

    #hrs-app .hrs-swimming-pool-slide.prev {
        transform: scale(1) translateX(-96%) !important;
    }
    
    #hrs-app .hrs-swimming-pool-slide.next {
        transform: scale(1) translateX(96%) !important;
    }
}


@media (min-width: 768px) {

    #hrs-app .hrs-swimming-pool-slider-container {
        height: 244px !important;
    }

    #hrs-app .hrs-swimming-pool-slide {
        height: 220px !important;
    }

    #hrs-app .hrs-swimming-pool-slide:nth-child(3) {
        transform: scale(1) translateX(98%) !important;
    }

    #hrs-app .hrs-swimming-pool-slide:nth-child(2) {
        transform: scale(1) translateX(-98%) !important;
    }

    #hrs-app .hrs-swimming-pool-slide.active {
        transform: scale(1) translateX(0) !important;
        height: 220px !important;
    }

    #hrs-app .hrs-swimming-pool-slide.prev {
        transform: scale(1) translateX(-98%) !important;
        height: 220px !important;
    }

    #hrs-app .hrs-swimming-pool-slide.next {
        transform: scale(1) translateX(98%) !important;
        height: 220px !important;
    }

}

@media (max-width: 480px) {
    #hrs-app .hrs-swimming-pool-slider-container {
        height: 190px !important;
        padding: 0 25px !important;
    }
    
    #hrs-app .hrs-swimming-pool-slide {
        height: 172px !important;
        width: 75% !important;
    }
    
    #hrs-app .hrs-swimming-pool-slide.active {
        height: 172px !important;
        width: 100% !important;
    }
    
    #hrs-app .hrs-swimming-pool-slide.prev {
        transform: scale(1) translateX(-95%) !important;
        height: 172px !important;
    }
    
    #hrs-app .hrs-swimming-pool-slide.next {
        transform: scale(1) translateX(128%) !important;
        height: 172px !important;
    }
    
    #hrs-app .hrs-swimming-pool-prev,
    #hrs-app .hrs-swimming-pool-next {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
}

/* ===== GYM SLIDER STYLES ===== */

/* Gym Slider Container */
#hrs-app .hrs-gym-slider-container {
    position: relative !important;
    width: 100% !important;
    height: 190px !important;
    margin-bottom: 24px !important;
    overflow: visible !important;
    padding: 0 40px !important;
}

/* Gym Slider */
#hrs-app .hrs-gym-slider {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Gym Slide */
#hrs-app .hrs-gym-slide {
    position: absolute !important;
    width: 70% !important;
    height: 220px !important;
    opacity: 0.6 !important;
    transform: scale(1) translateX(-95%) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

#hrs-app .hrs-gym-slide img {
    box-shadow: none !important;
}

#hrs-app .hrs-gym-slide:nth-child(3) {
    transform: scale(1) translateX(128%) !important;
}

/* Active Slide - Center */
#hrs-app .hrs-gym-slide.active {
    opacity: 1 !important;
    transform: scale(1) translateX(0) !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 220px !important;
}

/* Previous Slide - Left */
#hrs-app .hrs-gym-slide.prev {
    opacity: 0.6 !important;
    transform: scale(1) translateX(-92%) !important;
    z-index: 2 !important;
}

/* Next Slide - Right */
#hrs-app .hrs-gym-slide.next {
    opacity: 0.6 !important;
    transform: scale(1) translateX(128%) !important;
    z-index: 2 !important;
}

/* Gym Image */
#hrs-app .hrs-gym-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

#hrs-app .hrs-gym-slide.active .hrs-gym-image {
    box-shadow: none !important;
}

/* Navigation Buttons */
#hrs-app .hrs-gym-nav {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

#hrs-app .hrs-gym-prev,
#hrs-app .hrs-gym-next {
    width: 40px !important;
    height: 40px !important;
    background: white !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    pointer-events: auto !important;
    color: #333 !important;
    font-size: 18px !important;
}

#hrs-app .hrs-gym-prev:hover,
#hrs-app .hrs-gym-next:hover {
    background: #0270AD !important;
    color: white !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 16px rgba(2, 112, 173, 0.3) !important;
}

#hrs-app .hrs-gym-prev {
    margin-left: 0 !important;
}

#hrs-app .hrs-gym-next {
    margin-right: 0 !important;
}

/* Slider Dots */
#hrs-app .hrs-gym-dots {
    position: absolute !important;
    bottom: -30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 4 !important;
}

#hrs-app .hrs-gym-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #D0D5DD !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#hrs-app .hrs-gym-dot.active {
    /* width: 24px !important; */
    /* border-radius: 4px !important; */
    background: #0270AD !important;
}

#hrs-app .hrs-gym-dot:hover {
    background: #98A2B3 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #hrs-app .hrs-gym-slider-container {
        height: 190px !important;
        padding: 0 30px !important;
    }
    
    #hrs-app .hrs-gym-slide {
        height: 200px !important;
    }
    
    #hrs-app .hrs-gym-slide.active,
    #hrs-app .hrs-gym-slide.prev,
    #hrs-app .hrs-gym-slide.next {
        height: 200px !important;
    }
    
    #hrs-app .hrs-gym-prev,
    #hrs-app .hrs-gym-next {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    
}

@media (min-width: 481px) {

    #hrs-app .hrs-gym-slider-container {
        height: 220px !important;
    }

    #hrs-app .hrs-gym-slide:nth-child(3) {
        transform: scale(1) translateX(138%) !important;
    }

    #hrs-app .hrs-gym-slide:nth-child(2) {
        transform: scale(1) translateX(-95%) !important;
    }

    #hrs-app .hrs-gym-slide.active {
        transform: scale(1) translateX(0) !important;
    }

    #hrs-app .hrs-gym-slide.prev {
        transform: scale(1) translateX(-98%) !important;
    }
    
    #hrs-app .hrs-gym-slide.next {
        transform: scale(1) translateX(139%) !important;
    }
}

@media (min-width: 768px) {

    #hrs-app .hrs-gym-slider-container {
        height: 244px !important;
    }

    #hrs-app .hrs-gym-slide:nth-child(3) {
        transform: scale(1) translateX(141%) !important;
    }

    #hrs-app .hrs-gym-slide:nth-child(2) {
        transform: scale(1) translateX(-98%) !important;
    }

    #hrs-app .hrs-gym-slide.active {
        height: 220px !important;
        transform: scale(1) translateX(0) !important;
    }

    #hrs-app .hrs-gym-slide.prev {
        transform: scale(1) translateX(-98%) !important;
        height: 220px !important;
    }
    
    #hrs-app .hrs-gym-slide.next {
        transform: scale(1) translateX(141%) !important;
        height: 220px !important;
    }
}

@media (max-width: 480px) {
    #hrs-app .hrs-gym-slider-container {
        height: 190px !important;
        padding: 0 25px !important;
    }
    
    #hrs-app .hrs-gym-slide {
        height: 172px !important;
        width: 75% !important;
    }
    
    #hrs-app .hrs-gym-slide.active {
        height: 172px !important;
        width: 100% !important;
    }
    
    #hrs-app .hrs-gym-slide.prev {
        transform: scale(1) translateX(-95%) !important;
        height: 172px !important;
    }
    
    #hrs-app .hrs-gym-slide.next {
        transform: scale(1) translateX(128%) !important;
        height: 172px !important;
    }
    
    #hrs-app .hrs-gym-prev,
    #hrs-app .hrs-gym-next {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
}

/* ===== LAUNDRY SERVICES STYLES ===== */

/* Laundry Header - Match image design */
#hrs-app .hrs-laundry-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-laundry-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    margin-top: -9px !important;
}

#hrs-app .hrs-laundry-logo {
   max-width: 140px !important;
    height: auto !important;
}

/* Step 11: Laundry Selection Content */
#hrs-app .hrs-laundry-selection-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px !important;
    min-height: 60vh !important;
    margin-top: 25px !important;
}

#hrs-app .hrs-laundry-title-section {
    margin-bottom: 20px !important;
}

#hrs-app .hrs-laundry-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-laundry-description {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Step 12: Laundry Content - Match image design */
#hrs-app .hrs-laundry-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px !important;
    min-height: 60vh !important;
}

#hrs-app .hrs-laundry-main-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-laundry-main-description {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Service Selection - Match image design */
#hrs-app .hrs-laundry-service-section {
    margin-bottom: 24px !important;
}

#hrs-app .hrs-laundry-service-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475467 !important;
    margin-bottom: 20px !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-laundry-services {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#hrs-app .hrs-laundry-service-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 12px 7px 8px !important;
    background: white !important;
    border: 1px solid rgb(238, 238, 238) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: 0.2s !important;
}

#hrs-app .hrs-laundry-service-option:hover {
    background: rgb(249, 250, 251) !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px !important;
}

/* #hrs-app .hrs-laundry-service-option.selected {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
} */

#hrs-app .hrs-laundry-service-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
}

#hrs-app .hrs-laundry-service-option .hrs-laundry-service-icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    border: 1px solid #EEEEEE !important;
}

#hrs-app .hrs-laundry-service-option .hrs-laundry-service-icon img {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
}

#hrs-app .hrs-laundry-service-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#hrs-app .hrs-laundry-service-option .hrs-laundry-service-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    letter-spacing: -1% !important;
}

#hrs-app .hrs-laundry-service-subtitle {
    font-size: 10px !important;
    color: #6b7280 !important;
    letter-spacing: -1% !important;
    font-weight: 400 !important;
}

#hrs-app .hrs-laundry-radio {
    width: 16px !important;
    height: 16px !important;
    border: 4px solid #98A2B3 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-laundry-service-option.selected .hrs-laundry-radio {
    border-color: #000000 !important;
}

#hrs-app .hrs-radio-inner {
    width: 8px !important;
    height: 8px !important;
    background: white !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

#hrs-app .hrs-laundry-service-option.selected .hrs-radio-inner {
    opacity: 1 !important;
}

/* Numbers of Item - Match image design */
#hrs-app .hrs-laundry-items-section {
    margin-bottom: 16px !important;
}

#hrs-app .hrs-laundry-items-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 12px !important;
}

#hrs-app .hrs-laundry-items-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    max-width: 120px !important;
    margin: 0 auto !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 4px !important;
    padding: 8px !important;
}

#hrs-app .hrs-laundry-quantity-btn[type="button"] {
    width: 25px !important;
    height: 25px !important;
    border: 2px solid #A5A5A5 !important;
    background: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #A5A5A5 !important;
    font-size: 16px !important;
    padding: 6px !important;
    font-weight: 600 !important;
}

#hrs-app .hrs-laundry-quantity-btn[type="button"]:hover {
    border-color: #1B1B1B !important;
    color: #1B1B1B !important;
    background: transparent !important;
    transform: translateY(0px) !important;
    box-shadow: none !important;
}

#hrs-app .hrs-laundry-quantity-btn:active {
    transform: scale(0.95) !important;
}

#hrs-app #hrs-laundry-quantity {
    width: 30px !important;
    text-align: center !important;
    border: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
}

/* Pickup Time - Match image design */
#hrs-app .hrs-laundry-pickup-time-section {
    margin-bottom: 16px !important;
}

#hrs-app .hrs-laundry-pickup-time-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-laundry-pickup-time-select-container {
    position: relative !important;
}

#hrs-app .hrs-laundry-pickup-time-select {
    width: 100% !important;
    padding: 7px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: white !important;
    color: #494949 !important;
    cursor: pointer !important;
    outline: none !important;
    appearance: none !important;
    background-image: url("../images/icons/arrow-down-round.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 20px !important;
    transition: all 0.3s ease !important;
    height: 50px;
    font-weight: 500 !important;
}

#hrs-app .hrs-laundry-pickup-time-select-container::after {
    opacity: 0 !important;
}

#hrs-app .hrs-laundry-pickup-time-select:focus {
    border: 1px solid #18181B !important;
    box-shadow: none !important;
}

#hrs-app .hrs-laundry-pickup-time-select-container::after {
    content: '' !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 8px solid #6b7280 !important;
    pointer-events: none !important;
}

/* Special Instructions - Match image design */
#hrs-app .hrs-laundry-instructions-section {
    margin-bottom: 40px !important;
}

#hrs-app .hrs-laundry-instructions-label,
#hrs-app .hrs-laundry-pickup-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
}

/* 12-01-26 */
#hrs-app .hrs-laundry-instructions-textarea {
    width: 100% !important;
    min-height: 120px !important;
    padding: 16px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 14px !important;
    color: #374151 !important;
    resize: vertical !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

#hrs-app .hrs-laundry-instructions-textarea:valid {
    background: transparent !important;
}

#hrs-app .hrs-laundry-instructions-textarea:focus {
    outline: none !important;
    border: 1px solid #1B1B1B !important;
    box-shadow: none !important;
}

#hrs-app .hrs-laundry-instructions-textarea::placeholder {
    color: #9ca3af !important;
}

/* Send Request Button - Match image design */
#hrs-app .hrs-laundry-send-request-btn {
    width: 100% !important;
    padding: 20px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 16px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3) !important;
}

#hrs-app .hrs-laundry-send-request-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4) !important;
}

#hrs-app .hrs-laundry-send-request-btn:active {
    transform: translateY(0) !important;
}

#hrs-app .hrs-laundry-send-request-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ===== CLEANING SERVICES STYLES ===== */

/* Cleaning Header - Match image design */
#hrs-app .hrs-cleaning-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-cleaning-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    margin-top: -9px !important;
}

#hrs-app .hrs-cleaning-logo {
   max-width: 140px !important;
    height: auto !important;
}

/* Cleaning Content - Match image design */
#hrs-app .hrs-cleaning-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px !important;
    min-height: 60vh !important;
}

#hrs-app .hrs-cleaning-title-section {
    margin-bottom: 20px !important;
}

#hrs-app .hrs-cleaning-main-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-cleaning-main-description {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Cleaning Service Selection - Match image design */
#hrs-app .hrs-cleaning-service-section {
    margin-bottom: 24px !important;
}

#hrs-app .hrs-cleaning-service-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475467 !important;
    margin-bottom: 20px !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-cleaning-services {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#hrs-app .hrs-cleaning-service-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 12px 7px 8px !important;
    background: white !important;
    border: 1px solid rgb(238, 238, 238) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: 0.2s !important;
}

#hrs-app .hrs-cleaning-service-option:hover {
    background: rgb(249, 250, 251) !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px !important;
}

/* #hrs-app .hrs-cleaning-service-option.selected {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
} */

#hrs-app .hrs-cleaning-service-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
}

#hrs-app .hrs-cleaning-service-option .hrs-cleaning-service-icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    border: 1px solid #EEEEEE !important;
}

#hrs-app .hrs-cleaning-service-option .hrs-cleaning-service-icon img {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
}

#hrs-app .hrs-cleaning-service-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#hrs-app .hrs-cleaning-service-option .hrs-cleaning-service-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    letter-spacing: -1% !important;
}

#hrs-app .hrs-cleaning-service-subtitle {
    font-size: 10px !important;
    color: #6b7280 !important;
    letter-spacing: -1% !important;
    font-weight: 400 !important;
}

#hrs-app .hrs-cleaning-radio {
    width: 16px !important;
    height: 16px !important;
    border: 4px solid #98A2B3 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-cleaning-service-option.selected .hrs-cleaning-radio {
    border-color: #000000 !important;
}

#hrs-app .hrs-cleaning-radio .hrs-radio-inner {
    width: 8px !important;
    height: 8px !important;
    background: #FFF !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

#hrs-app .hrs-cleaning-service-option.selected .hrs-radio-inner {
    opacity: 1 !important;
}

/* Preferred Time - Match image design */
#hrs-app .hrs-cleaning-time-section {
    margin-bottom: 16px !important;
}

#hrs-app .hrs-cleaning-time-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-cleaning-time-select-container {
    position: relative !important;
}

#hrs-app .hrs-cleaning-time-select {
    width: 100% !important;
    padding: 7px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background-color: transparent !important;
    color: #494949 !important;
    cursor: pointer !important;
    outline: none !important;
    appearance: none !important;
    background-image: url("../images/icons/arrow-down-round.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 20px !important;
    transition: all 0.3s ease !important;
    height: 50px;
    font-weight: 500 !important;
}

#hrs-app .hrs-cleaning-time-select-container::after {
    opacity: 0 !important;
}

#hrs-app .hrs-cleaning-time-select:focus {
    border: 1px solid #18181B !important;
    box-shadow: none !important;
}

#hrs-app .hrs-cleaning-time-select-container::after {
    content: '' !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 8px solid #6b7280 !important;
    pointer-events: none !important;
}

/* Special Instructions - Match image design */
#hrs-app .hrs-cleaning-instructions-section {
    margin-bottom: 40px !important;
}

#hrs-app .hrs-cleaning-instructions-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
}

/* 12-01-26 */
#hrs-app .hrs-cleaning-instructions-textarea {
    width: 100% !important;
    min-height: 120px !important;
    padding: 16px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 14px !important;
    color: #374151 !important;
    resize: vertical !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

#hrs-app .hrs-cleaning-instructions-textarea:focus {
    outline: none !important;
    border: 1px solid #1B1B1B !important;
    box-shadow: none !important;
}

#hrs-app .hrs-cleaning-instructions-textarea::placeholder {
    color: #9ca3af !important;
}

/* Send Request Button - Match image design */
#hrs-app .hrs-cleaning-send-request-btn {
    width: 100% !important;
    padding: 20px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 16px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3) !important;
}

#hrs-app .hrs-cleaning-send-request-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4) !important;
}

#hrs-app .hrs-cleaning-send-request-btn:active {
    transform: translateY(0) !important;
}

#hrs-app .hrs-cleaning-send-request-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ===== MAINTENANCE SERVICES STYLES ===== */

/* Maintenance Header - Match image design */
#hrs-app .hrs-maintenance-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-maintenance-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    margin-top: -9px !important;
}

#hrs-app .hrs-maintenance-logo {
    max-width: 140px !important;
    height: auto !important;
}

/* Maintenance Content - Match image design */
#hrs-app .hrs-maintenance-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px !important;
    min-height: 60vh !important;
}

#hrs-app .hrs-maintenance-title-section {
    margin-bottom: 20px !important;
}

#hrs-app .hrs-maintenance-main-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-maintenance-main-description {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Maintenance Search - Match image design */
#hrs-app .hrs-maintenance-search-container {
    margin-bottom: 20px !important;
}

#hrs-app .hrs-maintenance-search-wrapper {
    position: relative !important;
    width: 100% !important;
}

#hrs-app .hrs-maintenance-search-input {
    width: 100% !important;
    padding: 10px 20px 10px 40px !important;
    border: 1px solid #0270AD57 !important;
    border-radius: 40px !important;
    background: transparent !important;
    font-size: 14px !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    box-shadow: 0px 15px 35.5px 0px #B8C6D340 !important;
}

#hrs-app .hrs-maintenance-search-input:focus {
    outline: none !important;
    border-color: #f39c12 !important;
    box-shadow: 0px 15px 35.5px 0px #B8C6D340 !important;
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#hrs-app .hrs-maintenance-search-input::placeholder {
    color: #9ca3af !important;
}

#hrs-app .hrs-maintenance-search-input:valid {
    background-color: transparent !important;
}

#hrs-app .hrs-maintenance-search-icon-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

#hrs-app .hrs-maintenance-search-icon {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(89%) contrast(89%) !important;
}

/* Maintenance Items List - Match image design */
#hrs-app .hrs-maintenance-items-section {
    margin-bottom: 40px !important;
}

#hrs-app .hrs-maintenance-items-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#hrs-app .hrs-maintenance-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px 8px 8px !important;
    background: white !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; */
}

#hrs-app .hrs-maintenance-item:hover {
    background: #f9fafb !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* #hrs-app .hrs-maintenance-item.selected {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
} */

#hrs-app .hrs-maintenance-item-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
}

#hrs-app .hrs-maintenance-item-icon-container {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    border: 1px solid #EEEEEE !important;
    position: relative !important;
}

#hrs-app .hrs-maintenance-item-icon-container img {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

#hrs-app .hrs-maintenance-item-icon-container .hrs-maintenance-item-icon {
    opacity: 0 !important;
}

#hrs-app .hrs-maintenance-item-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    letter-spacing: -1% !important;
    line-height: 20px !important;
}

/* Maintenance Checkbox - Match image design */
#hrs-app .hrs-maintenance-checkbox {
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #667085 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    background: white !important;
    position: relative !important;
}

#hrs-app .hrs-maintenance-item.selected .hrs-maintenance-checkbox {
    border-color: #1B1B1B !important;
    background: #1B1B1B !important;
}

#hrs-app .hrs-maintenance-check-icon {
    color: white !important;
    font-size: 14px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

#hrs-app .hrs-maintenance-item.selected .hrs-maintenance-check-icon {
    opacity: 1 !important;
}

/* Others item with arrow */
#hrs-app .hrs-maintenance-item:last-child .hrs-maintenance-checkbox {
    display: none !important;
}

#hrs-app .hrs-maintenance-arrow {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9ca3af !important;
    font-size: 16px !important;
}

/* Send Request Button - Match image design */
#hrs-app .hrs-maintenance-send-request-btn {
    width: 100% !important;
    padding: 20px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 16px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3) !important;
}

#hrs-app .hrs-maintenance-send-request-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4) !important;
}

#hrs-app .hrs-maintenance-send-request-btn:active {
    transform: translateY(0) !important;
}

#hrs-app .hrs-maintenance-send-request-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ===== OTHER MAINTENANCE REQUEST STYLES ===== */
#hrs-app .hrs-other-maintenance-header {
    padding: 20px 20px 0 20px !important;
    background: transparent !important;
}

#hrs-app .hrs-other-maintenance-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 24px !important;
}

#hrs-app .hrs-other-maintenance-logo {
    max-width: 140px !important;
    height: auto !important;
}

#hrs-app .hrs-other-maintenance-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 24px 20px !important;
    min-height: 70vh !important;
    margin-top: 16px !important;
}

#hrs-app .hrs-other-maintenance-title-section {
    margin-bottom: 32px !important;
}

#hrs-app .hrs-other-maintenance-title {
    color: #1B1B1B !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 100% !important;
    letter-spacing: -2% !important;
    margin: 0 0 8px 0 !important;
}

#hrs-app .hrs-other-maintenance-description {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

#hrs-app .hrs-other-maintenance-form-section {
    margin-bottom: 40px !important;
}

#hrs-app .hrs-other-maintenance-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475467 !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-other-maintenance-textarea {
    width: 100% !important;
    min-height: 120px !important;
    padding: 16px !important;
    border: 1px solid #D0D5DD !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #344054 !important;
    background: white !important;
    resize: vertical !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-other-maintenance-textarea:focus {
    border-color: #0270AD !important;
    box-shadow: 0 0 0 3px rgba(2, 112, 173, 0.1) !important;
}

#hrs-app .hrs-other-maintenance-textarea::placeholder {
    color: #98A2B3 !important;
}

#hrs-app .hrs-other-maintenance-create-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 20px !important;
}

#hrs-app .hrs-other-maintenance-create-btn:hover {
    background: #0052a3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(2, 112, 173, 0.3) !important;
}

#hrs-app .hrs-other-maintenance-create-btn:disabled {
    background: #98A2B3 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Responsive design for other maintenance */
@media (max-width: 480px) {
    #hrs-app .hrs-other-maintenance-content {
        padding: 20px 16px !important;
    }
    
    #hrs-app .hrs-other-maintenance-textarea {
        min-height: 100px !important;
        padding: 14px !important;
    }
}



#hrs-app #hrs-step-8,
#hrs-app #hrs-step-9,
#hrs-app #hrs-step-10,
#hrs-app #hrs-step-12,
#hrs-app #hrs-step-13,
#hrs-app #hrs-step-14,
#hrs-app #hrs-step-15,
#hrs-app #hrs-step-16,
#hrs-app #hrs-step-17,
#hrs-app #hrs-step-18,
#hrs-app #hrs-step-19,
#hrs-app #hrs-step-20,
#hrs-app #hrs-step-21,
#hrs-app #hrs-step-22,
#hrs-app #hrs-step-23,
#hrs-app #hrs-step-24 {
    padding: 0 !important;
}




/* for page transition */
#page-loader {
    position: fixed !important;
    inset: 0 !important;
    background: white !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease !important;
}

body.loading #page-loader {
    opacity: 1 !important;
    pointer-events: all !important;
}

body{
    animation: fadeIn 0.9s ease;
}

#hrs-services-list  {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ===== TIMELINE TIME STYLES ===== */
#hrs-app .hrs-timeline-time {
    font-size: 12px !important;
    color: #666 !important;
    font-weight: 500 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
}

#hrs-app .hrs-timeline-time-pending {
    font-size: 12px !important;
    color: #999 !important;
    font-weight: 400 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    font-style: italic !important;
}

#hrs-app .hrs-timeline-step {
    justify-content: space-between !important;
    width: 100% !important;
}

#hrs-app .hrs-timeline-step.inactive .hrs-timeline-time {
    color: #ccc !important;
}

#hrs-app .hrs-timeline-step.inactive .hrs-timeline-time-pending {
    color: #ddd !important;
}

/* Ensure timeline steps have proper spacing for times */
#hrs-app .hrs-timeline-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
}
/* ===== FEEDBACK THANK YOU PAGE STYLES ===== */
#hrs-app .hrs-feedback-thank-you-container {
    min-height: 100vh !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#hrs-app .hrs-feedback-thank-you-header {
padding: 20px 20px 0 20px !important;
  background: transparent !important;
}

#hrs-app .hrs-feedback-thank-you-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 60px 20px 80px 20px !important;
    border-radius: 24px 24px 0 0 !important;
    background: #fff !important;
}

#hrs-app .hrs-feedback-success-icon {
    margin-bottom: 16px !important;
}

#hrs-app .feedback-header-main {
    display: flex !important;
    align-items: center !important  ;
    justify-content: space-between !important;
}

#hrs-app .hrs-success-circle {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0px 12.5px 25px -6px #00000040 !important;
    margin: 0 auto !important;
    background-image: url(../images/icons/thank-you.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#hrs-app .hrs-success-circle i {
    font-size: 42px !important;
    color: white !important;
    font-weight: 900 !important;
    opacity: 0 !important;
}

#hrs-app .hrs-feedback-thank-you-message {
    margin-bottom: 32px !important;
}

#hrs-app .hrs-feedback-thank-you-title {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
    line-height: 1.1 !important;
}

#hrs-app .hrs-feedback-thank-you-subtitle {
    font-size: 12px !important;
    color: #667085 !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

/* Rating Card - matching your image design */
#hrs-app .hrs-feedback-rating-card {
    background: white !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 20px !important;
    width: 100% !important;
    border: 1px solid #EEEEEE !important;
    border-bottom: 0 !important;
}

#hrs-app .hrs-rating-stars {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    line-height: 1 !important;
}

#hrs-app .hrs-star-filled {
    color: #fbbf24 !important;
    font-size: 40px !important;
}

#hrs-app .hrs-star-empty {
    color: #e5e7eb !important;
    font-size: 40px !important;
}

#hrs-app .hrs-rating-text {
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #1B1B1B !important;
    letter-spacing: 0.07px !important;
}

/* Feedback Message Card - matching your image design */
#hrs-app .hrs-feedback-message-card {
    background: white !important;
    border-radius: 0 0 12px 12px !important;
    padding: 20px !important;
    margin-bottom: 32px !important;
    width: 100% !important;
    border: 1px solid #EEEEEE !important;
    border-top: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
}

#hrs-app .hrs-feedback-message-card::after {
    content: "" !important;
    position: absolute !important;
    width: 93% !important;
    height: 1px !important;
    background-color: #EEEEEE !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 0 !important;
}

#hrs-app .hrs-feedback-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #667085 !important;
    letter-spacing: -0.15px !important;
}

#hrs-app .hrs-feedback-message-text {
    font-size: 14px !important;
    color: #1B1B1B !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    letter-spacing: -0.15px !important;
    text-align: end !important;
}

#hrs-app .hrs-feedback-actions {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Back to Home Button - matching your image (white with border) */
#hrs-app .hrs-feedback-home-btn {
    flex: 1 !important;
    padding: 6px 24px !important;
    background: white !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    height: 44px !important;
}

#hrs-app .hrs-feedback-home-btn:hover {
    background: #333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    color: white !important;
    text-decoration: none !important;
    border: 1px solid rgb(51, 51, 51) !important;
}

/* Share More Button - matching your image (blue gradient) */
#hrs-app .hrs-feedback-share-btn {
    flex: 1 !important;
    padding: 6px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    height: 44px !important;
}

#hrs-app .hrs-feedback-share-btn:hover {
    background: #333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    color: white !important;
    text-decoration: none !important;
}

/* Mobile responsiveness */
@media (max-width: 480px) {

    /* 12-01-26 */
    #hrs-app .hrs-feedback-actions {
        /* flex-direction: column !important; */
        gap: 12px !important;
    }
    
    #hrs-app .hrs-feedback-thank-you-title {
        font-size: 20px !important;
    }
    
    #hrs-app .hrs-success-circle {
        width: 70px !important;
        height: 70px !important;
    }
    
    #hrs-app .hrs-success-circle i {
        font-size: 28px !important;
    }
    
    #hrs-app .hrs-feedback-rating-card,
    #hrs-app .hrs-feedback-message-card {
        padding: 20px !important;
    }
}
/* ===== MULTI-CATEGORY FEEDBACK FORM STYLES ===== */
#hrs-app .hrs-feedback-content {
    padding: 20px !important;
    background: #f8fafc !important;
    min-height: calc(100vh - 120px) !important;
}

#hrs-app .hrs-feedback-main-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
    text-align: left !important;
    margin-bottom: 40px !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-feedback-categories {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
    background: transparent !important;
}

#hrs-app .hrs-feedback-category {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: none !important;
}

#hrs-app .hrs-feedback-category:hover {
    box-shadow: none !important;
    transform: none !important;
}

#hrs-app .hrs-category-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    margin-bottom: 0 !important;
    flex: 1 !important;
}

#hrs-app .hrs-category-stars {
    display: flex !important;
    gap: 4px !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
}

#hrs-app .hrs-category-star {
    font-size: 32px !important;
    color: #e5e7eb !important;
    cursor: pointer !important;
    transition: all 0.1s ease !important;
    /* padding: 2px !important; */
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
    user-select: none !important;
}

#hrs-app .hrs-category-star:hover {
    color: #fbbf24 !important;
    transform: scale(1.05) !important;
}

#hrs-app .hrs-category-star.active {
    color: #fbbf24 !important;
}

#hrs-app .hrs-category-star.active:hover {
    color: #f59e0b !important;
}

/* Ensure stars are immediately visible */
#hrs-app .hrs-category-star,
#hrs-app .hrs-category-star i,
#hrs-app .fa-star {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

#hrs-app .hrs-feedback-text-section {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 40px !important;
}

#hrs-app .hrs-feedback-text-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #667085 !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
}


/* 12-01-26 */
#hrs-app .hrs-feedback-textarea {
    width: 100% !important;
    min-height: 120px !important;
    padding: 16px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 14px !important;
    color: #374151 !important;
    resize: vertical !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

#hrs-app .hrs-feedback-textarea:focus {
    outline: none !important;
    border: 1px solid #1B1B1B !important;
    box-shadow: none !important;
}

#hrs-app .hrs-feedback-textarea::placeholder {
    color: #9ca3af !important;
    font-style: italic !important;
}

#hrs-app .hrs-feedback-submit-btn {
    width: 100% !important;
    padding: 18px !important;
    /* background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important; */
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 0px !important;
}

#hrs-app .hrs-feedback-submit-btn:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3) !important;
}

#hrs-app .hrs-feedback-submit-btn:active {
    transform: translateY(0) !important;
}

/* Mobile responsiveness for feedback form */
@media (max-width: 480px) {
    #hrs-app .hrs-feedback-main-title {
        font-size: 20px !important;
    }
    
    #hrs-app .hrs-category-label {
        font-size: 14px !important;
    }
    
    #hrs-app .hrs-category-star {
        font-size: 24px !important;
    }
    
    #hrs-app .hrs-category-stars {
        gap: 2px !important;
    }
    
    #hrs-app .hrs-feedback-categories {
        gap: 20px !important;
    }
}
/* ===== FORCE IMMEDIATE STAR VISIBILITY ===== */
#hrs-app .fa-star,
#hrs-app .fa-solid.fa-star,
#hrs-app .hrs-category-star .fa-star,
#hrs-app .hrs-category-star .fa-solid {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #fbbf24 !important;
}

/* Ensure stars load immediately without delay */
#hrs-app .hrs-category-star {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override any theme or plugin interference */
#hrs-app .hrs-feedback-categories .fa-star::before {
    content: "\f005" !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure proper star rendering */
#hrs-app .hrs-category-stars .hrs-category-star i {
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}





/* ===== FLOATING ACTION BUTTON (FAB) ===== */
.hrs-fab-container {
    position: absolute !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
    pointer-events: auto !important;
}

/* Make sure the app container has relative positioning for FAB */
#hrs-app {
    position: relative !important;
}

.hrs-fab-main {
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 6px 16px rgba(25, 118, 210, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    z-index: 100000 !important;
}

.hrs-fab-main img {
    transform: rotate(0deg) !important;
}

.hrs-fab-main.active__a img {
    transform: rotate(45deg) !important;
}

.hrs-fab-main:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(25, 118, 210, 0.5) !important;
}

.hrs-fab-main:active {
    transform: scale(0.95) !important;
}

.hrs-fab-icon {
    font-size: 24px !important;
    color: white !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hrs-fab-main.hrs-fab-active .hrs-fab-icon {
    transform: rotate(45deg) !important;
}

.hrs-fab-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    z-index: 99999 !important;
    position: absolute !important;
    margin-bottom: 8px !important;
    bottom: 60px !important;
    right: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 0 !important;
}

.hrs-fab-menu.active__a {
    visibility: visible !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 1 !important;
}

.hrs-fab-menu.hrs-fab-menu-active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

.hrs-fab-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    background: transparent !important;
    padding: 8px 0px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 180px !important;
    position: relative !important;
    z-index: 100000 !important;
}

.hrs-fab-item:hover {
    transform: scale(1.02) !important;
}

#hrs-fab-container .hrs-fab-item span {
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: -1% !important;
    color: #1B1B1B !important;
    font-size: 14px !important;
}

.hrs-fab-menu.hrs-fab-menu-active .hrs-fab-item {
    opacity: 1 !important;
    animation: hrsFabItemSlideIn 0.3s ease forwards !important;
    /* Debug: Force visibility */
    display: flex !important;
    visibility: visible !important;
}

.hrs-fab-menu.hrs-fab-menu-active .hrs-fab-item:nth-child(1) {
    animation-delay: 0.1s !important;
}

.hrs-fab-menu.hrs-fab-menu-active .hrs-fab-item:nth-child(2) {
    animation-delay: 0.2s !important;
}

.hrs-fab-menu.hrs-fab-menu-active .hrs-fab-item:nth-child(3) {
    animation-delay: 0.3s !important;
}

.hrs-fab-menu.hrs-fab-menu-active .hrs-fab-item:nth-child(4) {
    animation-delay: 0.4s !important;
}

.hrs-fab-item-icon {
    width: 44px !important;
    height: 44px !important;
    background: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0px 4px 10px 0px #00000014 !important;
}

.hrs-fab-item-icon img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
}

.hrs-fab-item-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    white-space: nowrap !important;
}

@keyframes hrsFabItemSlideIn {
    from {
        opacity: 0 !important;
        transform: translateX(20px) scale(0.8) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateX(0) scale(1) !important;
    }
}

/* FAB Backdrop */
.hrs-fab-backdrop,
#page-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #FFFFFF47 !important;
    box-shadow: 0px 4px 4px 0px #FFFFFF26 inset, 0px 0px 16px 0px #FFFFFF0D inset;
    backdrop-filter: blur(11px);
    z-index: 99998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hrs-fab-backdrop.hrs-fab-backdrop-active,
#page-overlay.active__a {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .hrs-fab-container {
    bottom: 120px !important;
    right: 20px !important;
    position: fixed !important;
  }
    
    .hrs-fab-main {
        width: 44px !important;
        height: 44px !important;
    }
    
    .hrs-fab-icon {
        font-size: 22px !important;
    }
    
    .hrs-fab-item {
        min-width: 160px !important;
        padding: 8px 0 !important;
    }
    
    .hrs-fab-item-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .hrs-fab-item-icon img {
        width: 22px !important;
        height: 22px !important;
    }
}

/* Coming Soon Badge */
.hrs-coming-soon-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3) !important;
    z-index: 10 !important;
    animation: comingSoonPulse 2s ease-in-out infinite !important;
}

/* Coming Soon Animation */
@keyframes comingSoonPulse {
    0%, 100% {
        transform: scale(1) !important;
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3) !important;
    }
    50% {
        transform: scale(1.05) !important;
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.5) !important;
    }
}

/* Service Box with Coming Soon */
.hrs-service-box.hrs-coming-soon {
    position: relative !important;
    opacity: 0.8 !important;
    cursor: not-allowed !important;
}

.hrs-service-box.hrs-coming-soon:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.hrs-service-box.hrs-coming-soon .hrs-service-box-icon {
    opacity: 0.8 !important;
}

.hrs-service-box.hrs-coming-soon .hrs-service-box-title {
    opacity: 0.8 !important;
}

/* Mobile Responsive for Coming Soon Badge */
@media (max-width: 768px) {
    .hrs-coming-soon-badge {
        font-size: 9px !important;
        padding: 3px 6px !important;
        top: 6px !important;
        right: 6px !important;
    }
}

/* ===== NOTICE STYLES ===== */
.hrs-notice-container {
    margin: 20px 16px !important;
    background: transparent !important;
    border-radius: 12px !important;
    padding: 16px !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 1px solid #444 !important;
    display: flex;
    flex-direction: column !important;
    gap: 10px !important;
}

.hrs-notice-container:hover {
    transform: translateY(0) !important;
    box-shadow: none !important;
    background: transparent !important;
}

.hrs-notice-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-notice-header .hrs-logo-container {
    margin-left: auto !important;
    margin-right: auto !important;
}

#hrs-app .hrs-notice-header .hrs-logo-container img {
    margin-left: -48px !important;
    width: 118px !important;
    max-width: none !important;
}

.hrs-notice-icon {
    width: 24px !important;
    height: 24px !important;
    margin-right: 12px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
}

.hrs-notice-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    flex: 1 !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
}

.hrs-notice-arrow {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.8 !important;
    transition: transform 0.3s ease !important;
}

.hrs-notice-container:hover .hrs-notice-arrow {
    transform: translateX(4px) !important;
}

.hrs-notice-preview {
    font-size: 14px !important;
    opacity: 0.8 !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
    color: #cccccc !important;
}

.hrs-notice-date {
    font-size: 12px !important;
    opacity: 0.6 !important;
    margin-top: 8px !important;
    color: #aaaaaa !important;
}

/* Notice Detail Modal - Matching the provided image design */
.hrs-notice-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.8) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.hrs-notice-modal-content {
    background: white !important;
    border-radius: 16px !important;
    max-width: 400px !important;
    width: 90% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Header - Light blue background with back button and logo */
.hrs-notice-modal-header {
    background: #c8d6e5 !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 16px 16px 0 0 !important;
}

#hrs-app .hrs-notice-back-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #1B1B1B !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

#hrs-app .hrs-notice-back-btn i {
    width: 15px !important;
}

.hrs-notice-back-btn:hover {
    background: rgba(0,0,0,0.1) !important;
}

.hrs-notice-logo {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.hrs-logo-text {
    background: #666 !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.hrs-logo-inn {
    background: #2196F3 !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Body - White background with notice content */
.hrs-notice-modal-body {
    padding: 24px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    background: white !important;
}

.hrs-notice-main-title {
    color: #2196F3 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

.hrs-notice-date-info {
    text-align: center !important;
    color: #666 !important;
    font-size: 14px !important;
    margin-bottom: 24px !important;
    font-weight: 500 !important;
}

.hrs-notice-body-content {
    color: #333 !important;
    line-height: 1.6 !important;
    font-size: 15px !important;
}

.hrs-notice-body-content p {
    margin: 16px 0 !important;
    color: #333 !important;
}

.hrs-notice-body-content strong {
    color: #333 !important;
    font-weight: 600 !important;
}

.hrs-notice-body-content span[style*="color: #2196F3"] {
    color: #2196F3 !important;
    font-weight: 600 !important;
}

/* Footer - Blue download button */
.hrs-notice-modal-footer {
    padding: 20px !important;
    background: white !important;
    border-radius: 0 0 16px 16px !important;
}

.hrs-download-pdf-btn {
    width: 100% !important;
    background: #2196F3 !important;
    color: white !important;
    border: none !important;
    padding: 16px 20px !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background 0.3s ease !important;
}

.hrs-download-pdf-btn:hover {
    background: #1976D2 !important;
}

.hrs-download-pdf-btn svg {
    width: 20px !important;
    height: 20px !important;
}

/* Animation */
@keyframes hrs-modal-fade-in {
    from {
        opacity: 0 !important;
        transform: scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
}

.hrs-notice-modal-content {
    animation: hrs-modal-fade-in 0.3s ease-out !important;
}

/* Animation */
@keyframes hrs-notice-slide-in {
    from {
        opacity: 0 !important;
        transform: translateY(-20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

.hrs-notice-container {
    animation: hrs-notice-slide-in 0.5s ease-out !important;
}

/* ===== NOTICE DETAIL VIEW STYLES ===== */
#hrs-app .hrs-notice-detail-header {
    background: transparent !important;
    padding: 30px 20px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
}

.hrs-notice-detail-logo {
    height: 32px !important;
    width: auto !important;
}

#hrs-app .hrs-notice-detail-content {
    padding: 28px 20px !important;
    background: transparent !important;
    min-height: auto !important;
    background-color: #FFFFFF !important;
    border-radius: 24px 24px 0 0;
    /* max-height: 500px !important;
    overflow-y: auto !important; */
}

#hrs-app .hrs-notice-detail-title-section {
    background: white !important;
    padding: 24px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

#hrs-app #hrs-notice-detail-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0270AD !important;
    margin: 0 0 4px 0 !important;
    line-height: 24px !important;
}

#hrs-app #hrs-notice-detail-date {
    font-size: 12px !important;
    color: #333333 !important;
    margin: 0 !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    opacity: 1 !important;
}

.hrs-notice-detail-body {
    background: white !important;
    padding: 32px 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    line-height: 1.7 !important;
    font-size: 16px !important;
    color: #333 !important;
    margin-bottom: 24px !important;
}

.hrs-notice-detail-body p {
    margin: 16px 0 !important;
}

.hrs-notice-detail-body p:first-child {
    margin-top: 0 !important;
}

.hrs-notice-detail-body p:last-child {
    margin-bottom: 0 !important;
}

.hrs-notice-detail-body strong {
    font-weight: 600 !important;
    color: #222 !important;
}

.hrs-notice-detail-body br {
    line-height: 1.8 !important;
}

.hrs-notice-detail-actions {
    text-align: center !important;
    padding: 20px 0 !important;
}

.hrs-notice-download-btn {
    background: linear-gradient(135deg, #1e88e5, #1565c0) !important;
    color: white !important;
    border: none !important;
    padding: 16px 32px !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.hrs-notice-download-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(30, 136, 229, 0.4) !important;
}

.hrs-notice-download-btn i {
    font-size: 14px !important;
}

@keyframes hrs-modal-fade-in {
    from {
        opacity: 0 !important;
        transform: scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
}

.hrs-notice-modal-content {
    animation: hrs-modal-fade-in 0.3s ease-out !important;
}

/* ===== NOTICE DETAIL PAGE STYLES ===== */
#hrs-app .hrs-notice-header {
    background: transparent !important;
    padding: 13px 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.hrs-notice-logo {
    height: 28px;
    width: auto;
}

#hrs-app .hrs-notice-content {
    padding: 28px 20px !important;
    background: white !important;
    min-height: calc(100vh - 52px) !important;
    border-radius: 24px !important;
    max-width: 100% !important;
}

#hrs-app .hrs-notice-title-section {
    margin-bottom: 32px !important;
    text-align: center !important;
}

.hrs-notice-title {
    color: #0066CC;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.hrs-notice-date {
    color: #666;
    font-size: 13px;
    margin: 0;
    font-weight: 400;
}

#hrs-app .hrs-notice-greeting {
    margin-bottom: 16px !important;
}

#hrs-app .hrs-notice-greeting p {
    color: #1B1B1B !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 24px !important;
}

#hrs-app .hrs-notice-body {
    color: #333333 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    margin-bottom: 20px !important;
}

.hrs-notice-body p {
    margin: 0 0 18px 0;
}

.hrs-notice-body p:last-child {
    margin-bottom: 0;
}

#hrs-app .hrs-notice-signature {
    margin-bottom: 80px !important;
}

#hrs-app .hrs-notice-signature p {
    color: #333333 !important;
    font-size: 12px !important;
    line-height: 16px !important;
}

#hrs-app p.hrs-notice-signature-name {
    color: #0270AD !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 16px !important;
    margin: 8px 0 !important;
}

#hrs-app p.hrs-notice-signature-title {
    color: #333333 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px;
}

.hrs-notice-actions {
    margin-top: 40px;
    padding: 0 4px;
}

#hrs-app .hrs-notice-download-btn {
    width: 100% !important;
    padding: 12px 20px !important;
    border: none !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-family: inherit !important;
    height: 44px !important;
    background-color: #0270AD !important;
    color: #FFF !important;
}

#hrs-app .hrs-notice-download-btn:hover {
    background: #333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    color: white !important;
    text-decoration: none !important;
}

#hrs-app .hrs-notice-download-btn i {
    position: relative !important;
    width: 20px !important;
}

#hrs-app .hrs-notice-download-btn i::before {
    opacity: 0 !important;
}

#hrs-app .hrs-notice-download-btn i::after {
    content: "";
    position: absolute !important;
    background-image: url("../images/icons/download-02.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 20px !important;
    height: 20px !important;
    left: 0 !important;
}

/* Notice container on dashboard */
#hrs-app #hrs-notice-container {
    margin-bottom: 24px !important;
}

#hrs-app .hrs-notice-card {
    background: #141414 !important;
    color: white !important;
    padding: 8px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    border: 2px solid #ADADAD !important;
    box-shadow: 0px 4px 16.6px 0px #45556687, 0px -7px 27px -2px #FFFFFF33 inset, 0px 9px 14px -5px #FFFFFF26 inset !important;
}

/* .hrs-notice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} */

#hrs-app .hrs-notice-card-header {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
}

#hrs-app .hrs-notice-card-icon {
    width: 40px !important;
    height: 40px !important;
    /* background-color: #FFFFFF57 !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 12px !important; */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

#hrs-app .hrs-notice-card-icon::after {
    content: "";
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    background-color: #646464 !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 12px !important;
}

#hrs-app .hrs-notice-card-icon::before {
    content: "";
    position: absolute !important;
    background-image: url("../images/icons/alert.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 20px !important;
    height: 20px !important;
    z-index: 2 !important;
}

#hrs-app .hrs-notice-card-title {
    flex: 1;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin: 0 !important;
    color: #FFF !important;
    line-height: 20px !important;
    letter-spacing: -1% !important;
}

#hrs-app .hrs-notice-card-arrow {
    font-size: 0px !important;
    width: 30px !important;
    height: 24px !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 4px !important;
}

#hrs-app .hrs-notice-card-arrow::after {
    content: "";
    background-image: url("../images/icons/arrow-right-01-round.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 24px !important;
    height: 24px !important;
    position: absolute !important;
    bottom: -16px !important;
    right: -4px !important;
}

#hrs-app .hrs-notice-card-arrow::before {
    position: absolute !important;
}

#hrs-app .hrs-notice-card-preview {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: -23px 22px 0 48px !important;
    color: #E4E7EC !important;
    max-width: 78% !important;
}

/* ===== SWIMMING POOL STYLES - EXACT MATCH TO PROVIDED IMAGE ===== */
#hrs-app .hrs-swimming-pool-header,
#hrs-app .hrs-gym-header {
    display: block !important;
    padding: 20px 20px 0 !important;
    background: transparent !important;
    border: none !important;
}

.hrs-swimming-pool-header-content,
.hrs-gym-header-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    justify-content: space-between !important;
}

#hrs-app .hrs-swimming-pool-header-content .hrs-notification-btn,
#hrs-app .hrs-gym-header-content .hrs-notification-btn {
    margin-top: -23px !important;
}

.hrs-swimming-pool-logo {
    height: 28px !important;
    width: auto !important;
}

#hrs-app .hrs-swimming-pool-content,
#hrs-app .hrs-gym-content {
    background: #fff !important;
    min-height: calc(100vh - 70px) !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px 0 0 !important;
}
.hrs-loading div {
  display: none !important;
}
/* Swimming Pool Slider - Exact match to image */
#hrs-app .hrs-swimming-pool-slider-container,
#hrs-app .hrs-gym-slider-container {
    position: relative !important;
    width: 100% !important;
    /* height: 190px !important; */
    overflow: hidden !important;
    background: transparent !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding-bottom: 10px !important;
}

.hrs-swimming-pool-slider {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.hrs-swimming-pool-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out !important;
}

.hrs-swimming-pool-slide.active {
    opacity: 1 !important;
}

#hrs-app .hrs-swimming-pool-image,
#hrs-app .hrs-gym-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 8px !important;
    margin: 12px !important;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
}

.hrs-swimming-pool-nav,
.hrs-gym-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.hrs-swimming-pool-prev,
.hrs-swimming-pool-next {
    background: rgba(0, 0, 0, 0.6) !important;
    color: white !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: all !important;
    transition: 0.3s ease !important;
    font-size: 14px !important;
}

.hrs-swimming-pool-prev:hover,
.hrs-swimming-pool-next:hover {
    background: rgba(0, 0, 0, 0.8) !important;
}

#hrs-app .hrs-swimming-pool-dots,
#hrs-app .hrs-gym-dots {
    position: absolute !important;
    bottom: 5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 2px !important;
}

#hrs-app .hrs-swimming-pool-dot,
#hrs-app .hrs-gym-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #D0D5DD !important;
    cursor: pointer !important;
    transition: 0.3s ease !important;
}

#hrs-app .hrs-swimming-pool-dot.active,
#hrs-app .hrs-gym-dot.active {
    background: #1B1B1B !important;
}

/* Swimming Pool Info - Exact match to image */
.hrs-swimming-pool-info {
    padding: 20px 20px 16px 20px !important;
    text-align: left !important;
}

#hrs-app .hrs-swimming-pool-title,
#hrs-app .hrs-gym-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
    margin: 10px 0 4px 0 !important;
    line-height: 100% !important;
}

#hrs-app .hrs-swimming-pool-location,
#hrs-app .hrs-gym-location {
    font-size: 12px !important;
    color: #344054 !important;
    margin: 0 0 20px !important;
    font-weight: 400 !important;
    letter-spacing: -2% !important;
}

/* Swimming Pool Features - Exact 3-column layout like image */
.hrs-swimming-pool-features,
#hrs-app .hrs-gym-features {
    padding: 16px 20px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    justify-content: space-between !important;
}

#hrs-app .hrs-gym-features {
    padding: 0 !important;
}

.hrs-swimming-pool-feature,
#hrs-app .hrs-gym-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 !important;
    padding: 0 8px !important;
    background: transparent !important;
    border-radius: 0 !important;
}

#hrs-app .hrs-gym-feature {
    padding: 0 !important;
    gap: 0 !important;
}

#hrs-app .hrs-swimming-pool-feature-icon,
#hrs-app .hrs-gym-feature-icon {
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}

.hrs-swimming-pool-feature-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#hrs-app .hrs-swimming-pool-feature-time,
#hrs-app .hrs-swimming-pool-feature-text,
#hrs-app .hrs-gym-feature-time,
#hrs-app .hrs-gym-feature-text {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #0270AD !important;
    line-height: 100% !important;
    letter-spacing: -1% !important;
}

.hrs-swimming-pool-feature-label {
    font-size: 12px !important;
    color: #666666 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Swimming Pool Rules - Exact match to image */
.hrs-swimming-pool-rules {
    padding: 16px 20px 24px 20px !important;
}

#hrs-app .hrs-swimming-pool-rules-title,
#hrs-app .hrs-gym-rules-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
    margin: 0 0 10px 0 !important;
    line-height: 100% !important;
    letter-spacing: -2% !important;
    margin-top: 25px !important;
}

.hrs-swimming-pool-rules-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#hrs-app .content__wrapper {
    padding: 0 20px !important;
}

#hrs-app .hrs-swimming-pool-rule,
#hrs-app .hrs-gym-rule {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #667085 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-swimming-pool-rule i,
#hrs-app .hrs-gym-rule i {
    position: relative !important;
    width: 4px !important;
}

#hrs-app .hrs-swimming-pool-rule i::before,
#hrs-app .hrs-gym-rule i::before {
    opacity: 0 !important;
}

#hrs-app .hrs-swimming-pool-rule i::after,
#hrs-app .hrs-gym-rule i::after {
    content: "";
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background-color: #344054 !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.hrs-swimming-pool-rule-bullet {
    color: #333333 !important;
    font-size: 4px !important;
    margin-top: 7px !important;
    flex-shrink: 0 !important;
    width: 4px !important;
    height: 4px !important;
}

/* ===== GYM STYLES ===== */
.hrs-gym-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px 16px !important;
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.hrs-gym-header-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.hrs-gym-logo {
    height: 32px !important;
    width: auto !important;
}

.hrs-gym-content {
    padding: 0 !important;
    background: #fff !important;
    min-height: calc(100vh - 80px) !important;
}

/* Gym Slider */
.hrs-gym-slider-container {
    position: relative !important;
    width: 100% !important;
    height: 190px !important;
    overflow: hidden !important;
    background: #f8f9fa !important;
}

.hrs-gym-slider {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.hrs-gym-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out !important;
}

.hrs-gym-slide.active {
    opacity: 1 !important;
}

.hrs-gym-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.hrs-gym-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    pointer-events: none !important;
}

.hrs-gym-prev,
.hrs-gym-next {
    background: rgba(0, 0, 0, 0.5) !important;
    color: white !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: all !important;
    transition: background 0.3s ease !important;
}

.hrs-gym-prev:hover,
.hrs-gym-next:hover {
    background: rgba(0, 0, 0, 0.7) !important;
}

.hrs-gym-dots {
    position: absolute !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
}

.hrs-gym-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

.hrs-gym-dot.active {
    background: white !important;
}

/* Gym Info */
.hrs-gym-info {
    padding: 24px !important;
    text-align: center !important;
}

.hrs-gym-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
}

.hrs-gym-location {
    font-size: 16px !important;
    color: #666 !important;
}

/* Gym Features */
.hrs-gym-features {
    padding: 0 24px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.hrs-gym-feature {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
}

.hrs-gym-feature-icon {
    width: 48px !important;
    height: 48px !important;
    background: #ff6b35 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 20px !important;
}

.hrs-gym-feature-info {
    flex: 1 !important;
}

.hrs-gym-feature-time,
.hrs-gym-feature-text {
    display: block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 4px !important;
}

.hrs-gym-feature-label {
    font-size: 14px !important;
    color: #666 !important;
}

/* Gym Rules */
.hrs-gym-rules {
    padding: 0 24px 32px !important;
}

.hrs-gym-rules-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 16px !important;
}

.hrs-gym-rules-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.hrs-gym-rule {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333 !important;
}

.hrs-gym-rule-bullet {
    color: #ff6b35 !important;
    font-size: 6px !important;
    margin-top: 8px !important;
    flex-shrink: 0 !important;
}

/* Responsive adjustments for Swimming Pool and Gym */
@media (max-width: 480px) {
    .hrs-swimming-pool-slider-container,
    .hrs-gym-slider-container {
        height: 190px !important;
    }
    
    .hrs-swimming-pool-info,
    .hrs-gym-info {
        padding: 16px 16px 12px 16px !important;
    }
    
    .hrs-gym-title {
        font-size: 24px !important;
    }
    
    .hrs-swimming-pool-features,
    .hrs-gym-features {
        padding: 12px 16px !important;
    }
    
    .hrs-swimming-pool-feature,
    .hrs-gym-feature {
        padding: 0 4px !important;
    }
    
    .hrs-swimming-pool-feature-icon,
    .hrs-gym-feature-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    
    .hrs-swimming-pool-feature-time,
    .hrs-swimming-pool-feature-text,
    .hrs-gym-feature-time,
    .hrs-gym-feature-text {
        font-size: 12px !important;
    }
    
    .hrs-swimming-pool-feature-label,
    .hrs-gym-feature-label {
        font-size: 10px !important;
    }
    
    .hrs-swimming-pool-rules,
    .hrs-gym-rules {
        padding: 12px 16px 20px 16px !important;
    }
    
    .hrs-swimming-pool-rules-title,
    .hrs-gym-rules-title {
        font-size: 20px !important;
    }
    
    .hrs-swimming-pool-rule,
    .hrs-gym-rule {
        font-size: 13px !important;
    }
}

@media (max-width: 360px) {
    .hrs-swimming-pool-feature-time,
    .hrs-swimming-pool-feature-text,
    .hrs-gym-feature-time,
    .hrs-gym-feature-text {
        font-size: 11px !important;
    }
    
    .hrs-swimming-pool-feature-label,
    .hrs-gym-feature-label {
        font-size: 9px !important;
    }
}
/* ===== GYM BOOKING STYLES ===== */

/* Updated Gym Main Page Styles */
.hrs-gym-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 4px !important;
    text-align: left !important;
}

.hrs-gym-location {
    font-size: 16px !important;
    color: #666 !important;
    margin-bottom: 24px !important;
    text-align: left !important;
}

.hrs-gym-features {
    display: flex !important;
    justify-content: space-around !important;
    margin: 24px 0 !important;
    padding: 0 24px !important;
}

.hrs-gym-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 !important;
}

.hrs-gym-feature-icon {
    width: 60px !important;
    height: 60px !important;
    background: #1976D2 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
    margin-bottom: 8px !important;
}

.hrs-gym-feature-info {
    text-align: center !important;
}

.hrs-gym-feature-time,
.hrs-gym-feature-text {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
}

.hrs-gym-booking-section {
    padding: 24px !important;
    margin-top: 32px !important;
}

.hrs-gym-book-schedule-btn {
    width: 100% !important;
    background: #1976D2 !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 16px 24px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

#hrs-app .hrs-gym-book-schedule-btn {
    background-color: #0270AD !important;
    color: #FFF !important;
    margin-top: 32px !important;
}

.hrs-gym-book-schedule-btn:hover {
    background: #1565C0 !important;
}

/* Gym Booking Page Styles - Beautiful Design */
#hrs-app .hrs-gym-booking-header {
    display: block !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 20px 0 !important;
    background: transparent !important;
    border-bottom: none !important;
}

.hrs-gym-booking-header-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

#hrs-app .hrs-gym-booking-status {
    font-size: 10px !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
    padding: 6px 12px !important;
    border-radius: 30px !important;
    color: #FFF !important;
    text-transform: capitalize !important;
    line-height: 1 !important;
    opacity: 0 !important;
}

#hrs-app .hrs-gym-booking-status.cancelled {
    background-color: #E4E7EC !important;
    color: #667085 !important;
}

.hrs-gym-booking-logo-text {
    background: #6c757d !important;
    color: white !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-right: 2px !important;
    letter-spacing: 0.5px !important;
}

.hrs-gym-booking-logo-inn {
    background: #1976D2 !important;
    color: white !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.hrs-notification-btn {
    position: relative !important;
    background: rgba(255,255,255,0.8) !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6c757d !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.hrs-notification-btn:hover {
    background: white !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

#hrs-app .hrs-gym-booking-content {
    padding: 20px 20px !important;
    background: #fff !important;
    min-height: calc(100vh - 80px) !important;
    border-radius: 24px 24px 0 0 !important;
}

#hrs-app .hrs-gym-booking-item {
    padding: 12px !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 12px !important;
    position: relative !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-gym-booking-title {
    color: #1B1B1B !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 100% !important;
    letter-spacing: -2% !important;
    margin: 0 0 32px 0 !important;
}

/* Beautiful Date Section */
.hrs-gym-date-section {
    margin-bottom: 36px !important;
}

#hrs-app .hrs-gym-date-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
    letter-spacing: -2% !important;
}

#hrs-app .hrs-gym-calendar-container {
    background: #FAFAFA !important;
    border-radius: 8px !important;
    padding: 16px 18px !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
}

#hrs-app .hrs-gym-calendar-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 8px !important;
    border-radius: 8px 8px 0 0;
    background-color: #FFF;
}

#hrs-app .hrs-gym-year-select {
    background-color: transparent !important;
    color: #424242 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 10px 36px 12px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    appearance: none !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("../images/icons/arrow-down-round.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 95% center !important;
    height: 40px !important;
}

#hrs-app .hrs-gym-year-select:focus {
    border: 1px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.hrs-gym-month-nav {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

#hrs-app .hrs-gym-prev-month[type="button"],
#hrs-app .hrs-gym-next-month[type="button"] {
    background: transparent !important;
    border: 0 !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
}

#hrs-app .hrs-gym-prev-month[type="button"] i,
#hrs-app .hrs-gym-next-month[type="button"] i {
    position: relative !important;
    width: 16px !important;
    height: 16px !important;
}

#hrs-app .hrs-gym-prev-month[type="button"] i::before {
    opacity: 0 !important;
}

#hrs-app .hrs-gym-prev-month[type="button"] i::after {
    content: "";
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("../images/icons/chevron-left.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    left: 0 !important;
    top: 0 !important;
}

#hrs-app .hrs-gym-next-month[type="button"] i::after {
    content: "";
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("../images/icons/chevron-right.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    right: 0 !important;
    top: 0 !important;
}

#hrs-app .hrs-gym-next-month[type="button"] i::before {
    opacity: 0 !important;
}

#hrs-app .hrs-gym-prev-month:hover[type="button"],
#hrs-app .hrs-gym-next-month:hover[type="button"] {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

#hrs-app .hrs-gym-month-year {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #424242 !important;
    min-width: auto !important;
    text-align: center !important;
}

.hrs-gym-calendar {
    padding: 24px !important;
    background: #fff !important;
}

#hrs-app .hrs-gym-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    margin-bottom: 16px !important;
    background-color: #0000000D !important;
    border-radius: 8px !important;
    margin: 0 8px !important;
}

#hrs-app .hrs-gym-weekdays span {
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #6c757d !important;
    padding: 6px 10px !important;
}

#hrs-app .hrs-gym-calendar-days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 0px !important;
    padding: 0 8px !important;
}

#hrs-app .hrs-gym-calendar-day {
    aspect-ratio: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: #424242 !important;
    position: relative !important;
    width: 40px;
    height: 40px;
    transition: 0.3s all ease-in-out !important;
    border: 1px solid transparent !important;
}

#hrs-app .hrs-gym-calendar-day:hover {
    border: 1px solid #1976D2 !important;
    color: #1976D2 !important;
    transform: none !important;
    transition: 0.3s all ease-in-out !important;
}

#hrs-app .hrs-gym-calendar-day.selected {
    background: #0270AD !important;
    color: white !important;
    box-shadow: none !important;
    transform: none !important;
}

.hrs-gym-calendar-day.other-month {
    color: #ced4da !important;
    opacity: 0.5 !important;
}

.hrs-gym-calendar-day.today {
    border: 2px solid #1976D2 !important;
    font-weight: 700 !important;
}

.hrs-gym-calendar-day.disabled {
    color: #ced4da !important;
    cursor: not-allowed !important;
    opacity: 0.3 !important;
}

.hrs-gym-calendar-day.disabled:hover {
    background: transparent !important;
    transform: none !important;
}

/* Beautiful Slot Selection */
.hrs-gym-slot-section {
    margin-bottom: 36px !important;
}

#hrs-app .hrs-gym-slot-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
    letter-spacing: -2% !important;
}

.hrs-gym-slot-dropdown-container {
    position: relative !important;
    margin-bottom: 24px !important;
}

#hrs-app .hrs-gym-slot-dropdown {
    width: 100% !important;
    padding: 14px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: white !important;
    background-color: white;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    height: 50px !important;
    font-weight: 500 !important;
}

#hrs-app .hrs-gym-slot-dropdown:focus,
#hrs-app .hrs-gym-slot-dropdown:hover {
    border: 1px solid #3b82f6 !important;
}

.hrs-gym-slot-dropdown-text {
    font-size: 16px !important;
    color: #6c757d !important;
    font-weight: 500 !important;
}

.hrs-gym-slot-dropdown-arrow {
    background-image: url("../images/icons/arrow-down-round.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform 0.3s ease !important;
    position: absolute !important;
    right: 15px !important;
}

.hrs-gym-slot-dropdown-arrow::before {
    opacity: 0 !important;
}

.hrs-gym-slot-dropdown-arrow.rotated {
    transform: rotate(180deg) !important;
}

#hrs-app .hrs-gym-slots-dropdown-list {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 5px 3px 16px 0px #C6C6C64F, 0px 1px 2px 0px #0000001A !important;
    z-index: 1000 !important;
    margin-top: 8px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    padding: 0!important;
    border: 1px solid #DEE2E6 !important;
}

.hrs-gym-slots-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#hrs-app .hrs-gym-slot-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 16px !important;
    background: transparent !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* .hrs-gym-slot-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
} */

#hrs-app .hrs-gym-slot-item:hover {
    background: #F2F4F7 !important;
}

.hrs-gym-slot-item:hover::before {
    opacity: 1 !important;
}

.hrs-gym-slot-item.selected {
    background: #F2F4F7 !important;;
}

.hrs-gym-slot-item.selected::before {
    opacity: 1 !important;
}

.hrs-gym-slot-item.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #f8f9fa !important;
}

.hrs-gym-slot-item.disabled:hover {
    background: #f8f9fa !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: #e9ecef !important;
}

.hrs-gym-slot-item.disabled::before {
    background: #ced4da !important;
}

.hrs-gym-slot-info {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center;
}

#hrs-app .hrs-gym-slot-name {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
}

#hrs-app .hrs-gym-slot-time {
    font-size: 14px !important;
    color: #1B1B1B !important;
    font-weight: 500 !important;
}

#hrs-app .hrs-gym-slot-status {
    padding: 4px 12px 4px 18px !important;
    border-radius: 100px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: -1% !important;
}

#hrs-app .hrs-gym-slot-status.available {
    background: #039855 !important;
    color: white !important;
    position: relative !important;
    width: 70px !important;
    text-align: center !important;
}

#hrs-app .hrs-gym-slot-status.available::after {
    content: "";
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background-color: white !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#hrs-app .hrs-gym-slot-status.not-available {
    background: #E4E7EC !important;
    color: #667085 !important;
}

/* Beautiful Confirm Button */
.hrs-gym-confirm-section {
    margin-top: 40px !important;
    padding-top: 24px !important;
    border-top: 1px solid #e9ecef !important;
}

#hrs-app .hrs-gym-confirm-btn {
    background: #0270AD !important;
    color: white !important;
    margin-top: 44px !important;
}

/* .hrs-gym-confirm-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    transition: left 0.5s ease !important;
} */

/* .hrs-gym-confirm-btn:hover::before {
    left: 100% !important;
} */

.hrs-gym-confirm-btn:hover {
    background: linear-gradient(135deg, #1565C0 0%, #0d47a1 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(25, 118, 210, 0.4) !important;
}

.hrs-gym-confirm-btn:disabled {
    background: linear-gradient(135deg, #e9ecef 0%, #ced4da 100%) !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.hrs-gym-confirm-btn:disabled::before {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 480px) {
    .hrs-gym-booking-content {
        padding: 20px 16px !important;
    }
    
    .hrs-gym-booking-title {
        font-size: 20px !important;
    }
    
    .hrs-gym-calendar {
        padding: 16px !important;
    }
    
    .hrs-gym-slot-item {
        padding: 16px 20px !important;
    }
    
    .hrs-gym-confirm-btn {
        padding: 16px 24px !important;
        font-size: 16px !important;
    }
}

/* Gym Booking Confirmation Styles */
.hrs-gym-confirmation-header {
    /* display: flex !important; */
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px 16px !important;
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

#hrs-app .hrs-gym-confirmation-header .hrs-logo-container {
    margin-bottom: 0 !important;
}

.hrs-gym-confirmation-header-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.hrs-gym-confirmation-logo {
    height: 32px !important;
    width: auto !important;
}

.hrs-gym-confirmation-content {
    padding: 40px 24px !important;
    background: #fff !important;
    min-height: calc(100vh - 80px) !important;
    text-align: center !important;
}

.hrs-gym-confirmation-icon-container {
    margin-bottom: 32px !important;
}

.hrs-gym-confirmation-icon-circle {
    width: 80px !important;
    height: 80px !important;
    background: #4CAF50 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.hrs-gym-confirmation-check-icon {
    font-size: 40px !important;
    color: white !important;
}

.hrs-gym-confirmation-text-section {
    margin-bottom: 40px !important;
}

.hrs-gym-confirmation-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
}

.hrs-gym-confirmation-subtitle {
    font-size: 16px !important;
    color: #666 !important;
    line-height: 1.5 !important;
}

.hrs-gym-confirmation-details {
    background: #f8f9fa !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 40px !important;
    text-align: left !important;
}

.hrs-gym-confirmation-detail-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.hrs-gym-confirmation-detail-row:last-child {
    border-bottom: none !important;
}

.hrs-gym-confirmation-detail-label {
    font-size: 16px !important;
    color: #666 !important;
    font-weight: 500 !important;
}

.hrs-gym-confirmation-detail-value {
    font-size: 16px !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

.hrs-gym-confirmation-footer {
    margin-top: 60px !important;
}

.hrs-gym-confirmation-logo {
    width: 60px !important;
    height: 60px !important;
    background: #FF5722 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.hrs-gym-confirmation-logo-text {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: white !important;
}

/* Responsive adjustments for Gym Booking */
@media (max-width: 480px) {
    .hrs-gym-booking-content {
        padding: 20px !important;
    }
    
    .hrs-gym-booking-title {
        font-size: 20px !important;
    }
    
    .hrs-gym-confirmation-content {
        padding: 30px 20px !important;
    }
    
    .hrs-gym-confirmation-title {
        font-size: 24px !important;
    }
}

/* ===== FOOD PROVIDER DROPDOWN STYLES ===== */
.hrs-food-provider-dropdown-container {
    position: relative !important;
    width: 100% !important;
}

#hrs-app .hrs-food-provider-select-wrapper {
    width: 100% !important;
    padding: 14px 20px !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: transparent !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    position: relative !important;
    height: 50px !important;
}

#hrs-app .hrs-food-provider-select-wrapper.active {
    border: 1px solid #3b82f6 !important;
}

#hrs-app .hrs-food-provider-select-wrapper i {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
}

#hrs-app .hrs-food-provider-select-wrapper i::before {
    opacity: 0;
}

#hrs-app .hrs-food-provider-select-wrapper i::after {
    content: "" !important;
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("../images/icons/arrow-down-round.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    right: -8px !important;
    top: -2px !important;
}

.hrs-food-provider-select-wrapper:hover {
    border-color: #3498db !important;
}

.hrs-food-provider-select-wrapper.active {
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1) !important;
}

.hrs-food-provider-selected {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
}

.hrs-provider-placeholder {
    color: #95A5A6 !important;
    font-size: 16px !important;
}

.hrs-selected-provider-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.hrs-selected-provider-logo {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hrs-selected-provider-logo > img ~ div {
    display: none !important;
}

.hrs-selected-provider-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.hrs-selected-provider-logo-fallback {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
}

.hrs-selected-provider-name {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #2C3E50 !important;
}

.hrs-dropdown-arrow {
    color: #95A5A6 !important;
    font-size: 14px !important;
    transition: transform 0.3s ease !important;
}

.hrs-dropdown-arrow.rotated {
    transform: rotate(180deg) !important;
}

#hrs-app .hrs-food-provider-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border: 1px solid #DEE2E6 !important;
    border-radius: 8px !important;
    box-shadow: 0px 20px 30px 0px #00000042 !important;
    z-index: 1000 !important;
    margin-top: 8px !important;
    max-height: 400px !important;
    overflow: hidden !important;
}

#hrs-app .hrs-provider-search-container {
    padding: 12px 16px !important;
    position: relative !important;
}

#hrs-app .hrs-provider-search-container .hrs-search-icon::before {
    opacity: 0;
}

#hrs-app .hrs-provider-search-container .hrs-search-icon {
    width: 20px !important;
    height: 20px !important;
    background-image: url("../images/icons/search__2.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: none !important;
}

#hrs-app .hrs-provider-search[type="text"] {
    width: 100% !important;
    padding: 12px 12px 12px 42px !important;
    border: 1px solid #00000066 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    background: white !important;
    color: #1B1B1B !important;
    height: 48px !important;
    outline-style: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
}

#hrs-app .hrs-provider-search[type="text"]::placeholder {
    color: #98A2B3 !important;
}

#hrs-app input.hrs-provider-search[type="text"]:focus {
    border: 1px solid #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1) !important;
    outline-style: none !important;
}

#hrs-app input[type="text"],
#hrs-app input[type="search"],
#hrs-app input[type="tel"],
#hrs-app input[type="email"] {
    outline-style: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
}

#hrs-app input[type="text"]:focus,
#hrs-app input[type="search"]:focus,
#hrs-app input[type="tel"]:focus,
#hrs-app input[type="email"]:focus {
    outline-style: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
}

#hrs-app #hrs-baggage-email {
    height: 50px !important;
}

.hrs-search-icon {
    position: absolute !important;
    left: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #95A5A6 !important;
    font-size: 14px !important;
}

.hrs-provider-list {
    max-height: 280px !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
}

#hrs-provider-list .hrs-provider-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    border: 0 !important;
    border-radius: 0 !important;
}

#hrs-provider-list .hrs-provider-item:hover {
    background-color: #F2F4F7 !important;
}

#hrs-provider-list .hrs-provider-item:last-child {
    border-bottom: none !important;
}



.hrs-provider-logo {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.hrs-provider-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.hrs-provider-logo-fallback {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
}

#hrs-app .hrs-provider-name {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
}

#hrs-app .hrs-provider-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 10px 20px !important;
    color: #95A5A6 !important;
    padding-bottom: 20px !important;
    font-size: 18px !important;
    font-weight: 400 !important;
}

#hrs-app .hrs-loading-spinner {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #E1E8ED !important;
    border-top: 2px solid #3498db !important;
    border-radius: 50% !important;
    animation: hrs-spin 1s linear infinite !important;
}

@keyframes hrs-spin {
    0% { transform: rotate(0deg) !important; }
    100% { transform: rotate(360deg) !important; }
}

#hrs-app .hrs-no-results {
    text-align: center !important;
    padding: 0 16px 20px !important;
}

#hrs-app .hrs-no-results-icon {
    width: 96px !important;
    height: 96px !important;
    background-image: url("../images/img/search-image.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0 auto 12px !important;
}

#hrs-app .hrs-no-results-icon i {
    opacity: 0 !important;
}

#hrs-app .hrs-no-results-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #344054 !important;
    margin-bottom: 32px !important;
}

#hrs-app .hrs-add-provider-btn {
    width: 100% !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-family: inherit !important;
    height: 44px !important;
    background-color: #0270AD !important;
    color: #FFF !important;
}

#hrs-app .hrs-add-provider-btn i {
    margin-right: 5px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

#hrs-app .hrs-add-provider-btn:hover {
    background: #333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    color: white !important;
    text-decoration: none !important;
}

/* ===== ADD PROVIDER MODAL STYLES ===== */
.hrs-add-provider-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.hrs-add-provider-modal.show {
    display: flex !important;
}

.hrs-modal-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px) !important;
}

.hrs-modal-container {
    position: relative !important;
    background: white !important;
    border-radius: 20px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 400px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
    animation: hrs-modal-slide-up 0.3s ease-out !important;
}

@keyframes hrs-modal-slide-up {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

.hrs-modal-header {
    position: relative !important;
    padding: 20px 20px 0 20px !important;
    text-align: right !important;
}

#hrs-app .hrs-modal-close {
    color: #1B1B1B !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}

.hrs-modal-close:hover {
    background: #e9ecef !important;
    color: #2C3E50 !important;
}

.hrs-modal-body {
    padding: 20px 30px 30px 30px !important;
    text-align: center !important;
}

.hrs-modal-icon {
    margin-bottom: 20px !important;
}

#hrs-add-provider-modal .hrs-provider-icon {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    color: white !important;
}

#hrs-add-provider-modal .hrs-modal-body {
    padding: 20px 16px 24px !important;
}

#hrs-selected-provider {
    margin: -6px 0 0 !important;
}

#hrs-selected-provider > .hrs-provider-placeholder {
    margin: 6px 0 0 !important;
}

#hrs-add-provider-modal .hrs-modal-title {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
    line-height: 30px !important;
    margin: 16px 0 8px;
}

#hrs-add-provider-modal .hrs-modal-subtitle {
    font-size: 14px !important;
    color: #667085 !important;
    font-weight: 400 !important;
    margin-bottom: 24px !important;
    line-height: 20px !important;
    letter-spacing: -1% !important;
}

.hrs-form-group {
    margin-bottom: 24px !important;
    text-align: left !important;
}

.hrs-form-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #2C3E50 !important;
    margin-bottom: 8px !important;
}

.hrs-form-input {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 2px solid #E1E8ED !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    background: white !important;
    color: #2C3E50 !important;
    transition: all 0.3s ease !important;
}

.hrs-form-input:focus {
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1) !important;
}

.hrs-form-input::placeholder {
    color: #95A5A6 !important;
}

#hrs-add-provider-modal .hrs-add-provider-submit-btn {
    width: 100% !important;
    padding: 12px 20px !important;
    border: none !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-family: inherit !important;
    height: 44px !important;
    background-color: #0270AD !important;
    color: #FFF !important;
}

#hrs-add-provider-modal .hrs-form-group {
    margin-bottom: 20px !important;
}

#hrs-add-provider-modal .hrs-add-provider-submit-btn:hover {
    background: #333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    color: white !important;
    text-decoration: none !important;
}

#hrs-add-provider-modal .hrs-add-provider-submit-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== UPLOAD SECTION STYLES ===== */
.hrs-upload-section {
    margin: 20px 0 !important;
}

#hrs-app .hrs-upload-container-main {
    border: 2px dashed #286CE3 !important;
    border-radius: 12px !important;
    padding: 15px 20px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    background: #F9FAFB !important;
}

#hrs-food-image-preview > img ~ button[type="button"] {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 24px !important;
    height: 24px !important;
    background: #ef4444 !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

#hrs-food-image-preview > img ~ button[type="button"]:hover {
    background: #333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    color: white !important;
    text-decoration: none !important;
}

#hrs-app .hrs-upload-container-main:hover {
    border-color: #3498db !important;
    background: #f0f8ff !important;
}

#hrs-food-upload-container .hrs-upload-icon {
    margin-bottom: 14px !important;
    position: relative;
    height: 55px !important;
}

#hrs-food-upload-container .hrs-upload-icon::after {
    content: "";
    position: absolute !important;
    width: 55px;
    height: 47px;
    background-image: url("../images/icons/upload-image.svg");
    background-repeat: no-repeat;
    background-position: center;
    left: 50%;
    transform: translateX(-50%);
}

#hrs-food-upload-container .hrs-upload-icon i {
    opacity: 0 !important;
}

#hrs-food-upload-container .hrs-upload-text {
    font-size: 14px !important;
    color: #1976D2 !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    letter-spacing: -1% !important;
    text-decoration: underline !important;
    padding-left: 35px !important;
    position: relative !important;
    display: inline-block !important;
}

#hrs-food-upload-container .hrs-upload-text:hover {
    text-decoration: none !important;
}

#hrs-food-upload-container .hrs-upload-text::after {
    content: "" !important;
    position: absolute !important;
    width: 24px;
    height: 24px;
    background-image: url("../images/icons/upload-icon.svg");
    background-repeat: no-repeat;
    background-position: center;
    left: 4px !important;
    bottom: -2px !important;
}

.hrs-upload-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .hrs-modal-container {
        margin: 20px !important;
        max-width: calc(100% - 40px) !important;
    }
    
    .hrs-modal-body {
        padding: 20px !important;
    }
    
    .hrs-provider-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 24px !important;
    }
    
    .hrs-modal-title {
        font-size: 18px !important;
    }
}








/* Baggage Tag List Styles */
.hrs-baggage-list-container {
    padding: 20px;
}

.hrs-baggage-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hrs-baggage-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.hrs-baggage-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.hrs-baggage-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1B1B1B;
    margin: 0;
}

.hrs-baggage-status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.hrs-baggage-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hrs-baggage-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hrs-baggage-label {
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

.hrs-baggage-value {
    font-size: 14px;
    color: #1B1B1B;
    font-weight: 600;
}

/* Baggage Details Modal */
.hrs-baggage-modal-content {
    max-width: 500px;
    width: 90%;
}

.hrs-baggage-details-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

.hrs-baggage-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #F9FAFB;
    border-radius: 8px;
}

.hrs-baggage-detail-label {
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

.hrs-baggage-detail-value {
    font-size: 14px;
    color: #1B1B1B;
    font-weight: 600;
}

.hrs-modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #6B7280;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.hrs-modal-close-btn:hover {
    background: #F3F4F6;
    color: #1B1B1B;
}

.hrs-modal-btn-primary {
    background: #0066cc;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.hrs-modal-btn-primary:hover {
    background: #0052a3;
}


/* Baggage Notice Overlay */
.hrs-notice-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.hrs-notice-content {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.hrs-notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.hrs-notice-title {
    font-size: 20px;
    font-weight: 600;
    color: #1B1B1B;
    margin: 0;
}

.hrs-notice-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #6B7280;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.hrs-notice-close-btn:hover {
    background: #F3F4F6;
    color: #1B1B1B;
}

.hrs-baggage-list-container {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

.hrs-baggage-item {
    background: #F9FAFB;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hrs-baggage-item:hover {
    background: #F3F4F6;
    transform: translateY(-2px);
}

.hrs-baggage-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.hrs-baggage-item-title {
    font-size: 16px;
    font-weight: 600;
    color: #1B1B1B;
}

.hrs-baggage-item-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.hrs-baggage-item-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hrs-baggage-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hrs-baggage-item-label {
    font-size: 13px;
    color: #6B7280;
}

.hrs-baggage-item-value {
    font-size: 13px;
    color: #1B1B1B;
    font-weight: 600;
}


/* Baggage Tag List Styles */
.hrs-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.hrs-page-title {
    font-size: 20px;
    font-weight: 600;
    color: #1B1B1B;
    margin: 0;
}

.hrs-page-content {
    padding: 20px;
}

.hrs-baggage-list-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hrs-baggage-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hrs-baggage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.hrs-baggage-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1B1B1B;
    margin: 0;
}

.hrs-baggage-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.hrs-status-requested {
    background: #FDB022;
    color: #fff;
}

.hrs-status-collected {
    background: #10b981;
    color: #fff;
}

.hrs-baggage-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hrs-baggage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hrs-baggage-label {
    font-size: 14px;
    color: #6B7280;
}

.hrs-baggage-value {
    font-size: 14px;
    font-weight: 600;
    color: #1B1B1B;
}

.hrs-no-data {
    text-align: center;
    padding: 40px 20px;
    color: #6B7280;
    font-size: 16px;
}

/* Maintenance Request Styles - Matching the provided image design */
.hrs-maintenance-items-container {
    margin: 20px 0;
}

.hrs-maintenance-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hrs-maintenance-item {
    margin-bottom: 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.hrs-maintenance-item:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hrs-maintenance-item-content {
    display: flex;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    position: relative;
}

.hrs-maintenance-item-icon-container {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

.hrs-maintenance-item-icon {
    font-size: 24px;
    color: #6b7280;
}

.hrs-maintenance-item-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
}

.hrs-maintenance-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hrs-maintenance-item-title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 2px;
}

.hrs-maintenance-item-description {
    font-size: 14px;
    color: #6b7280;
}

.hrs-maintenance-item-checkbox {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
}

.hrs-maintenance-item-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0;
    opacity: 0;
    position: absolute;
    cursor: pointer;
}

#hrs-app .hrs-maintenance-item-checkbox .hrs-checkbox-label {
    position: absolute;
    top: 50%;
    left: 6px;
    width: 16px;
    height: 16px;
    border: 1px solid #667085 !important;
    border-radius: 2px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    transform: translateY(-50%);
}

#hrs-app .hrs-maintenance-item-checkbox input[type="checkbox"]:checked + .hrs-checkbox-label {
    background: #1B1B1B !important;
    border: 1px solid #1B1B1B !important;
}

#hrs-app .hrs-maintenance-item-checkbox input[type="checkbox"]:checked + .hrs-checkbox-label::after {
    content: "" !important;
    background-image: url(../images/icons/right.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 8px !important;
    height: 6px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

#hrs-app #hrs-maintenance-send-btn {
    margin-top: 26px !important;
}

/* Others option special styling */
.hrs-maintenance-others .hrs-maintenance-item-arrow {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    flex-shrink: 0;
}

.hrs-maintenance-others .hrs-maintenance-item-arrow i {
    font-size: 16px;
}

/* Send Request Button */
.hrs-maintenance-send-request-btn {
    width: 100%;
    padding: 16px;
    background: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 24px;
}

.hrs-maintenance-send-request-btn:hover:not(:disabled) {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.hrs-maintenance-send-request-btn:disabled,
.hrs-maintenance-send-request-btn.disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Search container styling */
.hrs-search-container {
    margin: 20px 0;
}

.hrs-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.hrs-search-icon-container {
    position: absolute;
    left: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hrs-search-icon {
    width: 20px;
    height: 20px;
    color: #6b7280;
}

.hrs-search-input {
    width: 100%;
    padding: 16px 16px 16px 52px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    background: #f9fafb;
    transition: all 0.2s ease;
}

.hrs-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.hrs-search-input::placeholder {
    color: #9ca3af;
}

/* Loading and error states */
.hrs-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.hrs-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

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

.hrs-loading-text {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

.hrs-error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.hrs-error-text {
    color: #ef4444;
    font-size: 14px;
    margin: 0;
    text-align: center;
}

/* Responsive design */
@media (max-width: 768px) {
    .hrs-maintenance-item-content {
        padding: 14px;
    }
    
    .hrs-maintenance-item-icon-container {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }
    
    .hrs-maintenance-item-icon {
        font-size: 20px;
    }
    
    .hrs-maintenance-item-image {
        width: 40px;
        height: 40px;
    }
    
    .hrs-maintenance-item-title {
        font-size: 15px;
    }
    
    .hrs-maintenance-item-description {
        font-size: 13px;
    }
}

/* Enhanced Maintenance Item Selection Styles */
.hrs-maintenance-item.selected {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2) !important;
}

.hrs-maintenance-item.selected .hrs-maintenance-item-icon {
    color: #2196f3 !important;
}

.hrs-maintenance-item.selected .hrs-maintenance-item-title {
    color: #1976d2 !important;
    font-weight: 600 !important;
}

/* Enhanced Checkbox Styles */
.hrs-maintenance-item-checkbox input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    accent-color: #2196f3 !important;
    transform: scale(1.2) !important;
}

.hrs-maintenance-item-checkbox input[type="checkbox"]:checked {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
}

/* Send Button Enhanced States */
.hrs-maintenance-send-request-btn.disabled {
    background: #cccccc !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.hrs-maintenance-send-request-btn:not(.disabled) {
    background: #2196f3 !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

.hrs-maintenance-send-request-btn:not(.disabled):hover {
    background: #1976d2 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3) !important;
}

/* Food Provider Selection Styles */
.hrs-provider-select-wrapper {
    position: relative !important;
    width: 100% !important;
}

.hrs-provider-select-display {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    background: white !important;
    cursor: pointer !important;
    min-height: 48px !important;
    transition: border-color 0.2s ease !important;
}

.hrs-provider-select-display:hover {
    border-color: #9CA3AF !important;
}

.hrs-provider-select-display.active {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.hrs-provider-placeholder {
    color: #9CA3AF !important;
    font-size: 16px !important;
}

.hrs-selected-provider {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.hrs-selected-logo {
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
}

.hrs-selected-icon {
    width: 24px !important;
    height: 24px !important;
    background: #F3F4F6 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6B7280 !important;
    font-size: 12px !important;
}

.hrs-selected-provider span {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

.hrs-provider-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    z-index: 1000 !important;
    max-height: 300px !important;
    overflow: hidden !important;
    margin-top: 4px !important;
}

.hrs-provider-search-box {
    padding: 12px !important;
    border-bottom: 1px solid #E5E7EB !important;
}

.hrs-provider-search-input {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    outline: none !important;
}

.hrs-provider-search-input:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.hrs-provider-list {
    max-height: 200px !important;
    overflow-y: auto !important;
}

.hrs-provider-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    border-bottom: 1px solid #F3F4F6 !important;
}

.hrs-provider-item:hover {
    background-color: #F9FAFB !important;
}

.hrs-provider-item:last-child {
    border-bottom: none !important;
}

.hrs-provider-logo-wrapper {
    flex-shrink: 0 !important;
}

.hrs-provider-logo {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
}

.hrs-provider-icon-placeholder {
    width: 32px !important;
    height: 32px !important;
    background: #F3F4F6 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6B7280 !important;
    font-size: 16px !important;
}

.hrs-provider-name {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    flex: 1 !important;
}

.hrs-provider-no-results {
    padding: 20px !important;
    text-align: center !important;
    color: #6B7280 !important;
}

.hrs-provider-no-results p {
    margin-bottom: 12px !important;
    font-size: 14px !important;
}

.hrs-add-provider-inline-btn {
    background: #3B82F6 !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background-color 0.2s ease !important;
}

.hrs-add-provider-inline-btn:hover {
    background: #2563EB !important;
}

.hrs-add-provider-inline-btn i {
    font-size: 12px !important;
}

/* Gym Tabs Styles */
#hrs-app .hrs-gym-tabs {
    display: flex !important;
    background: #F2F4F7 !important;
    border-radius: 12px !important;
    padding: 4px !important;
    margin-bottom: 20px !important;
    gap: 4px !important;
    margin-top: 24px !important;
}

#hrs-app .hrs-gym-tab-btn {
    flex: 1 !important;
    padding: 8px 16px !important;
    border: none;
    background: transparent;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: #667085 !important;
    border-radius: 10px;
}

#hrs-app .hrs-gym-tab-btn.active {
    background: #fff !important;
    color: #1B1B1B !important;
    box-shadow: 0px 2px 4px 0px #0000000D !important;
}

#hrs-app .hrs-gym-tab-btn:hover:not(.active) {
    background: rgba(255,255,255,0.5);
    color: #333;
}

.hrs-gym-tab-content {
    display: none;
}

.hrs-gym-tab-content.active {
    display: block;
}

/* Your Bookings Tab Styles */
.hrs-gym-bookings-list {
    min-height: 200px;
}

#hrs-gym-bookings-list .hrs-gym-booking-header {
    display: flex !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid #EEE !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-gym-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 40px 20px !important;
    font-size: 16px !important;
    color: #1B1B1B !important;
}

.hrs-gym-loading > div {
    padding: 25px !important;
    font-size: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: 3px solid red !important;
    border-radius: 50% !important;
    /* animation: spin 1s linear infinite !important; */
}

.hrs-gym-booking-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.hrs-gym-booking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

#hrs-app #hrs-gym-bookings-list .hrs-gym-booking-title {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    letter-spacing: -1% !important;
    line-height: 20px !important;
}

.hrs-gym-booking-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

#hrs-app .hrs-gym-booking-status.confirmed {
    background: #039855;
    color: #FFF;
}

#hrs-app .hrs-gym-booking-status.cancelled {
    background: #D92D20;
    color: #FFF;
    opacity: 1 !important;
}

.hrs-gym-booking-details {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.hrs-gym-booking-detail {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

#hrs-app .hrs-gym-booking-detail span {
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: -1% !important;
    color: #667085 !important;
}

.hrs-gym-booking-detail-label {
    color: #666;
    font-weight: 500;
}

#hrs-app span.hrs-gym-booking-detail-value {
    color: #1B1B1B !important;
    font-weight: 400 !important;
}

.hrs-gym-booking-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

#hrs-app .hrs-gym-cancel-btn {
    padding: 6px 12px !important;
    background: #D92D20 !important;
    color: #e57373 !important;
    border-radius: 40px !important;
    font-size: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: #FFF !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
}

#hrs-app .hrs-gym-cancel-btn i {
    font-size: 14px !important;
}

#hrs-app .hrs-gym-cancel-btn:hover {
    background: #E81808 !important;
}

#hrs-app .hrs-gym-cancel-btn:disabled {
    background-color: #E4E7EC !important;
    color: #667085 !important;
    cursor: not-allowed;
}

#hrs-app .hrs-gym-cancel-btn i.fa-spinner {
    background-image: url("../images/icons/spinner.png") !important;
    background-repeat: no-repeat !important;
    background-size: 12px !important;
}

#hrs-app .hrs-gym-cancel-btn i.fa-spinner::before {
    opacity: 0 !important;
}

.hrs-gym-no-bookings {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.hrs-gym-no-bookings i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 16px;
    display: block;
}

.hrs-gym-no-bookings h3 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 18px;
}

.hrs-gym-no-bookings p {
    margin: 0;
    font-size: 14px;
}




/* Baggage tag */

#hrs-baggage-list-interface {
    min-height: 100vh !important;
    background-image: url('../images/img/shape-bg.png') !important;
    background-size: 100% auto !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    max-width: 570px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 0;
    bottom: 0;
    height: 100% !important;
    z-index: 1;
    position: absolute !important;
}

#hrs-baggage-list-interface.active {
    display: block !important;
}

#hrs-baggage-list-interface .hrs-request-header-content {
    align-items: center !important;
    margin-bottom: 24px !important;
    position: relative !important;
}

#hrs-baggage-list-interface .hrs-request-title-section {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
}

#hrs-baggage-list-interface .hrs-logo-container {
    margin-bottom: 0 !important;
}

#hrs-baggage-list-interface .hrs-request-title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #0270AD !important;
}



#hrs-stored-baggage,
#hrs-delivered-baggage {
    text-align: center;
    font-size: 20px !important;
    color: #344054 !important;
    font-weight: 500 !important;
    padding: 35px 20px 40px;
}

#hrs-stored-baggage img,
#hrs-delivered-baggage img {
    margin-left: auto;
    margin-right: auto;
}

#hrs-stored-baggage p,
#hrs-delivered-baggage p {
    margin-top: 20px !important;
}

#hrs-stored-baggage .hrs-loading,
#hrs-delivered-baggage .hrs-loading {
    font-size: 0px !important;
    padding: 25px !important;
}

#searchInput {
    border-radius: 40px !important;
    padding: 14px 20px !important;
    border: 1px solid #E3E3E3 !important;
    box-shadow: none !important;
}

.hrs-qr-btn {
    border-radius: 50% !important;
}

/* baggage */

.hrs-luggage-tab:hover {
    background-color: transparent !important;
    color: #0270AD !important;
}

#hrs-app .hrs-baggage-card {
    padding: 12px !important;
    border: 1px solid #EEE !important;
    border-radius: 12px !important;
}

#hrs-app .hrs-baggage-card .hrs-baggage-title {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
}

#hrs-app .hrs-baggage-card .hrs-baggage-status {
    font-size: 10px !important;
    padding: 4px 12px !important;
    line-height: 1 !important;
}

#hrs-app .hrs-baggage-card .hrs-baggage-status.delivered {
    background-color: #0270AD !important;
    color: #FFF !important;
}

#hrs-app .hrs-baggage-card .hrs-baggage-status.stored {
    background-color: #13a060 !important;
    color: #FFF !important;
}

#hrs-app .hrs-baggage-card .hrs-baggage-status.requested {
    background-color: #FDB022 !important;
    color: #FFF !important;
}

#hrs-app .hrs-baggage-card .hrs-baggage-status.collected {
    background-color: #039855 !important;
    color: #FFF !important;
}

#hrs-app .hrs-baggage-card .hrs-baggage-card-header {
    padding-bottom: 16px !important;
    border-bottom: 1px solid #EEE !important;
    margin-bottom: 16px !important;
}

#hrs-app .hrs-baggage-card .hrs-baggage-label {
    font-size: 12px !important;
    color: #667085 !important;
    font-weight: 400 !important;
}

#hrs-app .hrs-baggage-card .hrs-baggage-value {
    font-size: 14px !important;
    color: #1B1B1B !important;
}

#hrs-app .hrs-baggage-card .hrs-baggage-info {
    gap: 8px !important;
}




/* staff */

.hrs-luggage-tabs .hrs-luggage-tab:hover,
.hrs-luggage-tabs .hrs-luggage-tab:focus {
    background-color: transparent !important;
    color: #0270AD !important;
}

#hrs-stored-baggage .hrs-baggage-details {
    gap: 8px !important;
}

#hrs-stored-baggage .hrs-baggage-status.pending {
    font-weight: 400 !important;
    line-height: 1 !important;
}

#hrs-delivered-baggage .hrs-baggage-details {
    gap: 8px !important;
    margin-bottom: 0 !important;
}

.hrs-staff-panel .hrs-luggage-stat-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: initial !important;
    margin: 0 !important;
    background-color: transparent !important;
}

.hrs-luggage-stat.stored .hrs-luggage-stat-label {
    font-size: 12px !important;
    color: #FFF !important;
}

.hrs-staff-panel .hrs-luggage-stat {
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: 30px auto !important;
    gap: 12px !important;
    align-items: center !important;
    height: 66px !important;
}

.hrs-staff-panel .hrs-luggage-stat.stored {
    color: #FFF !important;
}

.hrs-staff-panel .hrs-luggage-stat.delivered {
    color: #5BC658 !important;
}

.hrs-staff-panel .hrs-luggage-stat.pending {
    color: #FF4B4B !important;
}

.hrs-staff-panel .hrs-luggage-stat.overdue {
    color: #FFF !important;
}

/* Laundry Quantity Section */
#hrs-app .hrs-laundry-quantity-section {
    margin-bottom: 16px !important;
}

#hrs-app .hrs-laundry-quantity-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
    margin-bottom: 8px !important;
}

#hrs-app .hrs-laundry-quantity-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    max-width: 120px !important;
    margin: 0 auto !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 4px !important;
    padding: 8px !important;
}

#hrs-app .hrs-laundry-quantity-btn {
    width: 25px !important;
    height: 25px !important;
    border: 2px solid #A5A5A5 !important;
    background: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #A5A5A5 !important;
    font-size: 16px !important;
    padding: 6px !important;
    font-weight: 600 !important;
}

#hrs-app .hrs-laundry-quantity-btn:hover {
    border-color: #1B1B1B !important;
    color: #1B1B1B !important;
    background: transparent !important;
}

#hrs-app .hrs-laundry-quantity-input {
    width: 30px !important;
    text-align: center !important;
    border: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
    background: transparent !important;
}

.hrs-staff-panel {
    background-image: url('assets//images/img/shape-bg.png') !important;
    background-size: 100% auto !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
}





/* for baggage modal */

.hrs-baggage-modal {
    max-width: 100% !important;
}

.hrs-modal-title-section h2 {
    font-weight: 600 !important;
}

.hrs-modal-title-section p {
    letter-spacing: -2% !important;
    font-weight: 400 !important;
    color: #667085 !important;
}

.hrs-form-field {
    margin-bottom: 16px !important;
}

.hrs-form-field label {
    color: #1B1B1B !important;
}

.hrs-form-field input {
    border-radius: 40px !important;
    border: 1px solid #E3E3E3 !important;
    padding: 15px 20px !important;
    font-size: 14px !important;
    color: #1B1B1B !important;
    height: 50px !important;
    font-weight: 500 !important;
}

.hrs-form-field input:focus {
    border: 1px solid #0270AD !important;
}

.hrs-form-field input::placeholder {
    color: #A5A5A5 !important;
}

.hrs-upload-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    letter-spacing: -1% !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
}

.hrs-upload-text:hover {
    text-decoration: none !important;
}

.hrs-upload-area {
    padding: 22px !important;
}

.hrs-submit-btn,
.hrs-add-baggage-btn {
    padding: 13px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background-color: #0270AD !important;
}

.hrs-submit-btn:hover,
.hrs-add-baggage-btn:hover {
    background-color: #333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.hrs-add-baggage-btn {
    margin-top: 0 !important;
}

.hrs-luggage-stats .hrs-luggage-stat-label {
    font-size: 12px !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

.hrs-luggage-stat.delivered {
    background-color: #EDF9ED !important;
}

.hrs-luggage-stat.pending {
    background-color: #FFF6F6 !important;
}

.hrs-luggage-stat.overdue {
    background-color: #E539351F !important;
}

.hrs-luggage-stat.overdue .hrs-luggage-stat-label,
.hrs-luggage-stat.overdue .hrs-luggage-stat-number {
    color: #EE1F1F !important;
}   

.hrs-qr-btn,
.hrs-back-btn {
    outline-style: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
}

.hrs-qr-btn:focus,
.hrs-back-btn:focus {
    outline-style: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
}

.hrs-staff-panel .hrs-task-stat-label {
    font-size: 12px !important;
    opacity: 1 !important;
}

.hrs-staff-panel .hrs-status-badge {
    color: #039855 !important;
    background-color: #D1FADF !important;
}

.hrs-staff-panel .hrs-status-badge .hrs-status-dot {
    background-color: #039855 !important;
}

/* ------- */

#hrs-delivered-baggage,
#hrs-stored-baggage {
    padding-top: 20px !important;
}

.hrs-qr-btn {
    padding: 0 !important;
}

.hrs-empty-state .hrs-empty-state-icon {
    font-size: 60px !important;
    line-height: 1 !important;
}

#hrs-baggage-cards .hrs-no-baggage-icon {
    font-size: 50px !important;
    margin-bottom: 10px !important;
    line-height: 1 !important;
}

.hrs-baggage-status {
    line-height: 1.2 !important;
}

.hrs-empty-state div {
    font-size: 20px !important;
    color: #344054 !important;
}

.hrs-back-btn:hover {
    background-color: white !important;
}

.hrs-barcode-section {
    border-top: 2px dashed #ddd !important;
}

.hrs-download-btn {
    font-size: 14px !important;
    letter-spacing: -1% !important;
    padding: 10px 20px !important;
    line-height: 20px !important;
    height: 44px !important;
    font-weight: 500 !important;
    color: #000 !important;
    border: 2px solid #000 !important;
}

.hrs-print-btn {
    font-size: 14px !important;
    letter-spacing: -1% !important;
    padding: 10px 20px !important;
    line-height: 20px !important;
    height: 44px !important;
    font-weight: 500 !important;
}

.hrs-download-btn:hover,
.hrs-download-btn:focus,
.hrs-print-btn:hover,
.hrs-print-btn:focus {
    background: #333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    color: white !important;
    border: 2px solid #333 !important;
}

.hrs-barcode-section {
    position: relative !important;
}

.hrs-barcode-section::after {
    content: "" !important;
    width: 40px !important;
    height: 40px !important;
    position: absolute !important;
    background: white !important;
    border-radius: 50% !important;
    top: -22px !important;
    left: -41px !important;
    box-shadow: inset -2px 4px 6px rgba(0,0,0,0.1) !important;
    transform: rotate(49deg) !important;
}

.hrs-barcode-section::before {
    content: "" !important;
    width: 40px !important;
    height: 40px !important;
    position: absolute !important;
    background: white !important;
    border-radius: 50% !important;
    top: -22px !important;
    right: -41px !important;
    box-shadow: inset -2px 4px 6px rgba(0,0,0,0.1) !important;
    transform: rotate(-121deg) !important;
}

.hrs-detail-row {
    padding: 5px 0 !important;
    border-bottom: 0 !important;
}

.hrs-qr-btn:focus {
    background: white !important;
    border: 1px solid #06c !important;
}

.hrs-gym-no-bookings .fa-solid.fa-calendar-xmark {
    background-image: url('../images/icons/clock.svg') !important;
    width: 36px !important;
    height: 36px !important;
    background-repeat: no-repeat !important;
}

.hrs-gym-no-bookings .fa-solid.fa-calendar-xmark::before {
    opacity: 0 !important;
}

#hrs-gym-bookings-list {
    padding-top: 10px !important;
}

#hrs-gym-bookings-list .hrs-gym-no-bookings h3 {
    margin-top: 10px !important;
}

#hrs-app .hrs-baggage-card .hrs-baggage-value {
    font-size: 12px !important;
}
button.hrs-task-tab:hover,
button.hrs-task-tab:focus {
    background-color: transparent !important;
    color: #0270AD !important;
}

.hrs-task-item {
    padding-bottom: 0 !important;
}
#hrs-completed-tasks .hrs-task-details {
    margin-bottom: 0;
}

.hrs-task-item {
    padding-bottom: 12px !important;
}

#hrs-app .hrs-gym-content .content__wrapper {
    padding-bottom: 30px !important;
}
@media (max-width: 369px) {
    .hrs-staff-panel .hrs-task-stat-label {
        font-size: 11px !important;
    }
} 

.hrs-staff-name {
    margin-bottom: 0 !important;
}

.hrs-loading {
    padding: 25px !important;
}

#hrs-new-tasks .hrs-task-status,
#hrs-progress-tasks .hrs-task-status,
#hrs-completed-tasks .hrs-task-status {
    font-weight: 400;
    letter-spacing: normal;
    padding: 5px 12px;
    line-height: 1;
}

.hrs-task-actions {
    gap: 12px !important;
}

.hrs-task-btn.deny:hover {
    background: #EE1605 !important;
}

.hrs-task-btn.accept:hover {
    background: #45a049 !important;
}

.hrs-staff-panel .hrs-status-badge {
    font-weight: 400 !important;
    padding: 5px 13px !important;
}

#hrs-completed-tasks .hrs-task-item {
    border: 0 !important;
    background-color: #E3E3E333 !important;
}

.hrs-staff-panel {
    background-image: url('../images/img/shape-bg.png') !important;
}

.hrs-staff-header {
    background: transparent !important;
}

.hrs-staff-panel {
    position: relative !important;
}

.hrs-staff-panel::after {
    content: "";
    position: absolute;
    height: calc(100% - 85px);
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: -1;
    border-radius: 24px 24px 0 0;
}
/* housekeeping */

.hrs-popup-overlay {
    max-width: 100% !important;
}



/* for baggage tag */

#hrs-add-baggage-step {
    margin: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

#hrs-add-baggage-step .hrs-baggage-modal-content {
    background-color: white !important;
    background-image: url('../images/img/shape-bg.png') !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
}

#hrs-add-baggage-step .hrs-baggage-modal-header {
    background: transparent !important;
    display: block !important;
}

#hrs-add-baggage-step .hrs-baggage-form-container {
    background-color: white !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    border-radius: 24px 24px 0 0 !important;
}

#hrs-add-baggage-step .hrs-request-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#hrs-add-baggage-step .hrs-modal-title-section {
    padding: 0 20px !important;
}

#hrs-add-baggage-step .hrs-back-btn {
    width: auto !important;
    height: auto;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #1B1B1B !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    margin-bottom: 3px !important;
    position: relative !important;
    padding-left: 0 !important;
}

#hrs-add-baggage-step .hrs-notification-btn i::before {
    content: "" !important;
    font-family: inherit !important;
    font-weight: normal !important;
    background-image: url(../images//icons/notification.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 20px !important;
    position: absolute;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#hrs-add-baggage-step .hrs-notification-btn:focus {
    outline: none !important;
}

#hrs-add-baggage-step .hrs-back-btn i::before {
    opacity: 0 !important;
}

#hrs-add-baggage-step .hrs-back-btn i::after {
    content: "" !important;
    font-family: inherit !important;
    font-weight: normal !important;
    background-image: url(../images/icons/back-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 9px !important;
    left: 0 !important;
}

.hrs-staff-panel .hrs-luggage-tab {
    text-align: start !important;
    font-size: 14px !important;
}

#hrs-overdue-baggage {
    text-align: center !important;
    padding: 20px 20px 40px !important;
}

#hrs-overdue-baggage .hrs-loading {
    font-size: 0px !important;
    padding: 25px !important;
}






#hrs-app .hrs-no-requests {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

#hrs-app .hrs-notice-actions {
    padding-bottom: 20px !important;
}

#hrs-app .hrs-notice-content {
    overflow-y: auto !important;
}

/* #hrs-fab-container {
    visibility: visible !important;
} */

#hrs-step-3.hrs-step.active ~ #hrs-fab-container {
    visibility: visible !important;
}

.hrs-baggage-modal-content1 .hrs-notification-btn {
    visibility: hidden !important;
}

#hrs-items-list p {
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

#hrs-app .others__title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
}

#hrs-app .hrs-clean-item-link .hrs-clean-item-content {
    gap: 8px !important;
}

#hrs-app .fa-chevron-right.fa-chevron-right-others::before {
    right: 30px !important;
} 

#hrs-app .hrs-other-request-option {
    cursor: pointer !important;
}

#hrs-app .hrs-other-request-option:hover {
    background-color: #B4D8FF29 !important;
    color: inherit !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
}

#hrs-app #hrs-maintenance-list .hrs-maintenance-item {
    margin-bottom: 12px !important;
}
    
#hrs-app .hrs-maintenance-item-description {
    font-size: 12px !important;
}

#hrs-app .hrs-clean-item-icon .hrs-default-icon {
    border: 0 !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

#hrs-app .hrs-clean-item-link:hover .hrs-clean-item-icon .hrs-default-icon {
    background-color: #007AFF1F !important;
    border: 1px solid transparent !important;
    transition: 0.2s all ease-in-out !important
}


#hrs-app .hrs-no-providers {
    font-size: 14px !important;
    padding-bottom: 20px !important;
    padding-top: 10px !important;
}

#hrs-app #hrs-provider-list {
    font-size: 14px !important;
    padding-bottom: 20px !important;
}

#hrs-app .hrs-selected-item-image {
    max-width: 30px !important;
    max-height: 30px !important;
    background-color: transparent !important;
}

#hrs-app .hrs-gym-no-bookings > p {
    font-size: 14px !important;
}

#hrs-step-20 .hrs-logo-container {
    margin-bottom: 0 !important;
}

/* Hide cancel button when request is completed */
#hrs-app .hrs-details-actions .hrs-cancel-btn[style*="display: none"] {
    display: none !important;
}






#hrs-app .hrs-notice-card-title {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-overflow: ellipsis;
    max-width: 85% !important;
}

#hrs-app .hrs-notice-card-footer {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 2px 22px 0 48px !important;
    color: #E4E7EC !important;
    max-width: 100% !important;
}

#hrs-app .hrs-notice-card-arrow::after {
    right: -20px !important;
    bottom: 14px !important;
}

@media (min-width: 768px) {
    #hrs-app .hrs-notice-card-arrow::after {
        bottom: 14px !important;
        right: -20px !important;
    }
}

.hrs-notice-card:hover {
    transform: translateY(0px) !important;
}

/* ===== ITEM DETAIL ACTION BUTTONS (Send + Cart) ===== */
#hrs-app .hrs-item-detail-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 0 !important;
}

#hrs-app .hrs-send-single-btn {
    flex: 1 !important;
}

#hrs-app .hrs-add-to-cart-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    background: white !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: none !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !important;
}

#hrs-app .hrs-add-to-cart-btn-2[type="button"] {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    min-width: 38px !important;
    background-color: white !important;
    overflow: visible !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-radius: 50% !important;
}

#hrs-app .hrs-add-to-cart-btn-2[type="button"]:hover {
    background-color: white !important;
    transform: none !important;
}

#hrs-app .hrs-add-to-cart-btn:hover {
    background: white !important;
    transform: none !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !important;
}

#hrs-app .hrs-add-to-cart-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #666 !important;
}

#hrs-app .cart-icon {
width: 40px !important;
  height: 40px !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 50%;
}

/* ===== CART MODAL ===== */
#hrs-app .hrs-cart-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

#hrs-app .hrs-cart-modal {
    background: white !important;
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    max-width: 570px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 0 !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.15) !important;
    display: flex !important;
    flex-direction: column !important;
}

#hrs-cart-inner h3 {
    font-size: 14px !important;
}

#hrs-app .hrs-cart-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 20px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    z-index: 2 !important;
    border-radius: 20px 20px 0 0 !important;
}

#hrs-app .hrs-cart-modal-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
    margin: 0 !important;
}

#hrs-app .hrs-cart-close-btn {
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: none !important;
    font-size: 22px !important;
    color: #666 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    padding: 0 !important;
    line-height: 1 !important;
}

#hrs-app .hrs-cart-close-btn:hover {
    background: #f0f0f0 !important;
    color: #333 !important;
}

/* Cart Items List */
#hrs-app .hrs-cart-items-list {
    padding: 8px 20px !important;
    min-height: 60px !important;
    overflow-y: auto !important;
}

#hrs-detail-item-wrapper {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#hrs-app .hrs-cart-empty {
    text-align: center !important;
    color: #999 !important;
    font-size: 14px !important;
    padding: 20px 0 !important;
}

#hrs-app .hrs-cart-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

#hrs-app .hrs-cart-item:last-child {
    border-bottom: none !important;
}

#hrs-app .hrs-cart-item-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #f0f7ff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

#hrs-app .hrs-cart-item-img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
}

#hrs-app .hrs-cart-item-emoji {
    font-size: 20px !important;
}

#hrs-app .hrs-cart-item-title {
    flex: 1 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
}

#hrs-app .hrs-cart-item-qty {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#hrs-app .hrs-cart-qty-btn {
    width: 28px !important;
    height: 28px !important;
    border: 1.5px solid #ccc !important;
    border-radius: 50% !important;
    background: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    color: #333 !important;
}

#hrs-app .hrs-cart-qty-btn:hover {
    border-color: #0270AD !important;
    color: #0270AD !important;
}

#hrs-app .hrs-cart-qty-del {
    width: 28px !important;
    height: 28px !important;
    border: 1.5px solid #fca5a5 !important;
    border-radius: 50% !important;
    background: #fff5f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

#hrs-app .hrs-cart-qty-del:hover {
    background: #fee2e2 !important;
    border-color: #ef4444 !important;
}

#hrs-app .hrs-cart-qty-num {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
    min-width: 20px !important;
    text-align: center !important;
}

/* Cart Another Section */
#hrs-app .hrs-cart-another-section {
    padding: 16px 20px 8px !important;
    border-top: 1px solid #f0f0f0 !important;
}

#hrs-app .hrs-cart-another-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1B1B1B !important;
    margin: 0 0 4px !important;
}

#hrs-app .hrs-cart-another-subtitle {
    font-size: 12px !important;
    color: #667085 !important;
    margin: 0 0 12px !important;
}

#hrs-app .hrs-cart-search-wrapper {
    position: relative !important;
    margin-bottom: 12px !important;
}

#hrs-app .hrs-cart-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #999 !important;
    pointer-events: none !important;
}

#hrs-app .hrs-cart-search-input {
    width: 100% !important;
    padding: 10px 16px 10px 40px !important;
    border: 1.5px solid #0270AD57 !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: white !important;
    color: #333 !important;
    outline: none !important;
    box-shadow: 0px 8px 20px 0px #B8C6D430 !important;
}

#hrs-app .hrs-cart-search-input:focus {
    border-color: #0270AD !important;
}

#hrs-app .hrs-cart-another-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 220px !important;
    overflow-y: auto !important;
}

#hrs-app .hrs-cart-another-item {
    margin: 0 !important;
    padding: 0 !important;
}

#hrs-app .hrs-cart-another-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 8px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.15s ease !important;
    border-radius: 8px !important;
}

#hrs-app .hrs-cart-another-link:hover {
    background: #f0f7ff !important;
    text-decoration: none !important;
}

#hrs-app .hrs-cart-another-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: #f8f9fa !important;
    border: 1px solid #eee !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

#hrs-app .hrs-cart-another-img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
}

#hrs-app .hrs-cart-another-item-title {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B1B1B !important;
}

/* Cart Footer */
#hrs-app .hrs-cart-footer {
    padding: 16px 20px !important;
    position: sticky !important;
    bottom: 0 !important;
    background: white !important;
    border-top: 1px solid #f0f0f0 !important;
}

#hrs-app .hrs-cart-send-btn {
    width: 100% !important;
    padding: 14px 24px !important;
    background: #0270AD !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: inherit !important;
}

#hrs-app .hrs-cart-send-btn:hover {
    background: #025a8a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(2,112,173,0.3) !important;
}

/* ===== RULES & CONDITIONS (Item Details Page) ===== */
#hrs-app .hrs-rules-section {
    margin-bottom: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid #EEEEEE !important;
}

#hrs-app #hrs-rules-section {
    border-top: 0 !important;
}

#hrs-app .hrs-rules-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1B1B1B !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
}

#hrs-app .hrs-rules-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: start !important;
}

#hrs-app .hrs-rules-list li {
    font-size: 13px !important;
    color: #374151 !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    padding: 3px 0 3px 16px !important;
    position: relative !important;
}

#hrs-app .hrs-rules-list li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    color: #374151 !important;
    font-size: 14px !important;
}

#hrs-app .hrs-rule-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #eef2f7 !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
    color: #374151 !important;
    line-height: 1.5 !important;
    list-style: none !important;
}

#hrs-app .hrs-rule-item::before {
    display: none !important;
}

#hrs-app .hrs-rule-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #0270AD !important;
    flex-shrink: 0 !important;
    margin-top: 5px !important;
}

#hrs-app .hrs-rule-hidden {
    display: none !important;
}

#hrs-app .hrs-rules-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    color: #0270AD !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 0 2px !important;
    font-family: inherit !important;
    letter-spacing: 0.1px !important;
}

#hrs-app .hrs-rules-toggle:hover {
    color: #025a8a !important;
}

#hrs-app .hrs-rules-toggle-icon {
    stroke: currentColor !important;
}





/* --- */

#hrs-cart-another-list .cart__select__btn:hover {
    background-color: #B4D8FF29 !important;
    border: 1px solid transparent !important;
}

#hrs-cart-another-list .cart__select__btn,
#hrs-cart-another-list .cart__select__btn > div {
    transition: 0.3s all ease-in-out;
}

#hrs-cart-another-list .cart__select__btn:hover > div {
    background-color: #007AFF1F !important;
    border: 1px solid transparent !important;
}

#hrs-cart-search {
    box-shadow: 0px 15px 35.5px 0px #B8C6D340 !important;
}

#hrs-cart-another-list .cart__select__btn svg {
    stroke: #000 !important;
}

#input__wrapper {
    margin-bottom: 20px !important;
}


#hrs-app .cart__btn__not__btn__wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#hrs-app .cart__btn__not__btn__wrapper .hrs-add-to-cart-btn-2 {
    align-self: center !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
}


/* ===== BANGLA FONT (Hind Siliguri) ===== */
#hrs-app[data-lang="bn"],
#hrs-app[data-lang="bn"] * {
    font-family: "Hind Siliguri", "Inter Tight", sans-serif !important;
}