/* Quick Booking Styles */

:root {--primary-color: #5b9a8b; --primary-hover: #4a8a7a; --primary-light: #e8f4f1;}

.quick-booking-container {min-height: 70vh; display: flex; align-items: center; justify-content: center; background: #f8f9fa; padding: 40px;}

.quick-booking-card {background: white; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); max-width: 500px; width: 100%; padding: 40px; animation: slideUp 0.5s ease-out;}

@keyframes slideUp {from {opacity: 0; transform: translateY(30px);}
    to {opacity: 1; transform: translateY(0);}
}

.back-button {display: inline-flex; align-items: center; gap: 8px; background: #f5f5f5; color: #666; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.3s; margin-bottom: 20px;}

.back-button:hover {background: #e0e0e0; color: #333;}

.quick-booking-header {text-align: center; margin-bottom: 30px;}

.quick-booking-header h1 {font-size: 28px; font-weight: 700; color: #333; margin-bottom: 10px;}

.quick-booking-header p {color: #666; font-size: 16px;}

.progress-indicator {display: flex; justify-content: center; gap: 10px; margin-bottom: 30px;}

.progress-dot {width: 12px; height: 12px; border-radius: 50%; background: #e0e0e0; transition: all 0.3s;}

.progress-dot.active {background: var(--primary-color); width: 30px; border-radius: 6px;}

.quick-booking-step12 .form-group {margin-bottom: 25px;}

.form-label {display: block; font-weight: 600; color: #333; margin-bottom: 8px; font-size: 14px;}

.form-label .required {color: #f44336;}

.form-input {width: 100%; padding: 15px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 16px; transition: all 0.3s; box-sizing: border-box;}

.form-input:focus {outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);}

.form-hint {font-size: 13px; color: #999; margin-top: 5px;}

.btn-primary {width: 100%; padding: 14px; background: var(--primary-color); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 20px;}

.btn-primary:hover:not(:disabled) {background: var(--primary-hover);}

.btn-primary:disabled {opacity: 0.5; cursor: not-allowed;}

.btn-secondary {width: 100%; padding: 14px; background: #f5f5f5; color: #666; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 12px;}

.btn-secondary:hover {background: #e0e0e0; color: #333;}

.alert {padding: 12px 15px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; line-height: 1.5;}

.alert-info {background: #e3f2fd !important; color: #1976d2 !important; border-left: 4px solid #1976d2 !important;}

.alert-success {background: var(--primary-light) !important; color: var(--primary-color) !important; border-left: 4px solid var(--primary-color) !important;}

.alert-error {background: #ffebee !important; color: #c62828 !important; border-left: 4px solid #f44336 !important;}

.alert-warning {background: #fff3e0 !important; color: #e65100 !important; border-left: 4px solid #ff9800 !important;}

.code-input-container {position: relative; width: 100%; display: flex; justify-content: center; margin: 30px 0;}
.real-code-input {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; caret-color: transparent;}
.code-visual-group {display: flex; gap: 12px; justify-content: center; pointer-events: none;}
.visual-box {width: 56px; height: 64px; text-align: center; line-height: 60px; font-size: 28px; font-weight: 700; border: 2px solid #e0e0e0; border-radius: 12px; transition: all 0.2s; background: #fafafa; color: #333;}
.visual-box.active {border-color: var(--primary-color); background: white; box-shadow: 0 0 0 3px rgba(91, 154, 139, 0.1);}
.visual-box.filled {border-color: var(--primary-color); background: var(--primary-light);}

.resend-link {text-align: center; margin-top: 20px; font-size: 14px; color: #666;}

.resend-link button {background: none; border: none; color: var(--primary-color); cursor: pointer; font-weight: 600; text-decoration: underline; padding: 0;}

.resend-link button:disabled {color: #999; cursor: not-allowed; text-decoration: none;}

.resend-link button:hover:not(:disabled) {color: var(--primary-hover);}

.login-option {margin-top: 24px; padding: 20px; background: #f8f9fa; border-radius: 12px; border: 1px solid #e0e0e0;}

.login-option p {margin: 0 0 12px 0; font-size: 14px; color: #666;}

.password-input-wrapper {position: relative;}

.password-toggle {position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #999; font-size: 18px;}

.password-toggle:hover {color: #666;}

.forgot-password-link {display: block; text-align: right; margin-top: 8px; font-size: 13px; color: var(--primary-color); text-decoration: none;}

.forgot-password-link:hover {text-decoration: underline;}

.verified-phone-notice {background: var(--primary-light); border: 1px solid var(--primary-color); border-radius: 12px; padding: 16px; margin-bottom: 20px;}

.verified-phone-notice .notice-header {display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;}

.verified-phone-notice .icon {font-size: 24px; color: var(--primary-color); flex-shrink: 0;}

.verified-phone-notice .content {flex: 1; min-width: 0;}

.verified-phone-notice .content-title {font-size: 14px; color: #666; margin-bottom: 4px;}

.verified-phone-notice .phone {font-weight: 700; font-size: 16px; color: var(--primary-color); white-space: nowrap; display: block; margin-bottom: 4px;}

.verified-phone-notice .content-hint {font-size: 13px; color: #666; line-height: 1.4;}

.verified-phone-notice .actions {display: flex; gap: 8px; margin-top: 12px;}

.verified-phone-notice button {flex: 1; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; border: none;}

.verified-phone-notice .btn-use {background: var(--primary-color); color: white;}

.verified-phone-notice .btn-use:hover {background: var(--primary-hover);}

.verified-phone-notice .btn-change {background: white; color: #666; border: 1px solid #ddd;}

.verified-phone-notice .btn-change:hover {background: #f5f5f5;}

.registered-msg {color: #d32f2f; font-weight: 700;}
.verification-step {display: none;}

.verification-step.active {display: block; animation: fadeIn 0.3s ease-out;}

@keyframes fadeIn {from {opacity: 0;}
    to {opacity: 1;}}

/* Quick Booking Wrapper (for step3) */
.quick-booking-wrapper {background: #f8f9fa; min-height: 100vh; padding: 20px;}

.quick-booking-wrapper .back-button {margin-bottom: 20px;}

.skip-link {text-align: center; margin-top: 20px;}

.skip-link a {color: #666; text-decoration: underline; font-size: 14px; transition: color 0.2s;}

.skip-link a:hover {color: #333;}

/* Mobile Responsive */
@media (max-width: 768px) {
    .quick-booking-container {padding: 25px 15px;}
    
    .quick-booking-card {padding: 24px; border-radius: 12px;}
    
    .visual-box {width: 48px; height: 56px; line-height: 52px; font-size: 24px;}
    
    .code-visual-group {gap: 8px;}
    
    .quick-booking-wrapper {padding: 10px;}

    .verified-phone-notice .actions {flex-direction: column;}
    
    .verified-phone-notice button {width: 100%;}
    
    .quick-booking-header h1 {font-size: 24px;}
    
    .quick-booking-header p {font-size: 14px;}
}