/* ==========================================================================
   Klik za Termin — dark redesign (additive overlay, loads LAST)
   Pass 1: theme tokens, typography, dark surfaces, de-rainbowed categories.
   Safe & reversible: remove the <link> in frontend/layout.blade.php to revert.
   Fonts are linked from Google Fonts in the layout <head>.
   ========================================================================== */

:root {
  --klik-bg:        #131417;   /* warm near-black page ground */
  --klik-surface:   #1B1D22;   /* raised card / header / footer */
  --klik-surface-2: #262930;   /* inputs, chips, nested fills */
  --klik-border:    #363A43;   /* hairline borders / dividers */
  --klik-text:      #EEF0F4;   /* primary text */
  --klik-muted:     #9FA5B1;   /* secondary text */
  --klik-accent:    var(--color-primary, #E8730C); /* brand orange (admin-driven) */
  --klik-radius:    16px;
  --klik-font:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --klik-display:   "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --klik-mono:      "Space Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ---------- Base ---------- */
body {
  background: var(--klik-bg) !important;
  color: var(--klik-text);
  font-family: var(--klik-font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.title, .card-title, .product-title, .name {
  font-family: var(--klik-display) !important;
  color: var(--klik-text);
  letter-spacing: -0.01em;
}
p, .text, li { color: var(--klik-text); }
.font-sm, .color-light, .text-muted, .designation { color: var(--klik-muted) !important; }
.color-white, .color-white * { color: var(--klik-text) !important; }
a { color: var(--klik-text); }
a:hover { color: var(--klik-accent); }
.bg-white { background: var(--klik-surface) !important; }
.border { border-color: var(--klik-border) !important; }
hr { border-color: var(--klik-border) !important; }

/* ---------- Section titles ---------- */
.section-title .title { color: var(--klik-text) !important; }

/* ---------- Header ---------- */
header, .header, .header-area, .header-wrapper {
  background: rgba(19, 20, 23, 0.86) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--klik-border) !important;
}
.header a, .navbar a, .main-menu a, .nav-menu a { color: var(--klik-text) !important; }
.header a:hover, .main-menu a:hover, .nav-menu a:hover { color: var(--klik-accent) !important; }

/* ---------- Cards (service, vendor, category) ---------- */
.product-default,
.category-area .card:not(.cat-photo-card),
.works-area .card,
.slider-item {
  background: var(--klik-surface) !important;
  border: 1px solid var(--klik-border) !important;
  border-radius: var(--klik-radius) !important;
  color: var(--klik-text);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Category PHOTO cards: keep the partner/category image as the background —
   only add a hairline border + a scrim so the overlaid name stays legible. */
.category-area .cat-photo-card {
  border: 1px solid var(--klik-border) !important;
  border-radius: var(--klik-radius) !important;
}
.cat-photo-card .cat-photo-overlay { background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 60%, transparent 100%) !important; }
.cat-photo-overlay, .cat-photo-overlay * { color: #fff !important; }
.product-default:hover,
.category-area .card:hover {
  transform: translateY(-4px);
  border-color: var(--klik-accent) !important;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .7);
}
.product-title a, .card-title a { color: var(--klik-text) !important; }
.product-title a:hover, .card-title a:hover { color: var(--klik-accent) !important; }
.tag {
  background: var(--klik-surface-2) !important;
  color: var(--klik-muted) !important;
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---------- Category tiles: kill the rainbow, unify on brand orange ---------- */
.category-area [class*="icon-bg"] {
  background: linear-gradient(145deg, var(--klik-accent),
              color-mix(in srgb, var(--klik-accent) 68%, #000)) !important;
  box-shadow: none !important;
  color: #fff !important;
}
.category-area [class*="icon-bg"] i { color: #fff !important; }

/* ---------- Service images (partner-uploaded photos) ---------- */
.product-img img { object-fit: cover; }

/* ---------- Prices in mono ---------- */
.product-price .new-price {
  font-family: var(--klik-mono) !important;
  color: var(--klik-text) !important;
  font-weight: 700;
}
.product-price .prev-price {
  font-family: var(--klik-mono) !important;
  color: var(--klik-muted) !important;
  text-decoration: line-through;
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-gradient {
  background: var(--klik-accent) !important;
  border-color: var(--klik-accent) !important;
  color: #fff !important;
  border-radius: 12px !important;
}
.btn-primary:hover, .btn-gradient:hover { filter: brightness(0.92); }
.btn-outline-2 {
  border: 1px solid var(--klik-border) !important;
  color: var(--klik-text) !important;
  background: transparent !important;
  border-radius: 12px !important;
}
.btn-outline-2:hover { border-color: var(--klik-accent) !important; color: var(--klik-accent) !important; }
.btn-icon {
  background: var(--klik-surface-2) !important;
  border-color: var(--klik-border) !important;
  color: var(--klik-muted) !important;
}
.btn-icon.wishlist-active, .btn-icon:hover { color: var(--klik-accent) !important; }

/* ---------- Hero search form ---------- */
.banner-filter-form .form-wrapper {
  background: var(--klik-surface) !important;
  border: 1px solid var(--klik-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8) !important;
}
.form-control {
  background: var(--klik-surface-2) !important;
  border: 1px solid var(--klik-border) !important;
  color: var(--klik-text) !important;
}
.form-control::placeholder { color: var(--klik-muted) !important; }
.input-group label i, .text-gradient {
  color: var(--klik-accent) !important;
  -webkit-text-fill-color: var(--klik-accent) !important;
  background: none !important;
}
.input-group .vr { background: var(--klik-border) !important; }

/* ---------- Tabs (latest services) ---------- */
.tabs-navigation .nav-link {
  background: var(--klik-surface) !important;
  border: 1px solid var(--klik-border) !important;
  color: var(--klik-muted) !important;
  border-radius: 10px !important;
}
.tabs-navigation .nav-link.active {
  background: var(--klik-accent) !important;
  border-color: var(--klik-accent) !important;
  color: #fff !important;
}

/* ---------- Footer ---------- */
footer, .footer-area, .footer {
  background: var(--klik-surface) !important;
  border-top: 1px solid var(--klik-border) !important;
  color: var(--klik-muted);
}
footer a, .footer a { color: var(--klik-muted) !important; }
footer a:hover, .footer a:hover { color: var(--klik-accent) !important; }
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { color: var(--klik-text) !important; }

/* ---------- Booking modal (keep readable on dark) ---------- */
.modal-content {
  background: var(--klik-surface) !important;
  color: var(--klik-text) !important;
  border: 1px solid var(--klik-border) !important;
  border-radius: var(--klik-radius) !important;
}
.modal-content .form-control,
.modal-content select { background: var(--klik-surface-2) !important; }
.modal-header, .modal-footer { border-color: var(--klik-border) !important; }

/* ---------- Inner-page banners / breadcrumb ---------- */
.breadcrumb-area, .page-banner, .inner-banner {
  background: var(--klik-surface) !important;
}

/* ---------- Work-process cards keep their colored gradients but stay legible ---------- */
.works-area .card, .works-area .card-title, .works-area .card-text { color: #fff !important; }

/* ---------- Cities section ("Dostupno u celoj Srbiji") ---------- */
.cities-area h2, .cities-area .section-title h2 { color: var(--klik-text) !important; }
.cities-area p, .cities-area .section-title p { color: var(--klik-muted) !important; }
.city-pill {
  background: var(--klik-surface) !important;
  border: 1px solid var(--klik-border) !important;
  color: var(--klik-text) !important;
}
.city-pill:hover { border-color: var(--klik-accent) !important; color: var(--klik-accent) !important; }
.city-pill svg { color: var(--klik-accent) !important; }

/* ---------- Neutralise leftover light-band utilities on the dark ground ---------- */
.bg-primary-light { background: transparent !important; }

/* ---------- Safety net: section headings that use a plain <h2> (no .title class) ---------- */
.section-title h2:not(.color-white) { color: var(--klik-text) !important; }


/* ==========================================================================
   PASS 3 — inner pages (Services, Contact, About, Login, dashboards) + promo banners
   ========================================================================== */

/* Flip modern-glass.css's LIGHT glass tokens to dark — re-themes the header,
   booking/map modals and subscribe strips (everything built on --glass-*)
   in one place, since our file loads after modern-glass. */
:root {
  --glass-bg: rgba(35, 38, 45, 0.72);
  --glass-bg-strong: rgba(21, 23, 28, 0.94);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-edge: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  --glass-shadow-hover: 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* Guarantee the header nav stays light on the dark frosted header
   (overrides modern-glass forcing dark links on the non-sticky header-2). */
.header-area .nav-link,
.header-area .btn-icon,
.header-area .nice-select .current { color: var(--klik-text) !important; }

/* Light section bands (auth page, any .bg-light) -> show the dark ground */
.bg-light { background-color: transparent !important; background-image: none !important; }

/* Generic theme cards (Contact .card.color-N, misc) — dark; never the
   category photo cards or the image promo banners. */
.card:not(.cat-photo-card):not(.banner-sm) {
  background: var(--klik-surface) !important;
  border: 1px solid var(--klik-border) !important;
  color: var(--klik-text);
}

/* Auth form card (login / signup / reset) */
.main-form-wrapper {
  background: var(--klik-surface) !important;
  border: 1px solid var(--klik-border) !important;
}

/* Services page: filter sidebar widgets + results/sort bar */
.widget, .sort-area, .filter-area {
  background: var(--klik-surface) !important;
  border: 1px solid var(--klik-border) !important;
  color: var(--klik-text);
}

/* Selects on dark */
.form-select, .niceselect, .nice-select {
  background: var(--klik-surface-2) !important;
  border: 1px solid var(--klik-border) !important;
  color: var(--klik-text) !important;
}
.nice-select .list { background: var(--klik-surface) !important; border: 1px solid var(--klik-border) !important; }
.nice-select .option:hover, .nice-select .option.selected { background: var(--klik-surface-2) !important; }

/* Promo image banners ("...nekoliko klikova" / "Postanite partner"):
   scrim the light illustration and force legible text so they sit in the
   dark page instead of glowing as bright bands. */
.banner-sm { position: relative; overflow: hidden; border: 1px solid var(--klik-border) !important; }
.banner-sm::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  background: linear-gradient(90deg, rgba(10,11,14,.88) 0%, rgba(10,11,14,.5) 45%, rgba(10,11,14,.12) 100%);
}
.banner-sm > * { position: relative; z-index: 2; }
.banner-sm .banner-content h1,
.banner-sm .banner-content h2,
.banner-sm .banner-content h3,
.banner-sm .banner-content p,
.banner-sm .banner-content span { color: #fff !important; }


/* ==========================================================================
   PASS 4 — signature "Termin potvrđen" hero card + label polish
   ========================================================================== */

:root {
  --klik-wash: rgba(232, 115, 12, 0.16);  /* pale orange chip */
  --klik-chip: #272A31;                    /* neutral slot */
  --jade: #54B98E;                         /* success green (on dark) */
  --jade-wash: rgba(84, 185, 142, 0.16);
}

/* Form labels & widget headings — lift them off the dark ground */
label:not(.text-gradient) { color: var(--klik-muted) !important; }
.widget .widget-title, .widget h4, .widget h5,
.filter-area h5, .sort-area h5 { color: var(--klik-text) !important; }

/* Signature card — floats bottom-right of the hero, desktop only */
.hero-banner-2 { position: relative; overflow: hidden; }
.klik-hero-card {
  position: absolute; right: 5%; bottom: 40px; z-index: 4; margin: 0;
  width: 300px; text-align: left;
  background: var(--klik-surface);
  border: 1px solid var(--klik-border);
  border-radius: 18px; padding: 18px;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85);
  font-family: var(--klik-font);
}
.khc-head { display: flex; align-items: center; gap: 11px; }
.khc-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--klik-wash); color: var(--klik-accent);
  display: grid; place-items: center; font-family: var(--klik-display); font-weight: 700;
}
.khc-service { font-family: var(--klik-display); font-weight: 700; font-size: 15px; color: var(--klik-text); margin: 0; line-height: 1.2; }
.khc-salon { font-size: 12.5px; color: var(--klik-muted); margin: 0; }
.khc-label { margin: 16px 0 10px; font-family: var(--klik-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--klik-muted); }
.khc-slots { display: flex; gap: 7px; }
.khc-slot { flex: 1; text-align: center; padding: 9px 0; border-radius: 10px; background: var(--klik-chip); font-family: var(--klik-mono); font-weight: 700; font-size: 13.5px; color: var(--klik-text); }
.khc-pick { animation: khcPick 5.6s ease infinite; }
.khc-action { position: relative; height: 46px; margin-top: 16px; }
.khc-book, .khc-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-weight: 600; font-size: 14.5px; }
.khc-book { background: var(--klik-accent); color: #fff; animation: khcBook 5.6s ease infinite; }
.khc-done { background: var(--jade-wash); color: var(--jade); border: 1px solid color-mix(in srgb, var(--jade) 34%, transparent); opacity: 0; animation: khcDone 5.6s ease infinite; }

@keyframes khcBook { 0%,40% { opacity: 1; } 50%,92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes khcDone { 0%,42% { opacity: 0; transform: scale(.95); } 52%,90% { opacity: 1; transform: scale(1); } 99%,100% { opacity: 0; } }
@keyframes khcPick {
  0%,10%  { background: var(--klik-chip); box-shadow: none; color: var(--klik-text); }
  20%,92% { background: var(--klik-wash); box-shadow: 0 0 0 2px var(--klik-accent) inset; color: var(--klik-accent); }
  99%,100%{ background: var(--klik-chip); box-shadow: none; color: var(--klik-text); }
}

/* Hide on tablet/mobile so it never crowds the centered hero */
@media (max-width: 1200px) { .klik-hero-card { display: none; } }

/* Respect reduced motion — show the confirmed state, no loop */
@media (prefers-reduced-motion: reduce) {
  .khc-book { opacity: 0; animation: none; }
  .khc-done { opacity: 1; animation: none; }
  .khc-pick { background: var(--klik-wash); box-shadow: 0 0 0 2px var(--klik-accent) inset; color: var(--klik-accent); animation: none; }
}


/* ==========================================================================
   PASS 5 — dropdown menus, accordions, off-canvas & modals
   (fixes white-on-white dropdowns and dark-on-dark component text)
   ========================================================================== */

/* Dropdown menus — header Klijent/Partner login menus, sort menus, etc. */
.dropdown-menu {
  background: var(--klik-surface) !important;
  border: 1px solid var(--klik-border) !important;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .7) !important;
}
.dropdown-item { color: var(--klik-text) !important; background: transparent !important; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
  background: var(--klik-surface-2) !important; color: var(--klik-accent) !important;
}
.dropdown-divider { border-color: var(--klik-border) !important; }

/* Accordion filter panels (Detalji usluge / Tip usluge / Cenovnik / Ocena) */
.accordion, .accordion-item, .accordion-collapse, .accordion-body {
  background: transparent !important; border-color: var(--klik-border) !important;
}
.accordion-button {
  color: var(--klik-text) !important; background: transparent !important; box-shadow: none !important;
}
.accordion-button:not(.collapsed) { color: var(--klik-accent) !important; background: transparent !important; }
.accordion-button::after { filter: invert(1) brightness(2); }

/* Off-canvas (mobile filter drawer) + all modal dialogs */
.offcanvas { background: var(--klik-surface) !important; color: var(--klik-text) !important; }
.offcanvas-header, .offcanvas-footer, .modal-header, .modal-footer { border-color: var(--klik-border) !important; }
.offcanvas-title, .modal-title, .modal-body, .modal label { color: var(--klik-text) !important; }

/* "Prikaži više" / show-more toggles */
[class*="show-more"] { color: var(--klik-accent) !important; }

/* Nav submenu ("O nama +" -> Novosti / Česta pitanja / legal pages) and any
   other flyout menu — the theme renders these white; make them dark. */
.menu-dropdown, .sub-menu, .submenu, .mega-menu, .dropdown-submenu {
  background: var(--klik-surface) !important;
  border: 1px solid var(--klik-border) !important;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .7) !important;
}
.menu-dropdown .nav-link, .sub-menu a, .submenu a, .mega-menu a { color: var(--klik-text) !important; }
.menu-dropdown .nav-link:hover,
.menu-dropdown .nav-item:hover > .nav-link,
.sub-menu a:hover, .submenu a:hover, .mega-menu a:hover {
  color: var(--klik-accent) !important; background: var(--klik-surface-2) !important;
}

/* ---------- Pass 7: real time-slots in the booking modal ----------
   A working-hour window is now sliced into one item per appointment, so the
   picker holds many short times instead of a handful of long ranges. Lay them
   out as a compact grid, in the same mono face used for prices. */
.booking-time-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
}
.booking-time-wrapper .item.time {
  width: auto !important;
  flex: initial !important;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  cursor: pointer;
  background: var(--klik-surface-2);
  border: 1px solid var(--klik-border) !important;
  border-radius: 12px;
  font-family: var(--klik-mono);
  font-size: 15px;
  color: var(--klik-text);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.booking-time-wrapper .item.time:hover {
  border-color: var(--klik-accent) !important;
  background: var(--klik-surface);
}
.booking-time-wrapper .item.time.time_active {
  background: var(--klik-accent);
  border-color: var(--klik-accent) !important;
  color: #101014;
  font-weight: 700;
}
.booking-time-wrapper .item.time.time_active .start_time,
.booking-time-wrapper .item.time.time_active .end_time { color: #101014; }

/* Appointment length, shown under the "Dostupni termini" heading */
.houre-title .slot-duration {
  display: block;
  margin-top: 6px;
  font-family: var(--klik-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--klik-muted);
}

/* Slot scroller keeps the modal a sane height */
.booking-time-wrapper::-webkit-scrollbar { width: 8px; }
.booking-time-wrapper::-webkit-scrollbar-track { background: transparent; }
.booking-time-wrapper::-webkit-scrollbar-thumb {
  background: var(--klik-border);
  border-radius: 8px;
}

/* ---------- Pass 8: booking confirmation ----------
   The client pays at the venue, so this screen is a reminder of where to go
   and who to ask for — laid out to be readable at a glance on a phone. */
.kzt-confirm {
  max-width: 560px;
  margin: 0 auto;
  padding: 4px 0 8px;
}
.kzt-confirm-head {
  text-align: center;
  padding-bottom: 24px;
}
.kzt-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  font-size: 30px;
  border: 1px solid var(--klik-border);
  background: var(--klik-surface-2);
}
.kzt-confirm-head.is-confirmed .kzt-confirm-icon {
  color: #4ADE80;
  border-color: rgba(74, 222, 128, .35);
  background: rgba(74, 222, 128, .10);
}
.kzt-confirm-head.is-pending .kzt-confirm-icon {
  color: var(--klik-accent);
  border-color: color-mix(in srgb, var(--klik-accent) 35%, transparent);
  background: color-mix(in srgb, var(--klik-accent) 10%, transparent);
}
.kzt-confirm-title {
  font-family: var(--klik-display);
  font-size: 22px;
  line-height: 1.3;
  color: var(--klik-text);
  margin: 0 0 8px;
}
.kzt-confirm-ref {
  font-family: var(--klik-mono);
  font-size: 13px;
  color: var(--klik-muted);
  margin: 0;
}
.kzt-confirm-ref span { color: var(--klik-text); }

/* Date + time get their own band — the two things clients re-check most */
.kzt-confirm-when {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--klik-border);
  border-radius: var(--klik-radius);
  background: var(--klik-surface-2);
}
.kzt-when-day {
  display: block;
  font-size: 13px;
  color: var(--klik-muted);
  margin-bottom: 2px;
}
.kzt-when-date strong {
  font-family: var(--klik-mono);
  font-size: 20px;
  color: var(--klik-text);
}
.kzt-when-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--klik-mono);
  font-size: 20px;
  color: var(--klik-accent);
}
.kzt-when-time span { color: var(--klik-muted); }

.kzt-confirm-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border: 1px solid var(--klik-border);
  border-radius: var(--klik-radius);
  overflow: hidden;
}
.kzt-confirm-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid var(--klik-border);
}
.kzt-confirm-list li:last-child { border-bottom: 0; }
.kzt-confirm-list .kzt-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--klik-muted);
  flex: 0 0 auto;
}
.kzt-confirm-list .kzt-label i {
  width: 16px;
  text-align: center;
  color: var(--klik-accent);
}
.kzt-confirm-list .kzt-value {
  text-align: right;
  color: var(--klik-text);
  font-size: 15px;
  min-width: 0;
  word-break: break-word;
}
.kzt-confirm-list .kzt-value a { color: var(--klik-text); border-bottom: 1px solid var(--klik-border); }
.kzt-confirm-list .kzt-value a:hover { color: var(--klik-accent); border-color: var(--klik-accent); }
.kzt-confirm-list .kzt-sub {
  display: block;
  font-size: 13px;
  color: var(--klik-muted);
  margin-top: 2px;
}
.kzt-confirm-list .kzt-amount {
  font-family: var(--klik-mono);
  font-size: 17px;
  color: var(--klik-accent);
}

.kzt-confirm-note {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--klik-muted) !important;
  margin: 0 0 22px;
  padding: 0 4px;
}
.kzt-confirm-note i { color: var(--klik-accent); margin-top: 3px; }

.kzt-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.kzt-confirm-actions .btn-outline-primary {
  border: 1px solid var(--klik-border);
  color: var(--klik-text);
  background: transparent;
}
.kzt-confirm-actions .btn-outline-primary:hover {
  border-color: var(--klik-accent);
  color: var(--klik-accent);
  background: transparent;
}

@media (max-width: 575px) {
  .kzt-confirm-when { justify-content: center; text-align: center; }
  .kzt-confirm-list li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .kzt-confirm-list .kzt-value { text-align: left; }
  .kzt-confirm-actions .btn { width: 100%; }
}

/* ---------- Pass 9: dark-theme contrast & mobile layout repairs ----------
   Found by auditing computed foreground/background contrast on every text
   node across the public pages. */

/* Headings. base.css declares their colour via
   :is(h1, h2, h3, h4, h5, h6, .h1, ... .h6). Because that list contains
   class arguments, the whole selector resolves at CLASS specificity, so the
   plain element selectors earlier in this file never won and headings kept
   the theme's near-black (#121212) on our dark ground — a contrast ratio of
   1.0, i.e. invisible. Matching the same selector shape settles it on source
   order, with no !important needed. */
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: var(--klik-text);
}

/* The off-canvas mobile/tablet menu kept the theme's white panel, so once
   body text turned light it was white on white. */
.mobile-menu {
  background: var(--klik-surface) !important;
  border-right: 1px solid var(--klik-border);
}
.mobile-menu .nav-link,
.mobile-menu a,
.mobile-menu span,
.mobile-menu li {
  color: var(--klik-text);
}
.mobile-menu .nav-link:hover,
.mobile-menu a:hover {
  color: var(--klik-accent);
}
.mobile-menu .nav-link {
  border-bottom-color: var(--klik-border) !important;
}

/* Review breakdown rows and progress labels inherited the same dark ink. */
.review-progress span,
.progress-title,
.rating-list span {
  color: var(--klik-text);
}

/* The date picker is deliberately a light surface — let it keep its own
   dark text instead of inheriting the page's light ink. */
.pignose-calendar * {
  color: inherit;
}

/* Homepage category grid below 1200px — static, like the desktop grid.
   The slides are real wrapper children now, so the grid is straightforward.
   --kzt-mob-order (set per slide in the Blade) re-sorts the cards from most
   to least popular on phones and tablets; desktop keeps the curated order. */
@media (max-width: 1199.98px) {
  .category-area .category-slider .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
  }

  .category-area .category-slider .swiper-wrapper .swiper-slide {
    width: 100% !important;
    margin: 0 !important;
    order: var(--kzt-mob-order, 0);
  }

  .category-area .category-slider ~ .swiper-pagination,
  .category-area .swiper-pagination {
    display: none !important;
  }

  /* Two lines so "SPORT I FITNES" and "WELLNESS I SPA" are not clipped. */
  .category-area .cat-photo-card .card-title {
    -webkit-line-clamp: 2 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .category-area .category-slider .swiper-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .category-area .category-slider .swiper-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Pricing: inner-pages.css turns the subtitle band solid white on the
   hovered/active plan. On this theme that plan card is orange, so once
   pass 9 made headings light the price inside that band dropped to a 1.17
   contrast ratio. A translucent band keeps the visual separation and takes
   the price back to ~14:1. */
.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .card_subtitle {
  background-color: rgba(255, 255, 255, .15) !important;
}

/* ---------- Pass 10: client account area (/user/*) ----------
   The client dashboard, appointments, profile and wishlist pages were never
   covered by this overlay. They kept the theme's white cards while body text
   had already turned light, so every one of them rendered white on white.

   Rather than chase each rule, redefine the theme tokens the whole
   .user-dashboard subtree is built on: every existing rule reaching for
   --bg-white, --bg-1, --text-dark or --border-color then resolves to the
   dark palette on its own. Checked first that nothing in this block uses
   --bg-white as a TEXT colour, which would have inverted instead. */
.user-dashboard {
  --bg-white: var(--klik-surface);
  --bg-1: var(--klik-surface-2);
  --bg-2: var(--klik-surface-2);
  --border-color: var(--klik-border);
  --border-color-2: var(--klik-border);
  --text-dark: var(--klik-text);
  --text-medium: var(--klik-muted);
  color: var(--klik-text);
}

/* The theme's light-blue card shadows read as haze on a dark ground. */
.user-dashboard .widget-area .widget,
.user-dashboard .account-info,
.user-dashboard .card.card-box {
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .8) !important;
  border-radius: var(--klik-radius);
}

/* Step numbers were hard-coded #000 on a light chip; the chip is dark now. */
.user-dashboard .progress-steps li {
  color: var(--klik-text);
}

/* Sidebar links */
.user-dashboard .widget-area .links li a {
  color: var(--klik-text);
}
.user-dashboard .widget-area .links li a:hover,
.user-dashboard .widget-area .links li a.active {
  color: var(--klik-accent);
}

/* Tables: DataTables draws its own header/row rules from the theme. */
.user-dashboard table,
.user-dashboard table.dataTable,
.user-dashboard .main-table {
  color: var(--klik-text);
  border-color: var(--klik-border);
}
.user-dashboard table.dataTable thead th,
.user-dashboard table.dataTable tbody td,
.user-dashboard table th,
.user-dashboard table td {
  background: transparent;
  border-color: var(--klik-border) !important;
  color: var(--klik-text);
}
.user-dashboard table.dataTable tbody tr {
  background: transparent;
}
.user-dashboard table.dataTable tbody tr:hover {
  background: var(--klik-surface-2);
}

/* Inputs inside the account area (search box, profile form, filters) */
.user-dashboard .form-control,
.user-dashboard .form-select,
.user-dashboard input[type="text"],
.user-dashboard input[type="email"],
.user-dashboard input[type="search"],
.user-dashboard input[type="password"],
.user-dashboard input[type="date"],
.user-dashboard textarea,
.user-dashboard select {
  background: var(--klik-surface-2) !important;
  border: 1px solid var(--klik-border) !important;
  color: var(--klik-text) !important;
}
.user-dashboard .form-control::placeholder,
.user-dashboard textarea::placeholder {
  color: var(--klik-muted) !important;
}
.user-dashboard .form-control:focus,
.user-dashboard .form-select:focus {
  border-color: var(--klik-accent) !important;
  box-shadow: none !important;
}
.user-dashboard label {
  color: var(--klik-text);
}

/* DataTables chrome (length select, info line, pagination) */
.user-dashboard .dataTables_wrapper .dataTables_info,
.user-dashboard .dataTables_wrapper .dataTables_length,
.user-dashboard .dataTables_wrapper .dataTables_filter,
.user-dashboard .dataTables_wrapper label {
  color: var(--klik-muted);
}
.user-dashboard .paginate_button .page-link {
  background-color: var(--klik-surface-2);
  border-color: var(--klik-border);
  color: var(--klik-text);
}

/* Appointment details: the billing / info panels */
.user-dashboard .billing-add-area,
.user-dashboard .main-info ul.list li {
  background: var(--klik-surface-2);
  border-radius: 12px;
}
.user-dashboard .main-info ul.list li span,
.user-dashboard .billing-add-area span,
.user-dashboard .billing-add-area li {
  color: var(--klik-text);
}

/* Modals opened from the account area (cancel / reschedule dialogs) */
.user-dashboard .modal-content,
#appointmentActionModal .modal-content {
  background: var(--klik-surface);
  border: 1px solid var(--klik-border);
  color: var(--klik-text);
}

/* Client actions: reschedule / cancel */
.kzt-appt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.kzt-appt-actions .btn {
  white-space: nowrap;
}
.kzt-btn-move,
.kzt-btn-cancel {
  border: 1px solid var(--klik-border);
  background: var(--klik-surface-2);
  color: var(--klik-text);
  border-radius: 10px;
}
.kzt-btn-move:hover {
  border-color: var(--klik-accent);
  color: var(--klik-accent);
}
.kzt-btn-cancel {
  color: #F87171;
}
.kzt-btn-cancel:hover {
  border-color: #F87171;
  background: rgba(248, 113, 113, .12);
  color: #F87171;
}

/* Reschedule picker */
.kzt-move-current {
  color: var(--klik-muted) !important;
  margin-bottom: 22px;
}
.kzt-move-current strong {
  color: var(--klik-text);
}
.kzt-move-duration {
  font-family: var(--klik-mono);
  font-size: 13px;
  color: var(--klik-muted) !important;
  margin-bottom: 10px;
}
.kzt-move-empty {
  color: var(--klik-muted) !important;
  margin: 6px 0 0;
}
#kzt_move_slots:empty {
  display: none;
}
#kzt_move_submit:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Native form controls in the client area.
   The browser draws the date input's calendar button itself, in near-black,
   which disappeared against the dark field - the button was there but
   invisible. color-scheme tells the browser to render its own widgets dark,
   which lightens that icon and themes the date picker popup with it.
   Applied to the controls rather than the whole subtree so nothing else
   picks up UA dark defaults unexpectedly. */
.user-dashboard input,
.user-dashboard select,
.user-dashboard textarea {
  color-scheme: dark;
}

/* The admin panel solves the same problem with filter: invert(100%) on the
   indicator. Not reused here on purpose - under color-scheme: dark the icon
   is already light, and inverting would push it back to black. */
.user-dashboard input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  padding: 2px;
}
.user-dashboard input[type="date"] {
  cursor: pointer;
}

/* The date picker keeps the same light panel it has in the booking modal.
   .user-dashboard remaps --bg-2 / --text-dark to the dark palette, and the
   widget's own rules read those tokens - which would have painted light text
   onto its white body. Restoring the tokens for this subtree only keeps the
   two calendars identical. */
.user-dashboard .pignose-calendar {
  --bg-white: #ffffff;
  --bg-1: #F3F3F3;
  --bg-2: #F8F8F8;
  --text-dark: #121212;
  --text-medium: #6b6b6b;
  --border-color: #e8e8e8;
  color: #121212;
}
.kzt-move-calendar {
  max-width: 420px;
}

/* Business days: day on the left, hours on the right. The two spans sat in a
   flex row with no gap and no justification, so they ran together
   ("Ponedeljak01:30-13:00"). */
.kzt-hours-row {
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--klik-border);
}
.kzt-hours-row:last-child {
  border-bottom: 0;
}
.kzt-hours-time {
  font-family: var(--klik-mono);
  font-size: 14px;
  color: var(--klik-text);
  white-space: nowrap;
}

/* Profile photo upload with nothing chosen yet: an empty tile rather than a
   stock photograph of an unrelated person. */
.kzt-photo-empty {
  background: var(--klik-surface-2) !important;
  border: 1px dashed var(--klik-border);
}

/* -----------------------------------------
	Hero Banner 2 — vertical rhythm
	The hero's height came entirely from fixed padding (220/150), so it stayed
	841px whether the viewport was 900px or 768px tall — on a 1366x768 laptop
	it overflowed the screen and nothing below it was ever hinted at. Padding
	is trimmed here, and the headline is given the width to sit on two lines
	instead of three.
	Loaded after responsive.css, so these win without touching the shared
	.hero-banner rules or the global --font-size--h1.
----------------------------------------- */
.hero-banner.hero-banner-2 {
  padding-top: 140px;
  padding-bottom: 90px;
}

@media only screen and (min-width: 1200px) {
  /* the 640px cap forced three lines at any font size, 64px down to 52px */
  .hero-banner.hero-banner-2 .banner-content {
    max-width: 880px;
  }

  .hero-banner.hero-banner-2 .banner-content .title {
    font-size: 56px;
  }

  /* keep the search box its original width inside the wider column */
  .hero-banner.hero-banner-2 .banner-filter-form {
    max-width: 640px;
  }
}

@media only screen and (max-width: 1199.98px) {
  .hero-banner.hero-banner-2 {
    padding-top: 130px;
    padding-bottom: 80px;
  }
}

@media only screen and (max-width: 767.98px) {
  .hero-banner.hero-banner-2 {
    padding-top: 110px;
    padding-bottom: 60px;
  }

  /* 36px wrapped onto four lines; 34px fits three */
  .hero-banner.hero-banner-2 .banner-content .title {
    font-size: 34px;
  }
}

/* Services page without breadcrumb (map view): the map strip that used to
   separate the absolute header from the listings is gone, so give the
   listing area enough top padding to clear the header on desktop. */
@media only screen and (min-width: 992px) {
  .listing-area.no-breadcrumb {
    padding-top: 130px;
  }
}

/* Services toolbar: one row - Filter | Map | sort. Buttons keep their size,
   the native select shrinks (and clips its label) instead of wrapping the
   row on narrow screens. */
.sort-area .sort-toolbar {
  gap: 10px;
  flex-wrap: nowrap;
}

.sort-area .sort-toolbar .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.sort-area .sort-toolbar label {
  flex-shrink: 0;
  white-space: nowrap;
}

.sort-area .sort-toolbar .sort {
  min-width: 0;
}

@media only screen and (max-width: 991.98px) {
  .sort-area .sort-toolbar .sort {
    flex: 1 1 auto;
    max-width: 100%;
  }
}

/* Pricing: the feature list takes --text-dark from inner-pages - near-black,
   unreadable on this theme's dark resting cards. The hovered/active card
   already recolours its whole list via inner-pages (.card_list *), and that
   rule's higher specificity keeps winning over this one. */
.pricing-area .card .card_list li span:first-child {
  color: var(--klik-text);
}

/* Category tiles at every size: long names ("IT I DIGITALNE USLUGE",
   "ČIŠĆENJE I ODRŽAVANJE") wrap to two lines instead of clipping to "...". */
.category-area .cat-photo-card .card-title {
  -webkit-line-clamp: 2 !important;
  line-height: 1.25 !important;
}


/* Featured (paid-placement) service cards.
   The theme only tinted the card background 4%, which is invisible on this
   dark ground - promoted results looked identical to organic ones. Give the
   card a visible edge and label the image corner. */
.product-default.featured {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px var(--color-primary);
}

.product-default.featured .product-img {
  position: relative;
}

.kzt-featured-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
  pointer-events: none;
}