/* RDO Quand modal — search-form temporal filter
 * Tokens aligned with booknetic-animals CP and booknetic-rdo-booking-theme.
 * Author: RedOcean <https://redocean.pt>
 * Since: 1.4.13
 *
 * Token map (extracted from CP + booking-theme):
 *   Brown primary  #7E5B34   Brown muted   #a07c52
 *   Beige border   #EFBE86   Cream         #FFFCEB
 *   Orange         #EF4C24   Orange dark   #d94420
 *   Soft beige bg  #f7f2ec
 *   Modal overlay  rgba(94, 66, 32, 0.50)
 *   Modal shadow   0 24px 64px rgba(94, 66, 32, 0.28)
 *   CTA shadow     0 2px 8px rgba(239, 76, 36, 0.22)
 *
 * Namespace: .rdo-quand-* (avoids collision with theme + Booknetic + CP).
 */

/* ─── Trigger pill in #providers-search ─── */
#providers-search label.rdo-quand-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  /* Hard ellipsis to prevent label overflow when both dates + time are
     all present and the pill is on the narrow side (grid-25). */
  min-width: 0;
  overflow: hidden;
  /* Reserve space on the right for the ::after chevron, matching the
     padding the native <select>s use below for their custom chevron. */
  padding-right: 2.4rem;
}
#providers-search label.rdo-quand-trigger > .rdo-quand-trigger-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#providers-search label.rdo-quand-trigger.is-empty > .rdo-quand-trigger-text {
  color: #7E5B34;
}

/* ─── Unified chevron: same SVG for the .rdo-quand-trigger ::after AND
   for the native <select>s (Service, Langue) inside #providers-search.
   The native <select>s get `appearance: none` to hide the OS chevron,
   then we paint our own as a background-image so all 3 pills share
   identical chevron geometry, color and right offset.

   Specificity note: the theme's main.css has rules like
     body #form-search .double-fields .field-right label select { padding-right: 1.6rem }
   which beat our selector by default. We use higher-specificity
   selectors and !important on the offsetting properties to win. */
#providers-search label.rdo-quand-trigger::after {
  content: "";
  position: absolute;
  right: 2rem;
  top: 50%;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%237E5B34' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
body #providers-search form select[name="service"],
body #providers-search form select[name="language"] {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%237E5B34' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 1.2rem 1.2rem !important;
  padding-right: 2.6rem !important;
  /* Force consistent text alignment — the theme aligns the Service
     <select> to the right; we want all selects left-aligned for
     visual parity with Langue and the Quand trigger. */
  text-align: left !important;
}
/* Hide IE 10/11's legacy expand button when present. */
body #providers-search form select[name="service"]::-ms-expand,
body #providers-search form select[name="language"]::-ms-expand {
  display: none;
}

/* ─── Layout of #form-search on the results page (page-providers.php) ───
 * Two-row grid layout (since 1.4.29):
 *   Row 1 (66% + 33%) : [Nom + Ou + Service]      | [Localisation]
 *   Row 2 (33% × 3)   : [Langue] | [Quand?]       | [Rechercher]
 *
 * The DOM has 3 sibling .relative blocks (double-fields, paragraphe, submit-row).
 * To reposition individual children of the .paragraphe wrapper across rows,
 * we set `display: contents` on the .paragraphe so its children become direct
 * grid items of the <form>, then use grid-area to place each item.
 *
 * Why not flex/wrap: the children come from different parent wrappers
 * (.double-fields contains the Nom+Ou+Service group; .paragraphe contains
 * Loc, Lang, Quand; .rdo-quand-submit-row contains the button) — flex with
 * order alone can't merge them into a single 2-row layout. Grid + display:
 * contents on .paragraphe is the cleanest solution that doesn't require
 * rewriting form-search.php (which is shared with the home page).
 *
 * The .double-fields wrapper is NOT flattened with display: contents because
 * it has a ::before pseudo-element (decorative leaf) that requires a real
 * box to anchor to.
 *
 * Mobile already uses vertical layout via the existing media queries.
 */
#providers #form-search {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1140px) {
  body #providers #form-search.services form {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto auto;
        grid-template-rows: auto auto;
    width: 100%;
    -webkit-column-gap: 1em;
       -moz-column-gap: 1em;
            column-gap: 1em;
    row-gap: 1em;
  }
  /* Drop the legacy theme rule (flex 50/50) on .relative children. */
  body #providers #form-search.services form .relative {
    -webkit-box-flex: initial !important;
        -ms-flex: none !important;
            flex: none !important;
    margin: 0 !important;
  }
  /* Row 1, cols 1–2: Nom + Ou + Service group. */
  body #providers #form-search.services form .relative.double-fields {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: 1 / 1 / 2 / 3;
  }
  /* Flatten .paragraphe so its 3 children (Loc, Lang, Quand) become direct
     grid items and can be placed individually across both rows. */
  body #providers #form-search.services form > .relative.paragraphe:not(.rdo-quand-submit-row) {
    display: contents;
  }
  /* Row 2, col 2: Localisation (1st child of .paragraphe). */
  body #providers #form-search.services form .relative.paragraphe:not(.rdo-quand-submit-row) > .grid-33:nth-child(1) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: 2 / 2 / 3 / 3;
  }
  /* Row 2, col 1: Langue (2nd child). */
  body #providers #form-search.services form .relative.paragraphe:not(.rdo-quand-submit-row) > .grid-33:nth-child(2) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: 2 / 1 / 3 / 2;
  }
  /* Row 1, col 3: Quand? (3rd child). */
  body #providers #form-search.services form .relative.paragraphe:not(.rdo-quand-submit-row) > .grid-33:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: 1 / 3 / 2 / 4;
  }
  /* Row 2, col 3: Rechercher (submit row). */
  body #providers #form-search.services form .relative.rdo-quand-submit-row {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    grid-area: 2 / 3 / 3 / 4;
  }
  /* Within the new grid layout, each grid-33 child should drop its float-based
     width to occupy the whole grid cell. */
  body #providers #form-search.services form .grid-33 {
    width: 100%;
  }
  /* The Rechercher button should fill its grid cell on results page (no
     centering). Override the .rdo-quand-submit-row rule from below. */
  body #providers #form-search .relative.rdo-quand-submit-row {
    text-align: left;
  }
  body #providers #form-search .relative.rdo-quand-submit-row .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ─── Submit row (Rechercher button centered) ─── */
/* The button row is its own .relative.paragraphe with no grid-* children,
   so we need to undo the theme rule `#form-search .relative .btn { width:100% }`
   and recenter the pill button. Works on both home and results page. */
body #form-search .relative.rdo-quand-submit-row {
  text-align: center;
}
body #form-search .relative.rdo-quand-submit-row .btn {
  width: auto;
  min-width: 37%;
  display: inline-block;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  body #form-search .relative.rdo-quand-submit-row .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ─── Empty summary meta should not occupy a line ─── */
.rdo-quand-summary__meta:empty,
.rdo-quand-summary.is-empty .rdo-quand-summary__meta {
  display: none;
}

/* ─── Overlay + dialog wrapper ─── */
.rdo-quand-modal[hidden] { display: none !important; }
.rdo-quand-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px;
  margin: 0 !important;
  background: rgba(94, 66, 32, 0.50);
  /* No animation on the overlay itself — keeps centering rock-solid even
     if some parent has transform/will-change interfering. */
}
.rdo-quand-modal__dialog {
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 1.2rem;
  box-shadow: 0 24px 64px rgba(94, 66, 32, 0.28);
  overflow: hidden;
  /* Reset any stray theme styles that might leak in via inheritance. */
  margin: 0;
  position: relative;
  animation: rdo-quand-rise 180ms ease-out;
}
@keyframes rdo-quand-rise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ─── Header ─── */
.rdo-quand-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #EFBE86;
  flex: 0 0 auto;
}
.rdo-quand-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #7E5B34;
  font-family: "DynaPuff", "Open Sans", system-ui, sans-serif;
}
.rdo-quand-modal__close {
  border: none;
  background: transparent;
  color: #a07c52;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  transition: color 120ms ease, background 120ms ease;
}
.rdo-quand-modal__close:hover { color: #7E5B34; background: #f7f2ec; }
.rdo-quand-modal__close:focus-visible {
  outline: 2px solid #EF4C24;
  outline-offset: 2px;
}

/* ─── Body ─── */
.rdo-quand-modal__body {
  padding: 22px 24px;
  background: #ffffff;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* ─── Two-column grid: shortcuts left, calendar right ─── */
.rdo-quand-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  margin-bottom: 18px;
}

/* ─── Shortcut pills (Aujourd'hui / Demain) ─── */
.rdo-quand-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rdo-quand-shortcut {
  text-align: left;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #EFBE86;
  background: #ffffff;
  color: #7E5B34;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.rdo-quand-shortcut:hover {
  border-color: #7E5B34;
  background: #FFFCEB;
}
.rdo-quand-shortcut:focus-visible {
  outline: 2px solid #EF4C24;
  outline-offset: 2px;
}
.rdo-quand-shortcut__label {
  font-size: 14px;
  font-weight: 700;
}
.rdo-quand-shortcut__date {
  font-size: 12px;
  color: #a07c52;
  margin-top: 1px;
}
.rdo-quand-shortcut.is-active {
  border-color: #EF4C24;
  background: #FFFCEB;
}

/* ─── Selection summary card ─── */
.rdo-quand-summary {
  margin-top: 6px;
  padding: 12px 14px;
  background: #FFFCEB;
  border-radius: 12px;
}
.rdo-quand-summary__label {
  font-size: 11px;
  color: #a07c52;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.rdo-quand-summary__value {
  font-size: 14px;
  color: #7E5B34;
  font-weight: 700;
  margin-top: 4px;
}
.rdo-quand-summary__meta {
  font-size: 12px;
  color: #a07c52;
  margin-top: 2px;
}
.rdo-quand-summary.is-empty .rdo-quand-summary__value {
  color: #a07c52;
  font-weight: 400;
  font-style: italic;
}

/* ─── Calendar ─── */
.rdo-quand-calendar { width: 100%; }
.rdo-quand-calendar__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.rdo-quand-calendar__nav-btn {
  border: none;
  background: transparent;
  color: #7E5B34;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  line-height: 1;
  font-weight: 700;
  border-radius: 4px;
  font-family: inherit;
}
.rdo-quand-calendar__nav-btn:hover { background: #f7f2ec; }
.rdo-quand-calendar__nav-btn:focus-visible {
  outline: 2px solid #EF4C24;
  outline-offset: 2px;
}
.rdo-quand-calendar__nav-btn:disabled {
  color: rgba(126, 91, 52, 0.3);
  cursor: not-allowed;
  background: transparent;
}
.rdo-quand-calendar__title {
  font-size: 14px;
  font-weight: 700;
  color: #7E5B34;
  text-transform: capitalize;
}

.rdo-quand-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  font-size: 13px;
}
.rdo-quand-calendar__dow {
  text-align: center;
  padding: 4px 0;
  font-size: 11px;
  color: #a07c52;
  text-transform: uppercase;
  font-weight: 500;
}
/* Day cell — rectangular with light grey background, mirroring the
   booking form calendar (booknetic_calendar_days). Cells touch each
   other with no grid gap so a multi-day range reads as a continuous
   orange band. Visual separation between non-selected cells comes from
   a 2px white border (not box-shadow inset, which would clip against
   the cell's border-radius and create double-rounded corners). On
   selected/range cells the border becomes transparent so adjacent
   range cells visually merge. */
.rdo-quand-calendar__day {
  position: relative;
  text-align: center;
  height: 38px;
  line-height: 34px;
  padding: 0;
  color: #7E5B34;
  background: #ECEFF2;
  background-clip: padding-box;
  border: 2px solid #ffffff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  border-radius: 4px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.rdo-quand-calendar__day:hover:not(:disabled):not(.is-selected):not(.is-range) {
  background: #DEE3E9;
}
.rdo-quand-calendar__day:focus-visible {
  outline: 2px solid #EF4C24;
  outline-offset: -2px;
  z-index: 1;
}
.rdo-quand-calendar__day.is-out {
  background: transparent;
  color: rgba(126, 91, 52, 0.35);
  cursor: not-allowed;
  border-color: transparent;
}
/* Today: brown ring on the cell border, keeping background grey. */
.rdo-quand-calendar__day.is-today {
  border-color: #7E5B34;
  font-weight: 700;
}
/* Range styling — continuous orange band:
     - extremes (start/end/single): darker orange #EF4C24
     - interior (.is-range)       : slightly lighter #F86E47 (minimal diff)
   On selected/range cells, the border becomes the same color as the
   background so adjacent range cells touch with no visible white seam,
   while keeping the same 2px hit area as normal cells (no layout shift). */
.rdo-quand-calendar__day.is-selected {
  background: #EF4C24;
  color: #ffffff;
  font-weight: 700;
  border-color: #EF4C24;
}
.rdo-quand-calendar__day.is-range-single {
  border-radius: 4px;
}
.rdo-quand-calendar__day.is-range-start {
  border-radius: 4px 0 0 4px;
}
.rdo-quand-calendar__day.is-range-end {
  border-radius: 0 4px 4px 0;
}
.rdo-quand-calendar__day.is-range {
  background: #F86E47;
  color: #ffffff;
  font-weight: 600;
  border-color: #F86E47;
  border-radius: 0;
}
/* Decorative weekday-availability bar (Mon–Fri) at the bottom of each cell,
   mirroring the booking form's <span><i a/></span> indicator. Purely cosmetic
   — does not reflect real availability data. Hidden on selected/range cells
   to keep the orange band clean. */
.rdo-quand-calendar__day:not(.is-out):not(.is-selected):not(.is-range)[data-rdo-quand-weekday="1"]::after,
.rdo-quand-calendar__day:not(.is-out):not(.is-selected):not(.is-range)[data-rdo-quand-weekday="2"]::after,
.rdo-quand-calendar__day:not(.is-out):not(.is-selected):not(.is-range)[data-rdo-quand-weekday="3"]::after,
.rdo-quand-calendar__day:not(.is-out):not(.is-selected):not(.is-range)[data-rdo-quand-weekday="4"]::after,
.rdo-quand-calendar__day:not(.is-out):not(.is-selected):not(.is-range)[data-rdo-quand-weekday="5"]::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  height: 3px;
  border-radius: 2px;
  background: #EF4C24;
  opacity: 0.65;
}

/* ─── Horaire section ─── */
.rdo-quand-time {
  border-top: 1px solid #EFBE86;
  padding-top: 18px;
}
.rdo-quand-time__label {
  font-size: 11px;
  color: #a07c52;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: 10px;
}
.rdo-quand-time__presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.rdo-quand-preset {
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid #EFBE86;
  background: #ffffff;
  color: #7E5B34;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
  text-align: center;
}
.rdo-quand-preset:hover {
  border-color: #7E5B34;
  background: #FFFCEB;
}
.rdo-quand-preset:focus-visible {
  outline: 2px solid #EF4C24;
  outline-offset: 2px;
}
.rdo-quand-preset__title { font-weight: 700; }
.rdo-quand-preset__range {
  font-size: 11px;
  color: #a07c52;
  margin-top: 2px;
}
.rdo-quand-preset.is-active {
  border: 2px solid #EF4C24;
  background: #FFFCEB;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(239, 76, 36, 0.14);
  /* Compensate the 2px border to keep the same outer height as the others. */
  padding: 9px 5px;
}
.rdo-quand-preset.is-active .rdo-quand-preset__range { color: #7E5B34; }

/* ─── Custom range hour pickers (only visible when 'Personnaliser' active) ─── */
.rdo-quand-custom { display: none; }
.rdo-quand-custom.is-visible { display: grid; }
.rdo-quand-custom {
  margin-top: 14px;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: #FFFCEB;
  border-radius: 12px;
}
.rdo-quand-custom__field { }
.rdo-quand-custom__label {
  font-size: 11px;
  color: #a07c52;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: 4px;
}
.rdo-quand-custom__select {
  width: 100%;
  border: 1px solid #7E5B34;
  background: #ffffff;
  border-radius: 2.2rem;
  padding: 8px 14px;
  font-size: 13px;
  color: #7E5B34;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%237E5B34' d='M5 6 0 0h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 30px;
}
.rdo-quand-custom__select:focus-visible {
  outline: 2px solid #EF4C24;
  outline-offset: 2px;
}

.rdo-quand-time__hint {
  margin-top: 10px;
  font-size: 11px;
  color: #a07c52;
  font-style: italic;
}

/* ─── Footer ─── */
.rdo-quand-modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-top: 1px solid #EFBE86;
  background: #FFFCEB;
  flex: 0 0 auto;
}
.rdo-quand-modal__btn-clear {
  background: #ffffff;
  border: 1px solid #EFBE86;
  color: #7E5B34;
  padding: 0 18px;
  height: 36px;
  border-radius: 2.2rem;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.rdo-quand-modal__btn-clear:hover {
  border-color: #7E5B34;
  background: #f7f2ec;
}
.rdo-quand-modal__btn-clear:focus-visible {
  outline: 2px solid #EF4C24;
  outline-offset: 2px;
}
.rdo-quand-modal__btn-confirm {
  height: 40px;
  padding: 0 22px;
  border-radius: 2.2rem;
  background: #EF4C24;
  color: #ffffff;
  border: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(239, 76, 36, 0.22);
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.rdo-quand-modal__btn-confirm:hover {
  background: #d94420;
  box-shadow: 0 4px 12px rgba(239, 76, 36, 0.30);
}
.rdo-quand-modal__btn-confirm:active { transform: translateY(1px); }
.rdo-quand-modal__btn-confirm:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -3px;
}

/* ─── Responsive: card central with stacked layout below 768px ─── */
@media (max-width: 768px) {
  .rdo-quand-modal { padding: 16px; }
  .rdo-quand-modal__dialog {
    max-width: 380px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }
  .rdo-quand-modal__header { padding: 14px 18px; }
  .rdo-quand-modal__body   { padding: 18px; }
  .rdo-quand-modal__footer { padding: 12px 18px; }

  .rdo-quand-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rdo-quand-shortcuts {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rdo-quand-shortcut {
    flex: 1 1 calc(50% - 4px);
  }
  .rdo-quand-summary {
    flex: 1 1 100%;
    margin-top: 0;
  }

  .rdo-quand-time__presets {
    grid-template-columns: 1fr 1fr;
  }
  .rdo-quand-preset:last-child {
    grid-column: 1 / -1;
  }
}