/* =====================================
   BROWS BY VIOLA – SIMPLYBOOK STYLING
   ===================================== */

/* Allgemeine Schrift / Gross-Kleinschreibung */
body,
button,
input,
select,
textarea,
a,
p,
span,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: none !important;
}

/* Überschriften */
h1,
h2,
h3,
h4,
.section-title,
.title,
.page-title,
.service-title,
.services-title {
    text-transform: none !important;
    letter-spacing: 0.02em;
}

/* Navigation */
nav a,
.menu a,
.nav a,
.navbar a,
.sidebar a {
    text-transform: none !important;
}

/* Buttons */
button,
.btn,
.button,
a.btn {
    background-color: #9B1C24 !important;
    color: #FFFFFF !important;
    border-radius: 14px !important;
    border: none !important;
    text-transform: none !important;
    font-weight: 500 !important;
}

/* Button Hover */
button:hover,
.btn:hover,
.button:hover,
a.btn:hover {
    background-color: #7A0F17 !important;
}

/* Links */
a {
    color: #9B1C24;
}

/* Hintergrund */
body {
    background-color: #FFFDF9 !important;
    color: #2A211D !important;
}

/* Service-Karten */
.service-item,
.service-card,
.item,
.card {
    background-color: #FFFFFF !important;
    border-radius: 18px !important;
}

/* Preise */
.price,
.service-price {
    color: #2A211D !important;
    font-weight: 600 !important;
}

/* Verfügbare Termine */
.available,
.available-time,
.time-slot.available {
    background-color: #9B1C24 !important;
    color: #FFFFFF !important;
}

/* Nicht verfügbare Termine */
.busy,
.busy-time,
.time-slot.busy {
    background-color: #CFC4BA !important;
}

/* Mobile Anpassung */
@media (max-width: 768px) {

    h1,
    h2,
    h3,
    h4 {
        text-transform: none !important;
    }

    nav a,
    .menu a,
    .sidebar a {
        text-transform: none !important;
    }

    .service-item,
    .service-card,
    .card {
        border-radius: 18px !important;
    }

    button,
    .btn,
    .button {
        border-radius: 14px !important;
    }
}
/* Telefonnummer – Länderwahl ohne roten Hintergrund */
.iti__selected-country,
.iti__selected-flag,
.iti__flag-container,
.intl-tel-input .selected-flag {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Auch beim Darüberfahren kein Rot */
.iti__selected-country:hover,
.iti__selected-flag:hover,
.intl-tel-input .selected-flag:hover {
    background: transparent !important;
    background-color: transparent !important;
}
/* Social Media Icons – roten Hintergrund entfernen */
.social-icon,
.social-icons a,
.social-links a,
.footer-social a,
.social-media a {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Auch beim Hover kein roter Hintergrund */
.social-icon:hover,
.social-icons a:hover,
.social-links a:hover,
.footer-social a:hover,
.social-media a:hover {
    background: transparent !important;
    background-color: transparent !important;
}

/* Instagram/Icon selbst in Bordeaux */
.social-icon i,
.social-icons i,
.social-links i,
.footer-social i,
.social-media i,
.social-icon svg,
.social-icons svg {
    color: #9B1C24 !important;
    fill: #9B1C24 !important;
}

/* Nur den roten Hintergrund des Instagram-Buttons entfernen */
a[href*="instagram"] {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Instagram-Logo sichtbar lassen */
a[href*="instagram"] i,
a[href*="instagram"] svg,
a[href*="instagram"] img {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: #9B1C24 !important;
    fill: #9B1C24 !important;
}