/*
 * Salon (Women) fixes (R7). Loaded AFTER the vendored theme; the theme files stay untouched.
 */

/* The salon's own name where there is no uploaded logo */
.salon-brand-text {
    display: inline-block;
    max-width: 280px;
    font-family: "Yeseva One", serif;
    font-size: 26px;
    line-height: 1.15;
    color: #1d1d1d;
    overflow-wrap: anywhere;
}

.foot-logo .salon-brand-text {
    color: #fff;
}

.salon-hero-name {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    overflow-wrap: anywhere;
}

/* Brand icons rendered by the shared inline-SVG partial inside the theme's round social buttons */
.social-icon li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.social-icon li a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    color: #fff;
    display: block;
}

/* Contact rows: the email/WhatsApp icons are inline SVG - give them the same footprint as the bundled PNG icons */
.contact-us-single-item .contact-icon svg {
    color: #fff;
}

.contact-us-single-item .work-info a {
    color: inherit;
    overflow-wrap: anywhere;
}

/* Service text is readable on its real background; long names/descriptions wrap */
.item-category,
.price-item-name,
.price-text,
.price-name {
    overflow-wrap: anywhere;
}

html,
body {
    overflow-x: hidden;
}

/* --- Booking form feedback ----------------------------------------------------------------------------------------------- */
.salon-request-feedback:empty {
    display: none;
}

.salon-request-feedback {
    margin-bottom: 16px;
    scroll-margin-top: 110px;
}

.salon-request-success {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 6px;
    background: #e7f5ec;
    border: 1px solid #1f6f3a;
    color: #14532d;
}

.salon-booking-form .text-danger {
    margin-top: 4px;
    font-size: 14px;
}

.salon-booking-form .my-input,
.salon-booking-form select,
.salon-booking-form .form-control {
    width: 100%;
    max-width: 100%;
}

/* --- Price list: category columns of different heights used to snag on each other (floats) and overlap the next row. ---- */
.price .price-box > .row {
    display: flex;
    flex-wrap: wrap;
}

.price .price-box > .row > [class*="col-"] {
    float: none;
    margin-bottom: 40px;
}