.booking-hero {
    padding: 120px 0 40px;
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    color: #fff;
    text-align: center;
}

.booking-hero h1 { font-size: 2.2rem; margin: 0 0 8px; }
.booking-hero p { opacity: .95; }

.booking-section { padding: 40px 0 80px; }
.booking-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }

.booking-form, .booking-summary { padding: 24px; border-radius: 16px; }
.booking-section .glass-card { background: var(--gradient-glass); backdrop-filter: blur(18px); border: 1px solid var(--border-light); box-shadow: var(--shadow); }
.booking-summary { position: sticky; top: 100px; align-self: start; }
.booking-tabs { display:flex; gap:8px; margin-bottom:16px; background: #fff; padding:6px; border-radius: 999px; border:1px solid var(--border-light); }
.tab-btn { padding:10px 18px; border-radius:999px; border:none; background:transparent; cursor:pointer; font-weight:700; color: var(--text-gray); transition: all .25s ease; }
.tab-btn:hover { color: var(--primary-color); }
.tab-btn.active { background: var(--gradient-accent); color:#fff; box-shadow: 0 8px 20px rgba(239,68,68,.25); }
.booking-form label { display:block; font-weight:600; margin-bottom:6px; color: var(--text-dark); }
.booking-form .form-row { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-bottom:16px; }
.booking-form .form-field input,
.booking-form .form-field select,
.booking-form .form-field textarea { width:100%; padding:12px 14px; border:1px solid var(--border-light); border-radius:10px; background:#fff; }

.booking-form .form-field input::placeholder,
.booking-form .form-field textarea::placeholder { color: var(--text-muted); }
.booking-form .form-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:8px; }
.booking-form .form-actions { align-items:center; }
.left-actions { margin-right:auto; }
.right-actions { display:flex; gap:10px; }
.booking-form .choice-btn { padding: 12px 18px; min-width: 140px; }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.85rem; }
.badge-ok { background:#E8F5E9; color:#1B5E20; border:1px solid #C8E6C9; }
.badge-low { background:#FFF3E0; color:#E65100; border:1px solid #FFE0B2; }
.badge-out { background:#FFEBEE; color:#B71C1C; border:1px solid #FFCDD2; }

.booking-summary h3 { margin-bottom:12px; }
.cart-items { list-style:none; padding:0; margin:0 0 12px; }
.cart-items li { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed rgba(0,0,0,0.08); gap:10px; }
.item-meta { color: var(--text-gray); font-size:.9rem; }
.item-actions button { background: transparent; border:none; color: var(--primary-color); cursor:pointer; font-weight:600; }
.summary-list { list-style:none; padding:0; margin:0 0 12px; }
.summary-list li { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed rgba(0,0,0,0.08); }
.total { display:flex; justify-content:space-between; align-items:center; padding:12px 0; font-size:1.1rem; }
.total strong { font-size:1.4rem; color: var(--primary-color); }
.note { color: var(--text-gray); font-size: 0.9rem; }

.modal { position:fixed; inset:0; background: rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.modal.hidden { display:none; }
.modal-content { padding:24px; border-radius:16px; text-align:center; max-width:420px; }

/* utility */
.hidden { display: none !important; }

@media (max-width: 992px) { .booking-grid { grid-template-columns: 1fr; } .booking-form .form-row { grid-template-columns: 1fr; } }

.service-catalog { padding: 20px 0 80px; }
.catalog-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.catalog-card { padding:16px; border-radius:16px; display:flex; flex-direction:column; gap:8px; transition: transform .2s ease, box-shadow .2s ease; }
.catalog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.catalog-header { display:flex; justify-content:flex-end; }

@media (max-width: 992px) { .catalog-grid { grid-template-columns: 1fr; } }



@media (max-width: 768px) {
    .booking-form .form-actions { flex-direction: column; align-items: stretch; }
    .left-actions { margin-right: 0; margin-bottom: 12px; text-align: center; }
    .right-actions { flex-direction: column; width: 100%; }
    .booking-form .choice-btn { min-width: 100%; }
    .booking-summary { position: static; margin-top: 20px; }
}