/*********************************************************************
 * C:/Apache24/sites/apptemplate/v1/Business/Modules/Bookings/Assets/css/public-bookings.css
 * @title 🎨 Réservation publique Marketplace
 * @description Met en forme les prochains jours disponibles avec horaires compacts et défilement interne sans allonger la page.
 *********************************************************************/

.marketplace-public-booking,
.marketplace-public-confirmation {
  width: min(100%, 940px);
  margin: 0 auto;
  color: var(--mpp-ink);
  font-family: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.marketplace-public-booking {
  display: grid;
  gap: 15px;
}

.marketplace-public-booking__header,
.marketplace-public-booking__selector,
.marketplace-public-booking__form > section,
.marketplace-public-confirmation {
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--mpp-line);
  border-radius: 29px;
  background: #fff;
  box-shadow: var(--mpp-shadow-soft);
}

.marketplace-public-booking__header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
}

.marketplace-public-booking__header > a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mpp-line);
  border-radius: 15px;
  background: var(--mpp-soft);
  text-decoration: none;
}

.marketplace-public-booking__header span,
.marketplace-public-booking__selector > span,
.marketplace-public-booking__form > section > span,
.marketplace-public-confirmation__eyebrow {
  color: #5c7c72;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.marketplace-public-booking__header h1,
.marketplace-public-booking__form h2,
.marketplace-public-confirmation h1 {
  margin: 4px 0 7px;
  font-family: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: -.045em;
}

.marketplace-public-booking__header h1 {
  font-size: clamp(1.95rem, 4.35vw, 3.35rem);
  line-height: 1;
}

.marketplace-public-booking__header p,
.marketplace-public-confirmation__intro {
  margin: 0;
  color: var(--mpp-muted);
  line-height: 1.6;
}

.marketplace-public-booking__alert {
  display: flex;
  gap: 9px;
  padding: 13px 15px;
  border-radius: 16px;
  background: #fff0f2;
  color: var(--mpp-danger);
  font-size: .76rem;
  font-weight: 750;
}

.marketplace-public-booking__alert p {
  margin: 0;
}

.marketplace-public-booking__selector form {
  margin-top: 15px;
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(180px, .8fr) auto;
  gap: 9px;
  align-items: end;
}

.marketplace-public-booking label {
  display: grid;
  gap: 6px;
}

.marketplace-public-booking label > span {
  color: var(--mpp-ink-soft);
  font-size: .68rem;
  font-weight: 800;
}

.marketplace-public-booking input,
.marketplace-public-booking select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--mpp-line);
  border-radius: 13px;
  background: var(--mpp-soft);
  color: var(--mpp-ink);
  font: inherit;
  font-size: .78rem;
}

.marketplace-public-booking__selector button,
.marketplace-public-booking__submit {
  min-height: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border: 0;
  border-radius: 13px;
  background: var(--mpp-accent);
  color: #fff;
  font-size: .74rem;
  font-weight: 850;
  cursor: pointer;
}

.marketplace-public-booking__form {
  display: grid;
  gap: 15px;
}

.marketplace-public-booking__slots {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.marketplace-public-booking__slots label {
  position: relative;
  cursor: pointer;
}

.marketplace-public-booking__slots input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.marketplace-public-booking__slots label > span {
  min-height: 60px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--mpp-line);
  border-radius: 14px;
  background: #fff;
}

.marketplace-public-booking__slots input:checked + span {
  border-color: rgba(57, 128, 97, .44);
  background: var(--mpp-mint);
}

.marketplace-public-booking__grid {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.marketplace-public-booking fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.marketplace-public-booking__consent {
  margin-top: 14px;
  grid-template-columns: 20px 1fr;
  align-items: start;
}

.marketplace-public-booking__consent input {
  width: 18px;
  min-height: 18px;
}

.marketplace-public-booking__empty {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 15px;
  border: 1px dashed var(--mpp-line);
  border-radius: 17px;
  background: var(--mpp-soft);
  color: var(--mpp-muted);
}

.marketplace-public-booking__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.marketplace-public-booking__form > section.is-disabled,
.marketplace-public-booking__submit:disabled {
  opacity: .5;
}

.marketplace-public-booking__notice,
.marketplace-public-confirmation__notice {
  margin: 0;
  color: var(--mpp-muted);
  font-size: .67rem;
  line-height: 1.5;
  text-align: center;
}

.marketplace-public-confirmation {
  display: grid;
  justify-items: center;
  text-align: center;
}

.marketplace-public-confirmation__icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin-bottom: 17px;
  border-radius: 24px;
  background: var(--mpp-mint);
  color: var(--mpp-success);
  font-size: 1.35rem;
}

.marketplace-public-confirmation h1 {
  font-size: clamp(2rem, 4.6vw, 3.45rem);
  line-height: 1;
}

.marketplace-public-confirmation > section {
  width: 100%;
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.marketplace-public-confirmation > section article,
.marketplace-public-confirmation__reference {
  padding: 14px;
  border: 1px solid var(--mpp-line);
  border-radius: 17px;
  background: var(--mpp-soft);
}

.marketplace-public-confirmation small,
.marketplace-public-confirmation strong {
  display: block;
}

.marketplace-public-confirmation__reference {
  width: min(100%, 460px);
  margin-top: 10px;
}

.marketplace-public-confirmation > a {
  min-height: 44px;
  margin-top: 17px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border-radius: 13px;
  background: var(--mpp-accent);
  color: #fff;
  font-size: .74rem;
  font-weight: 850;
  text-decoration: none;
}

@media(max-width: 840px) {
  .marketplace-public-booking__selector form {
    grid-template-columns: 1fr 1fr;
  }

  .marketplace-public-booking__selector button {
    grid-column: 1 / -1;
  }

  .marketplace-public-booking__slots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .marketplace-public-confirmation > section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width: 620px) {
  .marketplace-public-booking__selector form,
  .marketplace-public-booking__grid {
    grid-template-columns: 1fr;
  }

  .marketplace-public-booking__selector button {
    grid-column: auto;
  }

  .marketplace-public-booking__slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ======================================================
   👤 ESPACE CLIENT LÉGER — LOT 5E
   ====================================================== */

.marketplace-public-confirmation__alert {
  width: 100%;
  margin-bottom: 18px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: 16px;
  text-align: left;
  font-size: .74rem;
  font-weight: 750;
}

.marketplace-public-confirmation__alert p {
  margin: 0;
}

.marketplace-public-confirmation__alert.is-success {
  background: #edf8f2;
  color: #317058;
}

.marketplace-public-confirmation__alert.is-error {
  background: #fff0f2;
  color: var(--mpp-danger);
}

.marketplace-public-confirmation__actions {
  margin-top: 17px;
  display: flex;
  gap: 9px;
  justify-content: center;
  flex-wrap: wrap;
}

.marketplace-public-confirmation__actions > a,
.marketplace-public-confirmation__actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 13px;
  font-size: .74rem;
  font-weight: 850;
  text-decoration: none;
}

.marketplace-public-confirmation__actions > a {
  background: var(--mpp-accent);
  color: #fff;
}

.marketplace-public-confirmation__actions form {
  margin: 0;
}

.marketplace-public-confirmation__actions button {
  border: 1px solid #f0cfd4;
  background: #fff5f6;
  color: var(--mpp-danger);
  cursor: pointer;
}

@media(max-width: 620px) {
  .marketplace-public-confirmation__actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .marketplace-public-confirmation__actions > a,
  .marketplace-public-confirmation__actions form,
  .marketplace-public-confirmation__actions button {
    width: 100%;
  }
}


/* ======================================================
   🔄 DÉPLACEMENT DE RÉSERVATION — LOT 5F
   ====================================================== */

.marketplace-public-confirmation__actions > a.is-secondary {
  border: 1px solid var(--mpp-line);
  background: var(--mpp-soft);
  color: var(--mpp-ink);
}

/* ======================================================
   🔤 UNIFORMISATION TYPOGRAPHIQUE MARKETPLACE
   ====================================================== */
.marketplace-public-booking__form h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.15;
}
@media(max-width: 620px) {
  .marketplace-public-booking__header h1,
  .marketplace-public-confirmation h1 {
    font-size: clamp(1.75rem, 8.5vw, 2.65rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
}

/* ======================================================
   💳 CHECKOUT DE RÉSERVATION — LOT 11D
   ====================================================== */

.marketplace-public-booking__payment-summary {
  margin: 13px 0 2px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--mpp-line);
  border-radius: 16px;
  background: var(--mpp-soft);
}

.marketplace-public-booking__payment-summary > i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--mpp-mint);
  color: var(--mpp-success);
}

.marketplace-public-booking__payment-summary small,
.marketplace-public-booking__payment-summary strong,
.marketplace-public-booking__payment-summary span {
  display: block;
}

.marketplace-public-booking__payment-summary small {
  color: #5c7c72;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.marketplace-public-booking__payment-summary strong {
  margin-top: 2px;
  color: var(--mpp-ink);
  font-size: .78rem;
}

.marketplace-public-booking__payment-summary span {
  margin-top: 2px;
  color: var(--mpp-muted);
  font-size: .68rem;
}

.marketplace-public-confirmation__alert.is-info {
  background: #eef5f8;
  color: #466f7d;
}

.marketplace-public-confirmation > section {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media(max-width: 840px) {
  .marketplace-public-confirmation > section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width: 620px) {
  .marketplace-public-booking__payment-summary {
    grid-template-columns: 38px minmax(0, 1fr);
  }
}


/* ======================================================
   📅 PRO-6G.8 — PROCHAINS CRÉNEAUX RÉELLEMENT DISPONIBLES
   ====================================================== */

.marketplace-public-booking__availability {
  scroll-margin-top: 22px;
}

.marketplace-public-booking__availability-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.marketplace-public-booking__availability-head > div:first-child > span {
  color: var(--mpp-page-primary-strong, #456653);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.marketplace-public-booking__availability-head h2 {
  max-width: 650px;
  margin: 6px 0 5px;
}

.marketplace-public-booking__availability-head p {
  max-width: 650px;
  margin: 0;
  color: var(--mpp-muted);
  font-size: .75rem;
  line-height: 1.55;
}

.marketplace-public-booking__availability-nav {
  display: flex;
  gap: 7px;
  flex: 0 0 auto;
}

.marketplace-public-booking__availability-nav a,
.marketplace-public-booking__availability-nav > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mpp-page-border, var(--mpp-line));
  border-radius: 13px;
  background: #fff;
  color: var(--mpp-page-primary-strong, #456653);
  text-decoration: none;
}

.marketplace-public-booking__availability-nav a {
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.marketplace-public-booking__availability-nav a:hover {
  transform: translateY(-1px);
  border-color: var(--mpp-page-primary, #64866f);
  background: var(--mpp-page-primary-soft, rgba(100, 134, 111, .10));
}

.marketplace-public-booking__availability-nav > span.is-disabled {
  opacity: .28;
}

.marketplace-public-booking__days {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.marketplace-public-booking__day {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mpp-page-border, var(--mpp-line));
  border-radius: 18px;
  background: #fff;
}

.marketplace-public-booking__day > header {
  display: grid;
  justify-items: center;
  padding: 13px 8px 11px;
  border-bottom: 1px solid var(--mpp-page-border, var(--mpp-line));
  background:
    linear-gradient(
      180deg,
      var(--mpp-page-primary-soft, rgba(100, 134, 111, .12)),
      rgba(255, 255, 255, .55)
    );
}

.marketplace-public-booking__day > header span,
.marketplace-public-booking__day > header small {
  color: var(--mpp-muted);
  font-size: .62rem;
  font-weight: 800;
}

.marketplace-public-booking__day > header strong {
  margin: 2px 0;
  color: var(--mpp-ink);
  font-size: 1.35rem;
  line-height: 1;
}

.marketplace-public-booking__day-slots {
  display: grid;
  gap: 7px;
  padding: 10px;
}

.marketplace-public-booking__day-slots label {
  position: relative;
  cursor: pointer;
}

.marketplace-public-booking__day-slots input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
}

.marketplace-public-booking__day-slots label > span {
  min-height: 39px;
  display: grid;
  place-items: center;
  padding: 7px 9px;
  border: 1px solid var(--mpp-page-border, var(--mpp-line));
  border-radius: 11px;
  background: var(--mpp-soft);
  color: var(--mpp-ink-soft);
  font-size: .74rem;
  font-weight: 850;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease;
}

.marketplace-public-booking__day-slots label:hover > span {
  transform: translateY(-1px);
  border-color: var(--mpp-page-primary, #64866f);
}

.marketplace-public-booking__day-slots input:checked + span {
  border-color: var(--mpp-page-primary-strong, #456653);
  background: var(--mpp-page-primary-strong, #456653);
  color: #fff;
  box-shadow: 0 8px 18px var(--mpp-page-primary-soft, rgba(100, 134, 111, .18));
}

.marketplace-public-booking__day-slots input:focus-visible + span {
  outline: 3px solid var(--mpp-page-primary-soft, rgba(100, 134, 111, .18));
  outline-offset: 2px;
}

.marketplace-public-booking__empty > div {
  min-width: 0;
}

.marketplace-public-booking__empty strong {
  display: block;
  color: var(--mpp-ink);
  font-size: .76rem;
}

.marketplace-public-booking__empty p {
  margin: 3px 0 0;
  font-size: .7rem;
  line-height: 1.5;
}

@media(max-width: 840px) {
  .marketplace-public-booking__days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width: 620px) {
  .marketplace-public-booking__availability-head {
    align-items: center;
  }

  .marketplace-public-booking__availability-head h2 {
    font-size: 1.14rem;
  }

  .marketplace-public-booking__availability-head p {
    font-size: .7rem;
  }

  .marketplace-public-booking__availability-nav a,
  .marketplace-public-booking__availability-nav > span {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .marketplace-public-booking__days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .marketplace-public-booking__day > header {
    padding: 11px 6px 9px;
  }

  .marketplace-public-booking__day-slots {
    padding: 8px;
  }
}

@media(max-width: 390px) {
  .marketplace-public-booking__days {
    grid-template-columns: 1fr;
  }

  .marketplace-public-booking__day {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .marketplace-public-booking__day > header {
    border-right: 1px solid var(--mpp-page-border, var(--mpp-line));
    border-bottom: 0;
  }

  .marketplace-public-booking__day-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ======================================================
   📅 PRO-6G.10 — VOIR PLUS D’HORAIRES SANS ALLONGER LA PAGE
   ====================================================== */

.marketplace-public-booking__day-default-slots {
  display: grid;
  gap: 7px;
}

.marketplace-public-booking__day-more {
  display: grid;
  min-width: 0;
}

.marketplace-public-booking__day-more > summary {
  min-height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mpp-page-primary-strong, #456653);
  font-size: .66rem;
  font-weight: 850;
  text-align: center;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.marketplace-public-booking__day-more > summary::-webkit-details-marker {
  display: none;
}

.marketplace-public-booking__day-more > summary:hover {
  background: var(
    --mpp-page-primary-soft,
    rgba(100, 134, 111, .09)
  );
}

.marketplace-public-booking__day-more > summary i {
  font-size: .58rem;
  transition: transform 160ms ease;
}

.marketplace-public-booking__day-more[open] > summary i {
  transform: rotate(180deg);
}

.marketplace-public-booking__day-more .when-open {
  display: none;
}

.marketplace-public-booking__day-more[open] .when-closed {
  display: none;
}

.marketplace-public-booking__day-more[open] .when-open {
  display: inline;
}

/*
 * Quand la liste complète est ouverte, les 4 suggestions initiales
 * disparaissent : la carte du jour ne cumule donc jamais les deux listes.
 */
.marketplace-public-booking__day-slots:has(
  .marketplace-public-booking__day-more[open]
) .marketplace-public-booking__day-default-slots {
  display: none;
}

.marketplace-public-booking__day-more-scroll {
  max-height: 232px;
  margin-top: 2px;
  display: grid;
  gap: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 1px 4px 1px 0;
}

.marketplace-public-booking__day-more-scroll {
  scrollbar-width: thin;
  scrollbar-color:
    var(--mpp-page-primary, #64866f)
    transparent;
}

.marketplace-public-booking__day-more-scroll::-webkit-scrollbar {
  width: 7px;
}

.marketplace-public-booking__day-more-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.marketplace-public-booking__day-more-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--mpp-page-primary, #64866f);
}

.marketplace-public-booking__day-more-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--mpp-page-primary-strong, #456653);
}

@media(max-width: 620px) {
  .marketplace-public-booking__day-more > summary {
    font-size: .64rem;
  }

  .marketplace-public-booking__day-more-scroll {
    max-height: 220px;
    -webkit-overflow-scrolling: touch;
  }
}