/* Book a Skip - single-page booking form (Gravity Form 2).

   Layout: form left, sticky summary rail right (desktop); single column with a
   fixed total bar on mobile. Steps are white cards built in PHP by
   tiger_theme_book_a_skip_wrap_steps(), because Gravity Forms renders every
   field as a flat sibling with nothing to draw a card around.

   Field widths come from tiger-full / tiger-half / tiger-third classes set on
   the fields in the form definition; .tiger-step__body is a 12-column grid.

   The skip choices reuse .skip-card from assets/css/skip-card.css (enqueued
   alongside this component); only the selectable behaviour is added here.

   Specificity note: Gravity Forms' theme.min.css loads AFTER this file and
   uses .gform_wrapper.gravity-theme (0,3,0), so an equal-specificity rule here
   loses on source order. Rules that must beat it are written with that same
   pair plus .book-a-skip, giving (0,4,0) - and the postcode band needs (0,5,0)
   to outrank the generic .gfield reset below. */

.book-a-skip {
  background: var(--color-bg-cream);
  border-bottom: 1px solid var(--color-border);
  padding-block: 2rem 3.5rem;
}

.book-a-skip p.gform_required_legend{
	display: none;
}

.book-a-skip__intro {
  margin-top: var(--space-2);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--color-text);
}

/* ---------- two-column shell ---------- */
.book-a-skip__layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

/* Only needs separating when a section heading is actually above it. */
.book-a-skip .section-head + .book-a-skip__layout { margin-top: var(--space-4); }

@media (min-width: 1020px) {
  .book-a-skip__layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2rem;
    /* stretch, not start: the booking column has to fill the row for the
       sticky card inside it to have any room to travel. With align-items:start
       the column collapses to the card's own height and sticky does nothing. */
    align-items: stretch;
  }
}

.book-a-skip__main { min-width: 0; }

.book-a-skip__form { min-width: 0; }

.book-a-skip .tiger-total{
	padding: 0.8rem 1rem !important;
}

/* ---------- gated form: prompt shown until a covered postcode is checked ---------- */
.book-a-skip__locked {
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.25rem;
  text-align: center;
}

.book-a-skip__locked-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--color-text-heading);
}

.book-a-skip__locked p:not(.book-a-skip__locked-title) {
  max-width: 34rem;
  margin: 0 auto 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Delivery postcode is set from the checker and locked. */
.book-a-skip .gform_wrapper.gravity-theme .ginput_address_zip input[readonly] {
  background: var(--color-bg-light);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Locked (no covered postcode yet): the rail is hidden, so drop to one
   column and centre the prompt instead of leaving it in the left column. */
.book-a-skip.is-locked .book-a-skip__layout {
  display: block;
}

.book-a-skip.is-locked .book-a-skip__main {
  max-width: 40rem;
  margin-inline: auto;
}

/* ---------- step cards ---------- */
.book-a-skip .gform_fields { counter-reset: tiger-step; }

.tiger-step {
  /* GF keeps .gform_fields as a 12-column grid, so each card claims the row. */
  grid-column: 1 / -1;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
  /* No overflow:hidden here - it clipped the Gravity Forms datepicker popup,
     which renders inside the field. The postcode band's negative margins sit
     mid-card, so nothing needs clipping anyway. */
}
.gform_wrapper.gravity-theme .ginput_container_consent {
    font-size: 0.8em;
}
.tiger-step__head {
  counter-increment: tiger-step;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--color-border-light);
}

.tiger-step__head::before {
  content: counter(tiger-step);
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-dark);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.tiger-step.is-done .tiger-step__head::before {
  content: "\2713";
  background: var(--color-green);
  font-size: 0.95rem;
}

.book-a-skip .gform_wrapper.gravity-theme .gsection {
  flex: 1 1 auto;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: auto;
}

.book-a-skip .gform_wrapper.gravity-theme .gsection_title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--color-text-heading);
  margin: 0;
}

.book-a-skip .gform_wrapper.gravity-theme .gsection_description {
  margin: 0;
  padding: 0;
  width: auto;
  max-width: 100%;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ---------- step body: 12-column grid ---------- */
.tiger-step__body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.9rem;
  padding: 1.15rem;
}

.book-a-skip .gform_wrapper.gravity-theme .tiger-step__body > .gfield {
  min-width: 0;
  grid-column: span 12;
  margin: 0;
  padding: 0;
}

.book-a-skip .gform_wrapper.gravity-theme .tiger-step__body > .tiger-full { grid-column: span 12; }
.book-a-skip .gform_wrapper.gravity-theme .tiger-step__body > .tiger-third { grid-column: span 4; }

@media (min-width: 620px) {
  .book-a-skip .gform_wrapper.gravity-theme .tiger-step__body > .tiger-half { grid-column: span 6; }
}

/* ---------- skip choice cards ---------- */
.book-a-skip .tiger-skip-choice .gfield_radio {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.book-a-skip .tiger-skip-choice .gchoice { position: relative; margin: 0; }

.book-a-skip .tiger-skip-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* GF styles choice labels as inline-block with max-width:calc(100% - 32px) to
   leave room for the radio it expects beside them; ours are full-width cards,
   so override at GF's own specificity. */
.book-a-skip .gform_wrapper.gravity-theme .tiger-skip-choice label {
  display: block;
  cursor: pointer;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

/* Compact version of the shared .skip-card for the form. */
.book-a-skip .tiger-skip-choice .skip-card {
  position: relative;
  padding: 0.7rem 0.5rem 0.85rem;
  border: 2px solid var(--color-dark);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.book-a-skip .tiger-skip-choice .skip-card__media { height: 3.6rem; margin-bottom: 0.35rem; }
.book-a-skip .tiger-skip-choice .skip-card__media img { height: auto; max-height: 3.6rem; }
.book-a-skip .tiger-skip-choice .skip-card__bags { display: none; }
.book-a-skip .tiger-skip-choice .skip-card__title { font-size: 0.8rem; line-height: 1.15; }
.book-a-skip .tiger-skip-choice .skip-card__price { font-size: 1.5rem; margin-top: 0.1rem; }
.book-a-skip .tiger-skip-choice .skip-card__capacity { font-size: 0.68rem; margin-top: 0.2rem; }
.book-a-skip .tiger-skip-choice .skip-card__dims { display: none; }

.book-a-skip .tiger-skip-choice label:hover .skip-card { border-color: var(--color-text-grey); }

.book-a-skip .tiger-skip-choice input:checked + label .skip-card {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.15);
  transform: translateY(-2px);
}

.book-a-skip .tiger-skip-choice input:focus-visible + label .skip-card {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.skip-card__tick {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.book-a-skip .tiger-skip-choice input:checked + label .skip-card__tick { opacity: 1; transform: none; }

/* Enquiry-only skip: a link card after the choices, not a choice. Same card,
   with an Enquire tag where the selected tick would be. */
.book-a-skip .tiger-skip-choice .skip-card--enquiry { color: inherit; }
.book-a-skip .tiger-skip-choice .skip-card--enquiry:hover { border-color: var(--color-text-grey); }

.book-a-skip .tiger-skip-choice .skip-card--enquiry:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Sits on the card's bottom edge so the card stays the same height as the others. */
.skip-card__enquire {
  position: absolute;
  left: 50%;
  bottom: -0.7rem;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--color-dark);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Enquiry-only skip product page: the enquiry form takes the booking form's
   place, styled by enquiry-form.css; this stacks the heading over a centred
   card (the Contact page's enquiry-form__grid puts them side by side). */
.enquiry-form__stack {
  display: grid;
  gap: 2rem;
  padding-top: 3rem;
  padding-bottom: 4.5rem;
}

.enquiry-form--skip .enquiry-form__card {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
}

.enquiry-form--skip .enquiry-form__gform { margin-top: 0; }

/* As on the booking form: the intro text leads, not GF's required-fields legend. */
.enquiry-form--skip p.gform_required_legend { display: none; }

/* The intro text at the top of the skip's enquiry form (an HTML field). */
.enquiry-form--skip .gfield.enquiry-intro p {
  margin: 0;
  font-weight: 500;
  line-height: 1.625;
  color: var(--color-text);
}

/* Locked skip — product pages only. The size is already decided, so step 1
   collapses to the chosen card with a Change size button; initSkipLock() in
   book-a-skip.js does the folding. The grid becomes a flex row so the single
   card keeps a card-sized width instead of stretching across four columns. */
.book-a-skip .gform_wrapper.gravity-theme .tiger-skip-locked .gchoice.is-hidden { display: none; }

.book-a-skip .gform_wrapper.gravity-theme .tiger-skip-locked.is-collapsed .gfield_radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;
}

.book-a-skip .gform_wrapper.gravity-theme .tiger-skip-locked.is-collapsed .gchoice {
  flex: 0 1 15rem;
  max-width: 15rem;
}

.book-a-skip .tiger-skip-change {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-heading);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.book-a-skip .tiger-skip-change:hover { border-color: var(--color-dark); }

.book-a-skip .tiger-skip-change:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}

/* Between the two-column breakpoint and 1200px the rail leaves the content
   column too narrow for four skip cards - they wrap 3 + 1, which reads as a
   mistake. Two-up is tidier until there is room for the full row. */
@media (min-width: 1020px) and (max-width: 1199.98px) {
  .book-a-skip .tiger-skip-choice .gfield_radio {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- delivery postcode (in-form) ----------
   The prominent check now lives in the postcode-gate component above the form,
   so this is a normal field; it is pre-filled from the gate when both are on
   the page. */
.book-a-skip .gform_wrapper .tiger-delivery-postcode input[type="text"] {
  text-transform: uppercase;
  font-weight: 600;
}

.book-a-skip .gform_wrapper .tiger-delivery-postcode input::placeholder {
  text-transform: none;
  font-weight: 400;
}

.tiger-pc-result {
  max-width: 32rem;
  margin: 0.65rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.5;
  display: none;
}

.tiger-pc-result.is-covered {
  display: block;
  background: #e9f7ee;
  color: #14663a;
  border-left: 4px solid var(--color-green);
}

.tiger-pc-result.is-not-covered {
  display: block;
  background: #fef4e6;
  color: #8a4708;
  border-left: 4px solid #d97706;
}

/* ---------- labels ---------- */
.book-a-skip .gform_wrapper.gravity-theme .gfield_label {
  font-weight: 600;
  font-size: 0.87rem;
  color: var(--color-text-heading);
  margin-bottom: 0.3rem;
}

/* ---------- yes/no pills ---------- */
.book-a-skip .tiger-pills .gfield_radio { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.book-a-skip .tiger-pills .gchoice { position: relative; margin: 0; flex: 1 1 auto; }

.book-a-skip .tiger-pills input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.book-a-skip .gform_wrapper.gravity-theme .tiger-pills label {
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  margin: 0;
  padding: 0.58rem 0.9rem;
  font-weight: 600;
  font-size: 0.87rem;
  color: var(--color-text);
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  max-width: none;
}

/* Selected pill: solid orange so the choice is unmistakable. */
.book-a-skip .gform_wrapper.gravity-theme .tiger-pills input:checked + label {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: none;
}

.book-a-skip .tiger-pills input:focus-visible + label {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.tiger-placement-flag {
  display: none;
  margin: 0.7rem 0 0;
  padding: 0.7rem 0.85rem;
  background: #fdeceb;
  border-left: 4px solid #b3261e;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.85rem;
  color: #7f2420;
}

.tiger-placement-flag.show { display: block; }

/* ---------- notices ---------- */
.tiger-note {
  display: block;
  margin: 0;
  padding: 0.65rem 0.85rem;
  background: var(--color-bg-light);
  border-left: 3px solid var(--color-text-grey);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.84rem;
  color: var(--color-text-muted);
}

.tiger-note strong { color: var(--color-text-heading); }

.book-a-skip .tiger-note-field { align-self: end; }

/* The two notices sit side by side under the three surcharges, so they are
   condensed and stretched to match each other's height. */
.book-a-skip .tiger-notice { display: flex; }

.book-a-skip .tiger-notice > * { width: 100%; }

.tiger-plaster {
  display: block;
  background: #e9f7ee;
  border: 1px solid #b7e3c6;
  border-left: 4px solid var(--color-green);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
}

.tiger-plaster__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--color-green);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.68rem;
}

/* Title row matches the red box: heading line, text underneath. */
.tiger-plaster h4 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: #0f5730;
  margin: 0 0 0.1rem;
}

.tiger-plaster h4 .tiger-plaster__icon { margin-top: 0; width: 1rem; height: 1rem; font-size: 0.6rem; }

.tiger-plaster p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: #14663a; }

.tiger-plaster strong {
  color: #0f5730;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tiger-prohibited {
  border: 1px solid #f3c9c6;
  background: #fdeceb;
  border-left: 4px solid #b3261e;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.6rem 0.7rem;
}

.tiger-prohibited h4 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: #b3261e;
  margin: 0 0 0.1rem;
}

.tiger-prohibited p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: #7f2420; }

/* Stacked on narrow screens, where side by side would be unreadable. */
@media (max-width: 619.98px) {
  .book-a-skip .gform_wrapper.gravity-theme .tiger-step__body > .tiger-notice { grid-column: span 12; }
}
/* ---------- surcharges ---------- */
.book-a-skip .tiger-surcharge {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.6rem 0.35rem!important;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.book-a-skip .gform_wrapper.gravity-theme .tiger-surcharge .gfield_label {
  display: block;
  font-size: 0.84rem;
  line-height: 1.2;
  margin-bottom: 0.1rem;
}

.book-a-skip .tiger-surcharge .ginput_container_singleproduct {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
}

.book-a-skip .tiger-surcharge .ginput_product_price_label { display: none; }

.book-a-skip .tiger-surcharge .ginput_product_price {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.book-a-skip .tiger-surcharge .ginput_quantity_label { display: none; }

.book-a-skip .tiger-surcharge.is-active {
  border-color: var(--color-dark);
  background: var(--color-bg-cream);
}

/* ---------- quantity steppers (built in JS) ---------- */
.tiger-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.tiger-stepper__btn {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--color-text-heading);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.tiger-stepper__btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tiger-stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }

.book-a-skip .gform_wrapper .tiger-surcharge .ginput_quantity {
  width: 2.75rem;
  max-width: 2.75rem;
  padding: 0.35rem 0.15rem;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  appearance: textfield;
  -moz-appearance: textfield;
}

.book-a-skip .tiger-surcharge .ginput_quantity::-webkit-outer-spin-button,
.book-a-skip .tiger-surcharge .ginput_quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- payment ---------- */
.book-a-skip .tiger-payment .gfield_radio { display: grid; gap: 0.5rem; }

@media (min-width: 620px) {
  .book-a-skip .tiger-payment .gfield_radio { grid-template-columns: repeat(3, 1fr); }
}

.book-a-skip .tiger-payment .gchoice { position: relative; margin: 0; }

.book-a-skip .tiger-payment input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.book-a-skip .gform_wrapper.gravity-theme .tiger-payment label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
  padding: 0.8rem 0.85rem;
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text);
  max-width: none;
}

/* Selected payment card: orange border, tint and label (icons stay as they are). */
.book-a-skip .gform_wrapper.gravity-theme .tiger-payment input:checked + label {
  background: rgba(255, 85, 0, 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.book-a-skip .tiger-payment input:focus-visible + label {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* The method icon sits under the label text. space-between on the label above
   pushes it to the bottom, so the three icons line up even though the wording
   above them runs to different lengths.

   Colour is baked into the SVGs rather than inherited: these load as <img>, so
   currentColor cannot reach them - and a real PayPal mark has to keep its own
   brand colours anyway. */
.book-a-skip .tiger-payment__text { display: block; }

.book-a-skip .tiger-payment__icon {
  display: block;
  width: auto;
  height: 1.5rem;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.book-a-skip .tiger-payment input:checked + label .tiger-payment__icon { opacity: 1; }

/* The rail carries the total, so the form's own total field stays for
   accessibility and non-JS users but is visually quiet. */
.book-a-skip .tiger-total {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.book-a-skip .gform_wrapper.gravity-theme .tiger-total .gfield_label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
  margin: 0;
}

.book-a-skip .tiger-total .ginput_total {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-primary);
}

/* ---------- footer / submit ---------- */
.book-a-skip .gform_footer { margin-top: 1rem; }

.book-a-skip .gform_button {
  width: 100%;
  padding: 0.95rem 1.25rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.book-a-skip .gform_button:hover { background: var(--color-primary-dark); }

/* On desktop the rail's button submits, so the form's own is redundant.
   Only the button is hidden: the footer also holds PayPal's buttons. */
@media (min-width: 1020px) {
  .book-a-skip .gform_button {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* ---------- summary rail ---------- */
.booking-rail { min-width: 0; }

.booking-rail__inner {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* The site header is sticky at 5rem tall, so the rail has to clear it plus a
   small gap - at top:1rem its own top slid underneath the header. */
.book-a-skip { --tiger-header-h: 5rem; --tiger-rail-gap: 1rem; }

@media (min-width: 1020px) {
  .booking-rail__inner {
    position: sticky;
    top: calc(var(--tiger-header-h) + var(--tiger-rail-gap));
    max-height: calc(100vh - var(--tiger-header-h) - (var(--tiger-rail-gap) * 2));
    overflow-y: auto;
  }
}

.booking-rail__head { background: var(--color-dark); color: #fff; padding: 0.8rem 1rem; }

.booking-rail__head h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 0;
  color: #fff;
}

.booking-rail__bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.booking-rail__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-primary);
  transition: width 0.35s ease;
}

.booking-rail__progress { font-size: 0.72rem; color: var(--color-text-soft); margin: 0.35rem 0 0; }

.booking-rail__body { padding: 1rem; }

.booking-rail__chosen {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 0.8rem;
}

.booking-rail__chosen img { width: 3rem; flex: none; }

.booking-rail__chosen b {
  display: block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.88rem;
  color: var(--color-text-heading);
  line-height: 1.15;
}

.booking-rail__chosen span { font-size: 0.74rem; color: var(--color-text-muted); }

.booking-rail__chosen.is-empty {
  display: block;
  color: var(--color-text-grey);
  font-size: 0.85rem;
  font-style: italic;
}

.booking-rail__lines { display: grid; gap: 0.38rem; margin-bottom: 0.7rem; }

.booking-rail__line { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.84rem; }

.booking-rail__line span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text-heading);
  white-space: nowrap;
}

.booking-rail__line.is-free span:last-child { color: var(--color-green); }

.booking-rail__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  border-top: 2px solid var(--color-border);
  padding-top: 0.7rem;
}

.booking-rail__total-label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-heading);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.booking-rail__total-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.85rem;
  color: var(--color-primary);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.booking-rail__vat { font-size: 0.7rem; color: var(--color-text-muted); margin: 0.15rem 0 0; text-align: right; }

.booking-rail__go {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.85rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.booking-rail__go:hover:not(:disabled) { background: var(--color-primary-dark); }
.booking-rail__go:disabled { opacity: 0.5; cursor: not-allowed; }

.booking-rail__help { margin: 0.6rem 0 0; font-size: 0.74rem; color: var(--color-text-muted); text-align: center; }
.booking-rail__help a { color: var(--color-primary-dark); font-weight: 700; }

/* ---------- mobile total bar ---------- */
.booking-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

@media (min-width: 1020px) { .booking-bar { display: none; } }

.booking-bar b {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-primary);
  line-height: 1;
}

.booking-bar span { font-size: 0.68rem; color: var(--color-text-muted); }

.booking-bar button {
  margin-left: auto;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 0.55rem 0.95rem;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 0.84rem;
  cursor: pointer;
}

/* Keep the fixed bar clear of the end of the page on mobile. */
@media (max-width: 1019.98px) {
  .book-a-skip { padding-bottom: 6rem; }
}

/* Below the two-column breakpoint the surcharges stop being three narrow
   cards - the stepper cannot fit in ~94px - and become full-width rows with
   the label on the left and a comfortably sized stepper on the right. */
@media (max-width: 619.98px) {
  .book-a-skip .gform_wrapper.gravity-theme .tiger-step__body > .tiger-third {
    grid-column: span 12;
  }

  .book-a-skip .tiger-surcharge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    padding: 0.6rem 0.75rem;
  }

  .book-a-skip .gform_wrapper.gravity-theme .tiger-surcharge .gfield_label { margin: 0; }

  .book-a-skip .tiger-surcharge .ginput_container_singleproduct {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-items: initial;
  }

  .book-a-skip .tiger-surcharge .tiger-stepper__btn {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.15rem;
  }
}

/* ---------- validation ---------- */
.book-a-skip .gfield_error .gfield_label { color: #b3261e; }

.book-a-skip .validation_message {
  background: #fdeceb;
  border-left: 4px solid #b3261e;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  color: #7f2420;
}

.book-a-skip .gform_validation_errors {
  background: #fdeceb;
  border: 1px solid #f3c9c6;
  border-left: 4px solid #b3261e;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.125rem;
}

/* ---------- confirmation ---------- */
.tiger-confirm {
  max-width: 40rem;
  margin: 0 auto;
  background: #e9f7ee;
  border-left: 4px solid var(--color-green);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.75rem;
}

.tiger-confirm h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-text-heading);
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.tiger-confirm p { margin: 0 0 0.5rem; color: #14663a; }

/* ---------- private-land modal ---------- */
.tiger-modal {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  max-width: 30rem;
  width: calc(100% - 2rem);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  color: var(--color-text);
}

.tiger-modal::backdrop { background: rgba(18, 18, 20, 0.6); }

.tiger-modal__head { background: #b3261e; color: #fff; padding: 1rem 1.25rem; }

.tiger-modal__head h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 1.0625rem;
  margin: 0;
  letter-spacing: 0.03em;
}

.tiger-modal__body { padding: 1.25rem; }
.tiger-modal__body p { margin: 0 0 1rem; font-size: 0.9375rem; }
.tiger-modal__actions { display: grid; gap: 0.625rem; }

.tiger-modal__actions button {
  padding: 0.8125rem 1rem;
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
}

.tiger-modal__actions .tiger-modal__primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Postcodes4U "Lookup" button (injected into the address field) ---------- */
/* Sits in the right-hand column beside the postcode input; top-aligned and
   the same height as the input so the two line up. */
.book-a-skip .Pc4uGfLookupSpan { display: block; margin-top: 0; align-self: flex-start; }

.book-a-skip .Pc4uGfLookup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.3125rem;
  min-height: 0;
  padding: 0 1.25rem;
  background: #fff;
  color: var(--color-dark);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.book-a-skip .Pc4uGfLookup:hover,
.book-a-skip .Pc4uGfLookup:focus-visible {
  background: var(--color-dark);
  color: #fff;
}

/* Step 2 rows: date on its own line, then placement + exchange side by side,
   then the hire note full width (field 7 is tiger-full). */
@media (min-width: 620px) {
  .book-a-skip .gform_wrapper.gravity-theme .tiger-step__body > .tiger-placement { grid-column: 1 / span 6; }
}

/* The form's own submit button is hidden: the summary rail (desktop) and the
   fixed total bar (mobile) both submit via book-a-skip.js. The footer itself
   stays, because Gravity Forms renders PayPal's buttons inside it; it only
   takes up room once those buttons are there. !important beats the inline
   display PayPal Checkout sets on the button when switching methods.
   It must not be display: none: Gravity Forms refuses to submit ("Active
   button not found") unless the clicked button itself is displayed, so it is
   clipped to nothing instead. */
.book-a-skip .gform_wrapper.gravity-theme .gform_button {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.book-a-skip .gform_wrapper.gravity-theme .gform_footer { margin: 0; padding: 0; }
.book-a-skip .gform_wrapper.gravity-theme .gform_footer:has(.gform_ppcp_smart_payment_buttons > *) { margin-top: 1.5rem; }

/* PayPal's buttons, moved above the total by book-a-skip.js. The slot only
   shows while PayPal is ticked. This is CSS rather than a class set by script
   so the box already has its width when PayPal draws into it. */
.book-a-skip .tiger-paypal { display: none; grid-column: 1 / -1; }
.book-a-skip .tiger-step__body:has(input[name="input_26"][value="PayPal"]:checked) .tiger-paypal { display: block; }

/* Stripe's card element can show its field again (inline display: block) after
   conditional logic has hidden it, e.g. Card then Pay on delivery. Gravity
   Forms still marks the field hidden, so honour that. */
.book-a-skip .gfield[data-conditional-logic="hidden"] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .book-a-skip .skip-card,
  .skip-card__tick,
  .booking-rail__bar i,
  .tiger-step__head::before { transition: none; }
}
/* PayPal smart buttons.

   Gravity Forms drops PayPal's button container into the form footer, which
   is a flex row. The container has no intrinsic width, so it computes to 0px
   - and PayPal cannot paint buttons into a zero-width box. The result is four
   blank about:blank iframes and no visible buttons. It has to have a width
   BEFORE PayPal renders; resizing it afterwards does not make PayPal repaint. */
.book-a-skip .gform_wrapper.gravity-theme .gform-footer { flex-wrap: wrap; }

.book-a-skip .gform_wrapper.gravity-theme .gform_ppcp_smart_payment_buttons {
  width: 100%;
  min-width: 15rem;
  max-width: 26rem;
}