/* Apuseni.ro — light overrides for Tour Pro */
:root{
  --apuseni-accent: #1f9d55;
  --accent-color: #1f9d55; /* used by the template */
}

/* Logo sizing */
.header .logo img{
  height: 34px;
  width: auto;
  /* logo.svg is dark; invert it for the dark header */
  filter: brightness(0) invert(1);
  opacity: .95;
}
.header .logo .sitename{
  font-size: 20px;
  letter-spacing: .2px;
}

/* Hero background image always covers */
.travel-hero .hero-background picture,
.travel-hero .hero-background img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Make the planning card feel a bit more premium */
.booking-form-wrapper .booking-form{
  background: color-mix(in srgb, var(--surface-color), transparent 6%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  backdrop-filter: blur(10px);
}
.booking-form-wrapper .booking-form .form-title{
  margin-bottom: 14px;
}

/* Reusable content cards (details pages) */
.content-card{
  background: color-mix(in srgb, var(--surface-color), transparent 0%);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.ap-bullets{
  margin:0;
  padding-left: 1.1rem;
}
.ap-bullets li{ margin-bottom: .5rem; }

.ap-list{
  padding-left: 0;
  margin: 0;
}
.ap-list li{
  padding: .6rem .75rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 12px;
  margin-bottom: .65rem;
  background: color-mix(in srgb, var(--surface-color), transparent 0%);
  list-style: none;
}

/* Ensure injected cards/tile images crop nicely */
.destination-tile .tile-image img,
.compact-destination .destination-image img,
.tour-card .tour-image img,
.featured-destination img,
.featured-tour-card .tour-image img{
  object-fit: cover;
}

/* Premium home: subtle accents for feature & start cards */
.why-us .feature-card{
  position: relative;
  overflow: hidden;
}
.why-us .feature-card::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color), transparent 0%), transparent 70%);
  opacity: .45;
}

.start-here.featured-tours .tour-card{
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.start-here.featured-tours .tour-card .tour-image{
  height: 190px;
}
@media (max-width: 992px){
  .start-here.featured-tours .tour-card .tour-image{ height: 170px; }
}

/* Chips row */
.ap-home-chips .btn{
  border-radius: 999px;
}

.ap-note{
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  background: color-mix(in srgb, var(--surface-color), transparent 0%);
}
.ap-note .small{ color: color-mix(in srgb, var(--default-color), transparent 30%); }

/* --------------------------------------------------------------
 * v25 — Obiective: layout mai premium (tour-details)
 * -------------------------------------------------------------- */

.ap-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

/* Secondary button variant for template's .btn-book */
.travel-tour-details .tour-hero .hero-content .btn-book.secondary{
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--contrast-color), transparent 35%);
  color: var(--contrast-color);
}
.travel-tour-details .tour-hero .hero-content .btn-book.secondary:hover{
  background: color-mix(in srgb, var(--contrast-color), transparent 88%);
  color: var(--contrast-color);
  transform: translateY(-2px);
}


/* Section nav pills (sticky) */
.ap-section-nav{
  position: sticky;
  top: var(--ap-sticky-top, 110px);
  z-index: 20;
  /* backdrop-filter can be expensive on some devices; keep it subtle */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--surface-color), transparent 8%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 94%);
  border-radius: 999px;
  padding: 10px 10px 12px;
  overflow: hidden;
  /* keep it visually centered (avoid a huge empty right side on wide layouts) */
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  isolation: isolate;
}
.ap-section-nav.ap-is-stuck{
  box-shadow: 0 12px 35px color-mix(in srgb, var(--default-color), transparent 90%);
  border-color: color-mix(in srgb, var(--default-color), transparent 82%);
}

.ap-section-nav .ap-nav-progress{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  background: color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 999px;
  pointer-events: none;
}
.ap-section-nav .ap-nav-progress span{
  display: block;
  height: 100%;
  width: 0%;
  background: color-mix(in srgb, var(--accent-color), transparent 30%);
  border-radius: 999px;
  /* avoid constant animated re-paints while scrolling */
  transition: none;
}

.ap-section-nav .ap-nav-scroll{
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 6px;
  padding: 0 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ap-section-nav .ap-nav-scroll::-webkit-scrollbar{ display:none; }
@media (min-width: 992px){
  .ap-section-nav .ap-nav-scroll{
    justify-content: center;
    overflow: visible;
    flex-wrap: wrap;
  }
}

.ap-section-nav .nav-link{
  border-radius: 999px;
  padding: .45rem .9rem;
  white-space: nowrap;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}
.ap-section-nav .nav-link:hover{
  color: var(--heading-color);
  background: color-mix(in srgb, var(--default-color), transparent 94%);
}
.ap-section-nav .nav-link.active{
  background: color-mix(in srgb, var(--accent-color), transparent 75%);
  color: var(--heading-color);
}















/* Zone detail: when the section nav is stuck, push the right sidebar (map, etc.) below it so it does not overlap the pills. */
@media (min-width: 992px){
  /* Zone detail: keep the pills visually centered like on objective pages, but make sure they never hide behind the sticky map. */
  .destination-details-page .ap-zone-nav{
    /* keep default centering (max-width + margin auto from .ap-section-nav) */
    z-index: 60;
  }

  /* Ensure sticky sidebar stays behind the pills (extra safety). */
  .destination-details-page .col-lg-4 .sticky-top{
    z-index: 10;
  }

  /* If the nav is visually “stuck”, push the sidebar content down a bit more (prevents vertical overlap on edge cases). */
  .destination-details-page .ap-zone-nav.ap-is-stuck + .row .sticky-top{
    top: calc(var(--ap-sticky-top, 110px) + var(--ap-section-nav-h, 64px) + 14px) !important;
  }
}

/* Info rapid / highlights */

.ap-facts ul li strong{ color: var(--heading-color); font-weight: 600; }

/* Combos / related: mini cards */
.ap-mini-card{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid color-mix(in srgb,var(--default-color),transparent 90%);
  text-decoration:none;
  background: color-mix(in srgb, var(--surface-color), transparent 0%);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.ap-mini-card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
  background: color-mix(in srgb, var(--surface-color), transparent 0%);
}
.ap-mini-card img{
  width:88px;
  height:64px;
  object-fit:cover;
  border-radius: 10px;
  flex:0 0 auto;
}
.ap-mini-card .meta{ min-width:0; }
.ap-mini-card .meta .kicker{
  font-size:.8rem;
  color: color-mix(in srgb,var(--default-color),transparent 30%);
}
.ap-mini-card .meta .title{
  font-weight: 700;
  color: var(--heading-color);
  line-height:1.2;
}
.ap-mini-card .meta .desc{
  font-size:.9rem;
  color: color-mix(in srgb,var(--default-color),transparent 20%);
  margin-top:2px;
}
/* Combos: related suggestions */
.ap-combos{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Two-column layout on larger screens, with explicit areas so blocks don't "interleave" */
@media (min-width: 992px){
  .ap-combos{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "notice notice"
      "walk drive"
      "actions actions";
    align-items: start;
  }
  .ap-combos-notice{ grid-area: notice; }
  .ap-combo-block--walk{ grid-area: walk; }
  .ap-combo-block--drive{ grid-area: drive; }
  .ap-combos-actions{ grid-area: actions; }
}

.ap-combo-block{ padding: 2px; }
.ap-combo-head{
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb,var(--default-color),transparent 25%);
  margin: 0 0 8px;
  display:flex;
  align-items:center;
  gap:6px;
}

/* Use margins between items instead of flex-gap (better cross-browser, avoids "stacking" bugs) */
.ap-combo-list{
  display:flex;
  flex-direction:column;
}
.ap-combo-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border:1px solid color-mix(in srgb,var(--default-color),transparent 90%);
  text-decoration:none;
  background: color-mix(in srgb, var(--surface-color), transparent 0%);
  transition: transform .2s ease, border-color .2s ease;
  margin: 0 0 10px 0;
}
.ap-combo-item:last-child{ margin-bottom: 0; }

.ap-combo-item:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
}
.ap-combo-item img{
  width: 56px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  flex: 0 0 auto;
}
.ap-combo-text{ min-width:0; }
.ap-combo-text .title{
  font-weight: 800;
  color: var(--heading-color);
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ap-combo-text .meta{
  font-size: .82rem;
  color: color-mix(in srgb,var(--default-color),transparent 28%);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-combo-metric{
  margin-left:auto;
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color), transparent 82%);
  color: var(--heading-color);
}

/* Related blocks (same zone / similar) inside "În apropiere" */
.ap-related{
  margin-top: 10px;
}
.ap-related .ap-combo-block + .ap-combo-block{ margin-top: 14px; }
.ap-related .ap-combo-head{
  font-size: .9rem;
  color: color-mix(in srgb,var(--default-color),transparent 18%);
}
.ap-related .ap-combo-item{
  background: color-mix(in srgb, var(--surface-color), transparent 4%);
}



/* Accordion styling for access/when/safety */
.ap-accordion .accordion-item{
  background: color-mix(in srgb, var(--surface-color), transparent 0%);
  border: 1px solid color-mix(in srgb,var(--default-color),transparent 90%);
  border-radius: 14px;
  overflow:hidden;
}
.ap-accordion .accordion-item + .accordion-item{ margin-top:12px; }
.ap-accordion .accordion-button{
  background: transparent;
  color: var(--heading-color);
  font-weight:700;
}
.ap-accordion .accordion-button:not(.collapsed){
  box-shadow:none;
  background: color-mix(in srgb,var(--accent-color),transparent 92%);
}
.ap-accordion .accordion-body{ color: color-mix(in srgb,var(--default-color),transparent 10%); }
.ap-accordion .accordion-button:focus{ box-shadow:none; }

/* Anchor offset for fixed header */
.ap-anchor{ scroll-margin-top: calc(var(--ap-sticky-top, 110px) + 60px); }

/* --------------------------------------------------------------
 * v1.27 — Obiective: plan de o zi + hartă în pagină + chips premium
 * -------------------------------------------------------------- */

.ap-hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 10px;
}
.ap-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: .42rem .72rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--contrast-color), transparent 55%);
  background: color-mix(in srgb, var(--surface-color), transparent 80%);
  color: var(--contrast-color);
  font-size: .9rem;
  line-height:1.05;
}
.ap-chip i{ opacity: .9; }

.ap-dayplan{
  list-style:none;
  padding:0;
  margin:0;
}
.ap-dayplan li{
  display:flex;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid color-mix(in srgb,var(--default-color),transparent 90%);
  background: color-mix(in srgb,var(--surface-color),transparent 0%);
}
.ap-dayplan li + li{ margin-top:10px; }
.ap-dayplan .icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background: color-mix(in srgb,var(--accent-color),transparent 88%);
  color: var(--heading-color);
}
.ap-dayplan .text{
  color: color-mix(in srgb,var(--default-color),transparent 10%);
}

.ap-map-embed{
  border-radius:14px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--default-color),transparent 90%);
  background: color-mix(in srgb,var(--surface-color),transparent 0%);
}
.ap-map-embed iframe{
  width:100%;
  height:320px;
  border:0;
  display:block;
}
@media (max-width: 576px){
  .ap-map-embed iframe{ height:260px; }
}

.ap-map-actions .btn{ border-radius:999px; }


/* --------------------------------------------------------------
 * v1.34 — Filtre: diviziuni primare, acoperire secundară
 * -------------------------------------------------------------- */

.destination-filters .filter-sep{
  pointer-events: none;
  opacity: .65;
  padding-left: 0;
  margin-left: .2rem;
}
.destination-filters .filter-sep span{
  display:inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: .85rem;
}
.destination-filters .filter-secondary{
  font-size: .92rem;
  opacity: .92;
}

.ap-advanced-filters{
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface-color), transparent 0%);
}
.ap-advanced-filters summary{
  cursor: pointer;
  font-weight: 700;
  color: var(--heading-color);
}
.ap-advanced-filters summary::marker{ color: color-mix(in srgb, var(--default-color), transparent 35%); }
.ap-advanced-filters[open]{
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

/* --------------------------------------------------------------
 * v1.50 — Tours filters: predictive search + multi-zone selector
 * -------------------------------------------------------------- */

.ap-zone-multi .dropdown-menu{
  width: 100%;
  min-width: 320px;
  max-width: 460px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}
@media (max-width: 575.98px){
  .ap-zone-multi .dropdown-menu{ min-width: 100%; }
}

.ap-zone-options{
  max-height: 290px;
  overflow: auto;
  padding-right: 4px;
}

.ap-zone-opt{
  margin: 0;
  padding: .55rem .55rem .55rem 2.1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.ap-zone-opt:hover{
  background: color-mix(in srgb, var(--surface-color), var(--accent-color) 6%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}
.ap-zone-opt .form-check-input{
  margin-left: -1.6rem;
  margin-top: .35rem;
}
.ap-zone-opt-title{ display:block; font-weight: 700; line-height: 1.15; }
.ap-zone-opt-sub{ display:block; font-size: .82rem; opacity: .75; }

#filterResults{ white-space: nowrap; }



/* Zone detail: objectives grid (cleaner than full tour cards) */
.ap-zone-objectives-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.ap-zone-objectives-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

/* 3 per row on lg, 2 per row on md, 1 per row on sm */
.ap-zone-objectives-grid .ap-zobj-card{ grid-column: span 4; }
@media (max-width: 991.98px){
  .ap-zone-objectives-grid .ap-zobj-card{ grid-column: span 6; }
}
@media (max-width: 575.98px){
  .ap-zone-objectives-grid .ap-zobj-card{ grid-column: span 12; }
}

.ap-zobj-card{
  display:flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--surface-color), transparent 0%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.ap-zobj-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0,0,0,.14);
  border-color: color-mix(in srgb, var(--accent-color), transparent 55%);
}

.ap-zobj-thumb{
  position: relative;
  aspect-ratio: 16 / 10;
  background: rgba(0,0,0,.12);
}
.ap-zobj-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.ap-zobj-badge{
  position:absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(11, 27, 20, .82);
  color: #fff;
  backdrop-filter: blur(6px);
}

.ap-zobj-pill{
  position:absolute;
  right: 12px;
  top: 12px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: rgba(6,32,20,.92);
  backdrop-filter: blur(6px);
}

.ap-zobj-body{
  padding: 14px 14px 12px;
}
.ap-zobj-body h4{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.25;
}
.ap-zobj-body p{
  margin: 0 0 10px;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 18%);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.ap-zobj-meta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 28%);
}
.ap-zobj-meta i{ margin-right: 6px; }

/* keep the header logo crisp on scroll */
.scrolled .header .logo img{ opacity: 1; }

/* --------------------------------------------------------------
 * v1.48 — Details hero refresh + card spacing polish
 * -------------------------------------------------------------- */

/* Details pages: keep the template page-title visible (consistent hero band like the landing + list pages).
   We also don't need extra padding-top hacks when the page-title is present. */

/* Shared hero polish (zone + objective) */

.ap-hero-picture{ display:block; width:100%; height:100%; }
.ap-hero-picture img{ display:block; }

.travel-destination-details .destination-hero,
.travel-tour-details .tour-hero{
  margin-bottom: 44px;
}

.travel-destination-details .destination-hero .hero-image,
.travel-tour-details .tour-hero .hero-image-wrapper{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
}

.travel-destination-details .destination-hero .hero-image{ height: 440px; }

.travel-destination-details .destination-hero .hero-image img,
.travel-tour-details .tour-hero .hero-image-wrapper img{
  width: 100%;
  height: 440px;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}

@media (max-width: 768px){
  .travel-destination-details .destination-hero .hero-image{ height: 320px; border-radius: 18px; }
  .travel-tour-details .tour-hero .hero-image-wrapper{ border-radius: 18px; }
  .travel-destination-details .destination-hero .hero-image img,
  .travel-tour-details .tour-hero .hero-image-wrapper img{ height: 320px; }
}

/* Overlay becomes a soft bottom gradient (better readability) */
.travel-destination-details .destination-hero .hero-image .hero-overlay,
.travel-tour-details .tour-hero .hero-overlay{
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  padding: 58px 46px 38px;
  background: linear-gradient(180deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.35) 35%,
    rgba(0,0,0,.75) 100%);
}

@media (max-width: 768px){
  .travel-destination-details .destination-hero .hero-image .hero-overlay,
  .travel-tour-details .tour-hero .hero-overlay{ padding: 34px 18px 18px; }
}

.travel-destination-details .destination-hero .hero-image .hero-content,
.travel-tour-details .tour-hero .hero-content{
  max-width: 860px;
  color: var(--contrast-color);
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11, 27, 20, .28);
  backdrop-filter: blur(10px);
}

@media (max-width: 768px){
  .travel-destination-details .destination-hero .hero-image .hero-content,
  .travel-tour-details .tour-hero .hero-content{
    padding: 12px 14px;
    border-radius: 16px;
  }
}

.travel-destination-details .destination-hero .hero-image .hero-content h1,
.travel-tour-details .tour-hero .hero-content h1{
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 6px 0 10px;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

@media (max-width: 768px){
  .travel-destination-details .destination-hero .hero-image .hero-content h1,
  .travel-tour-details .tour-hero .hero-content h1{
    font-size: 28px;
    margin: 6px 0 8px;
  }
}

.travel-destination-details .destination-hero .hero-image .hero-content .hero-tagline,
.travel-tour-details .tour-hero .hero-content .hero-tagline{
  font-size: 1.02rem;
  margin: 0;
  opacity: .92;
  color: rgba(255,255,255,.92);
}

/* Meta row -> pills */
.travel-destination-details .destination-hero .hero-image .hero-content .hero-meta,
.travel-tour-details .tour-hero .hero-content .hero-meta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.travel-destination-details .destination-hero .hero-image .hero-content .hero-meta span,
.travel-tour-details .tour-hero .hero-content .hero-meta span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .86rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
}

.travel-destination-details .destination-hero .hero-image .hero-content .hero-meta span i,
.travel-tour-details .tour-hero .hero-content .hero-meta span i{
  font-size: 1rem;
  color: rgba(255,255,255,.85);
}

/* Card polish: shadow + slightly tighter lg padding */
.content-card{
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
}

@media (min-width: 992px){
  .content-card.p-lg-5{ padding: 2.25rem !important; }
}

/* Ensure objective hero overlay covers full image (matching zone hero) */
.travel-tour-details .tour-hero .hero-overlay{
  top: 0;
  height: 100%;
}


/* Subtle global background (same vibe as landing) */
body:not(.index-page){
  /* Use the same hero image as landing; keep it subtle for readability */
  background-image:
    linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)),
    url("../img/apuseni-hero-2400.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* background-attachment: fixed can cause jank on some devices */
  background-attachment: scroll;
  background-color: var(--background-color);
}

/* Let the global background show outside the centered container */
body:not(.index-page) section:not(.dark-background):not(.light-background),
body:not(.index-page) .section:not(.dark-background):not(.light-background),
body:not(.index-page) .page-title:not(.dark-background):not(.light-background),
body:not(.index-page) .breadcrumbs:not(.dark-background):not(.light-background){
  background: transparent !important;
  background-color: transparent !important;
}

body:not(.index-page) .main{ background: transparent !important; }


/* --------------------------------------------------------------
 * v1.52 SEO — micro-breadcrumbs + hero/meta link styling
 * -------------------------------------------------------------- */

.ap-microcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  opacity:.92;
  margin-bottom: 6px;
}
.ap-microcrumbs .sep{
  opacity:.8;
}
.ap-microcrumbs a{
  /* Breadcrumb links: green, consistent with the rest of the site */
  color: color-mix(in srgb, var(--accent-color), white 8%);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 55%);
}
.ap-microcrumbs a:hover{
  border-bottom-color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

.travel-destination-details .destination-hero .hero-image .hero-content .hero-meta a,
.travel-tour-details .tour-hero .hero-content .hero-meta a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .86rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.travel-destination-details .destination-hero .hero-image .hero-content .hero-meta a:hover,
.travel-tour-details .tour-hero .hero-content .hero-meta a:hover{
  background: rgba(0,0,0,.26);
  transform: translateY(-1px);
}

/* Badge links shouldn't be underlined */
.badge{
  text-decoration: none;
}

/* Zone category quick links */
.ap-zone-cats .btn{
  border-radius: 999px;
}

/* --------------------------------------------------------------
 * v1.53 — Design refresh (header + typography + filters)
 * - header "glass" dark (logo + nav become coherent)
 * - unify radii/shadows + nicer hover states
 * - sticky filters on Obiective (desktop)
 * - nicer filter chips + secondary separator
 * - remove redundant Page Title band on detail pages
 * -------------------------------------------------------------- */

:root{
  --heading-font: "Poppins", sans-serif;
  --nav-font: "Poppins", sans-serif;

  /* secondary accent used in gradients */
  --apuseni-accent2: #14b8a6;

  /* UI tokens */
  --ap-radius-sm: 12px;
  --ap-radius-md: 16px;
  --ap-radius-lg: 22px;
  --ap-shadow-1: 0 12px 32px rgba(0,0,0,.08);
  --ap-shadow-2: 0 18px 55px rgba(0,0,0,.18);

  /* nav in dark header */
  --nav-color: rgba(255,255,255,.78);
  --nav-hover-color: #ffffff;
  --nav-mobile-background-color: rgba(11,27,20,.96);
  --nav-dropdown-background-color: rgba(11,27,20,.96);
  --nav-dropdown-color: rgba(255,255,255,.90);
  --nav-dropdown-hover-color: var(--accent-color);
}

/* Header: dark glass pill (fixes white-on-white mismatch from template vars) */
.header{
  background: transparent !important;
}
.header .header-container{
  background: rgba(11, 27, 20, .58) !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.20);
  backdrop-filter: blur(12px);
  padding: 10px 22px !important;
}

.scrolled .header .header-container{
  background: rgba(11, 27, 20, .88) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}

/* Make sure nav links remain readable everywhere */
.navmenu a,
.navmenu a:focus{ color: var(--nav-color) !important; }
.navmenu li:hover > a,
.navmenu .active,
.navmenu .active:focus{ color: var(--nav-hover-color) !important; }

/* Mobile nav overlay */
.mobile-nav-active .navmenu > ul{
  background: var(--nav-mobile-background-color) !important;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}
.mobile-nav-active .navmenu a,
.mobile-nav-active .navmenu a:focus{ color: rgba(255,255,255,.92) !important; }

/* CTA button in header */
.header .btn-getstarted{
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--accent-color), var(--apuseni-accent2));
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.header .btn-getstarted:hover{ filter: brightness(1.03); transform: translateY(-1px); }

/* Global buttons (subtle upgrade) */
.btn-primary{
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-color), var(--apuseni-accent2));
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
.btn-primary:hover{ filter: brightness(1.03); transform: translateY(-1px); }

.btn.btn-outline,
.btn-outline-secondary,
.btn-outline-primary{
  border-radius: 999px !important;
}

/* Softer page background on long pages (avoid iOS jank from fixed attachment) */
@media (max-width: 991px){
  body:not(.index-page){ background-attachment: scroll !important; }
}

/* Cards: consistent radii + better hover */
.content-card,
.destination-tile,
.tour-card,
.travel-tours .featured-tour-card,
.travel-destinations .featured-destination,
.ap-zobj-card{
  border-radius: var(--ap-radius-lg) !important;
  box-shadow: var(--ap-shadow-1);
}

.destination-tile,
.tour-card,
.travel-tours .featured-tour-card,
.ap-zobj-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.destination-tile:hover,
.tour-card:hover,
.travel-tours .featured-tour-card:hover,
.ap-zobj-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--ap-shadow-2);
}

/* Tour filters: glass card + better controls */
.tours-page .tour-filters{
  border-radius: var(--ap-radius-lg);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  background: color-mix(in srgb, var(--surface-color), transparent 12%);
  backdrop-filter: blur(10px);
  padding: 1.25rem;
  margin-bottom: 22px;
}

.tours-page .ap-tours-layout{ position: relative; }
@media (min-width: 992px){
  .tours-page .ap-tours-layout .tour-filters{
    position: sticky;
    top: 96px; /* below header */
    z-index: 20;
  }
}

/* Input group rounding */
.tours-page .tour-filters .input-group-text{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  background: color-mix(in srgb, var(--background-color), transparent 0%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 82%);
}
.tours-page .tour-filters .input-group .form-control{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 82%);
  border-left: 0;
}
.tours-page .tour-filters .input-group .btn{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 82%);
  border-left: 0;
}

.tours-page .tour-filters .form-select,
.tours-page .tour-filters .form-control{
  border-radius: 14px;
}

/* Zone multiselect dropdown */
.ap-zone-multi .dropdown-menu.ap-zone-menu{
  width: min(520px, 92vw);
  max-height: 330px;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 86%);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
}

.ap-zone-options{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.ap-zone-options .form-check{
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
}
.ap-zone-options .form-check:hover{
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

/* Destinations filters: nicer chips + "secondary" separator */
.destinations-page .travel-destinations .destination-filters{
  gap: 10px;
}

.destinations-page .travel-destinations .destination-filters li{
  border-width: 1px;
  border-radius: 999px;
  padding: 9px 18px;
}

.destinations-page .travel-destinations .destination-filters li.filter-secondary{
  border-style: dashed;
  opacity: .9;
}

.destinations-page .travel-destinations .destination-filters li.filter-sep{
  flex-basis: 100%;
  border: 0 !important;
  background: transparent !important;
  padding: 6px 0 2px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
  cursor: default;
  pointer-events: none;
}
.destinations-page .travel-destinations .destination-filters li.filter-sep span{
  display:inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  background: color-mix(in srgb, var(--surface-color), transparent 14%);
}

@media (min-width: 992px){
  .destinations-page .travel-destinations .destination-filters{
    position: sticky;
    top: 96px;
    z-index: 20;
    padding: 10px 10px;
    border-radius: 999px;
    margin-bottom: 32px;
    background: color-mix(in srgb, var(--surface-color), transparent 18%);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    backdrop-filter: blur(10px);
  }
}

/* Detail pages: keep the Page Title band (it provides the top background image),
   but hide its textual content to avoid duplicate headings. */
.destination-details-page .page-title,
.tour-details-page .page-title{
  display: block !important;
  padding: 140px 0 60px 0; /* slightly tighter than the default */
}
.destination-details-page .page-title .container,
.tour-details-page .page-title .container{ display:none; }

/* Revert the extra top padding we added when the band was hidden */
.destination-details-page #travel-destination-details.section,
.tour-details-page #travel-tour-details.section{
  padding-top: 60px;
}

/* Slightly tighter hero titles (less wrap) */
.travel-destination-details .destination-hero .hero-image .hero-content h1,
.travel-tour-details .tour-hero .hero-content h1{
  font-family: var(--heading-font);
  font-weight: 700;
}



/* Zone editorial layout */
.ap-zone-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 575px){
  .ap-zone-kpis{ grid-template-columns: 1fr; }
}
.ap-zone-kpis .ap-kpi{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  background: color-mix(in srgb, var(--surface-color), transparent 0%);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--default-color), transparent 95%);
}
.ap-zone-kpis .ap-kpi .label{
  font-size: .8rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}
.ap-zone-kpis .ap-kpi .value{
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--heading-color);
  margin-top: 2px;
}

.ap-zone-highlights{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 991px){
  .ap-zone-highlights{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px){
  .ap-zone-highlights{ grid-template-columns: 1fr; }
}

.ap-highlight-card{
  position: relative;
  display:block;
  border-radius: 18px;
  overflow: hidden;
  min-height: 220px;
  text-decoration:none;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  background: color-mix(in srgb, var(--surface-color), transparent 0%);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ap-highlight-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--default-color), transparent 90%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 55%);
}
.ap-highlight-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  filter: saturate(1.02);
}
.ap-highlight-card .ap-highlight-overlay{
  position:absolute;
  inset:0;
  padding: 16px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 6px;
  color: #fff;
  background: linear-gradient(180deg,
    color-mix(in srgb, #000, transparent 75%) 0%,
    color-mix(in srgb, #000, transparent 80%) 35%,
    color-mix(in srgb, #000, transparent 15%) 100%);
}
.ap-highlight-card .kicker{
  display:inline-block;
  font-size: .78rem;
  letter-spacing: .02em;
  color: color-mix(in srgb, #fff, transparent 10%);
  opacity: .95;
}
.ap-highlight-card h4{
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
  color: #fff;
}
.ap-highlight-card p{
  margin: 0;
  font-size: .92rem;
  color: color-mix(in srgb, #fff, transparent 18%);
}
.ap-highlight-card .meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: .86rem;
  color: color-mix(in srgb, #fff, transparent 10%);
}
.ap-highlight-card .meta i{ margin-right: 6px; }

/* Better anchor scroll (works with sticky header) */
.ap-anchor{ scroll-margin-top: calc(var(--ap-sticky-top, 110px) + 20px); }


/* --- Feedback (corecții) modal --- */
.ap-feedback-modal .modal-header{
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
}
.ap-feedback-modal .modal-title{
  font-weight: 800;
}
.ap-feedback-inline .btn-link{
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ap-feedback-inline .btn-link:hover{
  color: color-mix(in srgb, var(--accent-color), #000 12%);
}

/* --- Performance: skip heavy layout when off-screen --- */
@supports (content-visibility: auto){
  .ap-cv{
    content-visibility: auto;
    contain-intrinsic-size: 1px 700px;
  }
}


/* --------------------------------------------------------------
 * v1.63 — Peșteri: clasă (B/C) + badge pe carduri
 * -------------------------------------------------------------- */
.tour-card .tour-image .ap-cave-class-badge{
  position: absolute;
  top: 52px;
  left: 15px;
  background: color-mix(in srgb, var(--default-color), transparent 20%);
  color: var(--contrast-color);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.tour-card .tour-image .ap-cave-class-badge.ap-cave-b{
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}
.tour-card .tour-image .ap-cave-class-badge.ap-cave-c{
  background: color-mix(in srgb, var(--default-color), transparent 10%);
}

/* Zone cards (listă obiective în paginile de zonă) */
.ap-zobj-thumb .ap-zobj-class{
  position: absolute;
  top: 10px;
  right: 10px;
  background: color-mix(in srgb, var(--default-color), transparent 18%);
  color: var(--contrast-color);
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------
 * v1.68 — Zones filter bar (modern + compact on mobile)
 * - Avoid tall multi-line filter stacks on small screens
 * - Use a single-row, horizontally scrollable chip bar
 * -------------------------------------------------------------- */

.destinations-page .travel-destinations .destination-filters{
  gap: 10px;
}

/* --------------------------------------------------------------
 * v1.69 — Zones filters: collapse on mobile (less screen takeover)
 * - Mobile: show a compact "Filtre" bar; expand chips on demand
 * - Desktop: keep the sticky chip row visible
 * -------------------------------------------------------------- */

.destinations-page .ap-zone-filters-bar .ap-btn-filter{
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 55%);
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--default-color), transparent 94%);
}
.destinations-page .ap-zone-filters-bar .ap-btn-filter:hover{
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
}
.destinations-page .ap-zone-filters-current{
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Always show the collapse container on desktop */
@media (min-width: 992px){
  .destinations-page #zoneFiltersCollapse.collapse{
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
}

/* Slightly tighter chips when opened on mobile */
@media (max-width: 991px){
  .destinations-page .ap-zone-filters-collapse{
    margin-bottom: 18px;
  }
  .destinations-page .travel-destinations .destination-filters{
    margin-bottom: 0;
  }
}

@media (max-width: 768px){
  .destinations-page .travel-destinations .destination-filters{
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 8px 10px;
    margin: 0 0 26px 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color), transparent 4%);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--default-color), transparent 94%);
  }
  .destinations-page .travel-destinations .destination-filters::-webkit-scrollbar{ display:none; }

  .destinations-page .travel-destinations .destination-filters li{
    flex: 0 0 auto;
    border-width: 1px;
    padding: 8px 14px;
    font-size: 13px;
    scroll-snap-align: start;
  }

  .destinations-page .travel-destinations .destination-filters{
    scroll-snap-type: x proximity;
  }

  /* Separator doesn't add value on mobile */
  .destinations-page .travel-destinations .destination-filters li.filter-sep{
    display: none;
  }

  /* Secondary filters stay available but visually lighter */
  .destinations-page .travel-destinations .destination-filters li.filter-secondary{
    opacity: .86;
  }
}

/* --------------------------------------------------------------
 * v1.70 — Zones filters redesign
 * - Primary filters: single-row chip bar (no tall multi-line capsule)
 * - Secondary filters: moved into an "advanced" details section
 * -------------------------------------------------------------- */

.destinations-page .travel-destinations .destination-filters.ap-zone-filters-primary{
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.destinations-page .travel-destinations .destination-filters.ap-zone-filters-primary::-webkit-scrollbar{ display:none; }

/* Keep chip bar compact */
.destinations-page .travel-destinations .destination-filters.ap-zone-filters-primary li{
  flex: 0 0 auto;
}

/* Secondary chips should NOT inherit the sticky capsule styles */
.destinations-page .travel-destinations .destination-filters.ap-zone-filters-secondary{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  padding: 0 !important;
  margin: 8px 0 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

/* Advanced section: compact, modern */
.destinations-page .ap-zone-filters-advanced{
  border-radius: 16px;
  padding: 10px 12px;
}
.destinations-page .ap-zone-filters-advanced summary{
  display:flex;
  align-items:center;
  gap: 10px;
}
.destinations-page .ap-zone-filters-advanced summary i{
  color: var(--accent-color);
}

/* On desktop, reduce the sticky capsule padding a bit (primary bar only) */
@media (min-width: 992px){
  .destinations-page .travel-destinations .destination-filters.ap-zone-filters-primary{
    padding: 8px 8px;
  }
}

/* --------------------------------------------------------------
 * v1.71 — Zones filters polish
 * - Shorter massif labels so everything fits cleanly on desktop
 * - Add breathing room below filters
 * -------------------------------------------------------------- */

.destinations-page .ap-zone-filters-wrap{
  margin-bottom: 18px;
}
.destinations-page .ap-zone-filters-advanced{
  margin-bottom: 18px;
}

@media (min-width: 992px){
  .destinations-page .travel-destinations .destination-filters.ap-zone-filters-primary{
    gap: 8px;
    justify-content: center;
    padding: 8px 20px;
  }
  .destinations-page .travel-destinations .destination-filters.ap-zone-filters-primary li{
    padding: 8px 14px;
    font-size: 13px;
  }
}