@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { --google-blue: #4285F4; --google-green: #34A853; --google-red: #EA4335; --google-yellow: #FBBC05; --primary-color: #6c5ce7; --secondary-color: #a29bfe; --light-color: #f8f9fa; --dark-color: #32325d; --light-gray: #f8f9fa; --dark-gray: #6c757d; --medium-gray: #e9ecef; --dark: #212529; --sidebar-width: 280px; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --success-color: #00b894; --warning-color: #fdcb6e; --danger-color: #d63031; --pending-color: #f39c12; --text-color: #2d3436; --light-text: #636e72; --background: #f5f6fa; --card-bg: #ffffff; --border-color: #dfe6e9; --gradient-start: #4361ee; --gradient-end: #f72585; } /* =========================================================== ðŸŽ¨ TRYMZO BRAND COLOR VARIABLES Theme: Urban Chill (Light + Dark) Brand: Trymzo â€“ Men's Salon & Barber Booking Platform =========================================================== */ :root { --trymzo-primary: #2B7A78; --trymzo-primary-hover: #256D6B; --trymzo-primary-light: #3A9A94; --trymzo-secondary: #A7D7C5; --trymzo-secondary-hover: #91CBB7; --trymzo-secondary-light: #D6EFE6; --trymzo-accent: #FF6F61; --trymzo-accent-hover: #E95D52; --trymzo-accent-light: #FFD5D0; --trymzo-bg: #F8F9FA; --trymzo-bg-card: #FFFFFF; --trymzo-bg-muted: #F2F4F5; --trymzo-text: #2F3E46; --trymzo-text-light: #5A6B74; --trymzo-text-muted: #8A9CA6; --trymzo-heading: #263238; --trymzo-border: #E0E0E0; --trymzo-shadow: rgba(0, 0, 0, 0.05); --trymzo-divider: #DEE2E6; --trymzo-font-family: "Poppins", "Segoe UI", Roboto, sans-serif; --trymzo-font-color: var(--trymzo-text); } /* =========================================================== ðŸŒ™ DARK THEME Activate with: Add class `.dark-theme` to or =========================================================== */ .dark-theme { --trymzo-primary: #33C1B1; --trymzo-primary-hover: #28A798; --trymzo-primary-light: #4FD4C6; --trymzo-secondary: #78C7B2; --trymzo-secondary-hover: #64B49E; --trymzo-secondary-light: #A0DCC7; --trymzo-accent: #FF7E6E; --trymzo-accent-hover: #FF6F61; --trymzo-accent-light: #FF9C8E; --trymzo-bg: #101314; --trymzo-bg-card: #1A1E1F; --trymzo-bg-muted: #202627; --trymzo-text: #E5E7E8; --trymzo-text-light: #AAB1B3; --trymzo-text-muted: #7A868A; --trymzo-heading: #FFFFFF; --trymzo-border: #2E3537; --trymzo-shadow: rgba(0, 0, 0, 0.4); --trymzo-divider: #333C3E; --trymzo-font-family: "Poppins", "Segoe UI", Roboto, sans-serif; --trymzo-font-color: var(--trymzo-text); } /* Z-index hierarchy: #page-loader, .loader-overlay: 999 .bottomModal: 998 .bottom-nav: 899 .trymzo-bottom-nav: 899 .app-sidebar: 898 .app-overlay: 897 #top-nav: 896 */ * { box-sizing: border-box; } /* Remove underlines on focus for all links and buttons */ a:focus, a:focus-visible, button:focus, button:focus-visible, .btn:focus, .btn:focus-visible { text-decoration: none; outline: none; } a:focus-visible, button:focus-visible, .btn:focus-visible { box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.3); border-radius: 4px; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 1rem; } textarea:focus, input:focus { outline: none !important; box-shadow: none !important; } .text-primary { color: #0056B3 !important; } .btn-primary { background-color: #0056B3 !important; border-color: #0056B3 !important; } body { background-color: #f8f9fa; padding-top: calc(56px + constant(safe-area-inset-top, 0px)); padding-top: calc(56px + env(safe-area-inset-top, 0px)); padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px)); } /* Global Full Page Loader Styling */ #top-loader { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, #007bff, #00d4ff); z-index: 998; opacity: 0; transition: width 0.4s ease, opacity 0.4s ease; } #top-loader.active { opacity: 1; } .loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 999; } .loader-content { text-align: center; } #page-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999; transition: opacity 0.5s ease, visibility 0.5s ease; } #page-loader.hidden { opacity: 0; visibility: hidden; } #page-loader .icon { font-size: 48px; color: #333; } #page-loader .loader-text { margin-top: 20px; font-family: 'Segoe UI', sans-serif; font-size: 18px; font-weight: 600; color: #222; text-align: center; animation: fadeIn 1s infinite alternate; } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0.5; } to { opacity: 1; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #top-nav { z-index: 896; } /* Mobile Responsive Homepage CSS */ /* ============================= ðŸŒˆ Trymzo Theme ============================= */ .safe-top { padding-top: env(safe-area-inset-top, 0px); } .safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Header */ .trymzo-header { position: fixed; top: 0; left: 0; right: 0; height: calc(50px + env(safe-area-inset-top, 0px)); display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, #fff6ef 0%, #ffffff 90%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); border-bottom: 1px solid #f0f0f0; padding-bottom: 6px; z-index: 896; /* do not change z-index */ } .header-btn { position: absolute; left: 12px; bottom: 8px; background: none; border: none; font-size: 20px; color: #444; } .trymzo-logo img { height: 32px; display: block; margin: 0 auto; } /* Bottom Navigation */ .trymzo-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(60px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-around; align-items: center; background: linear-gradient(0deg, #fff6ef 0%, #ffffff 90%); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); z-index: 899; /* do not change z-index */ /* Ensure it stays above content */ padding-bottom: env(safe-area-inset-bottom, 0px); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .trymzo-bottom-nav::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .trymzo-bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #666; font-size: 12px; font-weight: 500; transition: all 0.2s ease; flex-shrink: 0; min-width: 60px; padding: 8px 12px; scroll-snap-align: center; border-radius: 12px; } .trymzo-bottom-nav .nav-item:focus, .trymzo-bottom-nav .nav-item:focus-visible, .trymzo-bottom-nav .nav-item:active { outline: none; text-decoration: none; background-color: rgba(255, 107, 0, 0.08); border-radius: 12px; transform: scale(0.95); transition: all 0.2s ease; } .trymzo-bottom-nav { scroll-snap-type: x mandatory; } .trymzo-bottom-nav .nav-item i { font-size: 18px; margin-bottom: 3px; line-height: 1; } .trymzo-bottom-nav .nav-item.active, .trymzo-bottom-nav .nav-item:hover { color: #FF6B00; } .navbar-brand { margin: 0 auto; position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; } .navbar .btn-link { padding: 5px 10px; font-size: 24px; } .navbar .btn-link:hover { text-decoration: none; } .app-sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 80%; max-width: 300px; background-color: white; color: black; padding: 20px; padding-bottom: calc(65px + 20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-100%); transition: transform 0.3s ease; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); z-index: 898; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(255, 107, 0, 0.3) transparent; } .app-sidebar::-webkit-scrollbar { width: 6px; } .app-sidebar::-webkit-scrollbar-track { background: transparent; } .app-sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 107, 0, 0.3); border-radius: 3px; transition: background-color 0.3s ease; } .app-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 107, 0, 0.5); } .app-sidebar.active { transform: translateX(0); } .sidebar-nav .nav-item { margin-bottom: 8px; } .sidebar-nav .nav-link { color: #2F3E46; padding: 14px 20px; border-radius: 12px; transition: all 0.2s ease; font-weight: 500; font-size: 15px; font-family: 'Poppins', 'Segoe UI', Roboto, sans-serif; display: flex; align-items: center; position: relative; border: none; background-color: transparent; letter-spacing: -0.2px; text-decoration: none; } .sidebar-nav .nav-link:focus, .sidebar-nav .nav-link:focus-visible { outline: none; text-decoration: none; box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.3); } .sidebar-nav .nav-link::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255, 107, 0, 0.1) 0%, transparent 100%); transition: width 0.2s ease; border-radius: 12px 0 0 12px; } .sidebar-nav .nav-link:hover { background-color: rgba(255, 107, 0, 0.05); color: #FF6B00; padding-left: 24px; } .sidebar-nav .nav-link:hover::before { width: 4px; } .sidebar-nav .nav-link:active { background-color: rgba(255, 107, 0, 0.1); } .sidebar-nav .nav-link i { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(255, 107, 0, 0.05) 100%); border-radius: 12px; margin-right: 12px; font-size: 18px; color: #FF6B00; transition: all 0.3s ease; flex-shrink: 0; } .sidebar-nav .nav-link:hover i { transform: scale(1.05); background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 107, 0, 0.1) 100%); } .app-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; z-index: 897; } .app-overlay.active { display: block; } .app-sidebar .profile { text-align: center; margin-bottom: 20px; } .app-sidebar .profile img { width: 80px; height: 80px; border-radius: 50%; } .app-sidebar .nav-link { font-size: 15px; padding: 14px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; align-items: center; margin-bottom: 4px; text-decoration: none; } .app-sidebar .nav-link:focus, .app-sidebar .nav-link:focus-visible { outline: none; text-decoration: none; box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.3); } .app-sidebar .nav-link:active { background-color: rgba(255, 107, 0, 0.1); } .main-content { padding: 15px; margin-bottom: 60px; } input, select, textarea { font-size: 16px !important; } #profile-body { background: #f7f7ff; margin-top: 20px; } .profile-card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 0 solid transparent; border-radius: .25rem; margin-bottom: 1.5rem; box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%); } .me-2 { margin-right: .5rem !important; } #profile-box { width: 110px; height: 110px; overflow: hidden; border-radius: 50%; position: relative; border: 5px solid #007bff !important; } #nav-profile-box { width: 40px; height: 40px; overflow: hidden; border-radius: 50%; position: relative; border: 1px solid #007bff !important; } #profile-upload-box, #personalInfoSection .profile-upload-overlay { width: 100%; height: 100%; border-radius: 50%; position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transition: opacity 0.3s ease; cursor: pointer; } #profile-upload-box:hover, #personalInfoSection .profile-upload-overlay:hover { opacity: 0.8; } #personalInfoSection .profile-upload-overlay i { font-size: 24px; } #upload-profile-image { opacity: 0; } .city-sheet { position: fixed; bottom: -100%; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background: #fff; z-index: 500; border-top-left-radius: 16px; border-top-right-radius: 16px; transition: bottom 0.3s ease; box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.15); overflow: auto; } .city-sheet.show { bottom: 0; } .sheet-header { padding-top: 8px; border-bottom: 1px solid #eee; } .sheet-dragger { width: 50px; height: 4px; background: #ccc; border-radius: 2px; margin: 0 auto 8px; } .sheet-body { padding-top: 15px; } .sheet-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 499; display: none; } .sheet-overlay.show { display: block; } /* My Shop CSS */ .hours-card { border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border: none; margin-bottom: 20px; } .hours-header, .card-header { background-color: #6f42c1; color: white; padding: 15px 20px; } .hours-title { font-weight: 600; margin: 0; } .hours-body { padding: 0; } .day-row { display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid #f1f1f1; } .day-row:last-child { border-bottom: none; } .day-name { font-weight: 500; width: 100px; color: #555; } .day-hours { flex-grow: 1; } .closed-badge { background-color: #f8d7da; color: #721c24; padding: 3px 8px; border-radius: 4px; font-size: 0.8rem; } .edit-btn { background-color: #6f42c1; border-color: #6f42c1; font-weight: 500; border-radius: 6px; } .edit-btn:hover { background-color: #5a32b0; border-color: #5a32b0; } .time-input-group { display: flex; align-items: center; } .time-separator { margin: 0 10px; font-weight: bold; } .modal-header { background-color: #6f42c1; color: white; } .day-active-toggle { margin-right: 15px; } /* Shop Create Container CSS */ #shopCreateContainer .clear-input-icon { position: absolute; right: 20px; top: 40%; transform: translateY(-50%); cursor: pointer; font-size: 40px; color: #999; display: none; /* Initially hidden */ } #shopCreateContainer .clear-input-icon:hover { color: #333; } #shopCreateContainer #shopResults { display: block; } #shopCreateContainer .search-bar { border-radius: 30px; padding: 23px 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } #shopCreateContainer .shop-card { border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); padding: 20px; background-color: #fff; margin-top: 20px; display: none; } #shopCreateContainer .shop-title { font-size: 1.3rem; font-weight: bold; margin-bottom: 10px; } #shopCreateContainer .shop-info i { color: #007bff; margin-right: 8px; } #shopCreateContainer .action-buttons .btn { border-radius: 20px; padding: 8px 18px; margin-top: 10px; } #shopCreateContainer .action-buttons .btn+.btn { margin-left: 10px; } @media (max-width: 576px) { #shopCreateContainer.shop-card { padding: 15px; } #shopCreateContainer .shop-title { font-size: 1.1rem; } #shopCreateContainer .action-buttons { flex-direction: column; } #shopCreateContainer.action-buttons .btn { width: 100%; margin: 5px 0; } } /* Shop Phone Modal */ #shopPhoneModal .modal-content { border: none; border-radius: 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } #shopPhoneModal .modal-header { background-color: #4285F4; color: white; border-radius: 0; padding: 1rem 1.5rem; border-bottom: none; } #shopPhoneModal .modal-title { font-weight: 500; font-size: 1.25rem; } #shopPhoneModal .modal-close-btn { color: white; opacity: 0.9; font-size: 1.5rem; } #shopPhoneModal .modal-body { padding: 1.5rem; } #shopPhoneModal .step { display: none; } #shopPhoneModal .step.active { display: block; animation: shopPhoneModalFadeIn 0.3s ease; } @keyframes shopPhoneModalFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #shopPhoneModal .phone-input-container { position: relative; margin-bottom: 1.5rem; } #shopPhoneModal .phone-prefix { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #5f6368; font-weight: 500; } #shopPhoneModal #phoneInput { padding-left: 50px; height: 50px; font-size: 1rem; border-radius: 8px; border: 1px solid #dadce0; } #shopPhoneModal #phoneInput:focus { border-color: var(--google-blue); box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3); } #shopPhoneModal .otp-container { display: flex; justify-content: space-between; margin: 1.5rem 0; } #shopPhoneModal .otp-input { width: 45px; height: 60px; text-align: center; font-size: 1.5rem; border: 1px solid #dadce0; border-radius: 8px; margin: 0 5px; } #shopPhoneModal .otp-input:focus { border-color: var(--google-blue); box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3); outline: none; } #shopPhoneModal .phone-input-field { padding-left: 50px; height: 50px; font-size: 1rem; border-radius: 8px; border: 1px solid #dadce0; } #shopPhoneModal .phone-input-field:focus { border-color: #4285F4; box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3); } #shopPhoneModal .otp-container { display: flex; justify-content: space-between; margin: 1.5rem 0; } #shopPhoneModal .otp-digit-input { width: 45px; height: 60px; text-align: center; font-size: 1.5rem; border: 1px solid #dadce0; border-radius: 8px; margin: 0 5px; } #shopPhoneModal .otp-digit-input:focus { border-color: #4285F4; box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3); outline: none; } #shopPhoneModal .info-text { color: #5f6368; font-size: 0.9rem; margin-bottom: 1.5rem; } #shopPhoneModal .modal-info-box { background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.5rem; } #shopPhoneModal .modal-info-box .info-icon { color: #4285F4; margin-right: 8px; } #shopPhoneModal .otp-timer { font-weight: 600; color: #5f6368; } #shopPhoneModal .otp-timer-expired { color: #EA4335; } #shopPhoneModal .success-icon-wrapper { text-align: center; margin-bottom: 1.5rem; } #shopPhoneModal .success-icon { color: #34A853; font-size: 4rem; } #shopPhoneModal .modal-footer { background-color: #f8f9fa; padding: 1rem 1.5rem; border-top: 1px solid #e9ecef; border-radius: 0 0 8px 8px; } #shopPhoneModal .btn-verify { background-color: #4285F4; color: white; border-radius: 8px; padding: 10px 24px; font-weight: 500; transition: all 0.2s; border: none; } #shopPhoneModal .btn-verify:hover { background-color: #3367d6; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } #shopPhoneModal .btn-cancel { border-radius: 8px; padding: 10px 24px; font-weight: 500; background-color: white; border: 1px solid #dadce0; } @media (max-width: 576px) { #shopPhoneModal .modal-dialog { margin: 0; max-width: 100%; height: 100vh; } #shopPhoneModal .modal-content { height: 100%; border-radius: 0; } #shopPhoneModal .modal-body { padding: 1.5rem 1rem; } #shopPhoneModal .otp-digit-input { width: 40px; height: 50px; font-size: 1.3rem; } #shopPhoneModal .modal-footer { padding: 1rem; } } /* My Service Card */ #myServicesCard .search-input { border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: all 0.2s ease-in-out; } .use-edit-btn { transition: all 0.2s ease-in-out; } .use-edit-btn:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .use-edit-btn:active { transform: scale(0.95); } #myServicesCard .search-input:focus { border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } #myServicesCard .search-icon { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: #999; font-size: 1rem; } #myServicesCard .search-results { position: absolute; top: 100%; left: 0; right: 0; background-color: #fff; border: 1px solid #ccc; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); max-height: 200px; overflow-y: auto; z-index: 1; } #myServicesCard .hidden { display: none !important; } .remove-tag { font-weight: bold; cursor: pointer ! important; } #myServicesCard .service-price { font-size: 0.9rem; font-weight: 600; color: #333333; } #myServicesCard .original-price { text-decoration: line-through; color: #6c757d; } #myServicesCard .add-service-btn { background-color: #0056B3; border: none; border-radius: 50px; font-weight: 600; &:hover { background-color: darken(#FF6B6B, 5%); transform: translateY(-1px); } &:active { transform: translateY(0); } } .scroll-hint { color: lighten(#3A3A3A, 50%); font-size: 0.9rem; margin: 1.5rem 0; text-align: center; i { animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-3px); } } } /* Help Section */ #helpSection .btn-link { text-decoration: none; font-weight: 500; color: #333; } #helpSection .btn-link:hover { text-decoration: none; color: #007bff; } #helpSection .card-header { border-bottom: none; padding: 0.75rem 1rem; } #helpSection .card-body { font-size: 0.95rem; } #helpSection .btn i { font-size: 1rem; } /* Personal Information */ #personalInfoSection { font-family: 'Segoe UI', Roboto, sans-serif; } #personalInfoSection .profile-avatar-wrapper { width: 110px; height: 110px; border-radius: 50%; overflow: hidden; position: relative; border: 3px solid white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } #personalInfoSection .profile-image { width: 100%; height: 100%; object-fit: cover; display: block; } #personalInfoSection .profile-upload-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transition: opacity 0.3s ease; cursor: pointer; border-radius: 50%; } #personalInfoSection .profile-upload-overlay:hover { opacity: 1; } #personalInfoSection .profile-upload-overlay i { font-size: 24px; } #personalInfoSection .profile-avatar { width: 110px; height: 110px; border: 3px solid white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } #personalInfoSection .form-control:disabled .form-control[readonly] { background-color: transparent; border: none; padding-left: 0; cursor: default; color: inherit; } #personalInfoSection .editable-field { transition: all 0.3s ease; border-bottom: 1px dashed transparent; } #personalInfoSection .editable-field:hover:not(:focus) { border-bottom-color: var(--medium-gray); } .edit-mode .editable-field { background-color: white !important; border-radius: 4px; padding: 8px 12px; /* border: 1px solid var(--dark); */ border-bottom: 1px solid var(--dark) !important; } .edit-mode .editable-field:focus { border: 1px solid var(--dark); } .edit-mode .form-section { background-color: white !important; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); padding: 20px; margin-bottom: 20px; } #personalInfoSection .change-photo-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--primary-color); color: white; border: 2px solid white; } #personalInfoSection .label-text { font-size: 0.8rem; color: var(--dark-gray); margin-bottom: 5px; display: block; font-weight: 500; } #personalInfoSection .form-section-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: #2F3E46; letter-spacing: -0.2px; } #personalInfoSection .send-email-btn { position: absolute; right: 0; bottom: 0; padding: 6px 12px; font-size: 0.875rem; } #personalInfoSection .form-actions { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e9ecef; display: flex; justify-content: flex-end; gap: 0.5rem; } #personalInfoSection .header-shadow { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } /* Appointment Section */ .appointments-container { max-width: 600px; margin: 0 auto; } .appointments-container header { margin-bottom: 20px; } .appointments-container header h1 { font-size: 24px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; color: var(--primary-color); } .appointments-container .filter-controls { display: flex; gap: 8px; margin-bottom: 16px; } .appointments-container .filter-btn { flex: 1; padding: 10px; border: none; border-radius: 8px; background-color: #e0e0e0; color: var(--text-color); font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .appointments-container .filter-btn.active { background-color: var(--primary-color); color: white; } .appointments-container .secondary-filters { display: flex; gap: 10px; margin-bottom: 20px; } .appointments-container .status-filter { flex: 3; } .appointments-container .status-dropdown { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--card-bg); } .appointments-container .refresh-btn { flex: 1; padding: 10px; border: none; border-radius: 8px; background-color: var(--card-bg); color: var(--primary-color); display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; border: 1px solid var(--border-color); } .appointments-container .appointment-list { display: flex; flex-direction: column; gap: 20px; } .appointments-container .day-header { font-size: 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--primary-color); } .appointments-container .day-header .date { color: var(--light-text); font-weight: normal; } .appointments-container .day-header .appointment-count { margin-left: auto; font-size: 14px; color: var(--light-text); } /* Appointment Card Styles */ .appointments-container .appointment-card { border-radius: 12px; border-left: 5px solid #6f42c1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.3s; overflow: hidden; margin-bottom: 20px; } .appointments-container .appointment-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .appointments-container .status-pending { border-left-color: #ffc107; } .appointments-container .status-confirmed { border-left-color: #28a745; } .appointments-container .status-running { border-left-color: #17a2b8; } .appointments-container .status-completed { border-left-color: #6f42c1; } .appointments-container .status-canceled { border-left-color: #dc3545; } .appointments-container .status-missed { border-left-color: #6c757d; } /* Status Badges */ .appointments-container .status-badge { font-size: 0.8rem; padding: 5px 12px; border-radius: 50px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .appointments-container .badge-pending { background-color: #fff3cd; color: #856404; } .appointments-container .badge-confirmed { background-color: #d4edda; color: #155724; } .appointments-container .badge-running { background-color: #d1ecf1; color: #0c5460; } .appointments-container .badge-completed { background-color: #e2d4f0; color: #4a2a7e; } .appointments-container .badge-canceled { background-color: #f8d7da; color: #721c24; } .appointments-container .badge-missed { background-color: #e2e3e5; color: #383d41; } .appointments-container .service-icon { color: #6f42c1; font-size: 1.8rem; } .appointments-container .badge-pending { background-color: #ffc107; color: #212529; font-size: 0.8rem; padding: 5px 10px; border-radius: 50px; } .appointments-container .time-slot { border-left: 3px solid #6f42c1; padding-left: 15px; margin: 1.5rem 0; } .appointments-container .status-pending .service-icon { color: #ffc107; } .appointments-container .status-confirmed .service-icon { color: #28a745; } .appointments-container .status-running .service-icon { color: #17a2b8; } .appointments-container .status-completed .service-icon { color: #6f42c1; } .appointments-container .status-canceled .service-icon { color: #dc3545; } .appointments-container .status-missed .service-icon { color: #6c757d; } .appointments-container .status-pending .time-slot { border-left-color: #ffc107; } .appointments-container .status-confirmed .time-slot { border-left-color: #28a745; } .appointments-container .status-running .time-slot { border-left-color: #17a2b8; } .appointments-container .status-completed .time-slot { border-left-color: #6f42c1; } .appointments-container .status-canceled .time-slot { border-left-color: #dc3545; } .appointments-container .status-missed .time-slot { border-left-color: #6c757d; } .appointments-container .action-buttons { display: flex; justify-content: space-between; margin-top: 1.5rem; } .appointments-container .btn-appointment { font-weight: 500; letter-spacing: 0.5px; flex: 1; padding: 0.5rem; border-radius: 6px; } .appointments-container .btn-confirm { background-color: #28a745; color: white; margin-right: 8px; border: 1px solid #28a745; } .appointments-container .btn-confirm:hover { background-color: #218838; border-color: #1e7e34; } .appointments-container .btn-cancel { background-color: #ffffff; color: #dc3545; border: 1px solid #dc3545; margin-left: 8px; } .appointments-container .btn-cancel:hover { background-color: #dc3545; color: white; } /* .token-badge { background-color: #6f42c1; color: white; font-size: 1rem; padding: 0.5rem 1rem; border-radius: 50px; } */ .appointments-container .services, .timing_text { font-size: 14px; color: var(--light-text); margin-bottom: 12px; } .appointments-container .action-btn { flex: 1; padding: 8px; border: none; border-radius: 8px; /* background-color: var(--background); color: var(--text-color); */ cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 14px; transition: all 0.2s ease; } .appointments-container .empty-state { text-align: center; padding: 20px; color: var(--light-text); font-size: 16px; } .appointments-container .empty-icon { font-size: 24px; margin-bottom: 10px; } .appointments-container .refresh-icon { animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive Adjustments */ @media (max-width: 480px) { .appointments-container .secondary-filters { flex-direction: column; } .appointments-container .customer-meta { flex-direction: column; gap: 4px; } .appointments-container .card-footer { flex-wrap: wrap; } .appointments-container .action-btn { min-width: calc(50% - 4px); } } .appointments-container .customer-header { background-color: #f8f9fa; border-bottom: 1px solid #e9ecef; padding: 1rem 1.5rem; } .appointments-container .customer-header .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; gap: 1rem; } .appointments-container .customer-info-block { flex-grow: 1; min-width: 0; } .appointments-container .customer-info-block h4 { margin-bottom: 0.5rem; font-size: 1.25rem; } .appointments-container .customer-info-block p { margin-bottom: 0.25rem; font-size: 0.95rem; display: flex; align-items: center; word-break: break-word; } .appointments-container .customer-info-block p i { margin-right: 0.5rem; flex-shrink: 0; } .appointments-container .token-badge { background-color: #6f42c1; color: white; font-size: 1rem; padding: 0.5rem 1rem; border-radius: 50px; white-space: nowrap; align-self: flex-start; display: flex; align-items: center; gap: 0.25rem; } @media (max-width: 576px) { .appointments-container .customer-header { padding: 0.8rem 1rem; } .appointments-container .customer-header .d-flex.justify-content-between.align-items-center { flex-direction: column; align-items: flex-start; } .appointments-container .customer-info-block { width: 100%; margin-bottom: 1rem; } .appointments-container .customer-info-block h4 { font-size: 1.15rem; } .appointments-container .customer-info-block p { font-size: 0.9rem; } .appointments-container .token-badge { width: fit-content; margin-left: 0; align-self: flex-start; } } @media (max-width: 768px) { .appointments-container .customer-header { padding: 1rem 1.2rem; } .appointments-container .customer-header .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; } .appointments-container .customer-info-block { flex-basis: 70%; } .appointments-container .token-badge { flex-basis: auto; align-self: flex-start; } } /* Notification Settings */ .notification-settings { max-width: 600px; margin: 20px auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .notification-settings.sound-toggle { display: flex; align-items: center; gap: 10px; } .notification-settings .switch { position: relative; display: inline-block; width: 60px; height: 30px; } .notification-settings .switch input { opacity: 0; width: 0; height: 0; } .notification-settings .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; } .notification-settings .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } .notification-settings input:checked+.slider { background-color: #4CAF50; } .notification-settings input:focus+.slider { box-shadow: 0 0 1px #4CAF50; } .notification-settings input:checked+.slider:before { transform: translateX(26px); } .notification-settings .slider.round { border-radius: 34px; } .notification-settings .slider.round:before { border-radius: 50%; } .notification-settings .on-icon, .off-icon { font-size: 14px; color: white; } .notification-settings .off-icon { opacity: 0; } .notification-settings input:checked+.slider .on-icon { opacity: 1; } .notification-settings input:checked+.slider .off-icon { opacity: 0; } .notification-settings input:not(:checked)+.slider .on-icon { opacity: 0; } .notification-settings input:not(:checked)+.slider .off-icon { opacity: 1; } .notification-settings #soundStatus { font-weight: 500; min-width: 30px; display: inline-block; } .no-scroll { overflow: hidden; } .bottomModal { position: fixed; inset: 0; z-index: 998; pointer-events: none; } .bottomModal .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity .28s ease; pointer-events: none; will-change: opacity; } .bottomModal.open { pointer-events: auto; } .bottomModal.open .overlay { opacity: 1; pointer-events: auto; } .bottomModal .sheet { position: fixed; bottom: 0; left: 0; width: 100%; max-width: 100%; transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .9, .2, 1); background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; max-height: 90vh; pointer-events: auto; overflow: hidden; will-change: transform; } .bottomModal.open .sheet { transform: translateY(0); } @media (min-width: 769px) { .bottomModal .sheet { width: 640px; left: 50%; transform: translate(-50%, 100%); border-radius: 14px 14px 0 0; } .bottomModal.open .sheet { transform: translate(-50%, 0); } } .bottomModal .handle { height: 28px; display: flex; align-items: center; justify-content: center; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .bottomModal .handle .bar { width: 36px; height: 4px; border-radius: 2px; background: #ddd; } .bottomModal .sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #f0f0f0; } .bottomModal .sheet-header h2 { margin: 0; font-size: 16px; font-weight: 600; } .bottomModal .close-btn { border: 0; background: transparent; font-size: 20px; line-height: 1; padding: 6px; } .bottomModal .sheet-body { padding: 14px; overflow-y: auto; /* calculate body height: sheet max-height minus header/footer/handle height. header ~48px, handle ~28px, footer ~56px (if present) -> reserve 140px total */ max-height: calc(90vh - 140px); } .bottomModal .sheet-footer { padding: 12px 14px; border-top: 1px solid #f0f0f0; display: flex; gap: 10px; justify-content: flex-end; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .bottomModal .demo-controls { margin-bottom: 18px; } .bottomModal .modal-btn-primary { background: #0056B3; color: #fff; border: 0; padding: 8px 14px; border-radius: 6px; } .bottomModal .sheet :focus { outline: 2px solid rgba(0, 123, 255, 0.25); outline-offset: 2px; } .bottomModal :focus:not(:focus-visible) { outline: none; } /* Booking Availability */ #bookingAvailabilityBox #shopResults { z-index: 499; max-height: 300px; overflow-y: auto; display: none; } .billing-text { text-align: left; font-size: 16px; line-height: 1.6; } @media (max-width: 576px) { .billing-text { font-size: 12px; } } /* Base rounded input (keep it generic for all inputs) */ #bookingAvailabilityBox .rounded-input { border-radius: 50px; padding: 12px 20px; border: 1px solid #d9d9d9; width: 100%; margin-bottom: 15px; font-size: 15px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Base rounded input (keep it generic for all inputs) */ #bookingAvailabilityBox .rounded-input { border-radius: 50px; padding: 12px 20px; border: 1px solid #d9d9d9; width: 100%; margin-bottom: 15px; font-size: 15px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; overflow: hidden; } #bookingAvailabilityBox .rounded-input:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); } /* ✅ Only search input gets extra right padding for clear icon */ #bookingAvailabilityBox #shopSearch.rounded-input { padding-right: 48px; /* space for × icon */ } /* Clear icon (perfect center + good size) */ #bookingAvailabilityBox .clear-input-icon { position: absolute; right: 12px; top: 40%; transform: translateY(-50%); cursor: pointer; z-index: 10; width: 32px; height: 32px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: #444; background: rgba(0, 0, 0, 0.08); transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; } #bookingAvailabilityBox .clear-input-icon:hover { background: rgba(0, 0, 0, 0.1); color: #333; } #bookingAvailabilityBox .clear-input-icon:active { transform: translateY(-50%) scale(0.92); } /* Mobile improvements */ @media (max-width: 576px) { #bookingAvailabilityBox .rounded-input { font-size: 14px; padding: 12px 18px; } #bookingAvailabilityBox #shopSearch.rounded-input { padding-right: 46px; } #bookingAvailabilityBox .clear-input-icon { width: 30px; height: 30px; right: 8px; font-size: 14px; } } #bookingAvailabilityBox .rounded-input-day { border-radius: 20px; padding: 4px 16px; border: 1px solid #ccc; font-size: 0.9rem; height: 36px; line-height: 1.5; background-color: #fff; appearance: none; -webkit-appearance: none; -moz-appearance: none; } #bookingAvailabilityBox .rounded-input-day:focus { outline: none; box-shadow: none; border-color: #007bff; } #bookingAvailabilityBox .rounded-input-day { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 5px center; background-size: 25px; } #bookingAvailabilityBox .service-card { border-radius: 12px; padding: 16px; background: #fff; margin-bottom: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); display: flex; align-items: center; } #bookingAvailabilityBox .service-img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; margin-right: 15px; } #bookingAvailabilityBox .add-btn { width: 32px; height: 32px; border: 2px solid #1e3a8a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #1e3a8a; background: #fff; } #bookingAvailabilityBox .action-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; border-top: 1px solid #ddd; display: flex; justify-content: space-between; padding: 10px 16px; box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05); } #bookingAvailabilityBox .btn-check { background: #1e3a8a; color: #fff; font-weight: 500; border-radius: 25px; padding: 10px 30px; margin-top: 12px; } #bookingAvailabilityBox .radio-options label { margin-right: 20px; } #bookingAvailabilityBox .dropdown-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 499; display: none; background-color: #fff; border: 1px solid #ced4da; border-radius: 0.25rem; max-height: 300px; overflow-y: auto; } #bookingAvailabilityBox .dropdown-item { cursor: pointer; padding: 0.5rem 1rem; } #bookingAvailabilityBox .dropdown-item:hover { background-color: #f1f1f1; } #bookingAvailabilityBox .dropdown-menu.show { display: block; } #bookingAvailabilityBox input:focus { outline: none; box-shadow: none; } #bookingAvailabilityBox #shopResults .list-group-item { cursor: pointer; transition: all 0.2s ease-in-out; } #bookingAvailabilityBox #shopResults .list-group-item:hover { background-color: #f1f1f1; } #bookingAvailabilityBox .btn-circle { width: 40px; height: 40px; padding: 6px 0; border-radius: 50%; text-align: center; font-size: 18px; line-height: 1.42857; } #bookingAvailabilityBox .list-group-item:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); } #bookingAvailabilityBox .booking-option { cursor: pointer; transition: all 0.2s ease-in-out; opacity: 1; } #bookingAvailabilityBox .booking-option.disabled { cursor: not-allowed; opacity: 0.6; } #bookingAvailabilityBox .booking-option.selected { border-width: 2px; background-color: #f5f9ff; } #bookingAvailabilityBox .shake { animation: shake 0.4s; } #bookingAvailabilityBox .token-badge { background-color: #6f42c1; color: white; font-size: 1rem; padding: 0.5rem 1rem; border-radius: 50px; white-space: nowrap; align-self: flex-start; display: flex; align-items: center; gap: 0.25rem; } #bookingAvailabilityBox .token-badge i { font-size: 1.2rem; } @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-6px); } 100% { transform: translateX(0); } } /* Modern Service Categories Styles - Swiggy/Zomato Inspired */ #bookingAvailabilityBox .category-section { background: #fff; border-radius: 16px; padding: 0; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); overflow: hidden; } #bookingAvailabilityBox .category-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 16px 20px; margin: 0; position: relative; } #bookingAvailabilityBox .category-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); } #bookingAvailabilityBox .category-header h5 { font-size: 1.1rem; font-weight: 600; margin: 0; display: flex; align-items: center; } #bookingAvailabilityBox .category-header .badge { background: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.3); font-size: 0.75rem; padding: 4px 8px; border-radius: 12px; } #bookingAvailabilityBox .category-services { padding: 0; } #bookingAvailabilityBox .service-card { border: none; border-radius: 0; margin: 0; transition: all 0.2s ease; position: relative; } #bookingAvailabilityBox .original-price { text-decoration: line-through; color: #6c757d; } #bookingAvailabilityBox .service-card:not(:last-child) { border-bottom: 1px solid #f0f0f0; } #bookingAvailabilityBox .service-card:hover { background: #f8f9ff; } #bookingAvailabilityBox .service-card.selected { background: #e8f5e8; border-left: 4px solid #28a745; } #bookingAvailabilityBox .service-card .card-body { padding: 16px 20px; border: none; } #bookingAvailabilityBox .service-image { width: 100px; border-radius: 12px; object-fit: cover; border: 2px solid #f0f0f0; transition: all 0.2s ease; } #bookingAvailabilityBox .service-card:hover .service-image { border-color: #667eea; transform: scale(1.05); } #bookingAvailabilityBox .service-info h6 { font-size: 1rem; font-weight: 600; color: #2c3e50; margin-bottom: 4px; line-height: 1.3; } #bookingAvailabilityBox .service-info p { font-size: 0.85rem; color: #6c757d; margin-bottom: 8px; line-height: 1.4; } #bookingAvailabilityBox .service-meta { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: #6c757d; } #bookingAvailabilityBox .service-meta i { width: 12px; text-align: center; } #bookingAvailabilityBox .service-price { font-size: 1.1rem; font-weight: 700; color: #28a745; } #bookingAvailabilityBox .service-toggle-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #e9ecef; background: white; color: #6c757d; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; font-size: 0.9rem; } #bookingAvailabilityBox .service-toggle-btn:hover { border-color: #28a745; color: #28a745; transform: scale(1.1); } #bookingAvailabilityBox .service-toggle-btn.btn-success { background: #28a745; border-color: #28a745; color: white; } #bookingAvailabilityBox .popular-badge { background: linear-gradient(45deg, #ff6b6b, #ffa500); color: white; font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; font-weight: 500; } /* Cart Summary Styles */ #bookingAvailabilityBox .cart-summary { background: #f8f9fa; padding: 8px 12px; border-radius: 8px; border: 1px solid #e9ecef; } #bookingAvailabilityBox .floating-cart { position: fixed; left: 50%; bottom: calc(15px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(14px); width: calc(100% - 24px); /* mobile safe */ max-width: 420px; /* desktop limit */ min-width: auto; /* remove fixed min width */ background: #fff; border-radius: 25px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); z-index: 997; opacity: 0; pointer-events: none; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; } #bookingAvailabilityBox .floating-cart.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } /* optional hover smoothness */ #bookingAvailabilityBox .floating-cart:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18); } #bookingAvailabilityBox .cart-content { display: flex; align-items: center; padding: 12px 20px; gap: 16px; } #bookingAvailabilityBox .cart-items { display: flex; align-items: center; gap: 8px; } #bookingAvailabilityBox .cart-count { background: #28a745; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; } #bookingAvailabilityBox .cart-text { font-size: 0.9rem; color: #6c757d; } #bookingAvailabilityBox .cart-total { flex: 1; text-align: center; } #bookingAvailabilityBox .total-amount { font-size: 1.1rem; font-weight: 700; color: #2c3e50; } #bookingAvailabilityBox .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 20px; padding: 8px 16px; font-weight: 600; font-size: 0.9rem; } #bookingAvailabilityBox .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } /* Animations */ @keyframes slideUp { from { transform: translateX(-50%) translateY(100%); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } #bookingAvailabilityBox .service-card.selected { animation: pulse 0.3s ease; } /* Mobile Responsive */ @media (max-width: 768px) { #bookingAvailabilityBox .category-section { margin-bottom: 16px; border-radius: 12px; } #bookingAvailabilityBox .category-header { padding: 12px 16px; } #bookingAvailabilityBox .category-header h5 { font-size: 1rem; } #bookingAvailabilityBox .service-card .card-body { padding: 12px 16px; } #bookingAvailabilityBox .service-image { width: 80px; } #bookingAvailabilityBox .service-info h6 { font-size: 0.95rem; } #bookingAvailabilityBox .service-info p { font-size: 0.8rem; } #bookingAvailabilityBox .service-meta { font-size: 0.75rem; gap: 8px; } #bookingAvailabilityBox .service-toggle-btn { width: 32px; height: 32px; font-size: 0.8rem; } #bookingAvailabilityBox .cart-content { padding: 10px 16px; gap: 12px; } } @media (max-width: 576px) { #bookingAvailabilityBox .service-card { padding: 2px; } #bookingAvailabilityBox .service-image { width: 60px; } #bookingAvailabilityBox .service-info h6 { font-size: 0.8rem; } #bookingAvailabilityBox .service-info p { font-size: 0.7rem; } #bookingAvailabilityBox .service-meta { font-size: 0.7rem; } #bookingAvailabilityBox .service-card .row { margin: 0; } #bookingAvailabilityBox .service-card .col-auto { padding-right: 12px; } #bookingAvailabilityBox .service-card .col { padding-left: 0; } #bookingAvailabilityBox .service-meta { flex-wrap: wrap; gap: 6px; } /* #bookingAvailabilityBox .cart-content { padding: 8px 12px; } */ #bookingAvailabilityBox .btn-primary { font-size: 0.8rem; padding: 6px 12px; } } /* @media (max-width: 360px) { #bookingAvailabilityBox .floating-cart { border-radius: 18px; bottom: 10px; } } */ #bookingAvailabilityBox .status-grid { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; } #bookingAvailabilityBox .status-item { flex: 1; text-align: center; padding: 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #FF6B00; } #bookingAvailabilityBox .status-label { font-size: 12px; color: #64748b; margin-bottom: 4px; } #bookingAvailabilityBox .status-value { font-size: 18px; font-weight: bold; color: #1e293b; } #bookingAvailabilityBox .wait-time-badge { color: #000000; padding: 8px 16px; border-radius: 20px; text-align: center; font-weight: 100; border: 2px solid #0056B3; margin-bottom: 20px; } #bookingAvailabilityBox .info-pill { margin: 18px 0; background: rgba(11, 140, 121, 0.06); border: 1px solid rgba(11, 140, 121, 0.12); border-radius: 999px; padding: 10px 16px; text-align: center; color: var(--accent); font-weight: 700; display: flex; align-items: center; justify-content: center; } #bookingAvailabilityBox .info-pill .fa { margin-right: 8px; font-size: 16px; } #bookingAvailabilityBox .shop-box { background: #f7fbfb; border-radius: 10px; padding: 12px 14px; border: 1px solid rgba(15, 157, 136, 0.03); margin-bottom: 18px; } #bookingAvailabilityBox .shop-title { color: var(--accent); font-weight: 700; } #bookingAvailabilityBox .shop-hours { color: var(--muted); font-size: 13px; margin-top: 4px; } /* Booking Card Styles in Bottom Modal */ .bottomModal .status-grid, #bottomModal .status-grid { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .bottomModal .status-item, #bottomModal .status-item { flex: 1; text-align: center; padding: 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #FF6B00; display: flex; flex-direction: column; align-items: center; justify-content: center; } .bottomModal .status-item .icon, #bottomModal .status-item .icon { font-size: 24px; color: #FF6B00; margin-bottom: 8px; } .bottomModal .status-label, #bottomModal .status-label { font-size: 12px; color: #64748b; margin-bottom: 4px; font-weight: 500; } .bottomModal .status-value, #bottomModal .status-value { font-size: 18px; font-weight: bold; color: #1e293b; margin-top: 4px; } .bottomModal .info-pill, #bottomModal .info-pill { margin: 18px 0; background: rgba(11, 140, 121, 0.06); border: 1px solid rgba(11, 140, 121, 0.12); border-radius: 999px; padding: 10px 16px; text-align: center; color: var(--accent); font-weight: 700; display: flex; align-items: center; justify-content: center; } .bottomModal .info-pill .fa, #bottomModal .info-pill .fa { margin-right: 8px; font-size: 16px; } .bottomModal .shop-box, #bottomModal .shop-box { background: #f7fbfb; border-radius: 10px; padding: 12px 14px; border: 1px solid rgba(15, 157, 136, 0.03); margin-bottom: 18px; } .bottomModal .shop-title, #bottomModal .shop-title { color: var(--accent); font-weight: 700; font-size: 14px; } .bottomModal .shop-hours, #bottomModal .shop-hours { color: var(--muted); font-size: 13px; margin-top: 4px; } .bottomModal .booking-card, #bottomModal .booking-card { width: 100%; } .bottomModal .divider, #bottomModal .divider { height: 1px; background: #e5e7eb; margin: 20px 0; } /* Responsive styles for booking card in modal */ @media (max-width: 576px) { .bottomModal .status-grid, #bottomModal .status-grid { gap: 12px; margin-bottom: 16px; } .bottomModal .status-item, #bottomModal .status-item { padding: 10px 8px; } .bottomModal .status-item .icon, #bottomModal .status-item .icon { font-size: 20px; margin-bottom: 6px; } .bottomModal .status-label, #bottomModal .status-label { font-size: 11px; } .bottomModal .status-value, #bottomModal .status-value { font-size: 16px; } .bottomModal .info-pill, #bottomModal .info-pill { padding: 8px 12px; font-size: 13px; margin: 14px 0; } .bottomModal .shop-box, #bottomModal .shop-box { padding: 10px 12px; } } /* Prevent autofill styling on search input */ #bookingAvailabilityBox #shopSearch:-webkit-autofill, #bookingAvailabilityBox #shopSearch:-webkit-autofill:hover, #bookingAvailabilityBox #shopSearch:-webkit-autofill:focus, #bookingAvailabilityBox #shopSearch:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; -webkit-text-fill-color: #2c3e50 !important; box-shadow: 0 0 0 30px white inset !important; transition: background-color 5000s ease-in-out 0s; background-color: white !important; background-clip: content-box !important; } #bookingAvailabilityBox #shopSearch.no-autofill { background-color: white !important; } /* Detect autofill animation */ @keyframes onAutoFillStart { from { opacity: 0; } to { opacity: 0; } } #bookingAvailabilityBox #shopSearch:-webkit-autofill { animation-name: onAutoFillStart; animation-duration: 0.001s; } /* Additional autofill prevention */ #bookingAvailabilityBox #shopSearch[readonly] { cursor: text; } /* Optimized Booking For Section */ .booking-for-section { margin-top: 20px; } .booking-for-section .booking-tabs { border-bottom: 2px solid #e9ecef; display: flex; gap: 8px; } .booking-for-section .booking-tabs .nav-item { flex: 1; margin-right: 0; } .booking-for-section .booking-tabs .nav-link { font-weight: 600; border: none !important; color: #6c757d; padding: 12px 16px; text-align: center; border-radius: 8px 8px 0 0; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 6px; background: transparent; } .booking-for-section .booking-tabs .nav-link i { font-size: 16px; } .booking-for-section .booking-tabs .nav-link span { font-size: 14px; } .booking-for-section .booking-tabs .nav-link:hover { background-color: #f8f9fa; color: #495057; } .booking-for-section .booking-tabs .nav-link.active { background-color: #007bff; color: #fff !important; border: none !important; border-radius: 8px 8px 0 0; position: relative; } .booking-for-section .booking-tabs .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: #007bff; } /* Optimized Visitor Card */ .booking-card .visitor-card, .bottomModal .visitor-card, #bottomModal .visitor-card { border: 1px solid #e9ecef; border-radius: 12px; padding: 20px; margin-top: 15px; background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; } .booking-card .optimized-card, .bottomModal .optimized-card, #bottomModal .optimized-card { border: 1px solid #e9ecef; border-radius: 12px; padding: 20px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .visitor-info-item { padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .visitor-info-item:last-child { border-bottom: none; padding-bottom: 0; } .visitor-info-item:first-child { padding-top: 0; } .info-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6c757d; margin-bottom: 6px; font-weight: 500; } .info-label i { font-size: 14px; width: 18px; text-align: center; } .info-value { font-size: 16px; font-weight: 600; color: #212529; margin-left: 26px; } /* Members Header */ .members-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #e9ecef; margin-bottom: 16px; } .members-header h6 { font-weight: 600; color: #495057; display: flex; align-items: center; } .members-header .btn { font-size: 13px; padding: 6px 12px; border-radius: 6px; } /* Custom Select */ .custom-select { border-radius: 8px; border: 1px solid #ced4da; /* padding: 10px 12px; */ font-size: 14px; transition: all 0.3s ease; } .custom-select:focus { border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15); outline: none; } /* Add Member Form */ .add-member-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e9ecef; } .add-member-form .form-label { font-weight: 600; color: #495057; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; } .add-member-form .form-label i { color: #007bff; font-size: 13px; width: 18px; } .add-member-form .form-control { border-radius: 8px; border: 1px solid #ced4da; padding: 10px 12px; font-size: 14px; transition: all 0.3s ease; } .add-member-form .form-control:focus { border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15); outline: none; } /* Relation Options */ .relation-options { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .relation-option { flex: 1; min-width: 100px; margin: 0 !important; } .relation-option .form-check-input { margin-top: 0.4rem; } .relation-option .form-check-label { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 2px solid #e9ecef; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; font-size: 13px; width: 100%; justify-content: center; } .relation-option .form-check-input:checked~.form-check-label { border-color: #007bff; background-color: #e7f3ff; color: #007bff; } .relation-option .form-check-label:hover { border-color: #007bff; background-color: #f8f9fa; } .relation-option .form-check-label i { font-size: 14px; } /* Form Actions */ .form-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e9ecef; } .form-actions .btn { flex: 1; padding: 10px 16px; font-weight: 600; border-radius: 8px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; } .booking-card .tab-pane p { margin-bottom: 8px; } .booking-card .tab-pane label { font-weight: 600; } /* Responsive Design */ @media (max-width: 576px) { .booking-for-section .booking-tabs .nav-link span { display: none; } .booking-for-section .booking-tabs .nav-link { padding: 10px 12px; } .booking-for-section .booking-tabs .nav-link i { font-size: 18px; } .visitor-info-item { padding: 10px 0; } .info-value { font-size: 15px; margin-left: 24px; } .members-header { flex-direction: column; align-items: flex-start; gap: 12px; } .members-header .btn { width: 100%; } .relation-options { flex-direction: column; gap: 8px; } .relation-option { width: 100%; } .form-actions { flex-direction: column; } .form-actions .btn { width: 100%; } } /* Appointment Serving Dashboard */ .booking-dashboard .token-number { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 220px; /* padding: 0.3rem; */ font-family: 'Poppins', sans-serif; border-radius: 1rem; background: linear-gradient(135deg, #e6f7ff, #d6edf1); border: 1px solid #007bff; box-shadow: 0 6px 14px rgba(0, 123, 255, 0.15); text-align: center; } .booking-dashboard .token-value { font-size: 3rem; font-weight: 700; color: #007bff; } .booking-dashboard .token-status { font-size: 1rem; font-weight: 500; color: #6c757d; } .booking-dashboard .btn-custom { border-radius: 1rem; padding: 0.6rem 1.4rem; font-weight: 500; transition: all .2s ease; } .booking-dashboard .btn-custom:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15); } .booking-dashboard .queue-card { border-radius: 1rem; border: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); transition: transform .2s ease; } .booking-dashboard .queue-card:hover { transform: scale(1.02); } .booking-dashboard .stats-card { background: #fff; border-radius: 1rem; padding: 1rem; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); } .booking-dashboard .gap-2 { gap: 0.5rem; } /* Queue containers - ensure horizontal layout */ .booking-dashboard .upcoming-queue, .booking-dashboard .skip-queue { display: block !important; width: 100%; overflow: hidden; padding: 0 10px; } .booking-dashboard .upcoming-queue .slick-slide, .booking-dashboard .skip-queue .slick-slide { margin: 0 8px; display: block !important; float: none !important; padding: 0; } .booking-dashboard .upcoming-queue .slick-list, .booking-dashboard .skip-queue .slick-list { display: block !important; overflow: visible; /* Allow partial card to show */ margin: 0 -8px; } .booking-dashboard .upcoming-queue .slick-track, .booking-dashboard .skip-queue .slick-track { display: flex !important; align-items: stretch; } .booking-dashboard .upcoming-queue .slick-slide>div, .booking-dashboard .skip-queue .slick-slide>div { height: 100%; width: 100%; } /* Ensure queue cards maintain consistent width and show partial next card */ .booking-dashboard .queue-card { min-height: 120px; height: auto; width: 100%; box-sizing: border-box; } /* Ensure slick calculates width correctly for 1.5 cards */ .booking-dashboard .upcoming-queue.slick-initialized .slick-slide, .booking-dashboard .skip-queue.slick-initialized .slick-slide { width: calc(66.666% - 16px) !important; /* 1.5 cards = 100% / 1.5 â‰ˆ 66.666% */ } @media (max-width: 576px) { .booking-dashboard .upcoming-queue.slick-initialized .slick-slide, .booking-dashboard .skip-queue.slick-initialized .slick-slide { width: calc(83.333% - 16px) !important; /* 1.2 cards = 100% / 1.2 â‰ˆ 83.333% */ } } .booking-dashboard .action-btn { flex: 1; padding: 8px; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 14px; transition: all 0.2s ease; max-width: 300px; } @media (max-width: 767px) { .booking-dashboard .token-number { font-size: 2.2rem; } .booking-dashboard .btn-custom { width: 100%; margin-bottom: 0.5rem; padding: 0.6rem 0.5rem; font-size: 13px } } .progress-steps { display: flex; justify-content: space-between; position: relative; margin: 40px auto; max-width: 500px; } /* Background line only between steps */ .progress-line { position: absolute; top: 15px; height: 4px; background: #e9ecef; z-index: 1; } .progress-bar { position: absolute; top: 15px; height: 4px; background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end)); z-index: 2; transition: width 1.5s ease; } .step-container { display: flex; flex-direction: column; align-items: center; flex: 1; text-align: center; z-index: 3; position: relative; } .step { width: 30px; height: 30px; border-radius: 50%; background: #e9ecef; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #adb5bd; transition: all 0.3s ease; margin-bottom: 6px; } .step-text { font-size: 12px; line-height: 1.3; } .step.active { background: white; color: var(--google-green); box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.2); } .step.completed { background: var(--secondary-color); color: white; box-shadow: 0 0 0 4px rgba(247, 37, 133, 0.2); } #no-booking-container .icon { font-size: 80px; color: #666; margin-bottom: 10px; } #no-booking-container .button { display: block; width: 80%; max-width: 300px; margin: 10px auto; padding: 15px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; } #no-booking-container .button.primary { background-color: #006d77; color: white; border: none; } #no-booking-container .button.secondary { background-color: white; color: #333; border: 1px solid #ccc; } #no-booking-container svg { width: 240px; height: 240px; stroke: #555; stroke-width: 2; fill: none; } /* add extra service modal */ #addExtraServiceCard { --primary: #4361ee; --secondary: #3a0ca3; --success: #4cc9f0; --danger: #f72585; --light: #f8f9fa; --dark: #212529; --radius: 12px; --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --transition: all 0.3s ease; } #addExtraServiceCard h5, #addExtraServiceCard h6 { font-weight: 600; } #addExtraServiceCard .search-bar input { border-radius: 25px; padding-left: 40px; height: 45px; } #addExtraServiceCard .search-bar .fa-search { position: absolute; left: 15px; top: 13px; color: #999; } #addExtraServiceCard .category-box { border-radius: 12px; padding: 16px 8px; text-align: center; color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 90px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } #addExtraServiceCard .category-box i { font-size: 1.4rem; margin-bottom: 8px; } #addExtraServiceCard .category-box:hover, #addExtraServiceCard .category-box:active { opacity: 0.9; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } #addExtraServiceCard .category-row { padding: 0 10px; margin-bottom: 20px; } #addExtraServiceCard .category-col { padding: 8px; } @media (max-width: 768px) { #addExtraServiceCard .category-box { padding: 18px 10px; font-size: 0.9rem; } #addExtraServiceCard .category-box i { font-size: 1.6rem; margin-bottom: 10px; } #addExtraServiceCard .category-col { margin-bottom: 8px; } } @media (max-width: 576px) { #addExtraServiceCard .category-box { min-height: 85px; padding: 16px 6px; font-size: 0.82rem; } #addExtraServiceCard .category-box i { font-size: 1.5rem; } } #addExtraServiceCard .service-card { border-radius: var(--radius); box-shadow: var(--shadow); transition: var(--transition); border: none; overflow: hidden; margin-bottom: 15px; background: white; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.5s forwards; } #addExtraServiceCard .service-card:nth-child(2) { animation-delay: 0.1s; } #addExtraServiceCard .service-card:nth-child(3) { animation-delay: 0.2s; } #addExtraServiceCard .service-card:nth-child(4) { animation-delay: 0.3s; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } #addExtraServiceCard .service-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } #addExtraServiceCard .service-img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; } #addExtraServiceCard .add-btn { transition: var(--transition); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; } #addExtraServiceCard .add-btn.added { background-color: var(--success); color: white; transform: rotate(45deg); } #addExtraServiceCard .cart-btn { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1050; background: var(--primary); color: #fff; padding: 14px 28px; border-radius: 30px; font-weight: 600; box-shadow: 0 6px 15px rgba(67, 97, 238, 0.3); border: none; transition: var(--transition); display: flex; align-items: center; justify-content: center; min-width: 180px; } #addExtraServiceCard .cart-btn:active { transform: translateX(-50%) scale(0.96); } #addExtraServiceCard .cart-btn.pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(67, 97, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(67, 97, 238, 0); } } #addExtraServiceCard .cart-btn i { margin-right: 8px; } #addExtraServiceCard .cart-drawer { position: fixed; left: 0; right: 0; bottom: -100%; background: #fff; border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); transition: bottom 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); z-index: 1100; max-height: 85vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); } #addExtraServiceCard .cart-drawer.active { bottom: 0; } #addExtraServiceCard .cart-header { padding: 18px 20px; border-bottom: 1px solid #eee; font-weight: 600; font-size: 1.1rem; position: sticky; top: 0; background: white; border-top-left-radius: 20px; border-top-right-radius: 20px; z-index: 10; } #addExtraServiceCard .cart-item { padding: 15px 20px; border-bottom: 1px solid #f1f1f1; display: flex; justify-content: space-between; align-items: center; animation: slideInRight 0.3s forwards; } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } #addExtraServiceCard .cart-item-remove { color: #ff4757; background: none; border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); } #addExtraServiceCard .cart-item-remove:active { background-color: rgba(255, 71, 87, 0.1); } #addExtraServiceCard .cart-footer { padding: 20px; border-top: 1px solid #eee; background: #fafafa; position: sticky; bottom: 0; } #addExtraServiceCard .coupon-box input { border-radius: 20px 0px 0px 20px; border: 1px solid #ddd; } #addExtraServiceCard .checkout-btn { width: 100%; border-radius: 30px; font-size: 16px; font-weight: 600; padding: 12px; background: var(--primary); border: none; transition: var(--transition); margin-top: 15px; } #addExtraServiceCard .checkout-btn:active { transform: scale(0.98); } #addExtraServiceCard .cart-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: var(--transition); } #addExtraServiceCard .cart-overlay.active { opacity: 1; visibility: visible; } #addExtraServiceCard .empty-cart { text-align: center; padding: 40px 20px; color: #888; } #addExtraServiceCard .empty-cart i { font-size: 3rem; margin-bottom: 15px; color: #ddd; } #addExtraServiceCard .search-container { position: relative; margin: 20px 0; } #addExtraServiceCard .search-container .form-control { border-radius: 30px; padding-left: 20px; height: 50px; box-shadow: var(--shadow); border: 1px solid #eee; } #addExtraServiceCard .search-container .btn { position: absolute; right: 5px; top: 5px; border-radius: 30px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; z-index: 5; } #addExtraServiceCard .section-header { display: flex; align-items: center; margin: 25px 0 15px; } #addExtraServiceCard .section-header i { margin-right: 10px; font-size: 1.2rem; } #addExtraServiceCard .original-price { text-decoration: line-through; color: #888; font-size: 0.85rem; } #addExtraServiceCard .discount-price { color: var(--success); font-weight: 600; } #addExtraServiceCard .swipe-indicator { width: 40px; height: 5px; background: #ddd; border-radius: 3px; margin: 10px auto; } @media (max-width: 576px) { #addExtraServiceCard .service-card { margin-bottom: 12px; } #addExtraServiceCard .cart-drawer { max-height: 90vh; } #addExtraServiceCard .cart-btn { padding: 12px 24px; font-size: 0.9rem; min-width: 160px; } } #addExtraServiceCard #trendingServiceList { position: relative; } .booking-detail-content { font-size: 14px; background: #fff; border-radius: 12px; overflow: hidden; } .booking-detail-content .detail-section { margin-bottom: 20px; padding: 16px; border-radius: 8px; background: #f9f9f9; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .booking-detail-content .detail-section h4 { margin-bottom: 12px; color: #333; font-size: 15px; font-weight: 600; /* border-left: 3px solid #007bff; */ padding-left: 8px; } .booking-detail-content .detail-grid { display: grid; gap: 10px; } .booking-detail-content .detail-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed #e0e0e0; } .booking-detail-content .detail-item:last-child { border-bottom: none; } .booking-detail-content .detail-item label { font-weight: 500; color: #555; min-width: 120px; } .booking-detail-content .detail-item span { color: #222; font-weight: 500; text-align: right; } .booking-detail-content .booking-status { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: capitalize; } .booking-detail-content .status-completed { background: #d4edda; color: #155724; } .booking-detail-content .status-cancelled { background: #f8d7da; color: #721c24; } .booking-detail-content .status-pending { background: #fff3cd; color: #856404; } .booking-detail-content .booking-amount { color: #007bff; font-weight: 700; } .booking-detail-content .modal-actions { display: flex; gap: 12px; padding: 16px; background: #fff; border-top: 1px solid #eee; position: sticky; bottom: 0; left: 0; right: 0; z-index: 10; } .booking-detail-content .modal-actions .btn { flex: 1; font-weight: 600; border-radius: 8px; padding: 10px 14px; } .booking-detail-content .btn--primary { background: #007bff; color: #fff; border: none; } .booking-detail-content .btn--secondary { background: #f1f1f1; color: #333; border: none; } .booking-detail-content .btn--primary:hover { background: #0056b3; } .booking-detail-content .btn--secondary:hover { background: #e0e0e0; } .booking-detail-content .service-card { background: #fff; border: 1px solid #eee; border-radius: 8px; margin-bottom: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .booking-detail-content .service-header { display: flex; align-items: center; margin-bottom: 8px; } .booking-detail-content .service-index { background: #007bff; color: #fff; font-size: 12px; font-weight: 600; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 8px; } .booking-detail-content .service-title { font-size: 14px; font-weight: 600; color: #333; margin: 0; } .booking-detail-content .service-body .detail-item { border: none; padding: 4px 0; } #AllBookingsModal .top-bar { position: sticky; top: 0; z-index: 100; background: #fff; padding: 10px 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px; } #AllBookingsModal .search-box { flex: 1; display: flex; align-items: center; background: #f1f3f5; border-radius: 25px; padding: 6px 12px; } #AllBookingsModal .search-box input { border: none; background: transparent; width: 100%; outline: none; font-size: 14px; } #AllBookingsModal .filter-btn { border-radius: 50%; padding: 8px 10px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } #AllBookingsModal .booking-list { display: flex; flex-direction: column; padding: 16px; gap: 16px; background-color: #f5f7fa; color: #333; } #AllBookingsModal .booking-card { background-color: white; border-radius: 16px; padding: 18px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); transition: transform 0.2s, box-shadow 0.2s; } #AllBookingsModal .booking-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } #AllBookingsModal .booking-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } #AllBookingsModal .booking-id { font-weight: 600; font-size: 16px; color: #1a1a1a; } #AllBookingsModal .token { background-color: #e8f4fd; color: #0077cc; padding: 4px 10px; border-radius: 20px; font-size: 14px; font-weight: 500; } #AllBookingsModal .customer-name { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: #1a1a1a; } #AllBookingsModal .service-info { display: flex; align-items: center; margin-bottom: 8px; color: #666; } #AllBookingsModal .service-icon { margin-right: 8px; color: #888; width: 20px; text-align: center; } #AllBookingsModal .datetime { display: flex; align-items: center; margin-bottom: 16px; color: #666; } #AllBookingsModal .datetime-icon { margin-right: 8px; color: #888; width: 20px; text-align: center; } #AllBookingsModal .booking-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #f0f0f0; } #AllBookingsModal .action-button { background: none; border: none; color: #0077cc; font-weight: 500; font-size: 14px; cursor: pointer; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } #AllBookingsModal { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; background: #fff; border-radius: 16px; padding: 0; max-width: 100vw; } /* Filter Button Active State */ #AllBookingsModal .filter-btn.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } /* Filter Panel */ #AllBookingsModal .filter-panel { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 16px; margin: 12px 15px; padding: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); backdrop-filter: blur(10px); max-height: 0; overflow: hidden; opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #AllBookingsModal .filter-panel.show { max-height: 600px; opacity: 1; } #AllBookingsModal .filter-section { margin-bottom: 20px; } #AllBookingsModal .filter-section:last-of-type { margin-bottom: 0; } #AllBookingsModal .filter-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: #2d3748; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } #AllBookingsModal .filter-label i { color: #667eea; font-size: 16px; } #AllBookingsModal .filter-options { display: flex; flex-wrap: wrap; gap: 8px; } /* Filter Chips */ #AllBookingsModal .filter-chip { padding: 8px 16px; border-radius: 20px; border: 2px solid #e2e8f0; background: white; color: #4a5568; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } #AllBookingsModal .filter-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-color: #cbd5e0; } #AllBookingsModal .filter-chip.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-color: #667eea; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } #AllBookingsModal .filter-chip i { font-size: 12px; } /* Status-specific colors */ #AllBookingsModal .filter-chip.status-pending.active { background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%); border-color: #ed8936; } #AllBookingsModal .filter-chip.status-confirmed.active { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); border-color: #38a169; } #AllBookingsModal .filter-chip.status-running.active { background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); border-color: #3182ce; } #AllBookingsModal .filter-chip.status-completed.active { background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%); border-color: #805ad5; } #AllBookingsModal .filter-chip.status-canceled.active { background: linear-gradient(135deg, #fc8181 0%, #f56565 100%); border-color: #f56565; } #AllBookingsModal .filter-chip.status-missed.active { background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); border-color: #dd6b20; } /* Filter Actions */ #AllBookingsModal .filter-actions { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.3); } #AllBookingsModal .btn-close { padding: 10px 20px; border-radius: 20px; border: none; background: linear-gradient(135deg, #fc8181 0%, #f56565 100%); color: white; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3); } #AllBookingsModal .btn-clear-filters { padding: 10px 20px; border-radius: 20px; border: none; background: linear-gradient(135deg, #fc8181 0%, #f56565 100%); color: white; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3); } #AllBookingsModal .btn-clear-filters:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(245, 101, 101, 0.4); } #AllBookingsModal .btn-clear-filters i { font-size: 12px; } /* Active Filters Display */ #AllBookingsModal .active-filters { display: flex; align-items: center; gap: 8px; padding: 12px 15px; background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); border-radius: 12px; margin: 12px 15px; flex-wrap: wrap; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } #AllBookingsModal .active-filter-label { font-size: 12px; font-weight: 600; color: #4c51bf; text-transform: uppercase; letter-spacing: 0.5px; } #AllBookingsModal .active-filter-tag { padding: 4px 12px; border-radius: 12px; background: white; color: #4c51bf; font-size: 12px; font-weight: 500; box-shadow: 0 2px 4px rgba(76, 81, 191, 0.1); } @media (max-width: 600px) { #AllBookingsModal { padding: 0; } #AllBookingsModal .filter-panel { margin: 10px; padding: 16px; } #AllBookingsModal .filter-chip { font-size: 12px; padding: 6px 12px; } #AllBookingsModal .active-filters { margin: 10px; padding: 10px; } } /* =========================================================== ðŸ‘¥ STAFF MANAGEMENT SECTION Scoped to #manageStaffCard to avoid conflicts =========================================================== */ /* Staff Management Animations */ @keyframes staffFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes staffFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Staff Section Styling - Scoped to #manageStaffCard */ #manageStaffCard .staff-section-container { background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); overflow: hidden; } #manageStaffCard .staff-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border-radius: 12px; margin-bottom: 0.75rem; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); border: 1px solid #f0f0f0; } #manageStaffCard .staff-card:hover { background: #f8f9ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15); border-color: #e0e7ff; } #manageStaffCard .staff-card:focus-within { outline: 2px solid #007bff; outline-offset: 2px; border-radius: 12px; } #manageStaffCard .staff-badge { font-size: 0.75rem; padding: 0.35rem 0.75rem; border-radius: 20px; font-weight: 600; display: inline-flex; align-items: center; letter-spacing: 0.3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } #manageStaffCard .staff-badge.badge-success { background: linear-gradient(135deg, #28a745, #20c997); border: none; } #manageStaffCard .staff-badge.badge-warning { background: linear-gradient(135deg, #ffc107, #ff9800); border: none; color: #fff; } #manageStaffCard .staff-badge.badge-secondary { background: linear-gradient(135deg, #6c757d, #495057); border: none; } /* Header + Search */ #manageStaffCard .staff-header { position: sticky; top: 0; z-index: 5; background: #fff; padding: 1.25rem 0; border-bottom: 2px solid #f0f0f0; backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.98); } #manageStaffCard .staff-search-input { border-radius: 25px; padding: 0.75rem 1rem 0.75rem 3rem; border: 2px solid #e9ecef; transition: all 0.3s ease; font-size: 0.95rem; background: #f8f9fa; } #manageStaffCard .staff-search-input:focus { border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15); outline: none; background: #fff; } #manageStaffCard .staff-search-wrap { position: relative; width: 100%; } #manageStaffCard .staff-search-icon { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); color: #6c757d; pointer-events: none; z-index: 2; font-size: 0.9rem; transition: color 0.3s ease; } #manageStaffCard .staff-search-input:focus~.staff-search-icon { color: #007bff; } /* Floating Add Button (Mobile) */ #manageStaffCard .floating-add-btn { position: fixed; bottom: 80px; right: 20px; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 24px; z-index: 9999; box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(135deg, #007bff, #00b4ff); border: none; } #manageStaffCard .floating-add-btn:hover, #manageStaffCard .floating-add-btn:focus { transform: scale(1.15) translateY(-2px); box-shadow: 0 8px 24px rgba(0, 123, 255, 0.5); } #manageStaffCard .floating-add-btn:active { transform: scale(1.05); } /* Staff Card Actions */ #manageStaffCard .staff-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } #manageStaffCard .staff-action-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid; font-size: 0.9rem; } #manageStaffCard .staff-action-btn.btn-outline-primary { border-color: #007bff; color: #007bff; background: rgba(0, 123, 255, 0.05); } #manageStaffCard .staff-action-btn.btn-outline-primary:hover { background: #007bff; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); } #manageStaffCard .staff-action-btn.btn-outline-danger { border-color: #dc3545; color: #dc3545; background: rgba(220, 53, 69, 0.05); } #manageStaffCard .staff-action-btn.btn-outline-danger:hover { background: #dc3545; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3); } #manageStaffCard .staff-action-btn:focus { outline: 2px solid #007bff; outline-offset: 2px; } #manageStaffCard .staff-action-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Empty State */ #manageStaffCard .staff-empty-state { animation: staffFadeInUp 0.5s ease-out; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 4rem 1.5rem; } #manageStaffCard .staff-empty-state-icon { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, #e3f2fd, #bbdefb); box-shadow: 0 8px 24px rgba(0, 123, 255, 0.15); display: flex; justify-content: center; align-items: center; margin-bottom: 2rem; transition: transform 0.3s ease; } #manageStaffCard .staff-empty-state-icon:hover { transform: scale(1.05); } #manageStaffCard .staff-empty-state-icon i { font-size: 56px; color: #007bff; } #manageStaffCard .staff-empty-state h5 { font-size: 1.5rem; font-weight: 700; color: #1a1a1a; margin-bottom: 0.75rem; } #manageStaffCard .staff-empty-search { animation: staffFadeIn 0.3s ease-out; padding: 3rem 2rem; background: #f8f9fa; border-radius: 12px; margin: 1rem 0; } #manageStaffCard .staff-empty-search i { font-size: 3rem; color: #6c757d; margin-bottom: 1rem; } #manageStaffCard .staff-empty-state p { max-width: 400px; font-size: 1rem; line-height: 1.6; color: #6c757d; } #manageStaffCard .staff-empty-state-btn { font-weight: 600; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); padding: 0.75rem 2rem; font-size: 1rem; transition: all 0.3s ease; background: linear-gradient(135deg, #007bff, #00b4ff); border: none; } #manageStaffCard .staff-empty-state-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4); } /* Staff Avatar */ #manageStaffCard .staff-avatar-wrapper { position: relative; flex-shrink: 0; } #manageStaffCard .staff-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid #e9ecef; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } #manageStaffCard .staff-card:hover .staff-avatar { border-color: #007bff; transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); } #manageStaffCard .staff-avatar-placeholder { font-size: 3.5rem; color: #007bff; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #e3f2fd, #bbdefb); transition: all 0.3s ease; } #manageStaffCard .staff-card:hover .staff-avatar-placeholder { transform: scale(1.05); background: linear-gradient(135deg, #bbdefb, #90caf9); } /* Loading State */ #manageStaffCard .staff-loading { display: flex; justify-content: center; align-items: center; padding: 3rem; } #manageStaffCard .staff-loading::after { content: ''; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; } /* List Group Improvements */ #manageStaffCard .list-group { background: transparent; border: none; } #manageStaffCard .list-group-item { border: none; padding: 0; margin-bottom: 0.75rem; } /* Add Staff Button Desktop */ #manageStaffCard #addStaffDesktopBtn { background: linear-gradient(135deg, #007bff, #00b4ff); border: none; padding: 0.625rem 1.5rem; font-weight: 600; border-radius: 25px; transition: all 0.3s ease; white-space: nowrap; } #manageStaffCard #addStaffDesktopBtn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4); } /* Responsive */ @media (max-width: 767.98px) { #manageStaffCard .staff-header { padding: 1rem 0; } #manageStaffCard .staff-card { padding: 1rem !important; margin-bottom: 1rem; } #manageStaffCard .staff-avatar, #manageStaffCard .staff-avatar-placeholder { width: 50px; height: 50px; font-size: 2.75rem; } #manageStaffCard .staff-action-btn { width: 36px; height: 36px; font-size: 0.875rem; } #manageStaffCard .staff-empty-state { padding: 3rem 1rem; } #manageStaffCard .staff-empty-state-icon { width: 100px; height: 100px; } #manageStaffCard .staff-empty-state-icon i { font-size: 48px; } } /* Accessibility - Global utility class (already exists in Bootstrap, but keeping for compatibility) */ #manageStaffCard .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* =========================================================== ðŸ‘¤ ADD STAFF MODAL SECTION Scoped to #staffStepper to avoid conflicts =========================================================== */ /* Base Container */ #staffStepper { max-width: 520px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 2rem 1.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } /* Form Card */ #staffStepper .staff-form-card { background: #fff; border-radius: 12px; padding: 1.5rem; border: 1px solid #f0f0f0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } /* Form Labels */ #staffStepper .form-label { font-size: 0.9rem; font-weight: 600; color: #2d3748; margin-bottom: 0.5rem; display: block; } #staffStepper .form-label i { font-size: 0.85rem; } /* Form Controls */ #staffStepper .form-control { border-radius: 12px; /* border: 2px solid #e9ecef; padding: 0.875rem 1.125rem; */ font-size: 0.95rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #fff; color: #2d3748; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } #staffStepper .form-control:hover { border-color: #ced4da; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } #staffStepper .form-control:focus { border-color: #007bff; box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.15), 0 2px 8px rgba(0, 123, 255, 0.2); outline: none; background: #fff; } #staffStepper .form-control::placeholder { color: #adb5bd; font-weight: 400; } #staffStepper .form-control-lg { padding: 1rem 1.25rem; font-size: 1rem; border-radius: 12px; } /* Select Dropdown Styling */ #staffStepper select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 10px 6px !important; padding-right: 2.5rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; } #staffStepper select.form-control:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23007bff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Form Text */ #staffStepper .form-text { font-size: 0.8rem; margin-top: 0.375rem; display: flex; align-items: center; } /* Form Groups */ #staffStepper .form-group { margin-bottom: 1.5rem; } #staffStepper .form-group:last-child { margin-bottom: 0; } /* Buttons */ #staffStepper .btn { border-radius: 10px; font-weight: 600; padding: 0.75rem 1.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; } #staffStepper .btn-primary { background: linear-gradient(135deg, #007bff, #00b4ff); border: none; color: #fff; } #staffStepper .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4); } #staffStepper .btn-success { background: linear-gradient(135deg, #28a745, #20c997); border: none; color: #fff; } #staffStepper .btn-success:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4); } #staffStepper .btn-outline-secondary { background: #fff; border-color: #dee2e6; color: #6c757d; } #staffStepper .btn-outline-secondary:hover { background: #f8f9fa; border-color: #adb5bd; color: #495057; transform: translateY(-1px); } /* Stepper */ #staffStepper .trymzo-stepper { display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 2.5rem; padding: 0; } /* Progress line - only between step 1 and step 3 */ #staffStepper .trymzo-stepper::before { content: ''; position: absolute; top: 20px; left: 20px; right: 20px; height: 3px; background: #e0e0e0; z-index: 1; border-radius: 2px; } #staffStepper .step-item { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; flex: 1; min-width: 0; } #staffStepper .step-circle { width: 40px; height: 40px; border-radius: 50%; background: #e0e0e0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.9rem; font-weight: 700; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: relative; z-index: 3; } #staffStepper .step-item.active .step-circle { background: linear-gradient(135deg, #007bff, #00b4ff); transform: scale(1.1); box-shadow: 0 4px 16px rgba(0, 123, 255, 0.4); } #staffStepper .step-item.completed .step-circle { background: linear-gradient(135deg, #28a745, #20c997); } #staffStepper .step-label { margin-top: 0.75rem; font-size: 0.85rem; font-weight: 500; color: #6c757d; transition: color 0.3s ease; } #staffStepper .step-item.active .step-label { color: #007bff; font-weight: 600; } #staffStepper .step-item.completed .step-label { color: #28a745; } /* Step Content Animation */ #staffStepper .step-content { animation: staffFadeSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes staffFadeSlide { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* Upload Area */ #staffStepper .upload-area { border: 3px dashed #d1d8e0; border-radius: 12px; padding: 2.5rem 1.5rem; text-align: center; background: linear-gradient(135deg, #f8fafc, #f1f5f9); cursor: pointer; transition: all 0.3s ease; margin-bottom: 1.5rem; } #staffStepper .upload-area:hover { border-color: #007bff; background: linear-gradient(135deg, #f0f7ff, #e3f2fd); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15); } #staffStepper .upload-area.active { border-color: #007bff; background: linear-gradient(135deg, #f0f7ff, #e3f2fd); } #staffStepper .upload-icon-wrapper { margin-bottom: 1rem; } #staffStepper .upload-area i { font-size: 3.5rem; color: #b8c2cc; transition: color 0.3s ease; } #staffStepper .upload-area:hover i, #staffStepper .upload-area.active i { color: #fff; } #staffStepper .upload-area h6 { color: #2d3748; font-weight: 700; margin-bottom: 0.5rem; } #staffStepper .upload-area p { color: #6c757d; font-size: 0.85rem; } /* File Info */ #staffStepper .file-info { display: none; margin-top: 1rem; padding: 1rem; background: linear-gradient(135deg, #e8f4fd, #d1ecf1); border-radius: 10px; border-left: 4px solid #007bff; box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1); } #staffStepper .file-info.show { display: flex; align-items: center; justify-content: space-between; } #staffStepper .file-preview { width: 70px; height: 70px; border-radius: 10px; object-fit: cover; margin-right: 1rem; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } #staffStepper .file-info h6 { color: #2d3748; font-weight: 700; margin-bottom: 0.25rem; } #staffStepper .file-info small { color: #6c757d; font-size: 0.8rem; } #staffStepper .progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.5); margin-top: 0.5rem; } #staffStepper .staff-progress-bar { border-radius: 3px; } #staffStepper #removeFile, #staffStepper #deleteStaffPhoto { border-radius: 8px; padding: 0.5rem 0.75rem; transition: all 0.3s ease; } #staffStepper #removeFile:hover, #staffStepper #deleteStaffPhoto:hover { transform: scale(1.1); } /* Responsive */ @media (max-width: 576px) { #staffStepper { padding: 1.5rem 1rem; } #staffStepper .staff-form-card { padding: 1.25rem; } #staffStepper .step-circle { width: 36px; height: 36px; font-size: 0.85rem; } #staffStepper .step-label { font-size: 0.75rem; } #staffStepper .trymzo-stepper { padding: 0 0.5rem; } #staffStepper .upload-area { padding: 2rem 1rem; } #staffStepper .upload-area i { font-size: 2.5rem; } } /* =========================================================== âš™ï¸ SETTINGS PAGE STYLES =========================================================== */ #settingsContainer { font-family: 'Poppins', 'Segoe UI', Roboto, sans-serif; max-width: 100%; } #settingsContainer .settings-profile-card { background: linear-gradient(135deg, rgba(255, 107, 0, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%); border-radius: 16px; padding: 20px; margin-bottom: 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 107, 0, 0.1); transition: all 0.3s ease; } #settingsContainer .profile-avatar { position: relative; } #settingsContainer .profile-avatar img { width: 56px; height: 56px; border: 3px solid rgba(255, 107, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } #settingsContainer .profile-name { font-size: 18px; font-weight: 600; color: #2F3E46; letter-spacing: -0.3px; margin-bottom: 4px; } #settingsContainer .profile-meta { font-size: 13px; color: #8A9CA6; font-weight: 400; letter-spacing: 0.1px; } #settingsContainer .settings-section { margin-bottom: 32px; } #settingsContainer .settings-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: #8A9CA6; padding: 0 16px 12px 16px; margin-bottom: 0; } #settingsContainer .settings-list-item { background-color: #FFFFFF; border: none; border-bottom: 1px solid #F0F0F0; padding: 16px 20px; transition: all 0.2s ease; cursor: pointer; border-radius: 0; text-decoration: none; position: relative; } #settingsContainer .settings-list-item:focus, #settingsContainer .settings-list-item:focus-visible { outline: none; text-decoration: none; box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.3); } #settingsContainer .settings-list-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255, 107, 0, 0.1) 0%, transparent 100%); transition: width 0.2s ease; border-radius: 0; } #settingsContainer .settings-list-item:hover { background-color: #F8F9FA; } #settingsContainer .settings-list-item:hover::before { width: 4px; } #settingsContainer .settings-list-item:active { background-color: #F0F0F0; } #settingsContainer .settings-list-item:active::before { width: 4px; } #settingsContainer .settings-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(255, 107, 0, 0.05) 100%); border-radius: 12px; margin-right: 16px; font-size: 18px; color: #FF6B00; transition: all 0.3s ease; } #settingsContainer .settings-list-item:hover .settings-icon { transform: scale(1.05); background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 107, 0, 0.1) 100%); } #settingsContainer .settings-item-label { font-size: 15px; font-weight: 500; color: #2F3E46; letter-spacing: -0.2px; flex: 1; } #settingsContainer .settings-item-value { font-size: 14px; font-weight: 400; color: #8A9CA6; margin-right: 12px; letter-spacing: 0.1px; } #settingsContainer .settings-chevron { font-size: 14px; color: #D0D0D0; transition: all 0.2s ease; } #settingsContainer .settings-list-item:hover .settings-chevron { color: #FF6B00; transform: translateX(3px); } #settingsContainer .settings-logout-btn { background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%); border: 2px solid #EA4335; color: #EA4335; font-size: 15px; font-weight: 600; padding: 14px 24px; border-radius: 12px; transition: all 0.3s ease; letter-spacing: 0.2px; box-shadow: 0 2px 8px rgba(234, 67, 53, 0.1); } #settingsContainer .settings-logout-btn:hover { background: #EA4335; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(234, 67, 53, 0.3); } #settingsContainer .settings-logout-btn:active { transform: translateY(0); } #settingsContainer .settings-edit-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255, 107, 0, 0.1); border-radius: 10px; color: #FF6B00; transition: all 0.3s ease; border: none; padding: 0; } #settingsContainer .settings-edit-btn:hover { background: rgba(255, 107, 0, 0.15); transform: scale(1.1); } #settingsContainer .settings-sub-item { padding-left: 72px; background-color: #FAFAFA; position: relative; } #settingsContainer .settings-sub-item::before { left: 56px; } #settingsContainer .settings-sub-item .settings-icon { width: 32px; height: 32px; font-size: 14px; margin-right: 12px; background: linear-gradient(135deg, rgba(255, 107, 0, 0.08) 0%, rgba(255, 107, 0, 0.04) 100%); } #settingsContainer .settings-sub-item .settings-item-label { font-size: 14px; } #settingsContainer .custom-switch { padding-left: 0; margin-left: auto; display: flex; align-items: center; flex-shrink: 0; } #settingsContainer .custom-control { position: relative; display: inline-block; padding-left: 0; margin-bottom: 0; } #settingsContainer .custom-control-label { font-size: 0; cursor: pointer; margin-bottom: 0; padding-left: 0; position: relative; display: inline-block; } #settingsContainer .custom-control-label::before { width: 48px; height: 26px; border-radius: 13px; background-color: #E0E0E0; border: none; transition: all 0.3s ease; position: absolute; top: 0; left: 0; pointer-events: none; } #settingsContainer .custom-control-label::after { width: 22px; height: 22px; border-radius: 50%; background-color: #FFFFFF; top: 2px; left: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); position: absolute; pointer-events: none; } #settingsContainer .custom-control-input:checked~.custom-control-label::before { background-color: #FF6B00; border-color: #FF6B00; } #settingsContainer .custom-control-input:checked~.custom-control-label::after { transform: translateX(22px); background-color: #FFFFFF; } #settingsContainer .custom-control-input:focus~.custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(255, 107, 0, 0.25); } #settingsContainer .custom-control-input { position: absolute; left: 0; z-index: -1; width: 48px; height: 26px; opacity: 0; } /* =========================================================== ðŸŽ¨ THEME PAGE STYLES =========================================================== */ #themeContainer { font-family: 'Poppins', 'Segoe UI', Roboto, sans-serif; max-width: 100%; } #themeContainer .theme-section { margin-bottom: 32px; } #themeContainer .theme-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: #8A9CA6; padding: 0 16px 12px 16px; margin-bottom: 0; } #themeContainer .theme-list-item { background-color: #FFFFFF; border: none; border-bottom: 1px solid #F0F0F0; padding: 16px 20px; transition: all 0.2s ease; cursor: pointer; border-radius: 0; text-decoration: none; position: relative; } #themeContainer .theme-list-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255, 107, 0, 0.1) 0%, transparent 100%); transition: width 0.2s ease; border-radius: 0; } #themeContainer .theme-list-item:hover { background-color: #F8F9FA; } #themeContainer .theme-list-item:hover::before { width: 4px; } #themeContainer .theme-list-item:active { background-color: #F0F0F0; } #themeContainer .theme-list-item:active::before { width: 4px; } #themeContainer .theme-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(255, 107, 0, 0.05) 100%); border-radius: 12px; margin-right: 16px; font-size: 18px; color: #FF6B00; transition: all 0.3s ease; flex-shrink: 0; } #themeContainer .theme-list-item:hover .theme-icon { transform: scale(1.05); background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 107, 0, 0.1) 100%); } #themeContainer .theme-item-label { font-size: 15px; font-weight: 500; color: #2F3E46; letter-spacing: -0.2px; flex: 1; } #themeContainer .theme-item-description { font-size: 12px; color: #8A9CA6; font-weight: 400; letter-spacing: 0.1px; margin-top: 2px; } #themeContainer .theme-check { font-size: 18px; color: #FF6B00; transition: all 0.2s ease; flex-shrink: 0; } #themeContainer .theme-list-item:focus, #themeContainer .theme-list-item:focus-visible { outline: none; text-decoration: none; box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.3); } /* Language Container Styles */ #languageContainer .language-section { margin-bottom: 32px; } #languageContainer .language-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: #8A9CA6; padding: 0 16px 12px 16px; margin-bottom: 0; } #languageContainer .language-list-item { background-color: #FFFFFF; border: none; border-bottom: 1px solid #F0F0F0; padding: 16px 20px; transition: all 0.2s ease; cursor: pointer; border-radius: 0; text-decoration: none; position: relative; } #languageContainer .language-list-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255, 107, 0, 0.1) 0%, transparent 100%); transition: width 0.2s ease; border-radius: 0; } #languageContainer .language-list-item:hover { background-color: #F8F9FA; } #languageContainer .language-list-item:hover::before { width: 4px; } #languageContainer .language-list-item:active { background-color: #F0F0F0; } #languageContainer .language-list-item:active::before { width: 4px; } #languageContainer .language-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(255, 107, 0, 0.05) 100%); border-radius: 12px; margin-right: 16px; font-size: 18px; color: #FF6B00; transition: all 0.3s ease; flex-shrink: 0; } #languageContainer .language-list-item:hover .language-icon { transform: scale(1.05); background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 107, 0, 0.1) 100%); } #languageContainer .language-item-label { font-size: 15px; font-weight: 500; color: #2F3E46; letter-spacing: -0.2px; flex: 1; } #languageContainer .language-item-description { font-size: 12px; color: #8A9CA6; font-weight: 400; letter-spacing: 0.1px; margin-top: 2px; } #languageContainer .language-check { font-size: 18px; color: #FF6B00; transition: all 0.2s ease; flex-shrink: 0; } #languageContainer .language-list-item:focus, #languageContainer .language-list-item:focus-visible { outline: none; text-decoration: none; box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.3); } /* =========================================================== ðŸ HOMEPAGE STYLES - Mobile First Design Production-ready, responsive homepage sections =========================================================== */ /* Hero Section */ .home-hero { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; background: linear-gradient(135deg, var(--trymzo-primary) 0%, var(--trymzo-primary-light) 100%); overflow: hidden; margin: -15px -15px 2rem -15px; } .home-hero-content { position: relative; z-index: 2; text-align: center; max-width: 600px; width: 100%; animation: fadeInUp 0.6s ease-out; } .home-hero-title { font-size: 2rem; font-weight: 700; color: #ffffff; margin-bottom: 1rem; line-height: 1.2; letter-spacing: -0.5px; } .home-hero-brand { color: var(--trymzo-accent-light); display: block; margin-top: 0.5rem; } .home-hero-subtitle { font-size: 1rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; line-height: 1.6; } .home-hero-cta { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; background: var(--trymzo-accent); color: #ffffff; font-size: 1.1rem; font-weight: 600; border-radius: 50px; text-decoration: none; box-shadow: 0 4px 15px rgba(255, 111, 97, 0.4); transition: all 0.3s ease; min-height: 48px; min-width: 200px; } .home-hero-cta:hover { background: var(--trymzo-accent-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 111, 97, 0.5); color: #ffffff; text-decoration: none; } .home-hero-cta:active { transform: translateY(0); } .home-hero-decoration { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; z-index: 1; } /* Quick Stats Bar */ .home-stats { padding: 1.5rem 0; background: var(--trymzo-bg-card); border-bottom: 1px solid var(--trymzo-border); margin-bottom: 2rem; margin-left: -15px; margin-right: -15px; } .home-stat-item { display: flex; align-items: center; padding: 1rem 0.75rem; text-align: left; transition: background-color 0.3s ease; } .home-stat-icon { width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--trymzo-primary-light) 0%, var(--trymzo-primary) 100%); border-radius: 12px; color: #ffffff; font-size: 1.1rem; margin-right: 0.75rem; } .home-stat-text { flex: 1; } .home-stat-title { font-size: 0.85rem; font-weight: 600; color: var(--trymzo-heading); margin-bottom: 0.25rem; line-height: 1.2; } .home-stat-desc { font-size: 0.7rem; color: var(--trymzo-text-muted); line-height: 1.2; } /* How It Works Section */ .home-steps { padding: 3rem 0; background: var(--trymzo-bg); margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; } .home-section-title { font-size: 1.75rem; font-weight: 700; color: var(--trymzo-heading); text-align: center; margin-bottom: 0.5rem; } .home-section-subtitle { font-size: 1rem; color: var(--trymzo-text-muted); text-align: center; margin-bottom: 2.5rem; } .home-steps-container { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 800px; margin: 0 auto; } .home-step-item { position: relative; text-align: center; padding: 1.5rem; background: var(--trymzo-bg-card); border-radius: 16px; box-shadow: 0 2px 10px var(--trymzo-shadow); width: 100%; max-width: 280px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .home-step-item:hover { transform: translateY(-4px); box-shadow: 0 4px 20px var(--trymzo-shadow); } .home-step-number { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; background: var(--trymzo-primary); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; box-shadow: 0 2px 8px rgba(43, 122, 120, 0.3); } .home-step-icon { width: 64px; height: 64px; margin: 1.5rem auto 1rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--trymzo-secondary-light) 0%, var(--trymzo-secondary) 100%); border-radius: 16px; color: var(--trymzo-primary); font-size: 1.75rem; } .home-step-title { font-size: 1.1rem; font-weight: 600; color: var(--trymzo-heading); margin-bottom: 0.5rem; } .home-step-desc { font-size: 0.9rem; color: var(--trymzo-text-muted); line-height: 1.5; } .home-step-connector { display: none; color: var(--trymzo-primary); font-size: 1.5rem; opacity: 0.5; align-self: center; } /* Feature Cards Section */ .home-features { padding: 3rem 0; background: var(--trymzo-bg-card); margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; } .home-feature-card { background: var(--trymzo-bg); border-radius: 20px; padding: 2rem; height: 100%; display: flex; flex-direction: column; transition: all 0.3s ease; border: 2px solid transparent; box-shadow: 0 2px 10px var(--trymzo-shadow); } .home-feature-card:hover { transform: translateY(-6px); box-shadow: 0 8px 25px var(--trymzo-shadow); border-color: var(--trymzo-primary-light); } .home-feature-icon { width: 72px; height: 72px; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--trymzo-primary) 0%, var(--trymzo-primary-light) 100%); border-radius: 18px; color: #ffffff; font-size: 2rem; box-shadow: 0 4px 15px rgba(43, 122, 120, 0.3); } .home-feature-title { font-size: 1.5rem; font-weight: 600; color: var(--trymzo-heading); margin-bottom: 1rem; } .home-feature-desc { font-size: 1rem; color: var(--trymzo-text-light); line-height: 1.6; margin-bottom: 1.5rem; flex: 1; } .home-feature-link { display: inline-flex; align-items: center; color: var(--trymzo-primary); font-weight: 600; text-decoration: none; transition: all 0.3s ease; margin-top: auto; } .home-feature-link:hover { color: var(--trymzo-primary-hover); text-decoration: none; transform: translateX(4px); } .home-feature-link i { margin-left: 0.5rem; transition: transform 0.3s ease; } .home-feature-link:hover i { transform: translateX(4px); } /* Benefits Section */ .home-benefits { padding: 3rem 0; background: var(--trymzo-bg); margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; } .home-benefit-item { text-align: center; padding: 1.5rem 1rem; background: var(--trymzo-bg-card); border-radius: 16px; height: 100%; transition: transform 0.3s ease; box-shadow: 0 2px 8px var(--trymzo-shadow); } .home-benefit-item:hover { transform: translateY(-4px); } .home-benefit-icon { width: 56px; height: 56px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--trymzo-accent-light) 0%, var(--trymzo-accent) 100%); border-radius: 14px; color: #ffffff; font-size: 1.5rem; } .home-benefit-title { font-size: 1rem; font-weight: 600; color: var(--trymzo-heading); margin-bottom: 0.5rem; } .home-benefit-desc { font-size: 0.85rem; color: var(--trymzo-text-muted); line-height: 1.5; } /* Final CTA Section */ .home-cta { padding: 4rem 1rem; background: linear-gradient(135deg, var(--trymzo-primary) 0%, var(--trymzo-primary-light) 100%); margin: 2rem -15px -15px -15px; } .home-cta-content { max-width: 600px; margin: 0 auto; text-align: center; } .home-cta-title { font-size: 2rem; font-weight: 700; color: #ffffff; margin-bottom: 1rem; } .home-cta-subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; line-height: 1.6; } .home-cta-buttons { display: flex; flex-direction: column; gap: 1rem; align-items: center; } .home-cta-primary, .home-cta-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: 600; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; min-height: 48px; min-width: 220px; } .home-cta-primary { background: var(--trymzo-accent); color: #ffffff; box-shadow: 0 4px 15px rgba(255, 111, 97, 0.4); } .home-cta-primary:hover { background: var(--trymzo-accent-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 111, 97, 0.5); color: #ffffff; text-decoration: none; } .home-cta-secondary { background: rgba(255, 255, 255, 0.2); color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); } .home-cta-secondary:hover { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); color: #ffffff; text-decoration: none; transform: translateY(-2px); } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Tablet Styles (576px and up) */ @media (min-width: 576px) { .home-hero { min-height: 50vh; padding: 4rem 2rem; } .home-hero-title { font-size: 2.5rem; } .home-hero-subtitle { font-size: 1.1rem; } .home-stats { padding: 2rem 0; } .home-stat-item { padding: 1.25rem; } .home-section-title { font-size: 2rem; } .home-steps-container { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2rem; } .home-step-connector { display: block; } .home-step-item { flex: 1; min-width: 200px; max-width: 220px; } .home-cta-buttons { flex-direction: row; justify-content: center; } } /* Desktop Styles (768px and up) */ @media (min-width: 768px) { .home-hero { min-height: 65vh; padding: 5rem 2rem; margin: -15px -15px 3rem -15px; } .home-hero-title { font-size: 3rem; } .home-hero-subtitle { font-size: 1.25rem; } .home-stats { margin-bottom: 3rem; } .home-steps { padding: 4rem 0; } .home-steps-container { gap: 1rem; } .home-step-item { max-width: 180px; } .home-step-connector { margin: 0 0.5rem; } .home-features { padding: 4rem 0; } .home-benefits { padding: 4rem 0; } .home-cta { padding: 5rem 2rem; margin: 3rem -15px -15px -15px; } .home-cta-title { font-size: 2.5rem; } } /* Dark Mode Support */ .dark-theme .home-hero { background: linear-gradient(135deg, var(--trymzo-primary) 0%, var(--trymzo-primary-hover) 100%); } .dark-theme .home-stats { background: var(--trymzo-bg-card); border-bottom-color: var(--trymzo-border); } .dark-theme .home-steps { background: var(--trymzo-bg); } .dark-theme .home-features { background: var(--trymzo-bg-card); } .dark-theme .home-feature-card { background: var(--trymzo-bg); } .dark-theme .home-benefits { background: var(--trymzo-bg); } .dark-theme .home-cta { background: linear-gradient(135deg, var(--trymzo-primary) 0%, var(--trymzo-primary-hover) 100%); } /* Chair Management Styles */ /* Container adjustments */ #manageChairsCard { max-width: 100%; overflow-x: hidden; } @media (min-width: 576px) { #manageChairsCard { padding-left: 1rem; padding-right: 1rem; } } /* Mobile First - Single Column */ .chair-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 0.75rem 0; } /* Very small screens - reduce gap */ @media (max-width: 375px) { .chair-grid { gap: 0.75rem; padding: 0.5rem 0; } } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { .chair-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { .chair-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { .chair-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .chair-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; } } .chair-card { min-height: 260px; border: 1px solid #e9ecef; border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: default; transition: all 0.2s ease; background: #fff; position: relative; } @media (max-width: 375px) { .chair-card { min-height: 240px; padding: 0.875rem; } } @media (min-width: 576px) { .chair-card { padding: 1.25rem; border-radius: 10px; } } @media (min-width: 768px) { .chair-card { padding: 1.5rem; min-height: 280px; } } @media (hover: hover) { .chair-card:hover { border-color: #dee2e6; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } } @media (hover: none) { .chair-card:active { background: #f8f9fa; } } .chair-card.active-assigned { border-color: #28a745; background: #f8fdf9; } .chair-card.active-unassigned { border-color: #ffc107; background: #fffef8; } .chair-card.offline { border-color: #adb5bd; background: #f8f9fa; opacity: 0.85; } .chair-number { font-size: 1.75rem; font-weight: bold; color: #333; margin-bottom: 0.5rem; text-align: center; } .chair-icon { font-size: 2.5rem; margin-bottom: 0.5rem; display: block; } @media (min-width: 576px) { .chair-number { font-size: 2rem; margin-bottom: 0.75rem; } .chair-icon { font-size: 2.75rem; } } @media (min-width: 768px) { .chair-number { font-size: 2.5rem; } .chair-icon { font-size: 3rem; } } .chair-badge { font-size: 0.7rem; padding: 0.25rem 0.5rem; border-radius: 4px; margin: 0.25rem; } @media (min-width: 576px) { .chair-badge { font-size: 0.75rem; } } /* Scoped badge styles - only within chair management */ #manageChairsCard .badge-token, #manageChairsCard .chair-badge.badge-token { background: #007bff; color: white; } #manageChairsCard .badge-time, #manageChairsCard .chair-badge.badge-time { background: #6f42c1; color: white; } #manageChairsCard .badge-offline, #manageChairsCard .chair-badge.badge-offline { background: #6c757d; color: white; } .chair-staff { text-align: center; margin-top: 0.75rem; padding: 0.75rem; background: #f8f9fa; border-radius: 8px; width: 100%; font-size: 0.85rem; } .chair-staff-name { font-weight: 600; color: #333; margin-bottom: 0.25rem; font-size: 0.9rem; } .chair-status-info { font-size: 0.75rem; color: #6c757d; margin-top: 0.5rem; } @media (min-width: 576px) { .chair-staff { font-size: 0.9rem; padding: 0.75rem; } .chair-staff-name { font-size: 0.95rem; } .chair-status-info { font-size: 0.8rem; } } .chair-actions { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .chair-action-btn { font-size: 0.85rem; padding: 0.75rem 0.5rem; width: 100%; border-radius: 8px; font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 44px; white-space: normal; word-wrap: break-word; line-height: 1.3; } .chair-action-btn i { font-size: 1rem; flex-shrink: 0; margin: 0; width: auto; line-height: 1; } .chair-action-btn span { flex: 1; text-align: center; margin: 0; } @media (min-width: 576px) { .chair-action-btn { font-size: 0.9rem; padding: 0.6rem 1rem; gap: 0.875rem; } .chair-action-btn i { font-size: 1.1rem; } } @media (hover: hover) { .chair-action-btn:hover { opacity: 0.9; } } @media (hover: none) { .chair-action-btn:active { opacity: 0.8; } } .setup-chairs-form { text-align: center; padding: 1.5rem 1rem; } .setup-chairs-form .fa-chair { font-size: 3rem; } @media (min-width: 576px) { .setup-chairs-form { padding: 2rem; } .setup-chairs-form .fa-chair { font-size: 4rem; } } /* Scoped staff select modal - only within chair management */ #manageChairsCard .staff-select-modal { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (min-width: 768px) { #manageChairsCard .staff-select-modal { max-height: 400px; } } #manageChairsCard .staff-option { padding: 0.875rem; border: 1px solid #e9ecef; border-radius: 6px; margin-bottom: 0.5rem; cursor: pointer; transition: all 0.15s; background: #fff; min-height: 44px; display: flex; flex-direction: column; } @media (min-width: 576px) { #manageChairsCard .staff-option { padding: 1rem; } } @media (hover: hover) { #manageChairsCard .staff-option:hover { background: #f8f9fa; border-color: #dee2e6; } } @media (hover: none) { #manageChairsCard .staff-option:active { background: #f8f9fa; } } #manageChairsCard .staff-option.selected { background: #e7f3ff; border-color: #007bff; border-width: 1px; font-weight: 500; } #manageChairsCard .staff-option strong { display: block; margin-bottom: 0.25rem; font-size: 0.95rem; } @media (min-width: 576px) { #manageChairsCard .staff-option strong { font-size: 1rem; } } /* Header Section - Clean & Natural Design */ .chair-management-header { background: #ffffff; border: 1px solid #e9ecef; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; } .chair-header-content { display: flex; flex-direction: column; gap: 1rem; } .chair-header-title { display: flex; align-items: center; gap: 0.75rem; margin: 0; } .chair-header-icon { width: 40px; height: 40px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #495057; font-size: 1.25rem; flex-shrink: 0; } .chair-header-title-text { font-size: 1.25rem; font-weight: 600; color: #212529; margin: 0; line-height: 1.4; } .chair-header-description { color: #6c757d; font-size: 0.9rem; line-height: 1.5; margin: 0; } .chair-header-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid #f1f3f5; } @media (min-width: 576px) { .chair-header-stats { gap: 1rem 1.5rem; } } .chair-stat-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #495057; } .chair-stat-item i { font-size: 0.9rem; } .chair-stat-badge { background: #f8f9fa; color: #495057; padding: 0.2rem 0.6rem; border-radius: 12px; font-weight: 600; font-size: 0.875rem; border: 1px solid #e9ecef; } .chair-stat-badge-success { background: #f0f9f4; color: #166534; border-color: #d1e7dd; } .chair-stat-badge-info { background: #f0f9ff; color: #0c4a6e; border-color: #bae6fd; } .chair-header-actions { margin-top: 0.5rem; } /* Mobile Optimizations */ @media (max-width: 575px) { .chair-management-header { padding: 0.875rem; border-radius: 6px; } .chair-header-icon { width: 36px; height: 36px; font-size: 1.1rem; } .chair-header-title-text { font-size: 1.1rem; } .chair-header-description { font-size: 0.85rem; } .chair-header-stats { gap: 1rem; margin-top: 0.75rem; } .chair-stat-item { font-size: 0.8rem; } .chair-stat-badge { padding: 0.15rem 0.5rem; font-size: 0.8rem; } } /* Tablet and Desktop */ @media (min-width: 576px) { .chair-header-content { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1.5rem; } .chair-header-actions { margin-top: 0; flex-shrink: 0; } .chair-management-header { padding: 1.25rem 1.5rem; } } @media (min-width: 768px) { .chair-header-title-text { font-size: 1.5rem; } .chair-header-description { font-size: 0.95rem; } } /* Button Icon Spacing - Scoped to chair management only */ #manageChairsCard .btn i.fas, #manageChairsCard .btn i.far { margin-right: 0 !important; margin-left: 0 !important; } /* Ensure proper spacing for buttons with icons - only within chair management */ #manageChairsCard .btn:not(.chair-action-btn) { display: inline-flex; align-items: center; gap: 0.5rem; } #manageChairsCard .btn-lg:not(.chair-action-btn) { gap: 0.625rem; } /* =========================================================== ðŸ” NEARBY SHOPS FILTER SECTION Mobile-first, responsive filter panel =========================================================== */ /* Filter Toggle Button */ #bookingAvailabilityBox #toggleFilters { background: linear-gradient(135deg, var(--trymzo-primary) 0%, var(--trymzo-primary-light) 100%); border: none; color: #ffffff; font-size: 0.875rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 20px; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(43, 122, 120, 0.2); display: inline-flex; align-items: center; gap: 0.5rem; } #bookingAvailabilityBox #toggleFilters:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(43, 122, 120, 0.3); color: #ffffff; } #bookingAvailabilityBox #toggleFilters:active { transform: translateY(0); } #bookingAvailabilityBox #toggleFilters i { font-size: 0.875rem; } /* Filter Panel */ #bookingAvailabilityBox #filterPanel { background: var(--trymzo-bg-card); border: 1px solid var(--trymzo-border); border-radius: 16px; box-shadow: 0 4px 12px var(--trymzo-shadow); margin-bottom: 1.5rem; overflow: hidden; animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } #bookingAvailabilityBox #filterPanel .card-body { padding: 1.25rem; } /* Filter Section Labels */ #bookingAvailabilityBox #filterPanel label { font-size: 0.875rem; font-weight: 600; color: var(--trymzo-heading); margin-bottom: 0.75rem; display: block; letter-spacing: -0.2px; } /* Distance Filter Buttons */ #bookingAvailabilityBox .btn-group.filter-distance-group { gap: 0.5rem; display: flex !important; border-radius: 0; } #bookingAvailabilityBox .btn-group.filter-distance-group>.btn { margin-left: 0 !important; border-radius: 12px !important; } #bookingAvailabilityBox .filter-distance { flex: 1; padding: 0.625rem 0.75rem; font-size: 0.8rem; font-weight: 500; border: 2px solid var(--trymzo-border); background: #ffffff; color: var(--trymzo-text); border-radius: 12px; transition: all 0.3s ease; white-space: nowrap; } #bookingAvailabilityBox .filter-distance:hover { border-color: var(--trymzo-primary-light); background: rgba(43, 122, 120, 0.05); color: var(--trymzo-primary); transform: translateY(-1px); } #bookingAvailabilityBox .filter-distance.active { background: linear-gradient(135deg, var(--trymzo-primary) 0%, var(--trymzo-primary-light) 100%); border-color: var(--trymzo-primary); color: #ffffff; box-shadow: 0 2px 8px rgba(43, 122, 120, 0.3); } #bookingAvailabilityBox .filter-distance:active { transform: translateY(0); } /* Sort By Dropdown */ #bookingAvailabilityBox #sortBy { border: 2px solid var(--trymzo-border); border-radius: 12px; padding: 0.5rem 2rem 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--trymzo-text); background: #ffffff; transition: all 0.3s ease; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%232B7A78' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 10px 6px; height: auto; } #bookingAvailabilityBox #sortBy:focus { outline: none; border-color: var(--trymzo-primary); box-shadow: 0 0 0 0.2rem rgba(43, 122, 120, 0.15); background-color: #ffffff; } #bookingAvailabilityBox #sortBy:hover { border-color: var(--trymzo-primary-light); } /* Salon Type Filter Buttons */ #bookingAvailabilityBox .filter-salon-type { width: 100%; padding: 0.75rem 1rem; font-size: 0.85rem; font-weight: 500; border: 2px solid var(--trymzo-border); background: #ffffff; color: var(--trymzo-text); border-radius: 12px; transition: all 0.3s ease; margin-bottom: 0.5rem; text-align: left; display: flex; align-items: center; justify-content: space-between; } #bookingAvailabilityBox .filter-salon-type:last-child { margin-bottom: 0; } #bookingAvailabilityBox .filter-salon-type:hover { border-color: var(--trymzo-primary-light); background: rgba(43, 122, 120, 0.05); color: var(--trymzo-primary); transform: translateX(4px); } #bookingAvailabilityBox .filter-salon-type.active { background: linear-gradient(135deg, var(--trymzo-primary) 0%, var(--trymzo-primary-light) 100%); border-color: var(--trymzo-primary); color: #ffffff; box-shadow: 0 2px 8px rgba(43, 122, 120, 0.3); } #bookingAvailabilityBox .filter-salon-type.disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } #bookingAvailabilityBox .filter-salon-type:active { transform: translateX(0); } /* Filter Action Buttons */ #bookingAvailabilityBox #filterPanel .d-flex.justify-content-end { gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--trymzo-border); } #bookingAvailabilityBox #clearFilters { background: #ffffff; border: 2px solid var(--trymzo-border); color: var(--trymzo-text); font-size: 0.875rem; font-weight: 600; padding: 0.625rem 1.25rem; border-radius: 12px; transition: all 0.3s ease; } #bookingAvailabilityBox #clearFilters:hover { background: var(--trymzo-bg-muted); border-color: var(--trymzo-text-muted); transform: translateY(-1px); } #bookingAvailabilityBox #applyFilters { background: linear-gradient(135deg, var(--trymzo-primary) 0%, var(--trymzo-primary-light) 100%); border: none; color: #ffffff; font-size: 0.875rem; font-weight: 600; padding: 0.625rem 1.5rem; border-radius: 12px; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(43, 122, 120, 0.2); } #bookingAvailabilityBox #applyFilters:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(43, 122, 120, 0.3); } #bookingAvailabilityBox #applyFilters:active { transform: translateY(0); } /* Nearby Label with Filter Button */ #bookingAvailabilityBox .form-group .d-flex.justify-content-between { align-items: center; margin-bottom: 0.75rem; } #bookingAvailabilityBox .section-title { font-size: 1.1rem; font-weight: 600; color: var(--trymzo-heading); margin: 0; letter-spacing: -0.3px; } /* Mobile Optimizations */ @media (max-width: 576px) { #bookingAvailabilityBox #toggleFilters { font-size: 0.8rem; padding: 0.5rem 0.875rem; } #bookingAvailabilityBox #toggleFilters i { font-size: 0.8rem; } #bookingAvailabilityBox #filterPanel .card-body { padding: 1rem; } #bookingAvailabilityBox #filterPanel label { font-size: 0.8rem; margin-bottom: 0.625rem; } #bookingAvailabilityBox .filter-distance { font-size: 0.75rem; padding: 0.5rem 0.625rem; } #bookingAvailabilityBox .btn-group.filter-distance-group { gap: 0.375rem; } #bookingAvailabilityBox #sortBy { font-size: 0.8rem; padding: 0.5rem 1.75rem 0.5rem 0.625rem; } #bookingAvailabilityBox .filter-salon-type { font-size: 0.8rem; padding: 0.625rem 0.875rem; } #bookingAvailabilityBox #clearFilters, #bookingAvailabilityBox #applyFilters { font-size: 0.8rem; padding: 0.625rem 1rem; flex: 1; } #bookingAvailabilityBox .section-title { font-size: 1rem; } #bookingAvailabilityBox #filterPanel .d-flex.justify-content-end { flex-direction: column; gap: 0.625rem; } #bookingAvailabilityBox #filterPanel .d-flex.justify-content-end .btn { width: 100%; } } /* Tablet Optimizations */ @media (min-width: 577px) and (max-width: 768px) { #bookingAvailabilityBox .filter-distance { font-size: 0.8rem; } #bookingAvailabilityBox .filter-salon-type { font-size: 0.85rem; } } /* Desktop Enhancements */ @media (min-width: 769px) { #bookingAvailabilityBox #filterPanel { border-radius: 20px; } #bookingAvailabilityBox #filterPanel .card-body { padding: 1.5rem; } #bookingAvailabilityBox .filter-distance { padding: 0.75rem 1rem; font-size: 0.875rem; } #bookingAvailabilityBox .filter-salon-type { padding: 0.875rem 1.25rem; font-size: 0.9rem; } #bookingAvailabilityBox #sortBy { padding: 0.625rem 2rem 0.625rem 1rem; font-size: 0.9rem; } #bookingAvailabilityBox .btn-group.filter-distance-group { gap: 0.625rem; } } /* Dark Theme Support */ .dark-theme #bookingAvailabilityBox #filterPanel { background: var(--trymzo-bg-card); border-color: var(--trymzo-border); } .dark-theme #bookingAvailabilityBox .filter-distance, .dark-theme #bookingAvailabilityBox .filter-salon-type, .dark-theme #bookingAvailabilityBox #sortBy { background: var(--trymzo-bg); border-color: var(--trymzo-border); color: var(--trymzo-text); } .dark-theme #bookingAvailabilityBox #clearFilters { background: var(--trymzo-bg); border-color: var(--trymzo-border); color: var(--trymzo-text); } /* Load More Button */ #bookingAvailabilityBox #loadMoreBtn { background: linear-gradient(135deg, var(--trymzo-primary) 0%, var(--trymzo-primary-light) 100%); border: none; color: #ffffff; font-size: 0.9rem; font-weight: 600; padding: 0.75rem 2rem; border-radius: 25px; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(43, 122, 120, 0.2); min-width: 150px; } #bookingAvailabilityBox #loadMoreBtn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(43, 122, 120, 0.3); color: #ffffff; } #bookingAvailabilityBox #loadMoreBtn:active { transform: translateY(0); } #bookingAvailabilityBox #loadMoreBtn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } #bookingAvailabilityBox #loadMoreBtn i { transition: transform 0.3s ease; } #bookingAvailabilityBox #loadMoreBtn:hover:not(:disabled) i { transform: translateY(2px); } @media (max-width: 576px) { #bookingAvailabilityBox #loadMoreBtn { font-size: 0.85rem; padding: 0.625rem 1.5rem; min-width: 140px; } } /* Service Card Update */ .service-card { border-radius: 14px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); border: none; } .service-img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: #eee; flex-shrink: 0; } .service-title { font-weight: 600; font-size: 15px; margin: 0; } .service-price { font-weight: 600; font-size: 14px; color: #007bff; white-space: nowrap; } .service-price del { font-size: 12px; color: #999; margin-left: 4px; } .service-desc { font-size: 13px; color: #6c757d; margin-bottom: 2px; } .service-meta { font-size: 12px; color: #555; } .tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-right: 4px; margin-top: 2px; font-weight: 500; } .tag-new { background: #e7f3ff; color: #007bff; } .tag-popular { background: #fff3cd; color: #856404; } .switch { position: relative; width: 42px; height: 22px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; inset: 0; background: #ccc; border-radius: 20px; transition: .3s; } .slider:before { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: .3s; } .switch input:checked+.slider { background: #28a745; } .switch input:checked+.slider:before { transform: translateX(20px); } .remove-tag { cursor: pointer; opacity: 0.7; transition: opacity 0.2s; } .remove-tag:hover { opacity: 1; } /* =========================================================== WAITING DASHBOARD MODULE STYLES =========================================================== */ /* Scoped Variables */ :root { --wd-primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --wd-success-color: #10b981; --wd-active-color: #6366f1; --wd-muted-color: #9ca3af; --wd-line-color: #e5e7eb; --wd-bg-surface: #ffffff; --wd-bg-app: #f3f4f6; --wd-text-main: #1f2937; --wd-text-sub: #6b7280; --wd-shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05); --wd-shadow-active: 0 10px 25px -5px rgba(99, 102, 241, 0.25); --wd-radius-xl: 24px; --wd-radius-lg: 16px; } /* Dark Theme Overrides */ .dark-theme { --wd-bg-surface: #1A1E1F; --wd-bg-app: #101314; --wd-text-main: #E5E7E8; --wd-text-sub: #AAB1B3; --wd-line-color: #2E3537; --wd-shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.4); --wd-active-color: #818cf8; } /* Page Body Override */ body.wd-page-body { background-color: var(--wd-bg-app); font-family: 'Inter', sans-serif; color: var(--wd-text-main); -webkit-font-smoothing: antialiased; } .wd-dashboard-container { max-width: 500px; margin: 0 auto; padding: 1.5rem; } /* --- Animations --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } 70% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } } @keyframes scaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes spin-slow { 100% { transform: rotate(360deg); } } /* --- Header --- */ .wd-dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; animation: fadeInUp 0.6s ease-out; } .wd-header-title { font-size: 1.5rem; font-weight: 800; color: var(--wd-text-main); letter-spacing: -0.5px; } .wd-refresh-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--wd-bg-surface); border: 1px solid rgba(0, 0, 0, 0.05); color: var(--wd-active-color); display: flex; align-items: center; justify-content: center; box-shadow: var(--wd-shadow-soft); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .wd-refresh-btn:active { transform: scale(0.92); } /* Status Card */ .wd-status-card { background: var(--wd-bg-surface); border-radius: var(--wd-radius-xl); padding: 2rem; text-align: center; box-shadow: var(--wd-shadow-soft); margin-bottom: 2.5rem; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.5); animation: fadeInUp 0.8s ease-out 0.1s backwards; } .dark-theme .wd-status-card { border: 1px solid rgba(255, 255, 255, 0.05); } .wd-status-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--wd-primary-gradient); } .wd-token-wrapper { margin-bottom: 1.5rem; } .wd-token-label { text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.75rem; font-weight: 700; color: var(--wd-text-sub); margin-bottom: 0.5rem; } .wd-token-number { font-size: 4rem; font-weight: 800; line-height: 1; background: var(--wd-primary-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -2px; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; } .wd-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 0.5rem 1.25rem; border-radius: 100px; font-weight: 600; font-size: 0.9rem; background: #eef2ff; color: var(--wd-active-color); transition: all 0.3s ease; } .dark-theme .wd-status-pill { background: rgba(99, 102, 241, 0.15); } .wd-status-pill.wd-skipped { background: #fef2f2; color: var(--danger-color, #ef4444); } .dark-theme .wd-status-pill.wd-skipped { background: rgba(239, 68, 68, 0.15); } .wd-timer-box { background: var(--wd-bg-app); padding: 1rem; border-radius: var(--wd-radius-lg); display: inline-flex; align-items: center; gap: 12px; margin-top: 1rem; border: 1px solid rgba(0, 0, 0, 0.03); } .wd-timer-icon { color: #f59e0b; font-size: 1.2rem; animation: spin-slow 10s linear infinite; } .wd-timer-text { font-weight: 700; color: var(--wd-text-main); font-size: 1.1rem; font-variant-numeric: tabular-nums; } /* Timeline */ .wd-timeline-wrapper { padding: 0 0.5rem; animation: fadeInUp 0.8s ease-out 0.2s backwards; } .wd-timeline-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--wd-text-main); } .wd-timeline { position: relative; padding-left: 2rem; } .wd-timeline-rail { position: absolute; top: 24px; bottom: 40px; left: 17px; width: 2px; background: var(--wd-line-color); border-radius: 2px; z-index: 0; } .wd-timeline-progress { position: absolute; top: 24px; left: 17px; width: 2px; background: var(--wd-primary-gradient); border-radius: 2px; z-index: 0; height: 0%; transition: height 1s cubic-bezier(0.4, 0, 0.2, 1); } .wd-timeline-step { position: relative; padding-left: 3rem; padding-bottom: 2.5rem; display: flex; flex-direction: column; z-index: 1; } .wd-timeline-step:last-child { padding-bottom: 0; } .wd-step-dot { position: absolute; left: 5px; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--wd-bg-surface); border: 2px solid var(--wd-line-color); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .wd-timeline-step.active .wd-step-dot { width: 26px; height: 26px; border-color: transparent; background: var(--wd-primary-gradient); box-shadow: var(--wd-shadow-active); transform: scale(1.1); } .wd-timeline-step.active .wd-step-dot::before { content: ''; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; border-radius: 50%; animation: pulse-glow 2s infinite; } .wd-timeline-step.active .wd-step-dot i { color: white; font-size: 10px; display: block; } .wd-timeline-step.completed .wd-step-dot { background: var(--wd-success-color); border-color: var(--wd-success-color); transform: scale(1); } .wd-timeline-step.completed .wd-step-dot i { display: block; color: white; font-size: 10px; } .wd-step-dot i { display: none; } .wd-step-content { transition: all 0.4s ease; opacity: 0.5; transform-origin: left center; } .wd-timeline-step.active .wd-step-content { opacity: 1; transform: translateX(5px); } .wd-timeline-step.completed .wd-step-content { opacity: 0.8; } .wd-step-title { font-size: 1.05rem; font-weight: 700; color: var(--wd-text-main); margin-bottom: 0.25rem; display: flex; align-items: center; } .wd-step-desc { font-size: 0.875rem; color: var(--wd-text-sub); line-height: 1.4; font-weight: 500; } /* Upcoming Scroll */ .wd-upcoming-section { margin-top: 3rem; animation: fadeInUp 1s ease-out 0.3s backwards; } .wd-scroll-wrapper { margin: 0 -1.5rem; padding: 0 1.5rem 1.5rem 1.5rem; overflow-x: auto; display: flex; gap: 1rem; scrollbar-width: none; } .wd-scroll-wrapper::-webkit-scrollbar { display: none; } .wd-queue-card { min-width: 140px; background: var(--wd-bg-surface); border-radius: 20px; padding: 1.25rem; border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; } .dark-theme .wd-queue-card { border: 1px solid rgba(255, 255, 255, 0.05); } .wd-queue-card:active { transform: scale(0.96); } .wd-q-token { font-size: 1.5rem; font-weight: 800; color: var(--wd-text-main); margin-bottom: 0.25rem; letter-spacing: -1px; } .wd-q-time { font-size: 0.7rem; color: var(--wd-text-sub); font-weight: 600; background: #f3f4f6; padding: 4px 10px; border-radius: 20px; margin-bottom: 0.5rem; } .dark-theme .wd-q-time { background: rgba(255, 255, 255, 0.1); } .wd-q-name { font-size: 0.85rem; color: var(--wd-text-sub); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wd-btn-cancel-card { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ef4444; background: rgba(254, 242, 242, 0.8); border: none; cursor: pointer; transition: all 0.2s; opacity: 0.8; } .wd-btn-cancel-card:active { transform: scale(0.9); background: #fee2e2; } /* Actions */ .wd-action-bar { position: relative; background: transparent; padding: 1rem 1.5rem; display: flex; gap: 1rem; margin: 0 auto; max-width: 500px; } .wd-btn-main { flex: 1; background: var(--wd-text-main); color: white; border: none; padding: 1rem; border-radius: 100px; font-weight: 600; font-size: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform 0.2s; } .dark-theme .wd-btn-main { color: #1a1a1a; } .wd-btn-main:active { transform: scale(0.98); } .wd-btn-sec { background: #f3f4f6; color: var(--wd-text-main); font-size: 1.1rem; width: 52px; height: 52px; border-radius: 50%; border: none; display: flex; justify-content: center; align-items: center; } .dark-theme .wd-btn-sec { background: rgba(255, 255, 255, 0.1); } /* --- Empty State --- */ .wd-empty-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; } /* --- Optimized Booking Details Premium Styles --- */ .booking-detail-content { padding: 10px 5px; font-family: 'Inter', sans-serif; } .detail-section { background: var(--wd-bg-surface); border-radius: 16px; padding: 15px; margin-bottom: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid var(--wd-line-color); transition: transform 0.2s ease; } .detail-section:hover { transform: translateY(-2px); } .detail-section h4 { font-size: 0.85rem; font-weight: 800; color: #6366f1; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; opacity: 0.9; } .detail-section h4::before { content: ''; display: inline-block; width: 4px; height: 16px; background: #6366f1; margin-right: 10px; border-radius: 2px; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 360px) { .detail-grid { grid-template-columns: 1fr; gap: 8px; } } .detail-item { display: flex; flex-direction: column; } .detail-item label { font-size: 0.7rem; color: #94a3b8; margin-bottom: 2px; font-weight: 600; display: flex; align-items: center; gap: 4px; } .detail-item span { font-size: 0.85rem; color: var(--wd-text-main); font-weight: 700; word-break: break-word; line-height: 1.2; } .status-pill-combined { padding: 6px 12px; border-radius: 100px; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; } .status-pill-combined.status-confirmed, .status-pill-combined.status-completed, .status-pill-combined.status-serving { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .status-pill-combined.status-pending { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } .status-pill-combined.status-running { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; } .status-pill-combined.status-cancelled, .status-pill-combined.status-missed { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .status-check-circle { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; background: currentColor; color: white; } .booking-id-wrapper { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 0.8rem; } .booking-id-val { font-weight: 700; color: #1e293b; } .copy-btn-mini { cursor: pointer; padding: 4px; color: #94a3b8; transition: color 0.2s; } .copy-btn-mini:hover { color: #6366f1; } .status-serving { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .payment-badge { padding: 4px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; } .payment-paid { background: #eef2ff; color: #4338ca; } .payment-unpaid { background: #fff7ed; color: #9a3412; } .premium-service-card { background: #f8fafc; border-radius: 12px; padding: 10px; display: flex; align-items: center; gap: 10px; border: 1px solid #f1f5f9; margin-bottom: 8px; } .service-icon-wrapper { width: 36px; height: 36px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #6366f1; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); font-size: 0.9rem; } .service-info { flex: 1; } .service-name { font-size: 0.85rem; font-weight: 700; color: #1e293b; margin: 0; } .service-duration { font-size: 0.7rem; color: #64748b; } .service-price-tag { font-weight: 800; color: #0f172a; font-size: 0.9rem; } .amount-summary { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; } .summary-row { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.85rem; } .summary-row.total { margin-top: 10px; font-size: 1.1rem; font-weight: 900; color: #1e293b; } .summary-row.discount { color: #10b981; } .detail-full-width { grid-column: 1 / -1; } .action-row { background: #ffffff; border: 1px solid #f1f5f9; border-radius: 16px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; cursor: pointer; transition: all 0.2s; text-decoration: none !important; } .action-row:hover { background: #f8fafc; transform: translateY(-1px); } .action-icon-whatsapp { width: 40px; height: 40px; background: #25d366; color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .action-icon-receipt { width: 40px; height: 40px; background: #3b82f6; color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .action-text { flex: 1; font-weight: 600; color: #1e293b; font-size: 0.95rem; } .action-arrow { color: #cbd5e1; } .btn-modal-close-custom { background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; font-weight: 700; border-radius: 12px; padding: 12px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; margin-top: 15px; } .token-badge-large { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: white; width: 68px; height: 68px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 8px 16px rgba(99, 102, 241, 0.2); } .token-badge-large .token-label { font-size: 0.6rem; text-transform: uppercase; font-weight: 700; opacity: 0.8; margin-bottom: -2px; } .token-badge-large .token-val { font-size: 1.5rem; font-weight: 900; } .dark-theme .detail-section { background: #1A1E1F; border-color: #2E3537; } .dark-theme .premium-service-card { background: #101314; border-color: #2E3537; } .dark-theme .service-icon-wrapper { background: #1A1E1F; border-color: #2E3537; } .dark-theme .service-name { color: #E5E7E8; } .dark-theme .service-price-tag { color: #E5E7E8; } .dark-theme .summary-row.total { color: #E5E7E8; }