/* Velvet Beauty Lounge — brand polish for the Easy!Appointments booking page.
 * Only affects public booking views. Admin/backend keeps the defaults. */

:root {
    --vb-accent: #8E0B37;
    --vb-accent-soft: #a9254d;
    --vb-ink: #1f1f1f;
}

/* ------------------------------------------------------------------ */
/* The booking wizard ships inside an iframe in the main site modal,   */
/* so the modal provides the card chrome. Strip only the visual card   */
/* (border/radius/shadow) from the wizard and message frames — keep   */
/* Bootstrap's column widths and paddings so the content stays nicely */
/* centered and breathes.                                              */
/* ------------------------------------------------------------------ */
body {
    background: #ffffff;
}
#book-appointment-wizard,
#message-frame {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Header (red banner): logo as white, subtitle/text in white          */
/* ------------------------------------------------------------------ */
#company-logo {
    /* Invert any dark-on-transparent logo to pure white on the red bar */
    filter: brightness(0) invert(1);
    max-height: 56px;
    max-width: 72px;
}
#company-name > span {
    color: #ffffff !important;
}
.display-booking-selection {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 400;
}

/* Step indicators (1/2/3/4) — brighter contrast on the red banner */
#steps .book-step {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
#steps .book-step.active-step {
    background: #ffffff !important;
    color: var(--vb-accent) !important;
    border-color: #ffffff !important;
}

/* ------------------------------------------------------------------ */
/* Strip any remaining Easy!Appointments attribution                   */
/* ------------------------------------------------------------------ */
a[href*="easyappointments.org"] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Success / confirmation page: tint the stock green check to accent   */
/* ------------------------------------------------------------------ */
#success-icon {
    /* Convert the green tick to a brand-accent tone.
     * Chain: grayscale -> brightness boost -> tint via sepia+hue-rotate */
    filter: grayscale(1) brightness(0.75) sepia(1) hue-rotate(-45deg) saturate(3);
    max-width: 72px;
    height: auto;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
#frame-footer {
    padding: 12px 18px !important;
}
#frame-footer .footer-powered-by a {
    color: var(--vb-accent) !important;
    text-decoration: none !important;
    font-weight: 500;
}
#frame-footer .footer-powered-by a:hover {
    text-decoration: underline !important;
}