*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--green: #009737;--green-dark: #007A2D;--green-lt: #F0FAF4;--blue: #002B67;--blue-lt: #EFF4FF;--yellow: #C8CE00;--yellow-lt: #FAFBD0;--bg: #F6F7F9;--surface: #FFFFFF;--border: #E4E7EC;--border-2: #CBD2DA;--text: #111827;--text-2: #374151;--text-3: #6B7280;--text-4: #9CA3AF;--danger: #DC2626;--font: "Inter", system-ui, sans-serif;--page-max: 480px;--radius: 10px;--radius-lg: 16px;--shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(0,0,0,.08)}html{height:100%;font-size:16px}body{min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}.page-shell{min-height:100vh;max-width:var(--page-max);margin:0 auto;padding:0 20px 60px;display:flex;flex-direction:column}.page-header{padding:20px 0 16px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);margin-bottom:24px}.page-header img{height:52px;width:auto;object-fit:contain}.step-bar{display:flex;align-items:center;gap:0;margin-bottom:28px}.step-item{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}.step-item:not(:last-child):after{content:"";position:absolute;top:14px;left:50%;width:100%;height:2px;background:var(--border);z-index:0}.step-item.done:after,.step-item.active:after{background:var(--green)}.step-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--surface);border:2px solid var(--border);color:var(--text-4);position:relative;z-index:1;transition:all .2s}.step-item.active .step-circle,.step-item.done .step-circle{border-color:var(--green);background:var(--green);color:#fff}.step-label{font-size:11px;color:var(--text-4);margin-top:5px;font-weight:500}.step-item.active .step-label,.step-item.done .step-label{color:var(--green-dark)}.section-title{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.02em;margin-bottom:6px}.section-sub{font-size:14px;color:var(--text-3);margin-bottom:24px;line-height:1.5}.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px}.lang-btn{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .15s;text-align:left}.lang-btn:hover,.lang-btn.active{border-color:var(--green);background:var(--green-lt)}.lang-flag{font-size:22px}.lang-name{font-size:14px;font-weight:600;color:var(--text)}.lang-native{font-size:12px;color:var(--text-3)}.form-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}.form-section-title{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px;display:flex;align-items:center;gap:7px}.form-section-title i{color:var(--green)}.form-group{margin-bottom:16px}.form-group:last-child{margin-bottom:0}.form-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:6px}.form-label i{color:var(--text-4);font-size:12px}.form-label .req{color:var(--danger);margin-left:2px}.form-input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:var(--font);font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-input:focus{border-color:var(--green);box-shadow:0 0 0 3px #0097371a}.form-input::placeholder{color:var(--text-4)}select.form-input{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%239CA3AF' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}.field-error{font-size:12.5px;color:var(--danger);margin-top:5px;display:flex;align-items:center;gap:4px}.field-error i{font-size:11px}.urgency-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.urgency-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;font-size:13.5px;font-weight:500;transition:all .15s}.urgency-btn .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.urgency-btn.low{color:#059669}.urgency-btn.low.active{border-color:#059669;background:#f0fdf4}.urgency-btn.medium{color:#d97706}.urgency-btn.medium.active{border-color:#d97706;background:#fffbeb}.urgency-btn.high{color:#ea580c}.urgency-btn.high.active{border-color:#ea580c;background:#fff7ed}.urgency-btn.urgent{color:#dc2626}.urgency-btn.urgent.active{border-color:#dc2626;background:#fef2f2}.urgency-btn.low .dot{background:#059669}.urgency-btn.medium .dot{background:#d97706}.urgency-btn.high .dot{background:#ea580c}.urgency-btn.urgent .dot{background:#dc2626}.booking-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}.booking-card-title{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px;display:flex;align-items:center;gap:7px}.booking-card-title i{color:var(--green)}.staff-select-grid{display:flex;flex-direction:column;gap:8px}.staff-option{display:flex;align-items:center;gap:12px;padding:12px 14px;border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:all .15s}.staff-option:hover{border-color:var(--green)}.staff-option.active{border-color:var(--green);background:var(--green-lt)}.staff-avatar{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}.staff-option.active .staff-avatar{background:var(--green-dark)}.staff-name{font-size:14px;font-weight:600;color:var(--text)}.staff-role{font-size:12px;color:var(--text-3);text-transform:capitalize}.date-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.date-scroll::-webkit-scrollbar{display:none}.date-chip{display:flex;flex-direction:column;align-items:center;padding:10px 14px;border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;min-width:72px;transition:all .15s;flex-shrink:0}.date-chip:hover{border-color:var(--green)}.date-chip.active{border-color:var(--green);background:var(--green)}.date-chip .day-name{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}.date-chip .day-num{font-size:20px;font-weight:700;color:var(--text);margin:2px 0}.date-chip .month{font-size:10.5px;color:var(--text-3)}.date-chip.active .day-name,.date-chip.active .day-num,.date-chip.active .month{color:#fff}.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.time-chip{padding:10px;border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;font-size:13.5px;font-weight:500;color:var(--text-2);text-align:center;transition:all .15s}.time-chip:hover{border-color:var(--green);color:var(--green-dark)}.time-chip.active{border-color:var(--green);background:var(--green);color:#fff}.cta-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;background:var(--green);color:#fff;border:none;border-radius:var(--radius-lg);font-family:var(--font);font-size:16px;font-weight:600;cursor:pointer;transition:background .15s,transform .1s;margin-top:24px;letter-spacing:-.01em}.cta-btn:hover:not(:disabled){background:var(--green-dark)}.cta-btn:active:not(:disabled){transform:scale(.99)}.cta-btn:disabled{opacity:.5;cursor:not-allowed}.cta-btn.secondary{background:var(--surface);color:var(--text-2);border:1.5px solid var(--border)}.cta-btn.secondary:hover:not(:disabled){background:var(--bg);border-color:var(--border-2)}.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius);font-size:14px;margin-bottom:16px}.alert i{margin-top:2px;flex-shrink:0}.alert-error{background:#fef2f2;border:1px solid #FECACA;color:#b91c1c}.alert-success{background:#ecfdf5;border:1px solid #A7F3D0;color:#065f46}.alert-info{background:var(--blue-lt);border:1px solid #BFDBFE;color:var(--blue)}.confirm-hero{text-align:center;padding:32px 0 24px}.confirm-icon{width:72px;height:72px;border-radius:50%;background:var(--green-lt);border:3px solid var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:28px;color:var(--green)}.confirm-ref{font-size:32px;font-weight:700;color:var(--blue);font-family:SF Mono,Fira Code,monospace;letter-spacing:.05em;margin-bottom:4px}.confirm-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow)}.confirm-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border)}.confirm-row:last-child{border-bottom:none}.confirm-row-icon{width:32px;height:32px;border-radius:8px;background:var(--green-lt);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:13px;flex-shrink:0}.confirm-row-label{font-size:11.5px;color:var(--text-3);font-weight:500}.confirm-row-val{font-size:14px;color:var(--text);font-weight:500}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.consent-box{display:flex;align-items:flex-start;gap:12px;background:var(--blue-lt);border:1.5px solid #BFDBFE;border-radius:var(--radius);padding:14px;cursor:pointer}.consent-box input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--green);cursor:pointer}.consent-text{font-size:13px;color:var(--blue);line-height:1.5}.notice{background:var(--yellow-lt);border:1px solid var(--yellow);border-radius:var(--radius);padding:12px 14px;font-size:13px;color:#5a4e00;display:flex;align-items:flex-start;gap:8px;margin-bottom:16px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .25s ease}