:root{
  --modal-pad: 30px;
  --modal-gap: 30px;
  --modal-radius: 18px;
  --modal-maxw: 920px;
  --modal-bg: rgba(10,10,10,0.96);
  --modal-border: rgba(255,255,255,0.10);
  --modal-shadow: 0 30px 90px rgba(0,0,0,0.6);
}

/* lock scroll */
html.ride-modal-lock,
body.ride-modal-lock{ overflow:hidden !important; }

/* shell sits above everything */
.ride-modal-shell{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}
.ride-modal-shell.is-open{ display:block; }

.ride-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 260ms ease;
}
.ride-modal-shell.is-open .ride-modal__backdrop{ opacity:1; }

.ride-modal__panel{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  pointer-events: none;
  transform: translateY(14px) scale(0.985);
  opacity: 0;
  transition: transform 340ms cubic-bezier(.2,.9,.2,1), opacity 240ms ease;
}
.ride-modal-shell.is-open.is-ready .ride-modal__panel{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.ride-modal__inner{
  width: min(var(--modal-maxw), calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  overflow: auto;
  pointer-events: auto;
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  padding: var(--modal-pad);
  color: #fff;
}

/* morph overlay */
.ride-morph{
  position: fixed;
  z-index: 1000000;
  background: rgba(255,255,255,0.03);
  background-size: cover;
  background-position: center;
  border-radius: 18px;
  box-shadow: var(--modal-shadow);
  border: 1px solid rgba(255,255,255,0.10);
}

/* during morph hide panel for cleaner illusion */
.ride-modal-shell.is-morphing .ride-modal__panel{
  opacity: 0 !important;
  transform: none !important;
}

/* loading */
.ride-modal__loading{
  padding: 26px 6px;
  font-size: 16px;
  opacity: .9;
}

/* ===== returned HTML layout ===== */
.ride-modal__media{
  position: relative;
  margin: calc(-1 * var(--modal-pad)) calc(-1 * var(--modal-pad)) 0;
  border-top-left-radius: calc(var(--modal-radius) - 1px);
  border-top-right-radius: calc(var(--modal-radius) - 1px);
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}

.ride-modal__image{
  width: 100%;
  height: 50vh;
  max-height: 50vh;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* close button absolute on image */
.ride-modal__close{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.45);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.ride-modal__close:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,0.6);
  border-color: rgba(255,255,255,0.38);
}
.ride-modal__close span{ font-size: 16px; line-height: 1; }

.ride-modal__body{ padding-top: var(--modal-pad); }

.ride-modal__layout{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--modal-gap);
}
@media (max-width: 980px){
  .ride-modal__layout{ grid-template-columns: 1fr; }
}

.ride-modal__title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.ride-modal__title-inline{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ride-modal__title{
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  color: #fff;
}

.ride-modal__edit-link{
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  opacity: .85;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.ride-modal__edit-link:hover{ opacity: 1; }

/* type pill */
.ride-modal__type-pills{ display: flex; align-items: center; gap: 10px; }
.ride-modal__type-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #d3ac5c;
  color: #0b0b0b;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.ride-modal__type-pill .ride-type-ico img{
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  filter: invert(1) brightness(1.1);
}

/* specs */
.ride-modal__specs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--modal-gap);
  margin: 18px 0 10px;
}
@media (max-width: 980px){
  .ride-modal__specs{ grid-template-columns: 1fr; }
}
.ride-modal__spec{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 14px;
}
.ride-modal__spec-label{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
  margin-bottom: 6px;
}
.ride-modal__spec-value{ font-size: 18px; font-weight: 700; }

/* content */
.ride-modal__content-area{ margin-top: 14px; }
.ride-modal__content-area p{
  font-size: 18px;
  line-height: 1.8em;
  color: #fff;
}

/* aside / form gold panel */
.ride-modal__aside-card{
  height: 100%;
  border-radius: 16px;
  background: #d3ac5c;
  color: #0b0b0b;
  padding: 18px;
}
.ride-modal__aside-title{
  margin: 0 0 10px;
  font-size: 18px;
  color: #0b0b0b;
}

/* Slider */
.ride-slider{ position: relative; height: 350px; max-height: 350px; overflow: hidden; }
.ride-slider__track{ height: 100%; transition: transform 360ms cubic-bezier(.2,.9,.2,1); }
.ride-slider__slide{ height: 100%; }
.ride-slider__img{
  width: 100%;
  height: 350px;
  max-height: 350px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* arrows */
.ride-slider__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.35);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ride-slider__arrow--prev{ left: 16px; }
.ride-slider__arrow--next{ right: 16px; }
.ride-slider__arrow span{ font-size: 26px; line-height: 1; }

/* modern pills */
.ride-slider__pills{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.14);
}
.ride-slider__pill{
  width: 22px;
  height: 6px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
}
.ride-slider__pill.is-active{ background: rgba(255,255,255,0.95); }

/* ===== Skeleton + “text loading” ===== */
.ride-skel__media,
.ride-skel__title,
.ride-skel__pill,
.ride-skel__spec,
.ride-skel__para{
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size: 200% 100%;
  animation: rideShimmer 1200ms ease-in-out infinite;
  border-radius: 12px;
}
@keyframes rideShimmer{
  0%{ background-position: 0% 0; }
  100%{ background-position: 200% 0; }
}
.ride-skel__media{ height: 240px; border-radius: 16px; margin-bottom: 18px; }
.ride-skel__row{ display:flex; gap:12px; align-items:center; margin-bottom: 16px; }
.ride-skel__title{ height: 22px; width: 52%; }
.ride-skel__pill{ height: 22px; width: 140px; border-radius: 999px; }
.ride-skel__specs{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--modal-gap); margin: 18px 0; }
.ride-skel__spec{ height: 72px; }
.ride-skel__para{ height: 14px; width: 100%; margin: 10px 0; opacity:.9; }
.ride-skel__para.short{ width: 68%; }

/* reveal after load */
.ride-modal-shell.is-loaded .ride-modal__inner > *{
  animation: rideReveal 420ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes rideReveal{
  from{ transform: translateY(10px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

/* ✅ Correct overflow model:
   - no horizontal scroll ever
   - vertical scroll allowed inside modal (so content never gets cut off)
*/
.ride-modal{
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* If your modal has a fixed max-height, this makes inner content scroll properly */
.ride-modal__body{
  overflow-x: hidden;
  overflow-y: visible;
  max-width: 100%;
}

/* ✅ Critical for grid/flex overflow bugs */
.ride-modal__layout,
.ride-modal__main,
.ride-modal__aside,
.ride-modal__title-row,
.ride-modal__title-inline,
.ride-modal__specs{
  min-width: 0;
}

/* ✅ Track should be allowed to be wider (it must be for sliding),
      but the container must hide overflow. Do NOT hide overflow on the track itself. */
.ride-slider{
  overflow: hidden;
  max-width: 100%;
}
.ride-slider__track{
  overflow: visible !important; /* important: prevents “clipped slides” feeling */
  max-width: none;
}

/* ✅ Images and embeds never exceed container */
.ride-modal img,
.ride-modal iframe,
.ride-modal video,
.ride-modal embed{
  max-width: 100%;
}

/* ✅ Defensive: any wide tables/code blocks should scroll within themselves */
.ride-modal__content-area table{
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* =========================================
   CF7 (gold aside) — clean, no cutting
   ========================================= */
.ride-modal__aside,
.ride-modal__aside *{
  box-sizing: border-box; /* ✅ stops width/padding cut-offs */
}

.ride-modal__aside .ride-modal__aside-card{
  width: 100%;
  max-width: 100%;
}

.ride-modal__aside .ride-modal__form,
.ride-modal__aside .wpcf7,
.ride-modal__aside .wpcf7 form{
  width: 100%;
  max-width: 100%;
}

/* Remove CF7 default weird margins that can cause overflow */
.ride-modal__aside .wpcf7 p{
  margin: 0 0 14px 0;
}
.ride-modal__aside .wpcf7 .wpcf7-form-control-wrap{
  display: block;
  width: 100%;
}

/* Labels on gold */
.ride-modal__aside label,
.ride-modal__aside .wpcf7-form label{
  display: block;
  color: #111;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Inputs: transparent, grey border, no cut */
.ride-modal__aside input[type="text"],
.ride-modal__aside input[type="email"],
.ride-modal__aside input[type="tel"],
.ride-modal__aside input[type="number"],
.ride-modal__aside input[type="url"],
.ride-modal__aside input[type="search"],
.ride-modal__aside select,
.ride-modal__aside textarea{
  width: 100%;
  max-width: 100%;
  display: block;

  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.28);
  background: rgba(0,0,0,0);   /* ✅ transparent */
  color: #111;

  padding: 12px 14px;
  outline: none;

  box-sizing: border-box;
}

.ride-modal__aside textarea{
  min-height: 140px;
  resize: vertical;
}

/* Placeholder */
.ride-modal__aside input::placeholder,
.ride-modal__aside textarea::placeholder{
  color: rgba(17,17,17,.55);
}

/* Focus */
.ride-modal__aside input:focus,
.ride-modal__aside textarea:focus,
.ride-modal__aside select:focus{
  border-color: rgba(17,17,17,.55);
  box-shadow: 0 0 0 3px rgba(17,17,17,.12);
}

/* Submit: black, full width, modern */
.ride-modal__aside .wpcf7-submit{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 14px;
  padding: 14px 16px;

  background: #111;
  color: #fff;

  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;

  transition: transform .16s ease, opacity .16s ease;
}

.ride-modal__aside .wpcf7-submit:hover{
  transform: translateY(-1px);
  opacity: .95;
}

/* CF7 validation tips (keep tidy) */
.ride-modal__aside .wpcf7-not-valid-tip{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(17,17,17,.85);
}

.ride-modal__aside .wpcf7-response-output{
  margin: 14px 0 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.28);
  color: #111;
  background: rgba(255,255,255,.35);
}