/* =========================================================
   ZS | Dr. Zorica Saljo – E-PAT Online-Buchung
   Branding-Anpassung gemäss Wunsch von Dr. Saljo
   Palette: Anthrazit #262626 · Taupe #91856E · Taupe dunkel #665D4D
            Weiss #FFFFFF · Sekundärtext #474747
   Schrift:  Inter (Fallback NeueHaas / System)
   ========================================================= */

/* --- Schrift: Inter (Fallback NeueHaas, dann System) ----- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@font-face {
    font-family: "NeueHaas";
    src: url("https://booking.epat.ch/fonts/NeueHaasGroteskTextPro.ttf") format("truetype");
}

:root {
    --zs-anthrazit:  #262626;
    --zs-taupe:      #91856E;
    --zs-taupe-dark: #665D4D;
    --zs-white:      #FFFFFF;
    --zs-text:       #474747;
}

html {
    font-family: "Inter", "NeueHaas", Helvetica, Arial, sans-serif;
}

/* ============================ Header / Logo ============== */
.client-header {
    text-align: center;
    top: 0;
    height: auto;
    width: 100%;
    z-index: 1000;
    padding-top: 20px;
    box-shadow: 0 6px 3px rgba(0,0,0,0.2);
}

.client-header .logo {
    height: 140px !important;
}

/* ============================ Grundfarben =============== */
body {
    color: var(--zs-text) !important;
}

/* Dunkler Seiten-/Footerbereich (Materialize blue-grey lighten-5) */
.blue-grey.lighten-5 {
    background-color: var(--zs-anthrazit) !important;
}

/* ============================ Footer =================== */
footer.page-footer .footer-copyright {
    overflow: hidden;
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 10px 0px;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0);
}

.footer-copyright .grey-text {
    color: var(--zs-white) !important;
}

.page-footer.blue-grey.lighten-5.text-darken-2.grey-text {
    color: var(--zs-white) !important;
}

/* ============================ Sekundärtext ============= */
.grey-text.text-darken-2 {
    color: var(--zs-text) !important;
}

.grey-text.text-darken-1 {
    color: var(--zs-text) !important;
}

/* ============================ Navigation / Kategorien === */
/* «Onlinebuchung» in Grossbuchstaben */
.section > h5.grey-text.text-darken-2 {
    text-transform: uppercase;
    letter-spacing: 1px;   /* optional, wirkt hochwertiger */
}

.categories.tabs-vertical a {
    color: var(--zs-taupe) !important;
}

.categories.tabs-vertical .active {
    color: var(--zs-anthrazit) !important;
    border-right: 3px solid var(--zs-anthrazit);
}

.tabs .tab a.active {
    color: var(--zs-anthrazit) !important;
}

.tabs .indicator {
    background-color: var(--zs-anthrazit) !important;
}

/* ============================ Provider-Chip ============ */
/* Hinweis: war zuvor rot (#680903) – auf Anthrazit gesetzt.
   Bei Bedarf auf var(--zs-taupe) umstellen.                */
.provider {
    background-color: var(--zs-anthrazit);
    color: var(--zs-white);
}

.provider.teal.lighten-2.white-text.chip {
    background-color: var(--zs-anthrazit) !important;
}

/* ============================ Termin-Slots ============= */
/* Verfügbarer Slot → Taupe */
.slot.teal.lighten-1.white-text {
    background-color: var(--zs-taupe) !important;
}

/* Auswahl (Datum / Zeit / Chip) → Anthrazit, weisse Schrift */
.selected.orange.white-text,
.slottime-item.collection-item.selected,
.chip.teal.lighten-1.white-text {
    background-color: var(--zs-anthrazit) !important;
}

/* ============================ Behandlungskarten ======== */
.services.row {
    display: flex;
    flex-direction: column;
}

.services.row .service .card {
    display: grid;
    grid-template-columns: auto 50%;
    align-items: center;
    padding-top: 10px;
    padding-left: 10px;
    border-radius: 20px;
}

.service .card-image {
    min-width: 200px;
}

/* Nicht ausgewählt: Weiss / Anthrazit-Text */
.services.row .service .card .card-content .card-title {
    color: var(--zs-anthrazit);
    font-family: "Inter", "NeueHaas", Helvetica, Arial, sans-serif;
}

.service .card-content {
    color: var(--zs-anthrazit);
}



.services .service .card 

/* «Choose» / Aktion-Link nicht ausgewählter Karte → Taupe */
.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating) {
    color: var(--zs-taupe);
}

.row .service .card .card-action a {
    color: var(--zs-taupe) !important;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating):hover {
    color: var(--zs-taupe-dark);
}

.card .card-action {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* Ausgewählte Behandlung: Anthrazit-Hintergrund, weisse Schrift */
.services .service .blue-grey.white-text.card {
    background-color: var(--zs-anthrazit) !important;
}

.services.row .service .blue-grey.white-text.card .card-content,
.services.row .service .blue-grey.white-text.card .card-content .card-title {
    background-color: var(--zs-anthrazit) !important;
    color: var(--zs-white) !important;
}

.services.row .service .blue-grey.white-text.card .card-action a {
    color: var(--zs-white) !important;
}

/* ============================ Kalender ================= */
/* Kalender-Tabs: Text Anthrazit, Trennlinie Taupe */
.row .col.s12.m6.calendar .tabs .tab a {
    color: var(--zs-anthrazit) !important;
    border-bottom-color: var(--zs-taupe) !important;
}

/* ============================ Buttons ================== */
/* Primärbutton (Termin buchen) → Taupe, Hover dunkler */
#submit_booking {
    background-color: var(--zs-taupe) !important;
}

#submit_booking:hover,
#submit_booking:focus {
    background-color: var(--zs-taupe-dark) !important;
}

/* Übrige Primärbuttons analog */
.btn,
.btn-large,
.btn-floating {
    background-color: var(--zs-taupe) !important;
}

.btn:hover,
.btn-large:hover,
.btn-floating:hover,
.btn:focus,
.btn-large:focus,
.btn-floating:focus {
    background-color: var(--zs-taupe-dark) !important;
}

/* ============================ Formularfelder =========== */
.secondary-content span,
.input-field,
.dropdown-content span {
    color: var(--zs-anthrazit) !important;
}

.input-field label {
    color: var(--zs-text);
}

input:not([type]):focus:not([readonly])+label,
input[type=text]:focus:not([readonly])+label,
input[type=password]:focus:not([readonly])+label,
input[type=email]:focus:not([readonly])+label,
input[type=url]:focus:not([readonly])+label,
input[type=time]:focus:not([readonly])+label,
input[type=date]:focus:not([readonly])+label,
input[type=datetime]:focus:not([readonly])+label,
input[type=datetime-local]:focus:not([readonly])+label,
input[type=tel]:focus:not([readonly])+label,
input[type=number]:focus:not([readonly])+label,
input[type=search]:focus:not([readonly])+label,
textarea.materialize-textarea:focus:not([readonly])+label {
    color: var(--zs-anthrazit);
}

/* Materialize-Input-Unterstrich beim Fokus → Taupe */
.input-field input:focus,
.input-field textarea.materialize-textarea:focus {
    border-bottom: 1px solid var(--zs-taupe) !important;
    box-shadow: 0 1px 0 0 var(--zs-taupe) !important;
}

/* ============================ Sonstiges ================ */
div .col.s12.m4.opening-times {
    display: none;
}

.white-text {
    color: var(--zs-white) !important;
}

/* Überschrift «Online-Buchung» → Anthrazit */
h1.online-booking-title,
.online-booking-label {
    color: var(--zs-anthrazit) !important;
}

.address h6 {
    display: none;
}

/* ============================ Mobile ================== */
@media only screen and (max-width: 600px) {
    .client-header {
        height: auto;
        padding-top: 10px;
    }

    .client-header .logo {
        height: 80px !important;
    }

    .services.row .service .card {
        display: block;
        padding-left: 0;
        text-align: center;
    }

    .service .card-image {
        min-width: 100%;
        width: 100%;
        margin-bottom: 10px;
    }

    .services.row .service .card .card-content .card-title {
        font-size: 1.2rem;
    }

    .card .card-action {
        text-align: center;
    }

    .tabs.tabs-vertical {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
    }

    .categories.tabs-vertical .active {
        border-right: none;
        border-bottom: 3px solid var(--zs-anthrazit);
    }

    .row .col.s12.m6.calendar {
        width: 100%;
    }

    .tabs .tab a {
        font-size: 14px;
        padding: 0 8px;
    }

    .input-field label {
        font-size: 14px;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    footer.page-footer {
        text-align: center;
    }
}