:root {
    --contact-plum: #5b2a86;
    --contact-gold: #d9a441;
    --contact-ink: #24162f;
}

body {
    color: var(--contact-ink);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: radial-gradient(ellipse at 8% 5%, #5b2a8619, transparent 55%),
                radial-gradient(ellipse at 90% 10%, #d9a44124, transparent 55%), #fbf7f2;
    background-attachment: fixed;
}

#book-appointment-wizard,
.card {
    border: 1px solid #e9e1f2;
    border-radius: 24px;
    box-shadow: 0 18px 55px #2c1b3a24;
}

#book-appointment-wizard { max-width: 880px; }
#book-appointment-wizard #header {
    background: linear-gradient(135deg, #fffdfb, #f2e8dc) !important;
    border-bottom: 1px solid #d9a44155;
    gap: 20px;
}
#company-name { color: var(--contact-ink) !important; }
#company-name > span { font-size: 24px; font-weight: 700; }
#company-name .display-booking-selection { color: #6b5f75 !important; font-size: 13px; }
#company-logo { width: 130px; height: auto; object-fit: contain; }
#steps .book-step { border: 1px solid #d9a44155; }
#steps .book-step strong { color: var(--contact-plum) !important; }
#steps .active-step { box-shadow: 0 4px 14px #5b2a8626; }
.wizard-frame .frame-container { min-height: 360px !important; }
.wizard-frame h2 { color: var(--contact-ink) !important; font-weight: 650 !important; }
.form-control, .form-select { border-color: #e9e1f2; border-radius: 12px; padding: 12px 14px; }
.form-control:focus, .form-select:focus { border-color: var(--contact-plum); box-shadow: 0 0 0 3px #5b2a8619; }
.btn-primary, .button-next, #book-appointment-submit {
    background: linear-gradient(135deg, #6d35a3, #5b2a86) !important;
    border-color: #5b2a86 !important;
    color: white !important;
    border-radius: 12px;
    box-shadow: 0 3px 0 #3d1a5d, 0 6px 14px #5b2a8622;
}
.button-back { border-radius: 12px; }
.text-primary, a:not(.btn):not(.nav-link):not(.badge) { color: var(--contact-plum) !important; }
#frame-footer { background: #fbf7f2; }
.contact-login-logo { height: auto; max-height: 90px; object-fit: contain; }

@media (max-width: 575px) {
    #book-appointment-wizard { border-radius: 0; border-left: 0; border-right: 0; }
    #book-appointment-wizard #header { gap: 8px; padding: 20px 16px !important; }
    #company-name > span { font-size: 21px; }
    #company-logo { width: 110px; margin-bottom: 12px !important; }
    #steps { margin: 4px auto !important; }
    .wizard-frame .frame-container { min-height: 300px !important; }
    .wizard-frame h2 { font-size: 23px; margin-top: 8px !important; }
    .card-body { padding: 28px !important; }
}