/* ==========================================================================
   LatePoint – Skin tokens (CSS variables)
   --------------------------------------------------------------------------
   Wrapper class:
     .latepoint-book-form-wrapper lp-skin--red
     .latepoint-book-form-wrapper lp-skin--light
   ========================================================================== */


/* =========================
   SKIN: Red
   ========================= */
.latepoint-book-form-wrapper.lp-skin--red{
  /* Left side panel background (.latepoint-side-panel) */
  --lp-sidepanel-bg: #f6e9ea;

  /* Left title + desc */
  --lp-sidepanel-desc-title-color: #000000; /* Service Selection -> black (both skins) */
  --lp-sidepanel-desc-content-color: #5b6f8a;

  /* Top heading bar (.latepoint-heading-w) */
  --lp-heading-bg: #d80825;
  --lp-heading-text-color: #ffffff;

  /* Info / warning box (.latepoint-step-content-text-left) */
  --lp-stepnote-bg: #fbe9ea;
  --lp-stepnote-text-color: #d80825;

  /* Border-left tokens (color + thickness) */
  --lp-stepnote-border-left-color: #d80825;
  --lp-stepnote-border-left-width: 4px;   /* not too thick */
  --lp-stepnote-border-gap: 14px;         /* space between border & text */

  /* Fix font-size issue + spacing under the box */
  --lp-stepnote-font-size: revert;        /* set e.g. 16px if you prefer */
  --lp-stepnote-line-height: revert;      /* set e.g. 1.4 if you prefer */
  --lp-stepnote-margin-bottom: 18px;      /* recreate spacing under the box */
}


/* =========================
   SKIN: Light
   ========================= */
.latepoint-book-form-wrapper.lp-skin--light{
  --lp-sidepanel-bg: #f3f4f6;

  /* Service Selection -> black (both skins) */
  --lp-sidepanel-desc-title-color: #000000;
  --lp-sidepanel-desc-content-color: #4b5563;

  --lp-heading-bg: #111827;
  --lp-heading-text-color: #ffffff;

  --lp-stepnote-bg: #eef2ff;
  --lp-stepnote-text-color: #1f2937;

  --lp-stepnote-border-left-color: #4f46e5;
  --lp-stepnote-border-left-width: 4px;  /* not too thick */
  --lp-stepnote-border-gap: 14px;

  --lp-stepnote-font-size: revert;
  --lp-stepnote-line-height: revert;
  --lp-stepnote-margin-bottom: 18px;
}


/* ==========================================================================
   Apply tokens to LatePoint markup
   ========================================================================== */

/* Left side background */
.latepoint-book-form-wrapper.lp-skin--red .latepoint-side-panel,
.latepoint-book-form-wrapper.lp-skin--light .latepoint-side-panel{
  background: var(--lp-sidepanel-bg) !important;
}

/* Left title "Service Selection" */
.latepoint-book-form-wrapper.lp-skin--red .latepoint-desc-title,
.latepoint-book-form-wrapper.lp-skin--light .latepoint-desc-title{
  color: var(--lp-sidepanel-desc-title-color) !important;
}

/* Left description text */
.latepoint-book-form-wrapper.lp-skin--red .latepoint-desc-content,
.latepoint-book-form-wrapper.lp-skin--light .latepoint-desc-content{
  color: var(--lp-sidepanel-desc-content-color) !important;
}

/* Top heading bar */
.latepoint-book-form-wrapper.lp-skin--red .latepoint-heading-w,
.latepoint-book-form-wrapper.lp-skin--light .latepoint-heading-w{
  background: var(--lp-heading-bg) !important;
}
.latepoint-book-form-wrapper.lp-skin--red .latepoint-heading-w .os-heading-text,
.latepoint-book-form-wrapper.lp-skin--red .latepoint-heading-w .os-heading-text-library,
.latepoint-book-form-wrapper.lp-skin--light .latepoint-heading-w .os-heading-text,
.latepoint-book-form-wrapper.lp-skin--light .latepoint-heading-w .os-heading-text-library{
  color: var(--lp-heading-text-color) !important;
}


/* Info / warning box (border + spacing tokens restored) */
.latepoint-book-form-wrapper.lp-skin--red .latepoint-step-content-text-left,
.latepoint-book-form-wrapper.lp-skin--light .latepoint-step-content-text-left{
  background: var(--lp-stepnote-bg) !important;
  color: var(--lp-stepnote-text-color) !important;

  /* tokens: color + thickness */
  border-left-color: var(--lp-stepnote-border-left-color) !important;
  border-left-width: var(--lp-stepnote-border-left-width) !important;
  border-left-style: solid !important;

  /* keep any existing radius from LatePoint (we are not overriding it) */

  /* space so text doesn't stick to border */
  padding-left: var(--lp-stepnote-border-gap) !important;

  /* fix font-size issue (now controlled by tokens) */
  font-size: var(--lp-stepnote-font-size) !important;
  line-height: var(--lp-stepnote-line-height) !important;

  /* recreate margin under the box */
  margin-bottom: var(--lp-stepnote-margin-bottom) !important;
}

/* Prevent paragraph default margins from messing with spacing */
.latepoint-book-form-wrapper.lp-skin--red .latepoint-step-content-text-left p,
.latepoint-book-form-wrapper.lp-skin--light .latepoint-step-content-text-left p{
  margin: 0 !important;
  color: inherit !important;
}

/* ==========================================================================
   LatePoint footer Back button – prevent “disappearing on hover”
   Targets:
     <a class="latepoint-btn latepoint-btn-white latepoint-prev-btn">…</a>
   ========================================================================== */

/* Optional tokens (you can move these into your skin blocks if you want) */
.latepoint-book-form-wrapper{
  --lp-back-btn-text: #111827;
  --lp-back-btn-icon: #111827;
  --lp-back-btn-text-hover: #111827;
  --lp-back-btn-icon-hover: #111827;
  --lp-back-btn-bg-hover: rgba(17, 24, 39, 0.06);
  --lp-back-btn-border-hover: rgba(17, 24, 39, 0.25);
}

/* Ensure it never becomes invisible (unless LatePoint explicitly disables it) */
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn{
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  align-items: center;
  gap: .45em;

  /* keep it clickable even if other hover styles mess with it */
  pointer-events: auto !important;

  /* base colors */
  color: var(--lp-back-btn-text) !important;
  border-color: rgba(17, 24, 39, 0.18);
}

/* Icon inherits color; enforce explicitly */
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn i{
  color: var(--lp-back-btn-icon) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Text inherits color; enforce explicitly */
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn span{
  color: var(--lp-back-btn-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hover / focus: keep visible + set colors */
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn:hover,
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn:focus,
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn:focus-visible{
  opacity: 1 !important;
  visibility: visible !important;

  background: var(--lp-back-btn-bg-hover) !important;
  border-color: var(--lp-back-btn-border-hover) !important;
  color: var(--lp-back-btn-text-hover) !important;
}

.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn:hover i,
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn:focus i,
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn:focus-visible i{
  color: var(--lp-back-btn-icon-hover) !important;
}

.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn:hover span,
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn:focus span,
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn:focus-visible span{
  color: var(--lp-back-btn-text-hover) !important;
}

/* If LatePoint marks it disabled, allow it to look disabled but not “vanish” */
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn.disabled,
.latepoint-book-form-wrapper .latepoint-footer .latepoint-prev-btn[aria-disabled="true"]{
  opacity: .45 !important;
  visibility: visible !important;
  pointer-events: none !important;
}


/* Hide the "Extras:" / "Extra:" label (plain text in the span) while keeping the selected extras value inside <strong> visible. */
.summary-attributes.sa-clean span{
  font-size: 0;      /* hides the text node "Extras: " */
}
.summary-attributes.sa-clean span strong{
  font-size: 1rem;   /* restore size for the value */
}

/* Hide the "Cost Breakdown" heading text while keeping the divider line visible. */
.pb-heading .pbh-label{
  display: none;
}

/* Hide only the 0€ prices on pack rows (non-.spi-sub and non-.spi-total), while keeping item subtotals and the Total Price visible. */
.summary-price-item-w:not(.spi-sub):not(.spi-total) .spi-price{
  display: none;
}

/* Hide the "Add more items to this order" trigger on the verification step. */
.latepoint-add-another-item-trigger-wrapper.on-verify{
  display: none !important;
}

/* Hide the "Add More" trigger in the order summary view. */
.latepoint-add-another-item-trigger-wrapper.on-summary{
  display: none !important;
}

/* Hide the "Show QR" trigger/button. */
.qr-show-trigger{
  display: none !important;
}