/* 1. korak: kategorije (harmonika), kartice storitev, gumbi izvajalcev */
:root {
    --tl-border: #e6e6e6;
    --tl-ink: #2b2b2b;
    --tl-muted: #8a8a8a;
    --tl-selected-bg: color-mix(in srgb, var(--color-primary) 22%, #fff);
    --tl-selected-border: color-mix(in srgb, var(--color-primary) 70%, #8a7a5a);
}

#m_wizard_form_step_1 .tl-native { display: none !important; }

.tl-help { color: var(--tl-muted); margin: -0.5rem 0 1.5rem; font-size: 0.95rem; }

.tl-cats { border-top: 1px solid var(--tl-border); }
.tl-cat { border-bottom: 1px solid var(--tl-border); }

.tl-cat__head {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 1.15rem 0.25rem; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 1.15rem; color: var(--tl-ink); text-align: left;
}
.tl-cat__head:focus { outline: none; }
.tl-cat__head:focus-visible { outline: 2px solid var(--tl-selected-border); outline-offset: 2px; border-radius: 6px; }
.tl-cat__head i { font-size: 1.1rem; color: var(--tl-muted); transition: transform .2s ease; }
.tl-cat.is-open .tl-cat__head i { transform: rotate(180deg); }

.tl-cat__body { display: none; padding: 0 0 1rem; }
.tl-cat.is-open .tl-cat__body { display: grid; gap: 0.6rem; }

.tl-service {
    display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
    background: #fff; border: 1px solid var(--tl-border); border-radius: 10px;
    padding: 1rem 1.1rem; transition: border-color .15s ease, background-color .15s ease;
}
.tl-service:hover { border-color: var(--tl-selected-border); }
.tl-service:focus { outline: none; }
.tl-service:focus-visible { outline: 2px solid var(--tl-selected-border); outline-offset: 2px; }
.tl-service.is-selected { background: var(--tl-selected-bg); border-color: var(--tl-selected-border); }

.tl-service__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tl-service__name { font-weight: 700; color: var(--tl-ink); font-size: 1rem; }
.tl-service__price { font-weight: 700; color: var(--tl-ink); white-space: nowrap; font-size: 1rem; }
.tl-service__meta {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
    margin-top: 0.4rem; color: var(--tl-muted); font-size: 0.88rem;
}
.tl-service__dur { white-space: nowrap; }
.tl-service__meta { flex-wrap: nowrap; align-items: flex-start; }
.tl-service__desc {
    flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.tl-service__desc.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
.tl-service__more {
    flex: none; align-self: flex-end; margin-right: auto; padding: 0; border: 0; background: none;
    font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--tl-ink); text-decoration: underline;
    cursor: pointer;
}
.tl-service__meta.tl-wide { flex-wrap: wrap; }
.tl-service__meta.tl-wide .tl-service__desc { flex-basis: 100%; }
.tl-service__meta.tl-wide .tl-service__dur { margin-left: auto; }
.tl-service__dur i { font-size: 1rem; vertical-align: -1px; }

.tl-providers-label {
    margin: 1.75rem 0 0.8rem; font-size: 0.8rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--tl-muted);
}
.tl-providers { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.tl-provider {
    display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font: inherit;
    min-height: 46px; padding: 0.55rem 1rem; border-radius: 8px;
    background: #fff; border: 1px solid var(--tl-border); color: var(--tl-ink);
    transition: border-color .15s ease, background-color .15s ease;
}
.tl-provider:hover { border-color: var(--tl-selected-border); }
.tl-provider:focus { outline: none; }
.tl-provider:focus-visible { outline: 2px solid var(--tl-selected-border); outline-offset: 2px; }
.tl-provider.is-selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Prikaz s slikicami */
.tl-providers--photos .tl-provider { padding-left: 0.5rem; border-radius: 999px; }
.tl-provider__img {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
    background: #f1f1f1; display: inline-flex; align-items: center; justify-content: center;
}
.tl-provider__img i { font-size: 1.2rem; color: var(--tl-muted); }
.tl-provider.is-selected .tl-provider__img i { color: #fff; }
.tl-provider.is-selected .tl-provider__img--any { background: rgba(255,255,255,.25); }

@media (max-width: 575px) {
    .tl-cat__head { font-size: 1.05rem; }
    .tl-provider { flex: 1 1 calc(50% - 0.6rem); justify-content: center; }
    .tl-providers--photos .tl-provider { justify-content: flex-start; }
}

/* Povzetek izbranih storitev */
.tl-summary {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem;
    margin-top: 1rem; padding: 0.8rem 1.1rem; border-radius: 10px;
    background: var(--tl-selected-bg); color: var(--tl-ink); font-size: 0.95rem;
}
.tl-summary:empty { display: none; }
.tl-summary__total { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; color: var(--tl-muted); }
.tl-summary__total b { margin-left: 0.9rem; color: var(--tl-ink); font-size: 1.05rem; }

/* Kvadratek za izbiro več storitev */
.tl-service { display: flex; align-items: flex-start; gap: 0.85rem; }
.tl-service__body { flex: 1; min-width: 0; }
.tl-service__check {
    flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 5px;
    border: 1.5px solid #cfcfcf; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.tl-service__check i { font-size: 0.85rem; color: #fff; opacity: 0; }
.tl-service.is-selected .tl-service__check { background: var(--tl-selected-border); border-color: var(--tl-selected-border); }
.tl-service.is-selected .tl-service__check i { opacity: 1; }

/* ---------- Telefon: kompaktna glava, vse pomembno takoj vidno, gumb vedno pri roki ---------- */
.tl-bar-info { display: none; }

@media (max-width: 767px) {
    .m-login.m-login--2 .m-login__wrapper { padding: 10px 8px 0; margin-bottom: 0; }
    /* kartica: ena širina na telefonu in vmesnih zaslonih, na sredini */
    .m-login__wrapper .m-container { width: 100% !important; max-width: 600px; margin: 0 auto; padding: 0; }
    .m-portlet.border-radius-15 { margin-bottom: 10px; }

    /* glava: majhen logotip in naslov v eni vrsti */
    .m-portlet__head { height: auto !important; min-height: 0; padding: 12px 16px !important; }
    .m-portlet__head .m--block-inline { display: flex !important; align-items: center; gap: 12px; }
    .m-portlet__head .max-h-logo { max-height: 76px !important; max-width: 170px !important; width: auto; }
    .m-portlet__head .m-portlet__head-text { margin: 0 !important; font-size: 1.05rem; }

    /* koraki: manjši šestkotniki */
    #m_wizard .col-xl-3 { padding-top: 12px !important; padding-bottom: 0 !important; }
    .m-wizard__step-number svg { width: 40px; height: 40px; }
    /* koraki na sredini kartice, enakomerni razmiki */
    #m_wizard .m-wizard__nav { display: flex !important; justify-content: center; width: 100% !important; }
    .m-wizard__steps { justify-content: center !important; gap: 10px; width: auto !important; margin: 0 auto; }
    .m-wizard__steps .m-wizard__step { flex: 0 0 auto !important; width: auto !important; }

    .m-wizard__form { padding-top: 0 !important; }
    /* enoten notranji rob kartice 16 px (glava, vsebina, spodnja vrstica) */
    #m_form .m-wizard__form-step { padding-left: 0 !important; padding-right: 0 !important; }
    #m_form > .m-portlet__body { padding: 0 16px !important; }
    .m-form__heading { margin-bottom: 0.6rem !important; }
    .m-form__heading-title { font-size: 1.25rem !important; color: var(--tl-ink) !important; }
    .tl-help { margin: 0 0 1rem; font-size: 0.9rem; }

    .tl-service { padding: 0.9rem; }
    .tl-cat__head { padding: 1rem 0.15rem; min-height: 56px; }

    /* izvajalci na svojem koraku: veliki gumbi čez celo širino */
    .tl-providers { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
    .tl-provider { min-height: 56px; justify-content: flex-start; font-size: 1rem; padding: 0.6rem 1rem; }
    .tl-providers--photos .tl-provider { border-radius: 12px; padding-left: 0.6rem; }
    .tl-provider__img { width: 40px; height: 40px; }

    /* spodnja vrstica z gumbi ostane pripeta na dno zaslona */
    #m_form .m-portlet__foot {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0 !important;
        background: #fff; border-top: 1px solid var(--tl-border);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
        padding: 10px 24px calc(12px + env(safe-area-inset-bottom)) !important;
    }
    /* vsebina vrstice poravnana z vsebino kartice (kartica 600 px, notranji rob 16 px) */
    #m_form .m-portlet__foot .m-form__actions { max-width: 568px; margin: 0 auto; }
    /* prostor, da pripeta vrstica ne prekrije zadnje vsebine */
    #m_form { padding-bottom: 120px; }
    .m-portlet__head .m-portlet__head-custom-caption { padding: 0 !important; }
    .m-wizard__nav { margin: 4px 0 0 !important; padding-bottom: 6px !important; }
    #m_form .m-form__actions .btn > span { display: inline-flex; align-items: center; justify-content: center; }
    #m_form .m-form__actions { padding: 0 !important; }
    #m_form .m-form__actions .row { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0; }
    #m_form .m-form__actions .col-6 { padding: 0; flex: 0 0 auto; max-width: none; width: auto; }
    #m_form .m-form__actions .col-6.m--align-right { flex: 1 1 auto; }
    #m_form .m-form__actions .btn { min-height: 48px; font-size: 1rem; }
    #m_form .m-form__actions .m--align-right .btn { width: 100%; }
    #m_form [data-wizard-action="prev"] { padding-left: 14px; padding-right: 14px; }
    #m_form [data-wizard-action="prev"] span span:not(:empty) { display: none; }
    #m_form [data-wizard-action="prev"] i { margin: 0; }

    /* na 1. koraku ni gumba Nazaj, zato naj Nadaljuj zavzame celo širino */
    .m-wizard--step-first #m_form .m-form__actions .m--align-left { display: none; }

    /* osebni podatki: polja 16px, da iOS ob tipkanju ne poveča strani */
    #m_form input.form-control, #m_form textarea.form-control { font-size: 16px; min-height: 46px; }

    .tl-bar-info {
        display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
        font-size: 0.88rem; color: var(--tl-muted); margin-bottom: 8px;
    }
    .tl-bar-info:empty { display: none; }
    .tl-bar-info b { color: var(--tl-ink); font-size: 1rem; }
    .tl-bar-info i { vertical-align: -1px; }
    /* na telefonu je povzetek v spodnji vrstici, zato ga v vsebini skrijemo */
    .tl-summary { display: none; }
}

/* ---------- Potrditev: termin na vrhu, prazna polja skrita ---------- */
#m_wizard_form_step_4 .tab-content { display: flex; flex-direction: column; }
#m_wizard_form_step_4 .tab-content > .m-form__section:last-of-type { order: -1; }
#m_wizard_form_step_4 .tab-content > .m-separator { display: none; }
#m_wizard_form_step_4 .tab-content > .m-form__section + .m-form__section,
#m_wizard_form_step_4 .tab-content > .m-separator + .m-form__section { border-top: 1px dashed var(--tl-border); padding-top: 1rem; }
#m_wizard_form_step_4 .tab-content > .m-form__section:last-of-type { border-top: 0; padding-top: 0; }
#m_wizard_form_step_4 .tab-content > .m-form__section:first-of-type { border-top: 1px dashed var(--tl-border); padding-top: 1rem; margin-top: 1rem; }
#m_wizard_form_step_4 .form-group:not(:has(.m-form__control-static:not(:empty))) { display: none; }
#m_wizard_form_step_4 .m-form__section:not(:has(.m-form__control-static:not(:empty))) { display: none !important; }

@media (max-width: 767px) {
    #m_wizard_form_step_4 .m-accordion__item { border: 0; }
    #m_wizard_form_step_4 .m-form__heading-title.pt-3 { padding: 0 !important; }
    #m_wizard_form_step_4 .tab-content { padding: 0.75rem 0 0 !important; }
    #m_wizard_form_step_4 .m-form__heading { margin-bottom: 0.4rem !important; }
    #m_wizard_form_step_4 h4.m-form__heading-title { font-size: 0.8rem !important; text-transform: uppercase; letter-spacing: .08em; color: var(--tl-muted) !important; }
    #m_wizard_form_step_4 .form-group.row { display: flex; flex-wrap: nowrap; gap: 1rem; margin: 0 !important; padding: 0.35rem 0 !important; }
    #m_wizard_form_step_4 .form-group.row > label { flex: 0 0 38%; max-width: 38%; padding: 0 !important; color: var(--tl-muted); font-weight: 400; }
    #m_wizard_form_step_4 .form-group.row > div { flex: 1; max-width: none; padding: 0 !important; text-align: right; }
    #m_wizard_form_step_4 .m-form__control-static { padding: 0 !important; color: var(--tl-ink) !important; font-weight: 600; }
}

/* ---------- Izbira termina: trak dni + ure ---------- */
.tl-days-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.tl-days-month { font-weight: 700; color: var(--tl-ink); font-size: 1rem; text-transform: capitalize; }
.tl-days-nav { display: inline-flex; gap: 6px; }
.tl-days-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--tl-border); background: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--tl-ink);
}
.tl-days-btn:hover { border-color: var(--tl-selected-border); }

.tl-days {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
    padding: 4px 2px 10px; margin: 0 -2px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tl-days::-webkit-scrollbar { display: none; }

.tl-day {
    flex: 0 0 56px; height: 76px; scroll-snap-align: start; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 12px; border: 1px solid var(--tl-border); background: #fff; font: inherit; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.tl-day__wd { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tl-muted); }
.tl-day__num { font-size: 1.3rem; font-weight: 700; color: var(--tl-ink); line-height: 1.1; }
.tl-day__dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.tl-day.is-month-start { margin-left: 10px; }
.tl-day.is-month-start::before {
    content: ""; position: absolute; left: -10px; top: 14px; bottom: 14px; width: 1px; background: var(--tl-border);
}

/* prost dan: izrazit */
.tl-day.is-free { border-color: var(--tl-selected-border); background: var(--tl-selected-bg); }
.tl-day.is-free .tl-day__dot { background: var(--tl-selected-border); }
.tl-day.is-free:hover { transform: translateY(-1px); }
/* zaseden ali zaprt dan: zbledel, ni ga mogoče izbrati */
.tl-day.is-off { background: #fafafa; border-color: #f0f0f0; cursor: default; }
.tl-day.is-off .tl-day__num, .tl-day.is-off .tl-day__wd { color: #c8c8c8; font-weight: 400; }
/* izbran dan */
.tl-day.is-selected { background: var(--tl-selected-border); border-color: var(--tl-selected-border); }
.tl-day.is-selected .tl-day__num, .tl-day.is-selected .tl-day__wd { color: #fff; }
.tl-day.is-selected .tl-day__dot { background: #fff; }
.tl-day:focus { outline: none; }
.tl-day:focus-visible { outline: 2px solid var(--tl-selected-border); outline-offset: 2px; }

.tl-hours-title { margin: 1.25rem 0 0.6rem; font-size: 1rem; color: var(--tl-ink); }
.tl-hours-title b::first-letter { text-transform: uppercase; }
.tl-hours-hint { color: var(--tl-muted); font-size: 0.95rem; }
.tl-hours { display: block !important; }
.tl-hours-group + .tl-hours-group { margin-top: 1rem; }
.tl-hours-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tl-muted); margin-bottom: 0.5rem; }
.tl-hours-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tl-hour {
    min-height: 46px; border-radius: 10px; border: 1px solid var(--tl-border); background: #fff;
    font: inherit; font-size: 1rem; color: var(--tl-ink); cursor: pointer;
}
.tl-hours .tl-hour { width: auto !important; }  /* custom.css originala daje .available-hour fiksno širino */
.tl-hour:hover { border-color: var(--tl-selected-border); }
.tl-hours .tl-hour.selected-hour { background: var(--tl-selected-border) !important; border-color: var(--tl-selected-border) !important; color: #fff !important; font-weight: 700; }
.tl-hour:focus { outline: none; }
.tl-hour:focus-visible { outline: 2px solid var(--tl-selected-border); outline-offset: 2px; }

@media (max-width: 767px) {
    .tl-days-nav { display: none; }   /* na telefonu se drsi s prstom */
    /* trak sega do desnega roba kartice, tako se vidi del naslednjega dne in je jasno, da se drsi */
    .tl-days { margin-right: -30px; padding-right: 30px; }
    .tl-day { flex-basis: 54px; }
    .tl-hours-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Zadnji korak: kartica rezervacije ---------- */
#m_wizard_form_step_4 .m-accordion { display: none; }   /* izvirna tabela ostane le za obrazec */
.tl-review__card { border: 1px solid var(--tl-border); border-radius: 14px; overflow: hidden; background: #fff; }
.tl-review__card section { padding: 1rem 1.1rem; }
.tl-review__card section + section { border-top: 1px solid var(--tl-border); }
.tl-review__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tl-muted); margin-bottom: 0.45rem; }

.tl-review__when { background: var(--tl-selected-bg); }
.tl-review__date { font-size: 1.2rem; font-weight: 700; color: var(--tl-ink); }
.tl-review__date::first-letter { text-transform: uppercase; }
.tl-review__time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; font-size: 1.05rem; color: var(--tl-ink); margin-top: 0.15rem; }
.tl-review__time span { font-size: 0.88rem; color: var(--tl-muted); }
.tl-review__prov { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.75rem; color: var(--tl-ink); }
.tl-review__prov i { font-size: 1.15rem; margin-top: 1px; color: var(--tl-muted); }
.tl-review__prov div { display: flex; flex-direction: column; }
.tl-review__prov small { color: var(--tl-muted); font-size: 0.85rem; }

.tl-review__items, .tl-review__me { list-style: none; margin: 0; padding: 0; }
.tl-review__item { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.45rem 0; }
.tl-review__item + .tl-review__item { border-top: 1px dashed var(--tl-border); }
.tl-review__name { display: flex; flex-direction: column; color: var(--tl-ink); font-weight: 600; }
.tl-review__name small { font-weight: 400; color: var(--tl-muted); font-size: 0.85rem; margin-top: 2px; }
.tl-review__price { white-space: nowrap; color: var(--tl-ink); font-weight: 600; }
.tl-review__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.6rem; padding-top: 0.7rem; border-top: 1px solid var(--tl-border); color: var(--tl-ink); }
.tl-review__total b { font-size: 1.25rem; }

.tl-review__me li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.3rem 0; color: var(--tl-ink); word-break: break-word; }
.tl-review__me i { font-size: 1.1rem; color: var(--tl-muted); margin-top: 2px; flex: none; }

.tl-review__note { display: flex; gap: 0.5rem; align-items: flex-start; margin: 1rem 0 0; color: var(--tl-muted); font-size: 0.9rem; }
.tl-review__note i { font-size: 1.1rem; margin-top: 1px; }

/* ---------- Enotni poudarki in berljivost ---------- */
/* glavni gumb: temno besedilo na bež podlagi (sivo je bilo slabo berljivo) */
#m_form .btn-imprion-success, #m_form .btn-imprion-success:hover, #m_form .btn-imprion-success:focus { color: var(--tl-ink) !important; font-weight: 700; }
/* izbran izvajalec enako kot izbran dan in ura */
.tl-provider.is-selected { background: var(--tl-selected-border); border-color: var(--tl-selected-border); color: #fff; font-weight: 700; }
/* na zadnjem koraku je znesek že v kartici */
.m-wizard--step-last .tl-bar-info { display: none !important; }
.tl-review__name small i { font-size: 0.95rem; vertical-align: -1px; }

/* ---------- Komentarji sodelavca: seznam brez kategorij, iskalnik, začetnice, preskok koraka ---------- */
/* salon brez kategorij: kartice takoj, brez zavihka in črt */
.tl-cats--flat { border-top: 0; }
.tl-cats--flat .tl-cat { border-bottom: 0; }
.tl-cats--flat .tl-cat__body { padding: 0; }
/* veliko storitev: opis v eni vrstici, da je na zaslonu vidnih več kartic */
.tl-cats--compact .tl-service { padding: 0.8rem 1rem; }
.tl-cats--compact .tl-service__desc { -webkit-line-clamp: 1; line-clamp: 1; }

.tl-search { position: relative; margin-bottom: 0.9rem; }
.tl-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: var(--tl-muted); pointer-events: none; }
.tl-search__input {
    width: 100%; height: 48px; padding: 0 14px 0 42px; border-radius: 10px;
    border: 1px solid var(--tl-border) !important; background: #fff; font: inherit; font-size: 16px; color: var(--tl-ink);
}
.tl-search__input:focus { outline: none; border-color: var(--tl-selected-border) !important; }
.tl-search__empty { color: var(--tl-muted); margin: 0.5rem 0 0; }

/* začetnice, ko izvajalec nima fotografije */
.tl-provider__img--initials { background: var(--tl-selected-bg); color: var(--tl-ink); font-weight: 700; font-size: 0.85rem; letter-spacing: .02em; }
.tl-provider.is-selected .tl-provider__img--initials { background: rgba(255,255,255,.25); color: #fff; }

/* en sam izvajalec: korak 2 se ne prikaže v navigaciji */
.tl-skip-provider .m-wizard__step[m-wizard-target="m_wizard_form_step_provider"] { display: none !important; }

/* ime salona namesto logotipa */
.tl-logo-text { display: inline-block; font-size: 1.6rem; font-weight: 700; color: var(--tl-ink); letter-spacing: .02em; padding: 0.5rem 0; }

/* ime storitve v spodnji vrstici: ena vrstica s tropičjem */
.tl-bar-info__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bar-info > span:last-child { flex: none; }

@media (max-width: 767px) {
    .tl-logo-text { font-size: 1.15rem; padding: 0; }
}

/* ---------- Tab #3: izbirnik meseca, prvi prosti termin, zasedenost dneva ---------- */
:root { --tl-many: #4E9E86; --tl-few: #E39A2D; }

.tl-first-free {
    display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.9rem; padding: 0 1rem; min-height: 44px;
    border-radius: 999px; border: 1px solid var(--tl-selected-border); background: #fff; color: var(--tl-ink);
    font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.tl-first-free i { font-size: 1.1rem; color: var(--tl-selected-border); }
.tl-first-free:hover { background: var(--tl-selected-bg); }
.tl-first-free[hidden] { display: none; }

.tl-month { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.tl-month__label { font-weight: 700; font-size: 1.1rem; color: var(--tl-ink); text-transform: capitalize; }
.tl-month__btn {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tl-border); background: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--tl-ink); font-size: 1.2rem;
}
.tl-month__btn:hover:not(:disabled) { border-color: var(--tl-selected-border); }
.tl-month__btn:disabled { opacity: .35; cursor: default; }

.tl-days.is-empty { min-height: 0; }
.tl-days__empty { color: var(--tl-muted); padding: 0.75rem 0; white-space: normal; }

/* zasedenost: zelena = veliko prostih, oranžna = še nekaj prostih, brez pike = zasedeno ali zaprto */
.tl-day__dot { width: 7px; height: 7px; }
.tl-day.is-many .tl-day__dot { background: var(--tl-many); }
.tl-day.is-few .tl-day__dot { background: var(--tl-few); }
.tl-day.is-selected .tl-day__dot { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

.tl-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.15rem; font-size: 0.82rem; color: var(--tl-muted); }
.tl-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tl-legend__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tl-legend__dot.is-many { background: var(--tl-many); }
.tl-legend__dot.is-few { background: var(--tl-few); }

/* ---------- Telefon: poenoteni razmiki, okvirji in robovi ---------- */
@media (max-width: 767px) {
    /* glava in koraki: enakomeren zrak nad in pod šestkotniki */
    #m_wizard .col-xl-3 { padding-top: 14px !important; }
    #m_wizard .m-wizard__nav { margin: 0 !important; padding-bottom: 0 !important; }
    #m_form .m-wizard__form-step { padding-top: 14px !important; }

    /* naslovi kategorij poravnani s karticami */
    .tl-cat__head { padding-left: 0; padding-right: 2px; }

    /* trak dni sega do obeh robov kartice in se pod njima skrije */
    .tl-days { margin-left: -16px; margin-right: -16px; padding: 4px 16px 10px; scroll-padding: 0 16px; }

    /* manj praznega prostora pod vsebino: prostor za pripeto vrstico je na dnu strani */
    #m_form { padding-bottom: 8px; }
    body { padding-bottom: 116px; }

    /* obrazec: vsa polja enak razmik, napaka tik pod poljem */
    #m_wizard_form_step_3 .form-group.row { display: block; margin: 0 !important; padding: 0 !important; }
    #m_wizard_form_step_3 .m-form__group-sub,
    #m_wizard_form_step_3 .form-group.row > [class*="col-"] { padding: 0 !important; margin: 0 0 16px; max-width: none; }
    #m_wizard_form_step_3 .form-control-label { margin-bottom: 6px; font-size: 0.95rem; color: var(--tl-ink); }
    #m_wizard_form_step_3 .has-danger .form-control-label { color: #e0526a; }
    #m_wizard_form_step_3 .form-control-feedback { margin-top: 5px; font-size: 0.85rem; }
    #m_wizard_form_step_3 .m-form__help { display: block; padding-top: 5px; font-size: 0.85rem; color: var(--tl-muted); }
    #m_wizard_form_step_3 textarea.form-control { min-height: 88px; }
    #m_wizard_form_step_3 .m-checkbox { display: block; width: 100%; margin: 4px 0 0; line-height: 1.45; font-size: 0.92rem; color: var(--tl-ink); }
    #m_wizard_form_step_3 .m-checkbox > span { top: 1px; }

    /* zadnji korak: kartica brez dvojnega zgornjega roba */
    .tl-review .m-form__heading { margin-bottom: 0.4rem !important; }
}

/* povezava do pravil zasebnosti: berljiva */
#m_form .btn-imprion-link { color: var(--tl-ink) !important; text-decoration: underline; font-weight: 700; }
#m_form .form-control.m-input { border-radius: 10px; }

/* ---------- Kontrast izbire, okno potrditve, soglasje, polna kartica ---------- */
/* temnejši odtenek barve salona za izbrane gumbe z belim besedilom (dovolj kontrasta) */
:root { --tl-strong: color-mix(in srgb, var(--color-primary) 25%, #5a4b2e); }
.tl-provider.is-selected,
.tl-day.is-selected,
.tl-hours .tl-hour.selected-hour { background: var(--tl-strong) !important; border-color: var(--tl-strong) !important; color: #fff !important; }
.tl-day.is-selected .tl-day__num, .tl-day.is-selected .tl-day__wd { color: #fff !important; }
.tl-service.is-selected .tl-service__check { background: var(--tl-strong); border-color: var(--tl-strong); }
.tl-service.is-selected { border-color: var(--tl-strong); }

/* soglasje: kvadratek v barvah strani namesto modre */
#m_form .m-checkbox > span { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #cfcfcf !important; background: #fff !important; }
#m_form .m-checkbox > input:checked ~ span { background: var(--tl-strong) !important; border-color: var(--tl-strong) !important; }
#m_form .m-checkbox > input:checked ~ span:after { border-color: #fff !important; }

/* navodila pod naslovi: normalen razmik med vrsticami */
.tl-help { line-height: 1.45; }

/* okno po oddaji: zaobljeno, z robom od zaslona, gumb v slogu strani */
.swal2-popup { border-radius: 16px !important; width: min(420px, calc(100% - 32px)) !important; padding: 1.75rem 1.25rem 1.25rem !important; }
.swal2-popup .swal2-content { font-size: 1rem; line-height: 1.5; color: var(--tl-ink); }
.swal2-popup .swal2-actions { width: 100%; margin-top: 1.25rem; }
.swal2-popup .swal2-confirm.btn {
    width: 100%; min-height: 48px; border-radius: 10px !important; border: 0 !important;
    background: var(--color-primary) !important; color: var(--tl-ink) !important; font-weight: 700; font-size: 1rem;
}

@media (max-width: 767px) {
    /* kratka vsebina: kartica vseeno sega do spodnje vrstice, brez praznine z ozadjem vmes */
    .m-portlet.border-radius-15 { min-height: calc(100vh - 136px); display: flex; flex-direction: column; }
    .m-portlet.border-radius-15 > .m-portlet__body { flex: 1; }
}

@media (max-width: 767px) {
    /* »Powered by« in jezik na dnu kartice, ne sredi praznega prostora */
    .m-portlet.border-radius-15 > .m-portlet__body { display: flex; flex-direction: column; }
    #m_wizard { flex: 1; display: flex; flex-direction: column; }
    #m_wizard > .row { flex: 1; flex-direction: column; flex-wrap: nowrap; }
    #m_wizard > .row > .col-xl-9 { flex: 1; display: flex; flex-direction: column; }
    #m_wizard .m-wizard__form { flex: 1; display: flex; flex-direction: column; }
    #m_wizard .m-wizard__form > .mobile-only { margin-top: auto; }
}

/* ---------- Timelee: counter (up to 3 appointments), incompatible services, three dot levels ---------- */
.tl-native { display: none !important; }

.tl-service { align-items: center; }
.tl-count { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.tl-count__minus, .tl-count__plus {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--tl-border); background: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--tl-ink); padding: 0;
}
.tl-count__minus:hover:not(:disabled), .tl-count__plus:hover:not(:disabled) { border-color: var(--tl-strong); }
.tl-count__minus:disabled, .tl-count__plus:disabled { opacity: .35; cursor: default; }
.tl-count__n { min-width: 1.2rem; text-align: center; font-weight: 700; color: var(--tl-ink); }
.tl-service:not(.is-selected) .tl-count__minus, .tl-service:not(.is-selected) .tl-count__n { display: none; }
.tl-service.is-selected .tl-count__plus { background: var(--tl-strong); border-color: var(--tl-strong); color: #fff; }
.tl-service.is-selected .tl-count__plus:disabled { background: #fff; border-color: var(--tl-border); color: var(--tl-ink); }

.tl-service__hint { display: none; margin-top: 0.35rem; font-size: 0.82rem; color: var(--tl-muted); }
.tl-service.is-disabled { opacity: .5; cursor: not-allowed; }
.tl-service.is-disabled:hover { border-color: var(--tl-border); }
.tl-service.is-disabled .tl-service__hint { display: block; }

:root { --tl-green: #4E9E86; --tl-yellow: #E3B12D; --tl-red: #D9534F; }
.tl-day.is-green .tl-day__dot, .tl-legend__dot.is-green { background: var(--tl-green); }
.tl-day.is-yellow .tl-day__dot, .tl-legend__dot.is-yellow { background: var(--tl-yellow); }
.tl-day.is-red .tl-day__dot, .tl-legend__dot.is-red { background: var(--tl-red); }
.tl-day.is-selected .tl-day__dot { background: #fff; }

.tl-review__item small b { font-weight: 600; }

@media (max-width: 575px) {
    /* phone: the counter goes under the text so long names keep the full width */
    .tl-service { flex-wrap: wrap; row-gap: 0.5rem; }
    .tl-service__body { flex-basis: 100%; }
    .tl-count { margin-left: auto; }
}

/* ---------- Theme colours: buttons, checkbox and the appointment header use the company colours ---------- */
:root {
    --tl-strong: var(--color-primary);
    --tl-on-strong: var(--color-text);
}
#m_form .btn-imprion-success,
#m_form .btn-imprion-success:focus {
    background: var(--color-primary) !important; border-color: var(--color-primary) !important;
    color: var(--color-text) !important; font-weight: 700;
}

#m_form [data-wizard-action="prev"],
#m_form [data-wizard-action="prev"]:focus {
    background: var(--color-secondary) !important; border-color: var(--color-secondary) !important; color: var(--color-text) !important;
}
/* hover colours only where there is a mouse: on phones a tapped button keeps :hover and would look like the other one */
@media (hover: hover) and (pointer: fine) {
    #m_form .btn-imprion-success:hover:not(:disabled) {
        background: var(--color-secondary) !important; border-color: var(--color-secondary) !important; color: var(--color-text) !important;
    }
    #m_form [data-wizard-action="prev"]:hover {
        background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--color-text) !important;
    }
}
#m_form .btn-imprion-success:active { color: var(--color-text) !important; }

.tl-provider.is-selected,
.tl-day.is-selected,
.tl-hours .tl-hour.selected-hour,
.tl-service.is-selected .tl-count__plus:not(:disabled) {
    background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--color-text) !important;
}
.tl-day.is-selected .tl-day__num, .tl-day.is-selected .tl-day__wd { color: var(--color-text) !important; }
.tl-day.is-selected .tl-day__dot { background: var(--color-text); }
.tl-provider.is-selected .tl-provider__img i,
.tl-provider.is-selected .tl-provider__img--initials { color: var(--color-text); }
.tl-provider:hover, .tl-hour:hover, .tl-day.is-free:hover, .tl-month__btn:hover:not(:disabled),
.tl-count__minus:hover:not(:disabled), .tl-count__plus:hover:not(:disabled) { border-color: var(--color-secondary); }
.tl-service.is-selected { border-color: var(--color-primary); }

.tl-first-free { border-color: var(--color-primary); }
.tl-first-free i { color: var(--color-primary); }
.tl-first-free:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-text); }
.tl-first-free:hover i { color: var(--color-text); }

#m_form .m-checkbox > input:checked ~ span { background: var(--color-primary) !important; border-color: var(--color-primary) !important; }
#m_form .m-checkbox > input:checked ~ span:after { border-color: var(--color-text) !important; }

.swal2-popup .swal2-confirm.btn { background: var(--color-primary) !important; color: var(--color-text) !important; }

.tl-review__when { background: var(--color-primary); color: var(--color-text); }
.tl-review__when .tl-review__label,
.tl-review__when .tl-review__date,
.tl-review__when .tl-review__time,
.tl-review__when .tl-review__time span,
.tl-review__when .tl-review__prov,
.tl-review__when .tl-review__prov i,
.tl-review__when .tl-review__prov small { color: var(--color-text); }
.tl-review__when .tl-review__label, .tl-review__when .tl-review__time span, .tl-review__when .tl-review__prov small { opacity: .85; }

/* ---------- Phone: centred button content, space for the fixed bottom bar ---------- */
@media (max-width: 767px) {
    /* icon and label centred both ways (the wizard still decides which buttons are shown);
       the   between icon and label is dropped with font-size 0 and replaced by a margin */
    #m_form .m-form__actions .btn { height: 48px; min-height: 48px; padding-top: 0; padding-bottom: 0; vertical-align: middle; }
    #m_form .m-form__actions .btn > span { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 0; line-height: 1; }
    #m_form .m-form__actions .btn > span > span,
    #m_form .m-form__actions .btn > span > i { font-size: 1rem; line-height: 1; margin: 0; }
    #m_form .m-form__actions .btn > span > i { font-size: 1.2rem; }
    #m_form .m-form__actions [data-wizard-action="next"] > span > i { margin-left: 0.5rem; }
    #m_form .m-form__actions [data-wizard-action="submit"] > span > i { margin-right: 0.5rem; }

    /* the card ends above the fixed bar (its height is measured by wizard.js), so logo and language stay visible */
    body { padding-bottom: 0; }
    .m-portlet.border-radius-15 {
        margin-bottom: calc(var(--tl-foot-h, 120px) + 12px) !important;
        min-height: calc(100vh - var(--tl-foot-h, 120px) - 32px);
    }
}

/* back arrow in the company text colour */
#m_form [data-wizard-action="prev"] i,
#m_form [data-wizard-action="prev"]:hover i { color: var(--color-text) !important; }
#m_form .btn-imprion-success i { color: var(--color-text) !important; }

/* duration always sits under the price, also for services without a description */
.tl-service__dur { margin-left: auto; }

/* one service per booking (company setting): no counter, the card itself is the choice */
.tl-cats--single .tl-count { display: none; }

/* honeypot field: out of sight for people, still in the form for bots */
.tl-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }