/*==--------------------------------------------------------------==*\
||                                                                  ||
||  TEMPORARY stylesheet — watches_filter + selection_carousel      ||
||                                                                  ||
||  Both shortcodes' CSS lives here for now so it can be tested     ||
||  live without touching rolex-styles.css. It's enqueued            ||
||  automatically by both shortcodes' PHP files (no manual paste    ||
||  needed) — see wp_enqueue_style('rolex-new-shortcodes-temp', …)   ||
||  in rolex-watches-filter.php and rolex-selection-carousel.php.    ||
||                                                                  ||
||  Once this is confirmed and stable:                              ||
||   1. Copy everything below into rolex-styles.css.                ||
||   2. Delete this file.                                           ||
||   3. Remove the wp_enqueue_style('rolex-new-shortcodes-temp', …)  ||
||      call from both PHP files.                                   ||
||                                                                  ||
\*==--------------------------------------------------------------==*/


/*==--------------------------------==*\
||                                    ||
||     Watches Filter (New Page)      ||
||                                    ||
\*==--------------------------------==*/

.rlx-watches-filter {
  width: 100%;
}

.rlx-wf-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

.rlx-wf-sidebar {
  width: 100%;
}

.rlx-wf-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.rlx-wf-sidebar-header h3 {
  font-size: 20px !important;
  font-weight: bold !important;
  color: #452c1e !important;
  margin: 0 !important;
}

.rlx-wf-reset {
  position: relative;
  max-width: max-content;
  margin: 0 !important;
  height: 44px;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  padding: 0 58px 0 30px;
  background-color: rgba(212, 212, 212, 0.3);
  border: none;
  border-radius: 99px;
  color: #452c1e;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

/* × close button for the mobile drawer — hidden on desktop where the
   sidebar is always visible inline (see the drawer media query below). */
.rlx-wf-drawer-close {
  display: none;
}

.rlx-wf-reset::after {
  content: "\21BA";
  position: absolute;
  right: 30px;
  top: calc(50% - 10px);
  font-size: 20px;
  line-height: 1;
  transform: rotate(-90deg);
}

/* The theme's global button:hover/:focus rule (background-color:#501024;
   color:#fff) matches every <button> on the page, including this one and
   the filter-group toggles below. Override it explicitly so it doesn't
   leak in here. */
.rlx-wf-reset:hover,
.rlx-wf-reset:focus {
  background-color: rgba(212, 212, 212, 0.5) !important;
  color: #452c1e !important;
}

.rlx-wf-group {
  border-bottom: 1px solid rgba(69, 44, 30, 0.2);
  margin: 0;
  padding: 16px 0;
}

/* The theme's generic button rules (padding, height, margin, line-height)
   all match this <button>, so every box property is pinned explicitly. */
.rlx-wf-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  font-size: 26px;
  font-weight: bold;
  color: #452c1e;
  cursor: pointer;
  text-align: left;
}

/* Same global button:hover/:focus leak as .rlx-wf-reset above. */
.rlx-wf-group-toggle:hover,
.rlx-wf-group-toggle:focus {
  background-color: transparent !important;
  color: #452c1e !important;
}

.rlx-wf-toggle-icon {
  font-size: 18px;
  line-height: 1;
}

/* Plain block layout, not flex+gap: jQuery's slideToggle rewrites the
   inline display when a group opens/closes, which would drop the gap. */
.rlx-wf-group-body {
  margin-top: 14px;
  display: block;
}

/* The theme's global <label> styling (margin-bottom, line-height,
   padding) was matching these and spreading the list out. Everything
   that affects row height is pinned so spacing is only the 8px below. */
.rlx-wf-option {
  position: relative;
  display: block;
  width: auto;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: normal;
  line-height: 1.5 !important;
  color: #212121;
  cursor: pointer;
}

.rlx-wf-option:last-child {
  margin-bottom: 0 !important;
}

.rlx-wf-option span {
  display: inline;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

.rlx-wf-option:hover {
  color: #127749;
}

/* No visible checkbox square — the input stays in the DOM (click target,
   keyboard/tab, screen readers) but is visually hidden. Selection shows
   as a text style change instead, via the :checked rule below. */
.rlx-wf-option input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.rlx-wf-option input[type="checkbox"]:checked + span {
  color: #127749;
  font-weight: bold;
}

.rlx-wf-results-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

/* Also a <label>, so the theme's label margin/padding would knock it
   out of line with "Filters +" on mobile — pinned the same way. */
.rlx-wf-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  font-size: 26px;
  font-weight: bold;
  color: #452c1e;
}

.rlx-wf-sort select {
  outline: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* The global form-control rule sets padding: .57667em on every side —
     zero that out entirely and only reserve room for the chevron icon. */
  padding: 0 30px 0 0;
  margin: 0;
  font-weight: bold;
  font-size: 26px;
  color: #452c1e;
  text-align: right;
  cursor: pointer;
  /* Width is set precisely in JS (see rolex-watches-filter.js) to match
     the selected option's actual text — a fixed/max-width can't do this
     correctly since native selects size to their WIDEST option, not the
     selected one, in every browser. */
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgba(0, 0, 0, 0);
  background-repeat: no-repeat;
  background-position: right center;
  /* Closed state: down chevron */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23452c1e' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The theme's global select/input box-shadow, border-radius and padding
   were still showing through despite appearance:none above — force them
   off explicitly. */
.rlx-wf-sort select:hover,
.rlx-wf-sort select:focus {
  outline: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 30px 0 0 !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

.rlx-wf-sort select:focus {
  /* Open state: up chevron (your provided icon) */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7l5-5 5 5' stroke='%23452c1e' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.rlx-wf-empty {
  text-align: center;
  padding: 60px 20px;
  font-size: 16px;
  color: #452c1e;
}

.rlx-watches-filter.rlx-wf-loading #rlxWfListContainer {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Grid blowout guard: a plain `repeat(N, 1fr)` column can grow past its
   share if a card's content (a long title/price, a wide image) can't
   shrink — that stretches the whole grid past the viewport and pushes
   it off the page, which is exactly what was happening on mobile.
   `minmax(0, 1fr)` lets the column actually shrink to fit. Targeted at
   this grid's own id so it doesn't change .watches-list anywhere else
   on the site. */
#rlxWfGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 767px) {
  #rlxWfGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* "Filters +" trigger — only shown below the desktop breakpoint, where
   it opens the sidebar as a drawer instead of it sitting inline. */
.rlx-wf-mobile-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  font-size: 20px;
  font-weight: bold;
  color: #452c1e;
  cursor: pointer;
}

.rlx-wf-mobile-trigger:hover,
.rlx-wf-mobile-trigger:focus {
  background-color: transparent !important;
  color: #452c1e !important;
}

@media screen and (min-width: 992px) {
  .rlx-wf-mobile-trigger {
    display: none;
  }
}

/* Dark overlay behind the mobile drawer. Hidden by default at every width
   (it used to have no rule above 991px, so on desktop it sat as an empty
   flex item and pushed the sidebar 60px to the right). JS moves it under
   <body> and toggles .rlx-wf-open. */
.rlx-wf-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(33, 33, 33, 0.5);
  z-index: 100000;
}

.rlx-wf-overlay.rlx-wf-open {
  display: block;
}

/* Mobile/tablet: the sidebar becomes a left-hand drawer, opened by
   "Filters +" and closed by the ×, the overlay, or Escape. While open,
   JS moves it under <body> so no page-builder wrapper can trap it, so
   the open state is a class on the sidebar itself (.rlx-wf-open). */
@media screen and (max-width: 991px) {
  .rlx-wf-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 360px;
    margin: 0;
    background: #fff;
    padding: 24px 20px 40px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 100001;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .rlx-wf-sidebar.rlx-wf-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }

  /* The × sits on its own row at the top, header row below it */
  .rlx-wf-sidebar .rlx-wf-sidebar-header {
    margin-top: 36px;
  }

  .rlx-wf-drawer-close {
    display: block;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1 !important;
    color: #452c1e;
    cursor: pointer;
  }

  .rlx-wf-drawer-close:hover,
  .rlx-wf-drawer-close:focus {
    background-color: transparent !important;
    color: #452c1e !important;
  }

  .rlx-wf-results-header {
    justify-content: space-between;
  }
}

/* Scale the oversized template type sizes down on small phones. */
@media screen and (max-width: 480px) {
  .rlx-wf-sidebar-header h3 {
    font-size: 18px !important;
  }

  .rlx-wf-reset {
    height: 38px;
    font-size: 13px;
    padding: 0 48px 0 22px;
  }

  .rlx-wf-reset::after {
    right: 22px;
    font-size: 17px;
  }

  .rlx-wf-group-toggle,
  .rlx-wf-mobile-trigger {
    font-size: 19px;
  }

  .rlx-wf-sort,
  .rlx-wf-sort select {
    font-size: 19px !important;
  }
}

@media screen and (min-width: 992px) {
  .rlx-wf-layout {
    flex-direction: row;
    gap: 60px;
  }

  .rlx-wf-sidebar {
    width: 260px;
    flex-shrink: 0;
  }

  .rlx-wf-results {
    flex: 1;
    min-width: 0;
  }
}


/*==--------------------------------==*\
||                                    ||
||    Our Rolex Selection Carousel    ||
||        (selection_carousel)        ||
||                                    ||
\*==--------------------------------==*/

.rlx-selection-carousel {
  width: 100%;
}

/* Side gutters hold the arrows, so they sit next to the cards instead of
   on top of them. Removed on mobile where the arrows are hidden. */
.rlx-sc-viewport {
  position: relative;
  padding: 0 70px;
}

@media screen and (max-width: 767px) {
  .rlx-sc-viewport {
    padding: 0;
  }
}

/* The clipping window — only this stays fixed-width, everything else
   (the 4-wide grids inside) is free to be as wide as the container. */
.rlx-sc-track {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y; /* vertical scroll stays native, horizontal = swipe */
}

/* All pages sit side by side in one row; sliding is a transform on this
   element only (set/transitioned in JS), so moving between pages is an
   actual slide instead of an instant display:none/grid swap. */
.rlx-sc-track-inner {
  display: flex;
  transition: transform 0.45s ease;
}

/* .watches-list.rlx-sc-grid (two classes) so it beats rolex-styles.css's
   .watches-list 3-column rule no matter which file loads last. */
.watches-list.rlx-sc-grid {
  flex: 0 0 100%;
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr: without it, a column can't shrink
     past its content's natural width (a long title, a wide image), so
     the grid stretches past the viewport and spills off the page on
     narrow screens — this is what was happening on mobile. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media screen and (max-width: 767px) {
  .watches-list.rlx-sc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Arrows: same as keep_exploring's .rlx-page .owl-nav [class*="owl-"] —
   same SVG images, 50x50, text hidden off-screen, prev is the next image
   mirrored, faded when there's nowhere to go. They sit in the viewport's
   side gutters, vertically centered on the cards. Hidden on mobile.
   Image paths are root-relative so they keep working after this CSS is
   merged into rolex-styles.css. */
.rlx-sc-arrow {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -25px !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  width: 50px;
  height: 50px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: url(/wp-content/themes/lugaro/img/next-light-mode-default-button.svg);
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  display: block;
  z-index: 1;
  cursor: pointer;
  user-select: none;
}

.rlx-sc-arrow-prev {
  transform: scaleX(-1);
}

.rlx-sc-arrow-next {
  left: auto;
  right: 0;
}

/* The theme's global button:hover/:focus rule (background-color:#501024)
   would paint a box behind the image, so background-color stays forced
   transparent above; only the image swaps on hover, like keep_exploring. */
.rlx-sc-arrow:hover {
  background-image: url(/wp-content/themes/lugaro/img/next-light-mode-hover-button.svg);
}

.rlx-sc-arrow.rlx-sc-disabled {
  opacity: 0.3;
  cursor: default;
}

.rlx-sc-arrow.rlx-sc-disabled:hover {
  background-image: url(/wp-content/themes/lugaro/img/next-light-mode-default-button.svg);
}

@media screen and (max-width: 767px) {
  .rlx-sc-arrow {
    display: none;
  }
}

/* Dots — same look as the "Keep exploring" carousel's .owl-dots/.owl-dot
   (rlx-page .owl-dot / .owl-dot.active), kept as plain <button> elements
   here instead since this carousel isn't an Owl Carousel instance. */
.rlx-sc-dots {
  display: flex;
  justify-content: center;
  margin-top: 2.5vh;
}

.rlx-sc-dot {
  width: 20px;
  height: 4px;
  margin: 0 6px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: #d4d4d4;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rlx-sc-dot.active {
  width: 50px;
  background-color: #127749;
}

.rlx-sc-dot:hover,
.rlx-sc-dot:focus {
  background-color: #127749 !important;
}

/* View all — same pill CTA style as .load-more-container button */
.rlx-sc-viewall {
  text-align: center;
  margin-top: 30px;
}

.rlx-sc-viewall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #006039 !important;
  padding: 12px 30px !important;
  height: 44px !important;
  box-sizing: border-box;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 2em;
  cursor: pointer;
}

.rlx-sc-viewall-btn:hover,
.rlx-sc-viewall-btn:focus {
  background: #004d30 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/*==--------------------------------==*\
||                                    ||
||   Shared card tweaks (both above)  ||
||                                    ||
\*==--------------------------------==*/

/* Card title 18px on mobile. rolex-styles.css has
   .watch-text-container h3 { font-size: 24px !important }, so this needs
   the extra wrapper class to outrank it. Scoped to these two shortcodes
   only, so watches_by_collection pages are unchanged. */
@media screen and (max-width: 767px) {
  .rlx-watches-filter .watch-text-container h3,
  .rlx-selection-carousel .watch-text-container h3 {
    font-size: 18px !important;
  }
}