/* Booking specific CSS */
.booking-page { background-color: var(--clr-offwhite); color: var(--clr-text); text-align: center; }
.booking-header { background: var(--clr-white); box-shadow: var(--shadow-sm); padding: 16px 0; border-bottom: 1px solid #E2E8F0; }
.booking-header .logo { color: var(--clr-navy); font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; }
.booking-header .logo span:not(.logo-icon) { color: var(--clr-ocean); }
.booking-container { max-width: 600px; padding-bottom: 80px; }

/* Progress Bar */
.progress-container { display: flex; justify-content: center; align-items: center; margin-bottom: 40px; }
.progress-step { width: 32px; height: 32px; border-radius: 50%; background: #CBD5E1; color: var(--clr-white); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; transition: var(--trans-fast); }
.progress-step.active, .progress-step.completed { background: var(--clr-ocean); box-shadow: var(--shadow-glow); }
.progress-line { width: 40px; height: 2px; background: #CBD5E1; margin: 0 8px; transition: var(--trans-fast); }
.progress-line.completed { background: var(--clr-ocean); }

/* Booking Card Area */
.booking-card { background: var(--clr-white); border-radius: 16px; padding: 40px 32px; box-shadow: var(--shadow-md); border: 1px solid #E2E8F0; width: 100%; margin: 0 auto; }
.step-title { font-size: 1.75rem; font-weight: 800; color: var(--clr-navy); margin-bottom: 8px; }
.step-subtitle { color: var(--clr-text-light); font-size: 1rem; margin-bottom: 24px; }
.trust-icons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 0.85rem; font-weight: 600; color: var(--clr-text); }
.text-dark { color: var(--clr-navy); }
.text-light { color: var(--clr-text-light); }
.text-ocean { color: var(--clr-ocean); font-weight: 600; }
.font-600 { font-weight: 600; }
.font-bold { font-weight: 800; }
.font-sm { font-size: 0.85rem; }
.font-lg { font-size: 1.125rem; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

/* Form Radio Cards */
.radio-cards, .checkbox-cards { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.radio-card input, .checkbox-card input { display: none; }
.radio-card .card-content, .checkbox-card { 
    border: 2px solid #E2E8F0; padding: 20px; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; background: var(--clr-white); position: relative; 
}
.radio-card h4 { font-size: 1.125rem; font-weight: 700; color: var(--clr-navy); margin-bottom: 4px; }
.radio-card p { font-size: 0.9rem; color: var(--clr-text); }
.radio-card input:checked + .card-content, .radio-card input:checked ~ .card-content { border-color: var(--clr-ocean); background: #F0F9FF; box-shadow: 0 4px 12px rgba(0, 168, 232, 0.1); }
.checkbox-card input:checked + span { color: var(--clr-ocean); font-weight: 600; }
.checkbox-card { padding: 16px 20px; font-weight: 500; display:flex; align-items:center; }
.checkbox-card::before { content: ""; display: inline-block; width: 20px; height: 20px; border: 2px solid #CBD5E1; border-radius: 4px; margin-right: 12px; transition: 0.2s; }
.checkbox-card:has(input:checked) { border-color: var(--clr-ocean); background: #F0F9FF; }
.checkbox-card:has(input:checked)::before { background: var(--clr-ocean); border-color: var(--clr-ocean); box-shadow: inset 0 0 0 3px #F0F9FF; }

/* Badges */
.best-value-card { position: relative; }
.best-value-card .badge { position: absolute; top: -12px; right: 20px; background: var(--clr-ocean); color: white; padding: 4px 12px; border-radius: 100px; font-size: 0.75rem; font-weight: 700; z-index: 2; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

/* Inputs */
.large-input { width: 100%; padding: 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 1rem; color: var(--clr-navy); font-family: inherit; transition: 0.2s; background: #F8FAFC; }
.large-input:focus { border-color: var(--clr-ocean); outline: none; box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.2); background: white; }
.large-input.huge { font-size: 1.25rem; padding: 18px 16px; font-weight: 600; }
.radio-toggles { display: flex; flex-direction: column; gap: 12px; }
.toggle-btn { display: block; }
.toggle-btn input { display: none; }
.toggle-btn span { display: block; border: 2px solid #E2E8F0; border-radius: 8px; padding: 16px; cursor: pointer; text-align: center; font-weight: 600; color: var(--clr-navy); transition: 0.2s; background: white; }
.toggle-btn input:checked + span { border-color: var(--clr-ocean); background: #F0F9FF; color: var(--clr-ocean); }

/* Buttons & Layout */
.form-actions { margin-top: 40px; }
.flex-row { display: flex; gap: 16px; }
.flex-grow { flex-grow: 1; }
.secondary-btn.txt-dark { color: var(--clr-text); border-color: #CBD5E1; }
.secondary-btn.txt-dark:hover { background: #F1F5F9; color: var(--clr-navy); }
.error-msg { background: #FEE2E2; color: #B91C1C; padding: 12px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; margin-top: 16px; text-align: left; }

/* Urgency/Review elements */
.urgency-banner { background: #FEF3C7; color: #B45309; padding: 12px; border-radius: 8px; font-weight: 700; font-size: 0.9rem; }
.summary-box { background: #F8FAFC; border: 1px solid #E2E8F0; padding: 24px; border-radius: 12px; }
.border-bottom { border-bottom: 1px solid #E2E8F0; padding-bottom: 16px; margin-bottom: 16px; }
.success-icon { font-size: 64px; margin-bottom: 24px; }
.reminder-box { background: #EFF6FF; border: 1px solid #BFDBFE; padding: 24px; border-radius: 12px; color: #1E3A8A; font-weight: 500; }
.checkbox-card small {font-size:.78rem;line-height:1.5;color:#475569;margin-top:5px}
.radio-card:focus-within,.checkbox-card:focus-within {outline:3px solid #008cc4;outline-offset:3px}
button:disabled {opacity:.6;cursor:wait}
#directContact .primary-btn {margin-top:12px}
textarea.large-input {min-height:100px;resize:vertical}

.estimate-panel{background:#edf6fb;border:1px solid #b6dceb;border-radius:12px;padding:20px}.estimate-panel h3{font-size:1.9rem;margin:8px 0}.estimate-panel div{line-height:1.8}