/* Theme 06 - custom styles alongside Tailwind (Play CDN). */

/* ---------- Sticky header shadow ---------- */
#site-header { transition: box-shadow .25s ease; }
#site-header.is-stuck { box-shadow: 0 10px 30px -12px rgb(15 23 42 / .25); }

/* ---------- Search input attention pulse ---------- */
@keyframes search-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 39, 39, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(229, 39, 39, .18); }
}
.search__input.search-pulse { animation: search-pulse 2.2s ease-in-out 3; }

/* ---------- Scroll-snap carousels ([data-carousel] > [data-carousel-track]) ---------- */
[data-carousel-track] {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-carousel-track]::-webkit-scrollbar { display: none; }
[data-carousel-track] > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ---------- Tabs ---------- */
[data-tab].is-active { color: var(--main_color); border-color: var(--main_color); }

/* ---------- Collapse / accordion chevron ---------- */
[data-collapse] [data-collapse-toggle] .collapse-chevron { transition: transform .2s ease; }
[data-collapse].is-open [data-collapse-toggle] .collapse-chevron { transform: rotate(180deg); }

/* ---------- Off-canvas sidebar (mobile filters) ---------- */
@media (max-width: 1023px) {
  [data-sidebar] {
    position: fixed; top: 0; left: 0; height: 100%; width: 20rem; max-width: 85vw;
    background: #fff; z-index: 50; transform: translateX(-100%);
    transition: transform .3s ease; overflow-y: auto;
    box-shadow: 0 10px 30px -12px rgb(15 23 42 / .35);
  }
  [data-sidebar].is-open { transform: translateX(0); }
}

/* ---------- Layout switcher (grid/list) ---------- */
[data-layout].is-active { color: var(--main_color); background: var(--main_color_light); }
[data-products].is-list { display: block !important; }
[data-products].is-list > * { width: 100% !important; max-width: 100% !important; }

/* ---------- Modal (.modal-tw) ---------- */
.modal-tw {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgb(15 23 42 / .55);
}
.modal-tw.hidden { display: none; }

/* ---------- Lightbox (#tw-lightbox) ---------- */
#tw-lightbox {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  background: rgb(2 6 23 / .9);
}
#tw-lightbox.hidden { display: none; }

/* ---------- Select2 -> Tailwind look ---------- */
.select2-container--default .select2-selection--single {
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: .5rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  padding-left: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; }
.select2-dropdown { border-color: #cbd5e1 !important; border-radius: .5rem !important; }

/* ---------- Legacy CMS content (DB-stored HTML rendered inside .cms-content) ---------- */
.cms-content h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; margin: 1.5rem 0 1rem; color: #0f172a; }
.cms-content h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin: 1.25rem 0 .75rem; color: #0f172a; }
.cms-content h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; margin: 1rem 0 .5rem; color: #0f172a; }
.cms-content p { margin: 0 0 1rem; line-height: 1.7; }
.cms-content a { color: var(--main_color_links); text-decoration: underline; }
.cms-content ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1rem; }
.cms-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1rem; }
.cms-content li { margin: .25rem 0; }
.cms-content img { max-width: 100%; height: auto; border-radius: .5rem; }
.cms-content table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.cms-content th, .cms-content td { border: 1px solid #e2e8f0; padding: .5rem .75rem; text-align: left; }
.cms-content blockquote { border-left: 4px solid var(--main_color); padding-left: 1rem; color: #475569; margin: 0 0 1rem; }
.cms-content .btn { display: inline-block; padding: .5rem 1rem; border-radius: .5rem; font-weight: 600; background: var(--main_color); color: #fff; text-decoration: none; }

/* Bootstrap-era grid shim for legacy CMS markup */
.cms-content .row { display: flex; flex-wrap: wrap; margin: 0 -.75rem; }
.cms-content [class^="col-"], .cms-content [class*=" col-"] { padding: 0 .75rem; width: 100%; }
@media (min-width: 768px) {
  .cms-content .col-md-6 { width: 50%; }
  .cms-content .col-md-4 { width: 33.3333%; }
  .cms-content .col-md-3 { width: 25%; }
  .cms-content .col-md-8 { width: 66.6667%; }
}

/* ---------- Home "Localizare pe harta" map (left column of .location grid) ---------- */
/* The map is a static image stored in the CMS HTML. Cap its box to the same fixed
   height as the "Nou intrate pe stoc" carousel beside it (h-72 / md:h-96) and crop the
   image with object-fit:cover, so the section height no longer depends on the image
   dimensions and both columns line up. Overrides the generic ".cms-content img { height:auto }". */
.location .map-responsive {
  height: 18rem;          /* h-72 */
  border-radius: 1rem;    /* rounded-2xl, match the carousel track */
  overflow: hidden;
}
@media (min-width: 768px) {
  .location .map-responsive { height: 24rem; }   /* md:h-96 */
}
.location .map-responsive a {
  display: block;
  width: 100%;
  height: 100%;
}
.location .map-responsive img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-responsive {
  border-radius: 15px;
  overflow: hidden; /* Critic pentru a tăia colțurile iframe-ului din interior */
}
/* Right column: the "Nou intrate pe stoc" carousel. Its Tailwind height utilities
   (h-72 / md:h-96) are otherwise beaten by ".cms-content img { height:auto }" above,
   which would make the slides follow the photo's aspect ratio. Restate the same fixed
   height here (higher specificity) so the carousel matches the map box exactly. */
.location [data-carousel-track] img {
  height: 18rem;          /* h-72 */
  object-fit: cover;
}
@media (min-width: 768px) {
  .location [data-carousel-track] img { height: 24rem; }   /* md:h-96 */
}
/* Caption legibility: the title + button overlay the photo and must stay light. The
   generic ".cms-content h3 / a" prose rules above otherwise force the title to slate-900
   and the button text to the link colour (== its own bg-main, so it vanishes). Restate
   light text (higher specificity), drop the prose underline, and deepen the gradient so
   the caption reads over any photo. Not scoped to ".location": the carousel can be placed
   anywhere inside ".cms-content", and the caption must read light wherever it lands. */
[data-carousel] .absolute.inset-0 {
  background-image: linear-gradient(to top, rgba(2, 6, 23, .88), rgba(2, 6, 23, .35) 45%, rgba(2, 6, 23, 0) 75%);
}
[data-carousel] h3 {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
[data-carousel] a {
  color: #fff;
  text-decoration: none;
}

/* ---------- Car-parts finder (".block-finder" / car-parts-search-engine) ---------- */
/* Full-bleed hero: the widget lives inside the centered ".cms-content" container, so break
   it out to span the whole viewport. ".site" uses overflow-x:clip to absorb the
   scrollbar-width overshoot of 100vw without becoming a scroll container, so the sticky
   header keeps working (overflow-x:hidden would break it). */
.site { overflow-x: clip; }
.block-finder {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Unitary selects: same height, border and slight rounding in every state — the enhanced
   select2 control (enabled) and the plain disabled native <select> alike. The default
   select2 rounding (.75rem) felt too strong, so both are pinned to .5rem. */
.block-finder .select2-container { width: 100% !important; }
.block-finder .select2-selection--single { border-radius: .5rem !important; }
.block-finder select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; height: 44px;
  border: 1px solid #cbd5e1; border-radius: .5rem;
  background-color: #fff; color: #0f172a;
  padding: 0 36px 0 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
/* Disabled selects stay solid (a global rule drops them to opacity:.7 → translucent over
   the photo); keep the same shape, just muted. */
.block-finder select:disabled {
  background-color: #f1f5f9; color: #94a3b8;
  opacity: 1; cursor: not-allowed;
}
/* Match the select2 arrow to the native chevron so all four selects look identical. */
.block-finder .select2-selection__arrow b { display: none; }
.block-finder .select2-selection__arrow {
  width: 30px; right: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 16px;
}