/* ==========================================================================
   Klik za Termin — Modern glass overlay
   Purely additive: loaded after the theme's own stylesheets, it restyles
   surfaces (cards, header, modals, widgets, forms) with a soft glassmorphism
   look while preserving every existing layout and behaviour.
   ========================================================================== */

:root {
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-edge: rgba(17, 24, 39, 0.06);
  --glass-shadow: 0 8px 32px rgba(17, 24, 39, 0.10);
  --glass-shadow-hover: 0 16px 44px rgba(17, 24, 39, 0.16);
  --glass-radius: 16px;
  --glass-blur: 14px;
}

/* Soft ambient page background so the glass has something to sit on */
body {
  background-color: #f6f7fb;
  background-image:
    radial-gradient(36rem 36rem at 8% -8%, rgba(250, 120, 60, 0.10), transparent 60%),
    radial-gradient(30rem 30rem at 100% 12%, rgba(99, 102, 241, 0.08), transparent 55%);
  /* Guard: nothing may widen the page past the viewport (mobile). */
  overflow-x: hidden;
  max-width: 100vw;
}

/* --------------------------------------------------------------------------
   Header — frosted, gently separated from the page
   -------------------------------------------------------------------------- */
.header-area,
header.header {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: 0 2px 18px rgba(17, 24, 39, 0.06);
}

/* The theme's header-2 shows WHITE menu links on the homepage (meant for a
   transparent header over a dark hero). With the frosted light header above,
   inactive items must be dark on every page, homepage included. */
.header-area.header-2:not(.is-sticky, .header-static) :is(.nav-link:not(:is(.active, .menu-dropdown .nav-link)), .btn-icon, .btn-icon-text, .nice-select .current, .nice-select::after) {
  color: var(--text-dark, #1f2937);
}

.header-area.header-2:not(.is-sticky, .header-static) .nice-select::after {
  color: var(--text-dark, #1f2937);
}

/* --------------------------------------------------------------------------
   Cards: services, partners, blog, dashboard tiles
   -------------------------------------------------------------------------- */
.product-default,
.vendor-card,
.blog-card,
.author-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

.product-default:hover,
.vendor-card:hover,
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
}

.product-default .product-img img,
.blog-card img {
  transition: transform .45s ease;
}

.product-default:hover .product-img img {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Sidebar widgets & filter panels (services page, blog, dashboards)
   -------------------------------------------------------------------------- */
.widget,
.sort-area,
.filter-area {
  /* No backdrop-filter here: blur creates a containing block that clips
     absolutely-positioned children (e.g. the subcategory flyout on hover). */
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: 0 4px 20px rgba(17, 24, 39, 0.06);
  overflow: visible;
}

.sort-area {
  padding: 12px 20px;
  margin-bottom: 30px;
}

/* The theme gives the bar's children big bottom margins (built for the old
   box-less design); zero them so the bar stays slim, and use row-gap for
   spacing when items stack on mobile. */
.sort-area .row {
  align-items: center;
  row-gap: 10px;
}

.sort-area h5,
.sort-area .sort-list {
  margin-bottom: 0 !important;
}

.sort-area .btn {
  margin: 0 8px 8px 0 !important;
}

/* --------------------------------------------------------------------------
   Modals — the booking wizard and map popup get the full glass treatment
   -------------------------------------------------------------------------- */
.modal-content {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(160%);
  backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--glass-radius) + 4px);
  box-shadow: 0 24px 64px rgba(17, 24, 39, 0.22);
}

.modal-backdrop.show {
  opacity: .35;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* --------------------------------------------------------------------------
   Forms — calmer fields, clear focus in the brand colour
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
.niceselect {
  border-radius: 12px !important;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background-color: rgba(255, 255, 255, 0.9);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary, #fa6444);
  box-shadow: 0 0 0 4px rgba(250, 100, 68, 0.15);
}

/* --------------------------------------------------------------------------
   Buttons — subtle lift, softened corners
   -------------------------------------------------------------------------- */
.btn {
  border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn-primary,
.btn-gradient {
  box-shadow: 0 6px 18px rgba(250, 100, 68, 0.30);
}

.btn-primary:hover,
.btn-gradient:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(250, 100, 68, 0.38);
  filter: brightness(1.03);
}

.btn:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Breadcrumb / page-title band — glass chip over the hero image
   -------------------------------------------------------------------------- */
.page-title-area .content {
  display: inline-block;
  padding: 18px 26px;
  background: rgba(17, 24, 39, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--glass-radius);
}

/* --------------------------------------------------------------------------
   Footer newsletter / subscribe strip
   -------------------------------------------------------------------------- */
.subscribe-area,
.newsletter-area {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
}

/* --------------------------------------------------------------------------
   Pagination, badges, small chrome
   -------------------------------------------------------------------------- */
.pagination .page-link {
  border-radius: 10px !important;
  margin: 0 3px;
  border: 1px solid rgba(17, 24, 39, 0.08);
}

.badge {
  border-radius: 8px;
}

img,
.lazy-container {
  border-radius: inherit;
}

/* --------------------------------------------------------------------------
   Fallback: browsers without backdrop-filter get solid, still-modern cards
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .product-default,
  .vendor-card,
  .blog-card,
  .card,
  .widget,
  .sort-area,
  .modal-content,
  .subscribe-area {
    background: #ffffff;
  }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .product-default,
  .vendor-card,
  .blog-card,
  .btn,
  .product-default .product-img img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Homepage category photo cards (DIKIDI-style): Featured Image as background,
   category name overlaid on a dark gradient. Icon cards remain the fallback.
   -------------------------------------------------------------------------- */
/* Every category card — icon variant AND photo variant — shares one fixed
   height so the homepage grid stays perfectly even regardless of content. */
/* The category images are square (1:1), so the card mirrors that shape:
   on desktop (~240px wide) that is nearly the old 220px height, and on
   phones/tablets the card grows taller together with its full width — the
   image is never cover-cropped, so icons are never cut off. The fixed
   220px height remains only as a fallback for very old browsers. */
.category-area .swiper-slide .card {
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@supports (aspect-ratio: 1 / 1) {
  .category-area .swiper-slide .card {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

.category-area .swiper-slide .card.cat-photo-card {
  position: relative;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  border: none;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Absolutely pinned to the bottom edge: the theme's grid rule
   (.category-area .swiper-slide .card { justify-content: center })
   used to win on specificity and float this band to the middle.
   position:absolute takes the overlay out of the flex flow entirely,
   so no parent alignment rule can ever move it again. */
.category-area .cat-photo-card .cat-photo-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(10, 14, 25, 0.78) 0%, rgba(10, 14, 25, 0.30) 60%, rgba(10, 14, 25, 0) 100%);
}

.category-area .cat-photo-card .card-title,
.category-area .cat-photo-card .card-title a,
.category-area .cat-photo-card .font-sm {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.category-area .cat-photo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.28);
}

/* --------------------------------------------------------------------------
   Desktop: category cards as a static 6 + 6 grid — per the owner's call the
   section is NOT a carousel. The Swiper markup stays (slides are now real
   direct children of the wrapper), but the wrapper renders as a grid and any
   inline transform from autoplay is frozen. Pagination dots disappear.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .category-area .category-slider .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
  }

  .category-area .category-slider .swiper-wrapper .swiper-slide {
    width: 100% !important;
    margin: 0 !important;
  }

  .category-area .category-slider ~ .swiper-pagination,
  .category-area .swiper-pagination,
  [id$="-pagination"].swiper-pagination {
    display: none !important;
  }

    /* Slightly tighter text for the smaller six-across cards */
  .category-area .cat-photo-card .cat-photo-overlay {
    padding: 12px 14px;
  }

  .category-area .cat-photo-card .card-title {
    font-size: 17px;
  }

  .category-area .cat-photo-card .font-sm {
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Subcategories: inline accordion instead of the theme's 250px side flyout.
   The flyout clipped on desktop and forced horizontal scrolling inside the
   mobile Filter panel. Inline expansion below the category can never clip
   or widen anything. Opens on click only (accordion, one category at a
   time - never on hover); the selected category starts open on page load.
   -------------------------------------------------------------------------- */
.widget-area .widget-categories-2 .widget-link .widget-subcategories {
  position: static !important;
  margin-inline-start: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 2px 0 8px 22px !important;
  visibility: visible !important;
  opacity: 1 !important;
  top: auto !important;
  transition: none !important;
  display: none;
}

.widget-area .widget-categories-2 .widget-link .cat-item-2.open .widget-subcategories {
  display: block;
}

.widget-area .widget-categories-2 .widget-link .cat-item-2 .category-toggle i {
  transition: transform .2s ease;
}

.widget-area .widget-categories-2 .widget-link .cat-item-2.open .category-toggle i {
  transform: rotate(90deg);
}

.widget-area .widget-categories-2 .widget-link .widget-subcategories li a {
  line-height: 30px;
  font-size: .95em;
}

/* The mobile Filter panel must never scroll sideways, whatever it contains. */
.offcanvas,
.offcanvas-body {
  overflow-x: hidden;
}


/* --------------------------------------------------------------------------
   Google Maps guards: themes commonly set img { max-width: 100% } globally,
   which squashes the map's sprite-based controls (zoom, fullscreen, pegman)
   into broken white boxes. Never constrain images inside a Google map.
   -------------------------------------------------------------------------- */
.gm-style img {
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   Modal close button: force a clearly visible dark X on a soft circle
   (was rendering white-on-white on the map modal).
   -------------------------------------------------------------------------- */
.modal .btn-close {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  opacity: 1;
  background: rgba(17, 24, 39, 0.08) center/0.9em auto no-repeat
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111827'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.modal .btn-close:hover {
  background-color: rgba(17, 24, 39, 0.16);
}

/* --------------------------------------------------------------------------
   Mobile: the booking modal is fullscreen below 768px
   (modal-fullscreen-md-down), but base.css positions .btn-close at
   top:-15px / right:-15px — OUTSIDE the modal box. Fullscreen means the
   box edge IS the screen edge, so the button lands off-screen and can't
   be seen or tapped. Inside the fullscreen breakpoint we pull it back in,
   enlarge it to a proper touch target, give it a solid visible chip over
   any content, and respect the iPhone notch safe area.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .modal .btn-close {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
    width: 42px;
    height: 42px;
    line-height: 42px;
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 12px rgba(17, 24, 39, 0.22);
  }
}

/* --------------------------------------------------------------------------
   Banner collection (home page 2): the theme ships this section with NO
   responsive rules at all — the 21:9 strip stays ~150px tall on phones,
   the title is locked to 50% width at desktop font size, and h3 carries a
   leftover 30px bottom margin. Fixes:
   1) anchor the background to center-right (was top-right, which chopped
      the bottom of photos whenever ratios deviated);
   2) drop the pointless title margin;
   3) tablet: 2:1 box + smaller title;
   4) phone: 16:9 box, wider text zone, tighter padding.
   With the center-right anchor, taller boxes crop only the empty left
   area of the 21:9 images — people on the right stay fully visible.
   -------------------------------------------------------------------------- */
.banner-collection .banner-sm {
  background-position: center right;
}

/* Text-protection scrim: a browser-rendered cream gradient behind the
   title zone. The title is ALWAYS readable regardless of what the image
   contains or where its subject stands — on every device. Uses ::after
   because ::before is occupied by the theme's ratio-box spacer. */
.banner-collection .banner-sm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(255, 244, 235, 0.95) 0%,
    rgba(255, 244, 235, 0.82) 35%,
    rgba(255, 244, 235, 0.35) 55%,
    rgba(255, 244, 235, 0) 72%);
}

.banner-collection .banner-sm .banner-content {
  z-index: 2;
}

.banner-collection .banner-sm h3 {
  margin-bottom: 0 !important;
}

.banner-collection .banner-sm .banner-content {
  max-width: 55%;
}

@media (max-width: 991.98px) {
  .banner-collection .ratio.ratio-21-9::before {
    padding-bottom: 50%; /* 2:1 — more breathing room than 21:9 */
  }

  .banner-collection .banner-sm h3 {
    font-size: 20px;
    line-height: 1.3;
  }
}

@media (max-width: 575.98px) {
  .banner-collection .ratio.ratio-21-9::before {
    padding-bottom: 56.25%; /* 16:9 on phones */
  }

  .banner-collection .banner-sm .banner-content {
    max-width: 64%;
    padding: 0 14px;
  }

  .banner-collection .banner-sm h3 {
    font-size: 18px;
  }
}
/* --------------------------------------------------------------------------
   FAQ topic headings (added with the FAQ grouping feature). The theme has no
   style for a section title inside the accordion list, so give it a clear,
   brand-coloured separator that reads as a group boundary.
   -------------------------------------------------------------------------- */
.faq-area .faq-group-title {
  position: relative;
  padding-left: 14px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark, #1f2937);
}

.faq-area .faq-group-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 3px;
  background: var(--color-primary, #f5801e);
}

@media (max-width: 575.98px) {
  .faq-area .faq-group-title {
    font-size: 19px;
  }
}

/* --------------------------------------------------------------------------
   Popularne lokacije (city links) section on the homepage.
   -------------------------------------------------------------------------- */
.cities-area .cities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.cities-area .city-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 30px;
  color: var(--text-dark, #1f2937);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

.cities-area .city-pill svg {
  color: var(--color-primary, #f5801e);
  transition: color .2s ease;
}

.cities-area .city-pill:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary, #f5801e);
  color: var(--color-primary, #f5801e);
  box-shadow: 0 10px 26px rgba(245, 128, 30, 0.20);
}

.cities-area .city-pill:hover svg {
  color: var(--color-primary, #f5801e);
}

@media (max-width: 575.98px) {
  .cities-area .city-pill {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   Category cards: the whole card is the link. The inner title anchor was
   removed from the Blade (it nested inside the card anchor, which is invalid
   HTML and left only the text clickable). These rules make the entire card
   area behave as one target and keep the title colour/hover intact now that
   it is a <span> rather than an <a>.
   -------------------------------------------------------------------------- */
.category-area .swiper-slide > a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.category-area .swiper-slide > a .card {
  cursor: pointer;
}

.category-area .card-title span {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

/* Photo cards keep white text over the dark gradient. */
.category-area .cat-photo-card .card-title,
.category-area .cat-photo-card .card-title span,
.category-area .cat-photo-card .font-sm {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   "Zašto Klik za Termin" benefits cards (last homepage section).
   Left-aligned white cards with a 3D icon on top, matching the approved
   reference design. Real HTML so the text stays crisp and translatable.
   -------------------------------------------------------------------------- */
.benefits-area .benefit-card {
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.05);
  border-radius: 24px;
  padding: 30px 28px 32px;
  text-align: left;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.benefits-area .benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(245, 128, 30, 0.16);
}

/* Fixed size so the icon can never render at its natural pixel dimensions
   if the stylesheet is slow to apply. */
.benefits-area img.benefit-icon {
  width: 72px;
  height: 72px;
  max-width: 72px;
  object-fit: contain;
  display: block;
  margin: 0 0 22px;
  border-radius: 0;
}

.benefits-area .benefit-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
  color: var(--text-dark, #1f2937);
}

.benefits-area .benefit-text {
  font-size: 15px;
  line-height: 1.65;
  color: #6b7280;
}

@media (max-width: 575.98px) {
  .benefits-area .benefit-card {
    padding: 24px 22px 26px;
    border-radius: 20px;
  }

  .benefits-area img.benefit-icon {
    width: 62px;
    height: 62px;
    max-width: 62px;
    margin-bottom: 16px;
  }

  .benefits-area .benefit-title {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   Partner logos/photos: fit ANY uploaded size gracefully. The old system
   forced exactly 80x80 uploads; now uploads are free-size and every place
   that shows the vendor image letterboxes it on white instead of stretching
   or cropping the logo. Attribute selector covers lazy-loaded imgs too.
   -------------------------------------------------------------------------- */
img[src*="vendor-photo"],
img[data-src*="vendor-photo"] {
  object-fit: contain !important;
  background: #ffffff;
}