/* ==========================================================================
   Viking Booking – Consolidated Stylesheet
   ========================================================================== */

/* ---------- Vars ---------- */
:root{
  --vb-blue:#2271b1;
  --vb-blue-dark:#1b5a8d;
  --vb-blue-soft:rgba(34,113,177,.14);
  --vb-border:#e2e8f0;
  --vb-border-2:#e9e9e9;
  --vb-bg:#f8fafc;
  --vb-text:#0f172a;
  --vb-text-muted:#64748b;
  --vb-surface:#ffffff;
  /* Auto-härleds från surface + text för att alltid ge rätt kontrast i input-fält oavsett tema */
  --vb-surface-muted:color-mix(in srgb, var(--vb-surface) 92%, var(--vb-text) 8%);
  --vb-secondary-bg:color-mix(in srgb, var(--vb-text) 10%, var(--vb-bg));
  --vb-secondary-hover:color-mix(in srgb, var(--vb-text) 16%, var(--vb-bg));
  --vb-secondary-active:color-mix(in srgb, var(--vb-text) 22%, var(--vb-bg));
  --vb-secondary-border:color-mix(in srgb, var(--vb-text) 24%, var(--vb-bg));
  --vb-secondary-border-hover:color-mix(in srgb, var(--vb-text) 32%, var(--vb-bg));
  --vb-kicker:var(--vb-blue);
  --vb-card-selected-bg:var(--vb-blue-soft);
  --vb-selected-tint:var(--vb-blue);
  --vb-selected-tint-soft:rgba(34,113,177,.14);
  --vb-progress-active:var(--vb-blue);
  --vb-progress-inactive:var(--vb-border);
  --vb-button:var(--vb-blue);
  --vb-button-text:#ffffff;
  --vb-button-hover:var(--vb-blue-dark);
  --vb-button-text-hover:#ffffff;
  --vb-hero-overlay-top:rgba(15,23,42,0);
  --vb-hero-overlay-bottom:rgba(15,23,42,.82);
  --vb-hero-overlay-angle:180deg;
  --vb-selected-overlay-top:rgba(34,113,177,.15);
  --vb-selected-overlay-bottom:rgba(34,113,177,.85);
  --vb-selected-overlay-angle:180deg;
  --vb-radius-sm:10px;
  --vb-radius-md:14px;
  --vb-radius-lg:22px;
  --vb-wizard-radius:var(--vb-radius-lg);
  --vb-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --vb-shadow-md:0 4px 16px rgba(15,23,42,.07);
  --vb-shadow-lg:0 16px 48px rgba(15,23,42,.1);
  --vb-ease:cubic-bezier(0.25,0.46,0.45,0.94);
  /* Mobilt tangentbord (sätts via JS + visualViewport) */
  --vb-keyboard-gap:0px;
}

/* ---------- Grundlayout / Cards ---------- */
#viking-booking-root,
#viking-extras-root,
#viking-party-root,
:is(#viking-wizard-root,#viking-group-booking-root){
  margin:0 auto;
  font-family:var(--vb-font-family,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
  color:var(--vb-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#viking-booking-root{ max-width:720px; }
:is(#viking-wizard-root,#viking-group-booking-root),
#viking-party-root{
  box-sizing:border-box;
  max-width:100vw;
  width:100%;
  overflow-x:clip;
}
:is(#viking-wizard-root,#viking-group-booking-root) *,
:is(#viking-wizard-root,#viking-group-booking-root) *::before,
:is(#viking-wizard-root,#viking-group-booking-root) *::after,
#viking-party-root *,
#viking-party-root *::before,
#viking-party-root *::after{
  box-sizing:border-box;
}
.vb-card{
  background:var(--vb-surface);
  border-radius:var(--vb-radius-lg);
  padding:clamp(20px,4vw,28px);
  box-shadow:var(--vb-shadow-md);
  border:1px solid var(--vb-border);
  margin:clamp(20px,4vw,32px) auto;
  max-width:100%;
  box-sizing:border-box;
}
.vb-card.vb-wizard{
  border-radius:var(--vb-wizard-radius);
  min-height:500px;
  display:flex;
  flex-direction:column;
}
.vb-card.vb-wizard > .vb-wizard-actions{
  margin-top:auto;
  padding-top:28px;
}
@media (max-width:640px){
  .vb-card.vb-wizard > .vb-wizard-actions{ padding-top:24px; }
}
.vb-title{
  font-size:var(--vb-wizard-title-size,clamp(1.25rem,2.4vw,1.5rem));
  font-weight:700;
  margin-bottom:16px;
  letter-spacing:-0.02em;
  color:var(--vb-text);
}

/* ---------- Formelement ---------- */
.vb-label{display:block;font-weight:600;margin:14px 0 8px;font-size:15px;color:var(--vb-text);}
.vb-input{
  width:100%!important;
  border:1px solid #cbd5e1!important;
  border-radius:var(--vb-radius-sm)!important;
  padding:12px 14px!important;
  font-size:15px!important;
  background:var(--vb-surface-muted)!important;
  transition:border-color .2s var(--vb-ease),background .2s var(--vb-ease),box-shadow .2s var(--vb-ease)!important;
  color:var(--vb-text)!important;
  font-family:inherit!important;
  line-height:1.45!important;
  box-shadow:var(--vb-shadow-sm);
}
.vb-input:hover{background:var(--vb-surface)!important;border-color:#94a3b8!important;}
.vb-input:focus{
  border-color:var(--vb-blue)!important;
  background:var(--vb-surface)!important;
  box-shadow:0 0 0 3px var(--vb-blue-soft)!important;
  outline:none!important;
}
.vb-input::placeholder{color:#94a3b8!important;}

@media (max-width:600px){
  .vb-input{font-size:17px!important;} /* iOS zoom fix */
}

/* ---------- Grid ---------- */
.vb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.vb-grid-half{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;}
@media (max-width:600px){.vb-grid-half{grid-template-columns:1fr;}}

/* ---------- Fieldset / Etiketter ---------- */
.vb-fieldset{
  margin-top:18px;
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-md);
  padding:20px 18px;
  background:linear-gradient(180deg,var(--vb-surface) 0%,var(--vb-surface-muted) 100%);
  box-shadow:var(--vb-shadow-sm);
  color:var(--vb-text);
}
.vb-fieldset legend{
  font-weight:700;
  color:var(--vb-text);
  font-size:15px;
  padding:0 10px;
  margin-left:-2px;
  background:transparent;
  letter-spacing:.01em;
}
.vb-sublabel{display:block;margin-bottom:6px;font-weight:500;color:var(--vb-text-muted);font-size:14px;}
.vb-player-row{margin:12px 0 10px;}

/* ---------- Betalsätt (embed / Bambora) ---------- */
.vb-payment-methods{
  display:grid;
  gap:8px;
}
.vb-payment-method{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-sm);
  cursor:pointer;
  background:var(--vb-surface-muted);
  color:var(--vb-text);
  box-shadow:var(--vb-shadow-sm);
  transition:background .2s var(--vb-ease),border-color .2s var(--vb-ease),box-shadow .2s var(--vb-ease),color .2s var(--vb-ease);
}
.vb-payment-method--online{
  align-items:center;
}
.vb-payment-method__row{
  display:flex;
  flex:1;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.vb-payment-method__label{
  font-weight:500;
  color:inherit;
  flex:0 0 auto;
}
.vb-payment-method__brands{
  display:block;
  height:28px;
  width:auto;
  max-width:min(100%, 340px);
  margin-left:auto;
  object-fit:contain;
  object-position:right center;
  flex:0 1 auto;
}
@media (max-width:520px){
  .vb-payment-method--online{
    align-items:flex-start;
  }
  .vb-payment-method__row{
    flex-direction:column;
    align-items:flex-start;
  }
  .vb-payment-method__brands{
    margin-left:0;
    max-width:100%;
    height:24px;
    object-position:left center;
  }
}
.vb-payment-method:hover{
  border-color:var(--vb-blue);
  background:var(--vb-surface);
}
.vb-payment-method.is-selected{
  background:var(--vb-selected-tint);
  color:var(--vb-button-text);
  border-color:var(--vb-selected-tint);
  box-shadow:0 2px 8px var(--vb-selected-tint-soft);
}
.vb-payment-method.is-selected:hover{
  background:var(--vb-selected-tint);
  color:var(--vb-button-text);
  border-color:var(--vb-selected-tint);
}
.vb-payment-method input[type=radio]{
  margin:0;
  accent-color:var(--vb-selected-tint,var(--vb-blue));
  flex-shrink:0;
  margin-top:2px;
}
.vb-payment-method--online input[type=radio]{
  margin-top:0;
}

/* ---------- Knappar ---------- */
.vb-btn,.vb-btn-option,.vb-btn-secondary{
  border:none;
  border-radius:var(--vb-radius-sm);
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition:background .2s var(--vb-ease),transform .15s var(--vb-ease),box-shadow .2s var(--vb-ease);
}
.vb-btn{
  background:var(--vb-button);
  background-image:linear-gradient(
    180deg,
    color-mix(in srgb, var(--vb-button) 88%, white) 0%,
    var(--vb-button) 100%
  );
  color:var(--vb-button-text);
  padding:12px 20px;
  min-height:44px;
  box-shadow:0 2px 8px color-mix(in srgb, var(--vb-button) 32%, transparent);
}
.vb-btn:hover,.vb-btn:focus{
  background:var(--vb-button-hover)!important;
  background-image:linear-gradient(
    180deg,
    color-mix(in srgb, var(--vb-button-hover) 92%, white) 0%,
    var(--vb-button-hover) 100%
  )!important;
  color:var(--vb-button-text-hover)!important;
  box-shadow:0 3px 12px color-mix(in srgb, var(--vb-button-hover) 36%, transparent);
}
.vb-btn:active{transform:scale(0.98);}
.vb-btn-secondary{
  background:var(--vb-secondary-bg)!important;
  color:var(--vb-text)!important;
  padding:12px 20px;
  min-height:44px;
  border:1px solid var(--vb-secondary-border,var(--vb-border))!important;
  box-shadow:var(--vb-shadow-sm);
  appearance:none;
  -webkit-appearance:none;
  font-family:inherit;
}
.vb-btn-secondary:hover{
  background:var(--vb-secondary-hover)!important;
  border-color:var(--vb-secondary-border-hover)!important;
  color:var(--vb-text)!important;
}
.vb-btn-secondary:active{
  background:var(--vb-secondary-active)!important;
  border-color:var(--vb-secondary-border-hover)!important;
  color:var(--vb-text)!important;
}
.vb-btn-secondary:focus,
.vb-btn-secondary:focus-visible{
  outline:none!important;
  background:var(--vb-secondary-bg)!important;
  color:var(--vb-text)!important;
  border-color:var(--vb-blue)!important;
  box-shadow:0 0 0 3px var(--vb-blue-soft)!important;
}
.vb-btn-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 4px;
}
.vb-btn-option{
  border:1px solid #cbd5e1;
  background:var(--vb-surface);
  color:var(--vb-text);
  padding:10px 16px;
  min-height:40px;
  min-width:44px;
  border-radius:999px;
  box-shadow:var(--vb-shadow-sm);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.vb-btn-option:hover{background:#f1f5f9;border-color:var(--vb-blue);color:var(--vb-blue-dark);}
.vb-btn-option.active{background:var(--vb-selected-tint);color:var(--vb-button-text);border-color:var(--vb-selected-tint);box-shadow:0 2px 8px var(--vb-selected-tint-soft);}
.vb-btn-option:disabled{cursor:not-allowed;opacity:.45;}
.vb-btn-option:focus,.vb-btn-option:focus-visible{outline:none!important;box-shadow:0 0 0 3px var(--vb-blue-soft)!important;border-color:var(--vb-blue);background:var(--vb-surface-muted)!important;color:var(--vb-text)!important;}
.vb-btn-option.active:focus,.vb-btn-option.active:focus-visible{box-shadow:0 0 0 3px var(--vb-selected-tint-soft),0 2px 8px var(--vb-selected-tint-soft)!important;background:var(--vb-selected-tint)!important;color:var(--vb-button-text)!important;}
.vb-btn-option:hover{background:#f1f5f9!important;border-color:var(--vb-blue);color:var(--vb-blue-dark)!important;}
.vb-btn-option:active{background:#f1f5f9!important;color:var(--vb-blue-dark)!important;}
.vb-btn-option.active,.vb-btn-option.active:hover,.vb-btn-option.active:active{background:var(--vb-selected-tint)!important;color:var(--vb-button-text)!important;border-color:var(--vb-selected-tint)!important;box-shadow:0 2px 8px var(--vb-selected-tint-soft);}
/* Focus harmoniserad */
.vb-btn:focus,.vb-btn:focus-visible{outline:none!important;box-shadow:0 0 0 3px var(--vb-blue-soft)!important;}
.vb-btn:focus:not(:focus-visible){outline:none!important;box-shadow:0 2px 8px rgba(34,113,177,.28);}
.vb-btn-secondary:focus:not(:focus-visible){
  outline:none!important;
  background:var(--vb-secondary-bg)!important;
  color:var(--vb-text)!important;
  box-shadow:var(--vb-shadow-sm)!important;
}

/* ---------- Lediga tider ---------- */
.vb-time-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-top:10px;animation:vbFadeInGrid .35s var(--vb-ease);}
.vb-time-card{
  border:1px solid transparent;
  border-radius:var(--vb-radius-sm);
  text-align:center;
  padding:10px 8px;
  font-size:.85rem;
  cursor:pointer;
  transition:transform .18s var(--vb-ease),box-shadow .18s var(--vb-ease),border-color .18s var(--vb-ease);
  font-weight:600;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  line-height:1.35;
  min-height:64px;
  box-shadow:var(--vb-shadow-sm);
}
.vb-time-card:hover:not(.gray){transform:translateY(-2px);box-shadow:var(--vb-shadow-md);}
.vb-time-slot{font-weight:700;font-size:14px;letter-spacing:-0.01em;}
.vb-time-price{font-size:12px;opacity:.88;margin-top:3px;font-weight:500;}
.vb-time-card .vb-time-price{
  display:inline-block;
  margin-top:4px;
  padding:1px 7px;
  border-radius:999px;
  background:color-mix(in srgb, currentColor 8%, transparent);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.vb-time-card.selected .vb-time-price{
  background:rgba(255,255,255,.18);
  opacity:.95;
}
.vb-price-preview{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:16px;
  padding:14px 16px;
  background:linear-gradient(135deg, var(--vb-blue-soft) 0%, color-mix(in srgb, var(--vb-blue-soft) 60%, transparent) 100%);
  border:1px solid color-mix(in srgb, var(--vb-blue) 22%, transparent);
  border-radius:var(--vb-radius-md);
}
.vb-price-preview--muted{
  background:color-mix(in srgb, var(--vb-text-muted) 8%, transparent);
  border-color:color-mix(in srgb, var(--vb-text-muted) 24%, transparent);
}
.vb-price-preview__label{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--vb-text-muted);
}
.vb-price-preview__value{
  font-size:22px;
  font-weight:700;
  color:var(--vb-text);
  letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.vb-price-preview__hint{
  font-size:12px;
  color:var(--vb-text-muted);
  margin-top:2px;
}
/* Wizard: horisontell tidslista med minimal scrollbar + pilar */
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-scroll{
  display:flex;
  align-items:stretch;
  gap:6px;
  margin-top:10px;
  animation:vbFadeInGrid .35s var(--vb-ease);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-scroll__track{
  flex:1;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--vb-text-muted) 42%, transparent) transparent;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-scroll__track::-webkit-scrollbar{height:4px;}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-scroll__track::-webkit-scrollbar-track{background:transparent;}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-scroll__track::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--vb-text-muted) 38%, transparent);
  border-radius:999px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-scroll__track::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb, var(--vb-text-muted) 58%, transparent);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-scroll__btn{
  flex:0 0 34px;
  width:34px;
  align-self:center;
  min-height:64px;
  padding:0;
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-sm);
  background:var(--vb-surface);
  color:var(--vb-text);
  font-size:22px;
  line-height:1;
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:background .15s var(--vb-ease),border-color .15s var(--vb-ease),opacity .15s var(--vb-ease),box-shadow .15s var(--vb-ease);
  box-shadow:var(--vb-shadow-sm);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-scroll__btn:hover:not(:disabled){
  background:var(--vb-surface-muted);
  border-color:color-mix(in srgb, var(--vb-text-muted) 35%, var(--vb-border));
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-scroll__btn:disabled{
  opacity:.32;
  cursor:default;
  box-shadow:none;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-scroll__track .vb-time-grid--strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(118px,132px);
  gap:10px;
  margin-top:0;
  width:max-content;
  min-width:min(100%,max-content);
  animation:none;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-scroll__track .vb-time-card{scroll-snap-align:start;}

.vb-time-card.green{background:linear-gradient(165deg,#ecfdf5 0%,#d1fae5 100%);border-color:#6ee7b7;color:#14532d;}
.vb-time-card.yellow{background:linear-gradient(165deg,#fffbeb 0%,#fef3c7 100%);border-color:#fcd34d;color:#78350f;}
.vb-time-card.orange{background:linear-gradient(165deg,#fff7ed 0%,#ffedd5 100%);border-color:#fb923c;color:#9a3412;}
.vb-time-card.gray{background:#f1f5f9;border-color:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed;}
.vb-time-card.selected{background:var(--vb-selected-tint)!important;background-image:linear-gradient(165deg,color-mix(in srgb,var(--vb-selected-tint) 85%,white) 0%,var(--vb-selected-tint) 100%)!important;color:var(--vb-button-text)!important;border-color:var(--vb-selected-tint)!important;box-shadow:0 4px 16px var(--vb-selected-tint-soft)!important;transform:scale(1.02);}
.vb-time-card:focus,.vb-time-card:focus-visible{outline:none!important;box-shadow:0 0 0 3px var(--vb-blue-soft)!important;}
.vb-time-card.selected:focus,.vb-time-card.selected:focus-visible{box-shadow:0 0 0 3px var(--vb-selected-tint-soft),0 4px 16px var(--vb-selected-tint-soft)!important;}
.vb-dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-webkit-baseline-middle!important;}
.vb-dot.green{background:#4caf50;} .vb-dot.yellow{background:#ffcc00;} .vb-dot.orange{background:#ff884d;}
.vb-sep{opacity:.5;}
.vb-slot-warning{top:6px;right:8px;color:#ff884d;font-size:0;opacity:.9;}

/* ---------- Sammanfattning ---------- */
.vb-summary{
  background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-md);
  padding:14px 16px;
  margin-top:14px;
  box-shadow:var(--vb-shadow-sm);
}
.vb-summary h4{margin:0 0 6px;font-size:16px;font-weight:700;letter-spacing:-0.02em;color:var(--vb-text);}

/* ---------- Legend ---------- */
.vb-legend{display:flex;justify-content:flex-start;align-items:center;gap:18px;margin-top:10px;font-size:14px;color:#333;flex-wrap:wrap;}
.vb-legend-item{display:flex;align-items:center;gap:6px;white-space:nowrap;flex:0 1 auto;}
@media (max-width:600px){
  .vb-legend{justify-content:left;gap:10px 16px;font-size:13px;}
  .vb-legend-item{flex:0 1 100%;justify-content:left;}
}

/* ---------- “Inga tider” ---------- */
@keyframes vbFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes vbFadeInGrid{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
.vb-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem 1.25rem;
  border-radius:var(--vb-radius-md);
  background:var(--vb-surface-muted);
  border:1px dashed #cbd5e1;
  margin:.5rem 0 1rem;
  animation:vbFadeIn .4s var(--vb-ease);
}
.vb-no-slots{font-size:1.1rem;font-weight:600;color:var(--vb-text-muted);margin-bottom:.75rem;}
.vb-empty .vb-btn-secondary{background:var(--vb-surface);border:1px solid var(--vb-border);color:var(--vb-text);padding:.65rem 1.15rem;border-radius:var(--vb-radius-sm);cursor:pointer;transition:.2s var(--vb-ease);box-shadow:var(--vb-shadow-sm);}
.vb-empty .vb-btn-secondary:hover{background:var(--vb-secondary-hover);}

/* ---------- Skeleton Loader ---------- */
@keyframes vbShimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.vb-time-grid.loading{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;margin:1rem 0;animation:vbFadeInGrid .3s ease-in-out;}
.vb-skeleton{height:64px;border-radius:var(--vb-radius-sm);background-color:#e2e8f0;background-image:linear-gradient(90deg,#e2e8f0,#f1f5f9,#e2e8f0);background-size:200px 100%;background-repeat:no-repeat;animation:vbShimmer 1.3s infinite linear;box-shadow:var(--vb-shadow-sm);opacity:.85;}

/* ---------- Modal ---------- */
.vb-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.48);
  backdrop-filter:saturate(1.1) blur(6px);
  -webkit-backdrop-filter:saturate(1.1) blur(6px);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1000;
  padding:16px;
  overflow:hidden;
}
.vb-modal-content{
  background:var(--vb-surface);
  border-radius:var(--vb-radius-lg);
  width:100%;
  max-width:600px;
  max-height:90vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:var(--vb-shadow-lg);
  border:1px solid rgba(255,255,255,.65);
  display:flex;
  flex-direction:column;
  padding:clamp(20px,3vw,28px);
}
.vb-modal-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;}
@media (min-width:1400px){.vb-modal-content{max-width:720px;}}
.vb-modal-content h3{font-size:clamp(1.1rem,2.2vw,1.35rem);font-weight:700;margin:0 0 4px;letter-spacing:-0.02em;color:var(--vb-text);}
@media (max-width:768px){
  .vb-modal{align-items:stretch;padding:0;}
  /* dvh = synlig höjd på mobil (undviker att knapprad hamnar under browser-chrome) */
  .vb-modal-content{
    border-radius:0;
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    max-height:100vh;
    max-height:100dvh;
    padding:20px 16px;
    padding-bottom:calc(28px + 120px + env(safe-area-inset-bottom,0px) + var(--vb-keyboard-gap,0px));
    box-sizing:border-box;
  }
  /* Fast bottenrad: förskjuts uppåt när tangentbord öppnas (--vb-keyboard-gap) */
  .vb-modal-actions{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    transform:translateY(calc(-1 * var(--vb-keyboard-gap,0px)));
    margin-top:0;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,#fff 55%);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--vb-border);
    box-shadow:0 -8px 32px rgba(15,23,42,.1);
    z-index:12050;
    justify-content:space-between;
    gap:8px;
  }
}
/* Lås bakgrunds-scroll när modal är öppen */
html.vb-modal-open,body.vb-modal-open{overflow:hidden!important;touch-action:none!important;overscroll-behavior:contain!important;}

/* ---------- Overlay / Spinner ---------- */
.vb-overlay{
  position:fixed;
  inset:0;
  background:rgba(248,250,252,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:fadeIn .3s var(--vb-ease);
}
.vb-overlay-inner{text-align:center;color:var(--vb-text);font-size:16px;font-weight:600;}
.vb-spinner{
  border:3px solid var(--vb-blue-soft)!important;
  border-top-color:var(--vb-blue)!important;
  border-radius:50%!important;
  width:44px!important;
  height:44px!important;
  margin:0 auto 14px!important;
  animation:spin .85s linear infinite!important;
}
.vb-overlay-text{font-size:15px;color:var(--vb-text-muted);}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
body.vb-processing{overflow:hidden;}

/* ---------- Små UI-fixar ---------- */
.vb-actions{margin-top:22px;display:flex;justify-content:flex-start;gap:10px;flex-wrap:wrap;}
.vb-showmore{display:inline-block;margin:14px auto 0;font-size:13px;font-weight:500;padding:8px 16px;border-radius:999px;background:var(--vb-surface-muted);border:1px solid var(--vb-border);color:var(--vb-text-muted);transition:background .2s var(--vb-ease),color .2s var(--vb-ease);}
.vb-showmore:hover{color:var(--vb-text);background:#e2e8f0;}
.vb-lane-toggle:hover{color:var(--vb-blue);}
.vb-modal .vb-input.vb-input-error{border-color:#e74c3c!important;background:#fff6f6!important;}
.vb-modal .vb-input.vb-input-error::placeholder{color:#e74c3c!important;opacity:.9;}

/* ==========================================================================
   WooCommerce Checkout Overrides
   - Orderöversikt och betalsätt
   ========================================================================== */

/* Dolt Elementor-dubbelblock endast i inline-kassan (modal) — inte på /kassan/ */
.viking-inline-checkout .e-checkout__order_review{display:none!important;}

/* ---------- v0.4.78: "Laddar säker betalning…"-state på Lägg-beställning ----------
   Knappen disablas och får en CSS-spinner medan Stripe Elements (WCPay/Klarna)
   monterar sin iframe. Hindrar kunden från att klicka för tidigt och se
   "första gången funkar inte"-mörker innan elementet är ready. */
.viking-inline-checkout #place_order.vb-btn-loading,
.viking-inline-checkout button[name="woocommerce_checkout_place_order"].vb-btn-loading{
  position:relative;
  opacity:.78;
  cursor:progress;
  pointer-events:none;
  padding-left:2.4rem;
}
.viking-inline-checkout #place_order.vb-btn-loading::before,
.viking-inline-checkout button[name="woocommerce_checkout_place_order"].vb-btn-loading::before{
  content:"";
  position:absolute;
  left:.9rem;
  top:50%;
  width:1.1rem;
  height:1.1rem;
  margin-top:-.55rem;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:vb-spin .7s linear infinite;
}
@keyframes vb-spin{ to{ transform:rotate(360deg); } }

/* Skeleton för payment_box innan Stripe Element är mountad — så Klarna-rutan
   inte ser "släckt"/tom ut första gången. Scope:as till gateways där iframe
   FAKTISKT förväntas (WCPay/Stripe), annars skulle den ligga kvar för evigt
   på gateways utan iframe. Försvinner automatiskt när iframen monterats. */
.viking-inline-checkout #payment .payment_box[class*="payment_method_woocommerce_payments"]:not(:has(iframe)):not(:has(.wcpay-upe-element > *))::after,
.viking-inline-checkout #payment .payment_box[class*="payment_method_stripe"]:not(:has(iframe)):not(:has(.wc-stripe-upe-element > *))::after{
  content:"Förbereder säker betalning…";
  display:block;
  padding:.75rem .9rem;
  margin-top:.5rem;
  font-size:13px;
  color:#475569;
  background:linear-gradient(90deg, rgba(148,163,184,.08) 0%, rgba(148,163,184,.18) 50%, rgba(148,163,184,.08) 100%);
  background-size:200% 100%;
  border-radius:8px;
  animation:vb-skeleton 1.4s linear infinite;
}
@keyframes vb-skeleton{ to{ background-position:-200% 0; } }

/* "Din beställning"-tabellen är redundant i modalen — wizarden visar
   redan produkter, datum/tid och totaler i sin egen summary ovanför.
   Vi döljer bara tabellen + rubriken, men låter #payment vara så
   betalmetoderna och "Lägg beställning"-knappen fortsätter renderas. */
.viking-inline-checkout #order_review_heading,
.viking-inline-checkout .woocommerce-checkout-review-order-table{
  display:none!important;
}

/* v0.4.78 — i recovery-modalen (vb_pay_failed) har vi INGEN wizard-summary
   ovanför, så där måste vi tvärtom visa WC:s orderöversikt så kunden
   ser vad som ingår och inte blir orolig för datum/tid. */
.viking-payment-recovery-overlay .viking-inline-checkout #order_review_heading{
  display:block!important;
}
.viking-payment-recovery-overlay .viking-inline-checkout .woocommerce-checkout-review-order-table{
  display:table!important;
}
.viking-inline-checkout #order_review{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  box-shadow:none!important;
}

/* Dölj Woo-fakturafält bara i inline-checkout: React-formuläret ersätter dem där.
   Global döljning bröt fullständig kassa (/kassan/) och kunde ge tom vänsterkolumn + misslyckad order. */
.viking-inline-checkout #customer_details,
.viking-inline-checkout .woocommerce-billing-fields,
.viking-inline-checkout .woocommerce-additional-fields{display:none!important;}

/* Tom orderöversikt (border-ruta) innan Woo fyllt tabellen — vanligt mellan total och "Din beställning" */
.viking-inline-checkout #order_review:empty,
.viking-inline-checkout #order_review:not(:has(.shop_table)){
  display:none!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  border:0!important;
  box-shadow:none!important;
}
.viking-inline-checkout .vb-checkout-anchor-slot:empty{
  display:none!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  border:0!important;
}
.viking-inline-checkout .col2-set #customer_details{
  display:none!important;
  width:0!important;
  margin:0!important;
  padding:0!important;
}
.viking-inline-checkout .col2-set .col-2,
.viking-inline-checkout #order_review_heading,
.viking-inline-checkout #order_review{
  width:100%!important;
  float:none!important;
}

/* --------- Orderöversikt (“Din beställning”) --------- */
#order_review_heading{font-size:18px;font-weight:700;margin:10px 0 12px;letter-spacing:-0.02em;color:var(--vb-text);}
#order_review{background:var(--vb-surface);border:1px solid var(--vb-border);border-radius:var(--vb-radius-md);padding:18px;box-shadow:var(--vb-shadow-sm);}
#order_review .shop_table{border:0;}
#order_review .shop_table thead th{border-bottom:1px solid #eee;text-transform:uppercase;letter-spacing:.02em;font-size:13px;padding:8px 0;}
#order_review .shop_table td,#order_review .shop_table th{border:0;padding:8px 0;}
#order_review .product-name{font-weight:600;}
#order_review .variation{margin:4px 0 0;}
#order_review .variation dt{display:none;}
#order_review .variation dd{margin:0;color:#555;white-space:pre-line;font-weight:400;}
#order_review tfoot th,#order_review tfoot td{padding:8px 0;}
#order_review .order-total th,#order_review .order-total td{border-top:1px solid #eee;padding-top:12px;font-size:16px;}
/* Radmarkering för varuraden */
#order_review .shop_table tr.cart_item td,#order_review .shop_table tr.cart_item th{background:#f6f7f9;border-radius:8px;}

/* --------- Betalsätt – fix för dubbla bakgrunder + loggor --------- */
#payment.woocommerce-checkout-payment{margin-top:16px;border-top:1px solid #eee;padding-top:16px;}
#payment .wc_payment_methods{display:flex;flex-direction:column;gap:12px;}
/* Yttre rad – ingen egen bakgrund */
#payment .wc_payment_method{background:transparent;border:0;padding:0;}
/* Labeln fungerar som “kortet” */
#payment .wc_payment_method>label{
  display:flex;align-items:center;gap:12px;font-weight:600;margin:0;padding:14px 14px;
  background:var(--vb-surface-muted);border:1px solid var(--vb-border);border-radius:var(--vb-radius-sm);
  transition:background .2s var(--vb-ease),border-color .2s var(--vb-ease);
}
#payment .wc_payment_method>label:hover{background:#e2e8f0;border-color:#cbd5e1;}
/* Begränsa alla betal-loggor */
#payment .wc_payment_method>label img,.wc_payment_methods label img{max-height:22px;width:auto;height:auto;object-fit:contain;}
/* Särskilt för Klarna-pill */
.payment_method_woocommerce_payments_klarna>label img{max-height:28px;max-width:120px;}
/* Innehållsruta för vald metod */
#payment .payment_box{display:block;margin:10px 0 0;background:var(--vb-surface);border:1px solid var(--vb-border);border-radius:var(--vb-radius-sm);padding:14px;box-shadow:var(--vb-shadow-sm);}
#payment .payment_box:before{display:none;}
/* Ta bort onödiga ramar i inre formulär */
#payment .payment_box fieldset,#payment .payment_box .wcpay-upe-form{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;}

/* Modal: säkerställ att Stripe/WooPayments-iframes och UPE får yta (overflow:hidden på .vb-modal kan annars klippa) */
.vb-modal .viking-inline-checkout #payment .payment_box{
  overflow:visible;
  position:relative;
  z-index:2;
}
.vb-modal .viking-inline-checkout #payment .payment_box iframe{
  width:100%!important;
  min-height:2.75rem;
  border:0;
  vertical-align:top;
}
/* WooPayments UPE / Stripe: tomma mount-noder innan JS — ge höjd så layout inte kollapsar */
.vb-modal .viking-inline-checkout .wcpay-upe-element,
.vb-modal .viking-inline-checkout .wc-stripe-upe-element{
  min-height:5rem;
}
/* Ge extra höjd endast för betalmetoder som faktiskt renderar iframe/UI */
.vb-modal .viking-inline-checkout #payment .payment_box.payment_method_woocommerce_payments,
.vb-modal .viking-inline-checkout #payment .payment_box.payment_method_stripe{
  min-height:7.5rem;
}

/* Beställknapp (om den visas) */
#place_order.button.alt{width:100%;min-height:48px;height:auto;border-radius:var(--vb-radius-sm);font-size:16px;font-weight:600;}

/* Småfixar för layout på mobil */
.col2-set #customer_details .col-1,.col2-set #customer_details .col-2{box-sizing:border-box;}
@media (max-width:768px){.col2-set .col-1,.col2-set .col-2{width:100%;float:none;}#order_review{padding:12px;}}

/* 1) Återställ Woo-placera-order-knappen (du råkade dölja den tidigare) */
.vb-checkout-container button[name="woocommerce_checkout_place_order"],
#place_order {
  display: inline-block !important;
  width: 100%;
  min-height: 48px;
  height: auto;
  border-radius: var(--vb-radius-sm);
  font-size: 16px;
  font-weight: 600;
}

/* 2) Visa dina egna “Nästa/Gå vidare”-knappar som standard */
.vb-modal-actions .vb-btn {
  display: inline-flex !important;
}

/* 3) Men: om checkouten är inladdad i modalen → dölj den externa primärknappen
      (annars får vi två: din + Woo’s “Lägg beställning”) */
.vb-modal:has(.viking-inline-checkout) .vb-modal-actions .vb-btn {
  display: none !important;
}

/* Behåll sekundärknappen (t.ex. “Ändra tid”) även på checkout-steget */
.vb-modal-actions .vb-btn-secondary {
  display: inline-flex !important;
}

/* —— Knapp: korrekt blå färg (inte lila) —— */
#place_order.button.alt,
.woocommerce #payment #place_order,
.vb-checkout-container #place_order {
  background: linear-gradient(180deg,#2a7fc4 0%,#2271b1 100%) !important;
  border-color: #1b5a8d !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(34,113,177,.28) !important;
}
#place_order:hover,
#place_order:focus {
  background: #1b5a8d !important;
  box-shadow: 0 4px 16px rgba(34,113,177,.32) !important;
}

/* —— Orderrad “Produkt”: ta bort rundade hörn —— */
#order_review .shop_table tr.cart_item td,
#order_review .shop_table tr.cart_item th {
  border-radius: 0 !important;       /* inga rundningar */
}

.woocommerce-form-coupon-toggle {
    display: none !important;
}
.vb-time-chip {
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  padding: 10px 14px;
  background: linear-gradient(180deg,#f0fdf4 0%,#ecfdf5 100%);
  cursor: pointer;
  transition: transform .18s var(--vb-ease), box-shadow .18s var(--vb-ease);
  box-shadow: var(--vb-shadow-sm);
  font-weight: 500;
}
.vb-time-chip:hover { background: linear-gradient(180deg,#ecfdf5 0%,#d1fae5 100%); transform: translateY(-2px); box-shadow: var(--vb-shadow-md); }
.vb-subtitle { color: var(--vb-text-muted); margin: 6px 0 12px; font-size: 15px; line-height: 1.45; }


/* Paket-grid */
#viking-party-root .vb-packages-grid{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap:12px;
  overflow-x:auto;          /* blir horisontell scroll om de inte får plats */
  padding-bottom:6px;       /* liten luft för scrollbar */
  scroll-snap-type: x mandatory;
}
#viking-party-root .vb-packages-grid::-webkit-scrollbar{ height:8px }

#viking-party-root .vb-package{
  scroll-snap-align: start;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  border:1px solid var(--vb-border); background:linear-gradient(180deg,var(--vb-surface) 0%,var(--vb-surface-muted) 100%); color:var(--vb-text);
  padding:14px 16px; border-radius:var(--vb-radius-md); cursor:pointer;
  min-height:86px;
  box-shadow:var(--vb-shadow-sm);
  transition:transform .18s var(--vb-ease), background .18s var(--vb-ease), border-color .18s var(--vb-ease), box-shadow .18s var(--vb-ease);
}
#viking-party-root .vb-package:hover{ transform:translateY(-2px); box-shadow:var(--vb-shadow-md); }
#viking-party-root .vb-package.active{
  background:linear-gradient(165deg,#2a7fc4 0%,var(--vb-blue) 100%); color:#fff; border-color:var(--vb-blue-dark); box-shadow:0 6px 20px rgba(34,113,177,.3);
}

#viking-party-root .vb-package-title{ font-weight:700; margin-bottom:4px }
#viking-party-root .vb-package-desc{ font-size:12px; opacity:.9; margin-bottom:6px }
#viking-party-root .vb-package-price{ font-weight:700 }


/* Paket-korten: tillåt radbrytning */
#viking-party-root .vb-package,
#viking-party-root .vb-package *{
  white-space: normal !important;       /* får radbrytas */
  overflow-wrap: anywhere;              /* bryt långa ord om det behövs */
  word-break: break-word;
}


/* — tid-kort: bryt aldrig mellan tidspannet — */
.vb-time-slot { white-space: nowrap; }

/* — horisontell scroll när ytan är liten (party/booking, ej wizard-scroll) — */
@media (max-width: 1024px){
  .vb-time-grid:not(.vb-time-grid--strip){
    grid-auto-flow: column;
    grid-auto-columns: 130px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vb-text-muted) 42%, transparent) transparent;
  }
  .vb-time-grid:not(.vb-time-grid--strip)::-webkit-scrollbar{height:4px;}
  .vb-time-grid:not(.vb-time-grid--strip)::-webkit-scrollbar-track{background:transparent;}
  .vb-time-grid:not(.vb-time-grid--strip)::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--vb-text-muted) 38%, transparent);
    border-radius:999px;
  }
  .vb-time-card{ scroll-snap-align: start; }
}

/* ---------- Wizard (kombinerad bokning) ---------- */
:is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card,
:is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-upsell-item,
:is(#viking-wizard-root,#viking-group-booking-root) .vb-btn-option,
:is(#viking-wizard-root,#viking-group-booking-root) .vb-time-card{
  /* WordPress/Woo temat färgar button:active i accent (ofta rosa) – nollställ */
  --wp--preset--color--primary:var(--vb-blue);
  --wp--preset--color--contrast:var(--vb-text);
}
.vb-wizard{ position:relative; }
.vb-wizard-kicker{
  font-size:var(--vb-wizard-kicker-size,12px);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--vb-kicker);
  margin:0 0 6px;
}
.vb-wizard-progress{
  display:flex;
  gap:6px;
  margin:0 0 24px;
  padding-bottom:4px;
}
.vb-wizard-progress-seg{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  opacity:.45;
}
.vb-wizard-progress-seg.active{ opacity:1; }
.vb-wizard-progress-dot{
  display:block;
  width:100%;
  height:4px;
  border-radius:999px;
  background:var(--vb-progress-inactive);
}
.vb-wizard-progress-seg.active .vb-wizard-progress-dot{ background:var(--vb-progress-active); }
.vb-wizard-progress-seg.current .vb-wizard-progress-dot{ box-shadow:0 0 0 2px var(--vb-blue-soft); }
.vb-wizard-progress-label{
  font-size:10px;
  font-weight:600;
  color:var(--vb-text-muted);
  text-align:center;
  line-height:1.2;
}
@media (max-width:560px){
  .vb-wizard-progress-label{ display:none; }
}
.vb-wizard-cards{
  display:grid;
  grid-template-columns:repeat(var(--vb-cards-per-row,3),minmax(0,1fr));
  gap:12px;
}
.vb-wizard-cards-4{ grid-template-columns:repeat(var(--vb-cards-per-row,2),minmax(0,1fr)); }
/* "Auto"-läget i appearance-editorn (när --vb-cards-per-row INTE är satt på
   root): låt grid:et själv bestämma hur många kort som ryms per rad via
   auto-fit. På 700px wizard = 3 i rad, på 480px = 2-3 beroende på minmax,
   på 320px = 1. Förhindrar att 3 experience-kort blir 2+1-layout i smala
   widgets bara för att default råkade vara 2 kolumner. JS sätter inte propen
   när användaren valt "Auto" i editorn, så :not([style*=...]) träffar då. */
:is(#viking-wizard-root,#viking-group-booking-root):not([style*="--vb-cards-per-row"]) .vb-wizard-cards-4{
  grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
:is(#viking-wizard-root,#viking-group-booking-root):not([style*="--vb-cards-per-row"]) .vb-wizard-cards{
  grid-template-columns:repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}
.vb-wizard-cards-sm{
  grid-template-columns:repeat(auto-fill,minmax(170px,220px));
  justify-content:start;
  gap:14px;
}
.vb-wizard-cards-sm .vb-wizard-card--media{
  aspect-ratio:16/10;
  min-height:130px;
}
/* Container-query-baserad stack-fallback: triggar när WIZARDEN är smal,
   oavsett om det är en mobil-viewport eller en narrow embed-iframe på desktop.
   Mobiler får 1 kolumn precis som tidigare (deras viewport = smal wizard).
   Embed-widgets på desktop med 350px iframe får också 1 kolumn — utan att vi
   behöver röra viewport-media-queries. På breda wizardar respekteras
   användarens "N kort per rad"-inställning fullt ut. */
.vb-card.vb-wizard{
  container-type:inline-size;
  container-name:vb-wizard;
}
@container vb-wizard (max-width: 640px){
  .vb-wizard-cards-sm{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
}
@container vb-wizard (max-width: 460px){
  .vb-wizard-cards,
  .vb-wizard-cards-4{
    /* Tvingar 1 kolumn när wizardens egen bredd är < 460px. minmax(0,1fr)
       behövs inte här — 1fr räcker eftersom det bara är en track. */
    grid-template-columns:1fr;
    gap:14px;
  }
  .vb-wizard-cards-sm{
    grid-template-columns:1fr;
    gap:14px;
  }
  .vb-wizard-cards-sm .vb-wizard-card--media{ min-height:150px; }
}
.vb-wizard-subcards{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.vb-lanes-picker{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
  padding:12px 14px;
  background:var(--vb-blue-soft, rgba(34,113,177,.08));
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-sm,12px);
}
.vb-lanes-picker-label{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--vb-text-muted);
}
.vb-lanes-picker-stepper{
  display:inline-flex;
  align-items:center;
  background:var(--vb-surface,#fff);
  border:1px solid var(--vb-border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.vb-lanes-picker-btn{
  appearance:none;
  border:0;
  background:transparent;
  width:38px;
  height:38px;
  font-size:20px;
  font-weight:700;
  color:var(--vb-text);
  cursor:pointer;
  transition:background .15s ease;
}
.vb-lanes-picker-btn:hover:not(:disabled){ background:var(--vb-surface-muted,#f1f5f9); }
.vb-lanes-picker-btn:disabled{ opacity:.35; cursor:not-allowed; }
.vb-lanes-picker-value{
  min-width:48px;
  text-align:center;
  padding:0 4px;
  font-size:18px;
  font-weight:700;
  color:var(--vb-text);
}
.vb-lanes-picker-reset{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--vb-blue,#2271b1);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  text-decoration:underline;
  padding:4px 0;
}
.vb-lanes-picker-reset:hover{ color:var(--vb-blue-dark,#1b5a8d); }
:is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card.is-hidden,
:is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card[hidden],
:is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card--media.is-hidden,
:is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card--media[hidden]{ display:none !important; }
.vb-wizard-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:18px 16px;
  border:2px solid var(--vb-border);
  border-radius:var(--vb-radius-md);
  background:var(--vb-surface)!important;
  color:var(--vb-text)!important;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:var(--vb-shadow-sm);
  transition:border-color .15s var(--vb-ease),box-shadow .15s var(--vb-ease),background .15s var(--vb-ease);
}
.vb-wizard-card:hover,
.vb-wizard-card:active{
  background:var(--vb-surface)!important;
  color:var(--vb-text)!important;
  border-color:#94a3b8;
}
.vb-wizard-card:focus,
.vb-wizard-card:focus-visible{
  outline:none!important;
  background:var(--vb-surface)!important;
  color:var(--vb-text)!important;
  border-color:var(--vb-blue)!important;
  box-shadow:0 0 0 3px var(--vb-blue-soft)!important;
}
.vb-wizard-card i{
  font-size:22px;
  color:var(--vb-kicker)!important;
}
.vb-wizard-card-img{
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:10px;
  flex-shrink:0;
}

/* ---------- Hero-läge: bilden fyller hela kortet ---------- */
.vb-wizard-card--media{
  position:relative;
  padding:0;
  overflow:hidden;
  aspect-ratio:4/3;
  /* OBS: INGEN `min-height` här. `aspect-ratio` + `min-height` skapar
     automatiskt en effektiv `min-width` (170 × 4/3 ≈ 227px) som gör att
     kortet INTE krymper under 227px — i 2-kolumns-grid på smala widgets
     överflödar kortet och trycker ut höger sida. Vi vill att aspect-ratio
     ensam styr höjden så kortet alltid blir exakt 1fr brett (= 50% / 33,3%
     etc. av wizard-bredden minus gap). */
  border:2px solid var(--vb-border);
  background:var(--vb-surface)!important;
  display:block;
  isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 -1px 0 rgba(0,0,0,.18) inset,var(--vb-shadow-sm);
  /* Containment-context för fluid typografi: typsnitt och padding på rubrik/pris
     skalar mot kortets EGEN bredd (cqi = container query inline size), inte mot
     viewporten. */
  container-type:inline-size;
  container-name:vb-card;
}
.vb-wizard-card__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  display:block;
  transition:transform .35s var(--vb-ease);
}
.vb-wizard-card--media:hover .vb-wizard-card__bg{
  transform:scale(1.04);
}
.vb-wizard-card__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    var(--vb-hero-overlay-angle,180deg),
    var(--vb-hero-overlay-top,rgba(15,23,42,0)) 0%,
    var(--vb-hero-overlay-bottom,rgba(15,23,42,.82)) 100%
  );
  transition:background .2s var(--vb-ease),opacity .2s var(--vb-ease);
  pointer-events:none;
}
.vb-wizard-card__content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:4px;
  /* Fluid padding: 14/16px på normalstora kort, krymper mot 8/10px på smala. */
  padding:clamp(8px, 3.5cqi, 14px) clamp(10px, 4cqi, 16px);
  margin-top:auto;
  height:100%;
  justify-content:flex-end;
  width:100%;
  box-sizing:border-box;
  /* Säkrar att långa rubriker bryter snyggt även utan mellanslag (t.ex. URL). */
  overflow-wrap:anywhere;
}
.vb-wizard-card--media strong,
.vb-wizard-card--media:hover strong,
.vb-wizard-card--media.selected strong{
  color:var(--vb-card-text,#ffffff) !important;
  /* Fluid font: skalar med kortets bredd (8.5cqi = 8.5% av kortbredd), capped
     uppåt av användarens appearance-inställning (--vb-card-title-size) och
     nedåt på 13px för läsbarhet. På 200px-kort ger 8.5cqi ~17px, på 350px ger
     30px (men cappas av användarsetting eller fallback 17px). */
  font-size:clamp(13px, 8.5cqi, var(--vb-card-title-size, 17px));
  font-weight:700;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
  letter-spacing:-.01em;
  line-height:1.2;
  text-wrap:balance;
}
.vb-wizard-card--media .vb-wizard-card-price,
.vb-wizard-card--media:hover .vb-wizard-card-price,
.vb-wizard-card--media.selected .vb-wizard-card-price{
  color:var(--vb-card-text,#ffffff) !important;
  font-size:clamp(11px, 5.5cqi, var(--vb-card-price-size, 13px));
  font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  opacity:.92;
}
.vb-wizard-card--media:hover,
.vb-wizard-card--media:focus,
.vb-wizard-card--media:focus-visible{
  border-color:var(--vb-blue) !important;
  background:var(--vb-surface) !important;
}
.vb-wizard-card--media.selected,
.vb-wizard-card--media.selected:hover,
.vb-wizard-card--media.selected:focus,
.vb-wizard-card--media.selected:focus-visible{
  background:var(--vb-surface) !important;
  border-color:var(--vb-selected-tint) !important;
  box-shadow:0 0 0 3px var(--vb-selected-tint-soft) !important;
}
.vb-wizard-card--media.selected .vb-wizard-card__overlay{
  background:linear-gradient(
    var(--vb-selected-overlay-angle,180deg),
    var(--vb-selected-overlay-top,rgba(34,113,177,.15)) 0%,
    var(--vb-selected-overlay-bottom,rgba(34,113,177,.85)) 100%
  );
}
/* Liten "vald"-badge i översta hörnet */
.vb-wizard-card--media.selected::before{
  content:"✓";
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--vb-surface);
  color:var(--vb-selected-tint);
  font-weight:800;
  font-size:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.vb-wizard-card:not(.vb-wizard-card--media) strong{
  font-size:16px;
  color:var(--vb-text)!important;
}
.vb-wizard-card.selected,
.vb-wizard-card.selected:hover,
.vb-wizard-card.selected:active,
.vb-wizard-card.selected:focus,
.vb-wizard-card.selected:focus-visible{
  background:var(--vb-card-selected-bg)!important;
  color:var(--vb-text)!important;
  border-color:var(--vb-selected-tint)!important;
  box-shadow:0 0 0 3px var(--vb-selected-tint-soft)!important;
}
.vb-wizard-card.selected:not(.vb-wizard-card--media) strong{
  color:var(--vb-blue-dark)!important;
}
.vb-wizard-card:not(.vb-wizard-card--media) .vb-wizard-card-price{
  font-size:13px;
  color:var(--vb-text-muted)!important;
}
.vb-wizard-card.selected:not(.vb-wizard-card--media) .vb-wizard-card-price{
  color:var(--vb-blue-dark)!important;
  opacity:.85;
}
.vb-wizard-actions{
  display:flex;
  gap:10px;
  margin-top:24px;
  flex-wrap:wrap;
}
.vb-wizard-actions .vb-btn,
.vb-wizard-actions .vb-btn-secondary{ flex:1 1 auto; min-width:140px; }
:is(
  #viking-wizard-root,
  #viking-group-booking-root,
  #viking-booking-root,
  #viking-party-root,
  #viking-extras-root
) .vb-wizard-actions .vb-btn-secondary{
  background:var(--vb-secondary-bg)!important;
  color:var(--vb-text)!important;
  border:1px solid var(--vb-secondary-border,var(--vb-border))!important;
}
:is(
  #viking-wizard-root,
  #viking-group-booking-root,
  #viking-booking-root,
  #viking-party-root,
  #viking-extras-root
) .vb-wizard-actions .vb-btn-secondary:hover{
  background:var(--vb-secondary-hover)!important;
  border-color:var(--vb-secondary-border-hover)!important;
  color:var(--vb-text)!important;
}
:is(
  #viking-wizard-root,
  #viking-group-booking-root,
  #viking-booking-root,
  #viking-party-root,
  #viking-extras-root
) .vb-wizard-actions .vb-btn-secondary:active{
  background:var(--vb-secondary-active)!important;
  border-color:var(--vb-secondary-border-hover)!important;
  color:var(--vb-text)!important;
}
:is(
  #viking-wizard-root,
  #viking-group-booking-root,
  #viking-booking-root,
  #viking-party-root,
  #viking-extras-root
) .vb-wizard-actions .vb-btn-secondary:focus,
:is(
  #viking-wizard-root,
  #viking-group-booking-root,
  #viking-booking-root,
  #viking-party-root,
  #viking-extras-root
) .vb-wizard-actions .vb-btn-secondary:focus-visible{
  background:var(--vb-secondary-bg)!important;
  color:var(--vb-text)!important;
  border-color:var(--vb-blue)!important;
  box-shadow:0 0 0 3px var(--vb-blue-soft)!important;
}
.vb-wizard-summary{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-md);
  overflow:hidden;
}
/* 3-kolumns grid (kollapsar till 2 om ingen thumb):
   [thumb (om has-thumb)] | [namn / meta] | [pris]
   Tids-raden / meta-raden hoppas över automatiskt om tom. */
.vb-wizard-summary li{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  column-gap:14px;
  row-gap:2px;
  padding:12px 14px;
  border-bottom:1px solid var(--vb-border);
  align-items:center;
}
.vb-wizard-summary li.has-thumb{
  grid-template-columns:48px 1fr auto;
}
.vb-wizard-summary li:last-child{ border-bottom:none; }
.vb-wizard-summary .vb-summary-thumb{
  grid-column:1;
  grid-row:1 / span 2;
  width:48px; height:48px;
  border-radius:8px;
  overflow:hidden;
  background:var(--vb-bg);
  border:1px solid var(--vb-border);
}
.vb-wizard-summary .vb-summary-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.vb-wizard-summary .vb-summary-name{
  grid-column:auto; grid-row:1;
  font-weight:700;
}
.vb-wizard-summary li.has-thumb .vb-summary-name{ grid-column:2; }
.vb-wizard-summary .vb-summary-time{
  grid-column:auto; grid-row:2;
  color:var(--vb-text-muted);
  font-size:13px;
}
.vb-wizard-summary li.has-thumb .vb-summary-time{ grid-column:2; }
.vb-wizard-summary .vb-summary-price{
  grid-column:-1;
  grid-row:1 / span 2;
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  font-weight:700;
  color:var(--vb-blue);
  white-space:nowrap;
}
/* Moms-spec under priset på samma rad — muted text, mindre vikt,
   väldigt subtilt, så att brutto-priset står ut tydligt. */
.vb-wizard-summary .vb-summary-price__gross{ display:block; }
.vb-wizard-summary .vb-summary-price__vat{
  display:block;
  font-size:11px;
  font-weight:500;
  color:var(--vb-text-muted);
  margin-top:2px;
  letter-spacing:0.01em;
}
/* Subtle visual marker att raden är ett tillägg (inte en bokning) */
.vb-wizard-summary li.vb-summary-row--addon{
  background:color-mix(in srgb, var(--vb-bg) 60%, transparent);
}
.vb-wizard-total{
  font-size:18px;
  font-weight:700;
  margin:0 0 16px;
}
.vb-wizard-upsell-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}
.vb-wizard-upsell-group:last-child .vb-wizard-upsell-list{ margin-bottom:0; }
.vb-wizard-upsell-heading{
  margin:0 0 8px;
  font-size:15px;
  font-weight:700;
  color:var(--vb-text);
}
.vb-wizard-upsell-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:4px 16px;
  align-items:center;
  padding:12px 14px;
  border:2px solid var(--vb-border);
  border-radius:var(--vb-radius-sm);
  background:var(--vb-surface)!important;
  color:var(--vb-text)!important;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:var(--vb-shadow-sm);
  transition:border-color .15s var(--vb-ease),box-shadow .15s var(--vb-ease),background .15s var(--vb-ease),transform .15s var(--vb-ease);
}
.vb-wizard-upsell-when{
  font-size:14px;
  font-weight:600;
  color:var(--vb-text-muted)!important;
}
.vb-wizard-upsell-time{
  font-size:14px;
  font-weight:600;
  color:var(--vb-text)!important;
  white-space:nowrap;
}
.vb-wizard-upsell-price{
  font-size:13px;
  font-weight:600;
  color:var(--vb-blue-dark)!important;
  white-space:nowrap;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  /* Tabular siffror ger jämn breddning så 180/100/120 inte glider ihop visuellt. */
  font-variant-numeric:tabular-nums;
}
/* Ord-pris (genomstruket) — mörk grå ton + TUNN line-through så
   siffrorna är fullt läsbara. Tidigare användes opacity:0.6 vilket fick
   8:an i "180" att smälta ihop med strykningen och se ut som "100". */
.vb-wizard-upsell-price-strike{
  color:#64748b!important;
  font-weight:500;
  font-size:12px;
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:#94a3b8;
  text-underline-offset:1px;
}
.vb-wizard-upsell-price-now{
  color:#16a34a!important;
  font-weight:700;
}
.vb-wizard-upsell-item:hover,
.vb-wizard-upsell-item:active{
  background:var(--vb-surface)!important;
  border-color:#94a3b8;
}
.vb-wizard-upsell-item:focus,
.vb-wizard-upsell-item:focus-visible{
  outline:none!important;
  background:var(--vb-surface)!important;
  border-color:var(--vb-blue)!important;
  box-shadow:0 0 0 3px var(--vb-blue-soft)!important;
}
.vb-wizard-upsell-item.selected,
.vb-wizard-upsell-item.selected:hover,
.vb-wizard-upsell-item.selected:active,
.vb-wizard-upsell-item.selected:focus,
.vb-wizard-upsell-item.selected:focus-visible{
  background:var(--vb-selected-tint)!important;
  background-image:linear-gradient(165deg,color-mix(in srgb,var(--vb-selected-tint) 85%,white) 0%,var(--vb-selected-tint) 100%)!important;
  border-color:var(--vb-selected-tint)!important;
  color:var(--vb-button-text)!important;
  box-shadow:0 4px 14px var(--vb-selected-tint-soft)!important;
  transform:scale(1.01);
}
.vb-wizard-upsell-item.selected .vb-wizard-upsell-when,
.vb-wizard-upsell-item.selected .vb-wizard-upsell-time,
.vb-wizard-upsell-item.selected .vb-wizard-upsell-price{
  color:var(--vb-button-text)!important;
  opacity:1;
}
/* På vald rad (färgad bakgrund) — håll ord-priset läsbart men dämpat
   med justerad färg + alpha, och låt kampanjpriset ärva button-text. */
.vb-wizard-upsell-item.selected .vb-wizard-upsell-price-strike{
  color:color-mix(in srgb, var(--vb-button-text) 75%, transparent)!important;
  text-decoration-color:color-mix(in srgb, var(--vb-button-text) 60%, transparent);
}
.vb-wizard-upsell-item.selected .vb-wizard-upsell-price-now{
  color:var(--vb-button-text)!important;
}
.vb-wizard-upsell-item.selected .vb-wizard-upsell-when{
  opacity:.92;
}
.vb-muted{ color:var(--vb-text-muted); font-size:14px; margin:0; }
.vb-btn-group + .vb-muted,
.vb-input + .vb-muted,
.vb-time-grid + .vb-muted,
.vb-date-strip + .vb-muted,
.vb-wizard-cards + .vb-muted{ margin-top:10px; }
.vb-wizard-kicker + .vb-title{ margin-top:2px; }
.vb-title + .vb-btn-group,
.vb-title + .vb-input,
.vb-title + .vb-wizard-cards,
.vb-title + .vb-time-grid,
.vb-title + .vb-date-strip,
.vb-title + .vb-wizard-upsell-list,
.vb-title + .vb-wizard-summary{ margin-top:14px; }
.vb-btn-group-vertical{ flex-direction:column; align-items:stretch; }
.vb-btn-group-vertical .vb-btn-option{ width:100%; text-align:left; }

/* — Wizard: datumkort (steg 3) — */
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(72px,1fr);
  gap:10px;
  overflow-x:auto;
  padding:4px 2px 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:92px;
  padding:12px 8px 16px;
  border:2px solid var(--vb-border);
  border-radius:var(--vb-radius-md);
  background:var(--vb-surface)!important;
  color:var(--vb-text)!important;
  cursor:pointer;
  scroll-snap-align:start;
  font-family:inherit;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .15s var(--vb-ease),box-shadow .15s var(--vb-ease),background .15s var(--vb-ease);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card:hover:not(:disabled){
  border-color:#94a3b8;
  box-shadow:var(--vb-shadow-sm);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card.selected{
  border-color:var(--vb-selected-tint)!important;
  background:var(--vb-selected-tint-soft)!important;
  box-shadow:0 0 0 3px var(--vb-selected-tint-soft)!important;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card.disabled{
  opacity:.55;
  cursor:not-allowed;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card__wd{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--vb-text-muted);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card.selected .vb-date-card__wd{ color:var(--vb-blue-dark); }
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card__day{
  font-size:28px;
  font-weight:800;
  line-height:1;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card__mo{
  font-size:12px;
  color:var(--vb-text-muted);
  text-transform:lowercase;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card__dot{
  position:absolute;
  bottom:8px;
  width:8px;
  height:8px;
  border-radius:50%;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card__dot--open{ background:#22c55e; }
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card__dot--busy{ background:#f59e0b; }
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card__dot--full,
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card__dot--closed{ background:#cbd5e1; }
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-pick-other-wrap{
  display:flex;
  justify-content:center;
  margin:14px 0 10px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-pick-other{
  appearance:none;
  border:1px solid var(--vb-border,#e2e8f0);
  border-radius:999px;
  background:var(--vb-surface,#fff);
  color:var(--vb-text);
  font-size:14px;
  font-weight:600;
  padding:10px 18px;
  cursor:pointer;
  transition:border-color .15s var(--vb-ease),box-shadow .15s var(--vb-ease),background .15s var(--vb-ease);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-pick-other:hover{
  border-color:#94a3b8;
  box-shadow:var(--vb-shadow-sm);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-pick-other--active{
  border-color:var(--vb-blue)!important;
  background:var(--vb-blue-soft)!important;
  color:var(--vb-blue-dark);
  box-shadow:0 0 0 3px var(--vb-blue-soft)!important;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal{ max-width:420px; }
/* På mobil (där .vb-modal-content blir 100vh) måste vi tvinga kalendern
   att respektera viewport-bredden — annars läcker 420px-max-width:en
   in på sub-420px-skärmar och knapparna hamnar utanför skärmen. */
@media (max-width: 480px){
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal{
    max-width:100%;
    width:100%;
    overflow-x:hidden;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__weekdays,
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__week{
    gap:4px;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__week button{
    padding:6px 0;
    font-size:13px;
    min-width:0;          /* tillåt att 7 lika kolumner krymper under default-min-content */
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__head{
    gap:8px;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__title{
    font-size:14px;
    text-align:center;
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__head .vb-btn-secondary{
    padding:6px 10px;
    flex:0 0 auto;
  }
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__title{
  font-weight:700;
  text-transform:capitalize;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__weekdays,
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__week{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__weekdays{
  margin-bottom:6px;
  font-weight:600;
  font-size:12px;
  opacity:.8;
  text-align:center;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__week button{
  padding:8px 0;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__week button:disabled{
  opacity:.4;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-calendar-modal__hint{
  margin:10px 0 0;
  font-size:12px;
  opacity:.75;
  line-height:1.45;
  color:var(--vb-text-muted);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:4px;
  font-size:13px;
  color:var(--vb-text-muted);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-legend__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-legend__dot{
  width:8px;
  height:8px;
  border-radius:50%;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-legend__dot--open{ background:#22c55e; }
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-legend__dot--busy{ background:#f59e0b; }
:is(#viking-wizard-root,#viking-group-booking-root) .vb-date-legend__dot--full{ background:#cbd5e1; }

/* — Wizard: tillägg (steg 4) — */
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-group{ margin-top:18px; }
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-group__title{
  margin:0 0 10px;
  font-size:15px;
  font-weight:700;
  color:var(--vb-text);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-md);
  background:linear-gradient(180deg,var(--vb-surface) 0%,var(--vb-surface-muted) 100%);
  box-shadow:var(--vb-shadow-sm);
  color:var(--vb-text);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-row__thumb{
  flex-shrink:0;
  width:64px;
  height:64px;
  border-radius:10px;
  overflow:hidden;
  background:var(--vb-surface-muted);
  border:1px solid var(--vb-border);
  display:grid;
  place-items:center;
  padding:2px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-row__thumb img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-row__info{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-row__info strong{ font-size:15px; }
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-row__info .vb-muted{ font-size:13px; }
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-row__price{
  font-size:13px;
  font-weight:600;
  color:var(--vb-kicker);
}

/* — Wizard: paket-väljare (party, steg 2) — */
:is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  margin:0;
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-md);
  background:linear-gradient(180deg,var(--vb-surface) 0%,var(--vb-surface-muted) 100%);
  color:var(--vb-text);
  cursor:pointer;
  text-align:left;
  font:inherit;
  line-height:1.35;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .18s var(--vb-ease), box-shadow .18s var(--vb-ease), transform .18s var(--vb-ease), background .18s var(--vb-ease);
  width:100%;
  box-shadow:var(--vb-shadow-sm);
  box-sizing:border-box;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-card:hover{
  border-color:color-mix(in srgb, var(--vb-selected-tint) 45%, var(--vb-border));
  box-shadow:var(--vb-shadow-md);
  transform:translateY(-1px);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-card.selected{
  border-color:color-mix(in srgb, var(--vb-selected-tint) 62%, var(--vb-border));
  background:linear-gradient(
    145deg,
    color-mix(in srgb, var(--vb-surface) 78%, var(--vb-selected-tint)) 0%,
    color-mix(in srgb, var(--vb-surface-muted) 82%, var(--vb-selected-tint)) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--vb-selected-tint) 24%, transparent),
    0 4px 16px var(--vb-selected-tint-soft);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-card__thumb{
  flex-shrink:0;
  width:72px;
  height:72px;
  border-radius:10px;
  overflow:hidden;
  background:var(--vb-surface-muted);
  border:1px solid var(--vb-border);
  display:grid;
  place-items:center;
  padding:2px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-card__thumb img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-card__body{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  flex:1 1 auto;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-card__name{
  font-size:15px;
  font-weight:700;
  letter-spacing:-0.01em;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-card__price{
  font-size:13px;
  font-weight:600;
  color:var(--vb-kicker);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-card.selected .vb-pkg-card__price{
  color:var(--vb-selected-tint);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-card__includes{
  font-size:12px;
  color:var(--vb-text-muted);
  margin-top:2px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-qty{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-qty__btn{
  width:36px;
  height:36px;
  border:1px solid var(--vb-border);
  border-radius:10px;
  background:var(--vb-surface)!important;
  color:var(--vb-text)!important;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-qty__btn:hover{
  border-color:var(--vb-blue);
  color:var(--vb-blue)!important;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-qty__val{
  min-width:24px;
  text-align:center;
  font-weight:700;
  font-size:16px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-summary{
  margin-top:20px;
  padding:14px 16px;
  border-radius:var(--vb-radius-md);
  background:var(--vb-blue-soft);
  border:1px solid rgba(34,113,177,.15);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-summary__list{
  margin:8px 0 0;
  padding-left:18px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-summary__total{
  margin:10px 0 0;
  font-weight:700;
  color:var(--vb-kicker);
}
@media (max-width:560px){
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-row{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-row__thumb{
    width:56px;
    height:56px;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-addon-qty{
    justify-content:flex-end;
    margin-left:auto;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-pkg-card__thumb{ width:60px; height:60px; }
}

/* ============================================================
   Mobiloptimering – konsekvent rytm utan att element klistrar
   ihop på smala skärmar.
   ============================================================ */
@media (max-width:640px){
  .vb-card.vb-wizard{
    padding:22px 18px;
    margin:14px auto;
    min-height:440px;
  }
  .vb-wizard-progress{ margin-bottom:24px; gap:5px; }
  .vb-wizard-kicker{ margin:0 0 4px; }
  .vb-title{
    margin:0 0 16px;
    font-size:1.3rem;
    line-height:1.25;
  }
  .vb-wizard-cards,
  .vb-wizard-cards-4{ gap:16px; }
  .vb-wizard-card:not(.vb-wizard-card--media){
    padding:16px 14px;
    gap:6px;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card--media{
    padding:0 !important;
    /* INGEN min-height här — den + aspect-ratio:16/10 skulle ge en
       effektiv min-width på 320px och göra att 2 kort INTE ryms i en
       smal mobil/embed-widget. Aspect-ratio ensam styr höjden. */
    aspect-ratio:16/10;
    border-radius:var(--vb-radius-md);
    display:block !important;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card--media .vb-wizard-card__content{
    padding:16px 18px 22px !important;
    gap:6px !important;
    height:100% !important;
    justify-content:flex-end !important;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card--media strong,
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card--media:hover strong,
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card--media.selected strong{
    /* Behåller fluid clamp i mobil-fönstret. `!important` försvarar mot WP-tema
       men värdet är fortfarande container-baserat så ett 2-kolumns 280px-kort
       får mindre text än ett 1-kolumns 500px-kort. */
    font-size:clamp(13px, 8.5cqi, var(--vb-card-title-size, 19px)) !important;
    line-height:1.2 !important;
    margin:0 !important;
    color:var(--vb-card-text,#ffffff) !important;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card--media .vb-wizard-card-price,
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card--media:hover .vb-wizard-card-price,
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-card--media.selected .vb-wizard-card-price{
    font-size:clamp(11px, 5.5cqi, var(--vb-card-price-size, 14px)) !important;
    line-height:1.3 !important;
    color:var(--vb-card-text,#ffffff) !important;
    padding-bottom:2px !important;
  }
  .vb-btn-group{ gap:10px; }
  .vb-btn-option{
    padding:10px 16px;
    min-height:44px;
    min-width:44px;
    font-size:15px;
  }
  .vb-wizard-summary{ margin:0 0 14px; }
  .vb-wizard-summary li{ padding:11px 12px; font-size:14px; }
  .vb-wizard-total{ font-size:17px; margin:0 0 14px; }
  .vb-wizard-upsell-list{ gap:8px; }
  .vb-wizard-upsell-item{ padding:11px 12px; gap:4px 12px; }
  .vb-fieldset{ padding:18px 14px; margin-top:16px; }
  .vb-fieldset legend{ font-size:14px; padding:0 8px; }
}

@media (max-width:560px){
  .vb-wizard-actions{
    flex-direction:column-reverse;
    gap:10px;
    margin-top:22px;
  }
  .vb-wizard-actions .vb-btn,
  .vb-wizard-actions .vb-btn-secondary{
    width:100%;
    min-width:0;
    min-height:48px;
  }
  /* WP-shortcode (ej embed-iframe): håll köp/tillbaka synliga vid scroll på mobil. */
  html:not(.vb-embed-shell) :is(#viking-wizard-root,#viking-group-booking-root) .vb-wizard-actions{
    position:sticky;
    bottom:0;
    z-index:30;
    margin-top:20px;
    padding-top:14px;
    padding-bottom:max(14px, env(safe-area-inset-bottom, 0px));
    background:linear-gradient(
      180deg,
      color-mix(in srgb, var(--vb-surface, #fff) 0%, transparent) 0%,
      var(--vb-surface, #fff) 28%
    );
    box-shadow:0 -10px 28px color-mix(in srgb, var(--vb-bg, #0f172a) 10%, transparent);
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-date-strip{
    grid-auto-columns:minmax(82px,1fr);
    gap:8px;
    padding:4px 2px 12px;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card{
    min-height:96px;
    padding:12px 6px 18px;
  }
  :is(#viking-wizard-root,#viking-group-booking-root) .vb-date-card__day{ font-size:24px; }
}

/* === Köpvillkor i checkouten ============================================== */
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-box{
  margin-top:16px;padding:14px 16px;
  background:var(--vb-surface,#fff);
  border:1px solid var(--vb-border,#e2e8f0);
  border-radius:var(--vb-radius-sm,10px);
  transition:border-color .2s ease, background-color .2s ease;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-box.is-accepted{
  border-color:#86efac;background:rgba(34,197,94,.06);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-row{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  margin:0;font-size:14px;line-height:1.5;
  color:var(--vb-text,#0f172a);
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-check{
  margin:2px 0 0;width:18px;height:18px;flex:0 0 auto;
  accent-color:var(--vb-blue,#2271b1);cursor:pointer;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-label{display:inline}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-link{
  color:var(--vb-blue,#2271b1);text-decoration:underline;font-weight:600;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-link:hover{color:var(--vb-blue-dark,#1b5a8d)}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-hint{
  margin:8px 0 0 30px;font-size:12px;color:var(--vb-text-muted,#64748b);
}

/* Modal för köpvillkors-text */
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-modal{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.55);padding:16px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-modal-dialog{
  width:100%;max-width:640px;max-height:88vh;
  display:flex;flex-direction:column;
  background:#fff;border-radius:14px;
  box-shadow:0 24px 60px rgba(15,23,42,.32);
  overflow:hidden;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid #e2e8f0;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-modal-head h3{
  margin:0;font:700 17px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#0f172a;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-modal-close{
  appearance:none;border:0;background:transparent;
  font-size:28px;line-height:1;color:#94a3b8;cursor:pointer;
  padding:4px 10px;border-radius:8px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-modal-close:hover{background:#f1f5f9;color:#0f172a}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-modal-body{
  flex:1 1 auto;overflow-y:auto;padding:18px 22px;
  font:400 14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#1e293b;white-space:pre-wrap;
}
:is(#viking-wizard-root,#viking-group-booking-root) .vb-terms-modal-foot{
  padding:14px 20px;border-top:1px solid #e2e8f0;
  display:flex;justify-content:flex-end;gap:8px;background:#f8fafc;
}

/* === Marknadsföringskort (delat: wizard success-vy OCH tack-sidan) ======
   Hero-design: bilden fyller hela kortet som omslag. Längst ner en
   semi-transparent bar (primärfärg @ 50%) som innehåller rubrik,
   beskrivning och CTA-knapp. Bar-höjden anpassar sig efter innehållet.

   Tidigare var dessa regler scopade till `:is(#viking-wizard-root,#viking-group-booking-root)` — vilket
   gjorde att tack-sidan (som ligger utanför wizardens DOM) inte fick
   samma utseende. Nu är klassen själv-scopad så samma kort renderas
   identiskt överallt det används. */
.vb-wizard-promo{
  --vb-promo-accent: var(--vb-blue, #2271b1);
  --vb-promo-accent-text: var(--vb-card-text, var(--vb-button-text, #ffffff));
  position:relative;
  margin-top:28px;
  min-height:220px;
  border-radius:16px;
  overflow:hidden;
  background:var(--vb-promo-accent);
  color:var(--vb-promo-accent-text);
  box-shadow:0 10px 36px color-mix(in srgb, var(--vb-promo-accent) 35%, transparent);
  opacity:0;
  transform:translateY(20px) scale(.97);
  animation:vbPromoSlideIn .7s cubic-bezier(.16,1,.3,1) 2.5s forwards;
}
@keyframes vbPromoSlideIn{
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.vb-wizard-promo__media{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
}
.vb-wizard-promo__media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.vb-wizard-promo__body{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:12px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  background:color-mix(in srgb, var(--vb-promo-accent) 50%, transparent);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  color:var(--vb-promo-accent-text);
}
.vb-wizard-promo__text-stack{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.vb-wizard-promo:not(.vb-wizard-promo--has-image) .vb-wizard-promo__body{
  position:static;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:18px 22px;
  min-height:inherit;
}
.vb-wizard-promo__title{
  margin:0;font-size:18px;font-weight:700;line-height:1.2;
  color:var(--vb-promo-accent-text);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.vb-wizard-promo__text{
  margin:0;font-size:13px;line-height:1.45;
  color:color-mix(in srgb, var(--vb-promo-accent-text) 92%, transparent);
  white-space:pre-wrap;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.vb-wizard-promo__cta{
  flex:0 0 auto;
  margin:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  background:rgba(255,255,255,.96);
  color:#0f172a !important;
  font-weight:600;font-size:13.5px;
  text-decoration:none;
  border:0;border-radius:10px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 4px 14px rgba(15,23,42,.22);
  white-space:nowrap;
}
.vb-wizard-promo__cta:hover{
  transform:translateY(-1px);
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.32);
}
.vb-wizard-promo__cta i{ transition:transform .2s ease; }
.vb-wizard-promo__cta:hover i{ transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){
  .vb-wizard-promo{
    animation:none; opacity:1; transform:none;
  }
  .vb-wizard-promo__cta,
  .vb-wizard-promo__cta i{ transition:none; }
}

/* ==========================================================================
   Egen tack-sida (WooCommerce /kassan/order-received/)
   Scopas till `body.viking-thankyou` så ingenting läcker till vanliga
   Woo-orders eller andra sidor.
   ========================================================================== */

/* Dölj WC:s default-renderade tack-block. Vi lämnar dem i DOM:en så
   admin/order-management och e-postmallar fortsätter fungera.
   Två scopes:
     - `body.viking-thankyou` täcker full-page /kassan/order-received/.
     - `.viking-inline-checkout:has(.viking-tack)` täcker när tack-sidan
       renderas inne i react-modalen — body har INTE viking-thankyou
       där (vi är fortfarande på bokningssidan). */
body.viking-thankyou .woocommerce-notices-wrapper,
body.viking-thankyou .woocommerce-order > .woocommerce-thankyou-order-received,
body.viking-thankyou .woocommerce-order > .woocommerce-order-overview,
body.viking-thankyou .woocommerce-order > .woocommerce-order-details,
body.viking-thankyou .woocommerce-order > .woocommerce-customer-details,
.viking-inline-checkout:has(.viking-tack) .woocommerce-notices-wrapper,
.viking-inline-checkout:has(.viking-tack) > .woocommerce-thankyou-order-received,
.viking-inline-checkout:has(.viking-tack) > .woocommerce-order-overview,
.viking-inline-checkout:has(.viking-tack) > .woocommerce-order-details,
.viking-inline-checkout:has(.viking-tack) > .woocommerce-customer-details{
  display:none !important;
}

/* Liten breddningsknuff på temat — många teman cappar checkout-sidans
   bredd till ~600px, vilket gör vår tack-sida trång. */
body.viking-thankyou .entry-content,
body.viking-thankyou .woocommerce{
  max-width:none;
}

/* ---------- Container ---------- */
.viking-tack{
  display:grid;
  gap:24px;
  max-width:760px;
  margin:0 auto;
  padding:32px 20px 56px;
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  color:var(--vb-text);
}

@media (min-width:720px){
  .viking-tack{ padding:48px 24px 64px; }
}

/* ---------- Hero ---------- */
.viking-tack__hero{
  text-align:center;
  background:var(--vb-surface);
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-lg);
  padding:32px 24px 28px;
  box-shadow:var(--vb-shadow-md);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.viking-tack__logo{
  max-height:48px;
  width:auto;
  margin-bottom:8px;
  object-fit:contain;
}
.viking-tack__check{
  display:grid;
  place-items:center;
  margin-bottom:4px;
}
.viking-tack__check svg{ width:64px; height:64px; }
.viking-tack__check-ring{ stroke:color-mix(in srgb, var(--vb-blue) 25%, transparent); }
.viking-tack__check-mark{ stroke:var(--vb-blue); }

/* Subtil animation — bara om användaren inte föredrar mindre rörelse */
@media (prefers-reduced-motion: no-preference){
  .viking-tack__check-ring{
    stroke-dasharray:151;
    stroke-dashoffset:151;
    animation:viking-tack-ring .55s var(--vb-ease) .1s forwards;
  }
  .viking-tack__check-mark{
    stroke-dasharray:48;
    stroke-dashoffset:48;
    animation:viking-tack-mark .35s var(--vb-ease) .5s forwards;
  }
}
@keyframes viking-tack-ring{ to{ stroke-dashoffset:0; } }
@keyframes viking-tack-mark{ to{ stroke-dashoffset:0; } }

.viking-tack__title{
  font-size:clamp(22px, 3.4vw, 28px);
  font-weight:700;
  letter-spacing:-.02em;
  margin:6px 0 0;
  color:var(--vb-text);
}
.viking-tack__lead{
  margin:6px 0 0;
  font-size:15px;
  color:var(--vb-text-muted);
  line-height:1.55;
  max-width:46ch;
}

/* ---------- Booking cards ---------- */
.viking-tack__cards{
  display:grid;
  gap:16px;
}
.viking-tack__card{
  background:var(--vb-surface);
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-md);
  padding:22px 22px 18px;
  box-shadow:var(--vb-shadow-sm);
}
.viking-tack__card-head{ margin-bottom:14px; }
.viking-tack__card-eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vb-text-muted);
  background:var(--vb-blue-soft);
  color:var(--vb-blue);
  padding:3px 10px;
  border-radius:999px;
}
.viking-tack__card-title{
  margin:8px 0 0;
  font-size:18px;
  font-weight:700;
  color:var(--vb-text);
}

/* ---------- Detalj-grid (delas av card och summary) ---------- */
.viking-tack__details,
.viking-tack__summary dl{
  margin:0;
  display:grid;
  gap:0;
}
.viking-tack__row{
  display:grid;
  grid-template-columns:minmax(120px, 38%) 1fr;
  align-items:baseline;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--vb-border);
  font-size:15px;
}
.viking-tack__row:last-child{ border-bottom:0; }
.viking-tack__row dt{
  margin:0;
  color:var(--vb-text-muted);
  font-weight:500;
}
.viking-tack__row dd{
  margin:0;
  color:var(--vb-text);
  font-weight:600;
}
.viking-tack__row--total dt,
.viking-tack__row--total dd{
  font-size:17px;
  font-weight:700;
}
.viking-tack__row--total dd{
  color:var(--vb-blue);
  letter-spacing:-.01em;
}

/* Addon-lista — radbruten kolumn */
.viking-tack__row--addons dd{ font-weight:500; }
.viking-tack__addon-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:4px;
}
.viking-tack__addon-list li{
  font-size:14px;
  color:var(--vb-text);
}

/* ---------- Summary card ---------- */
.viking-tack__summary{
  background:var(--vb-surface);
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-md);
  padding:18px 22px;
  box-shadow:var(--vb-shadow-sm);
}

/* ---------- Note (footer-text från admin) ---------- */
.viking-tack__note{
  font-size:14px;
  line-height:1.6;
  color:var(--vb-text-muted);
  padding:14px 18px;
  background:var(--vb-bg);
  border:1px dashed var(--vb-border);
  border-radius:var(--vb-radius-sm);
}
.viking-tack__note em{ color:var(--vb-text); font-style:italic; }
.viking-tack__note strong{ color:var(--vb-text); }

/* Promo-kortet återanvänder `.vb-wizard-promo*` (se sektion längre upp) —
   samma utseende som wizardens preview. Två småjusteringar för
   tack-sidans kontext: avbryt den 2.5s slide-in-fördröjningen (som är
   designad för wizardens lange-fade-flow) och slopa den extra margin
   eftersom .viking-tack redan har grid-gap. */
.viking-tack .vb-wizard-promo{
  margin-top:0;
  animation-delay:.4s;
}

/* Embed/wizard tack-sida: visa kortet direkt (ingen 2.5s fördröjning) och
   trigga om iframe-resize så marknadsföringen inte klipps i demo/embed. */
.vb-wizard-thankyou .vb-wizard-promo,
.vb-wizard-promo.vb-wizard-promo--thankyou{
  margin-top:18px;
  opacity:1;
  transform:none;
  animation:vbPromoSlideIn .55s cubic-bezier(.16,1,.3,1) .15s both;
}
@media (prefers-reduced-motion: reduce){
  .vb-wizard-thankyou .vb-wizard-promo,
  .vb-wizard-promo.vb-wizard-promo--thankyou{
    animation:none;
  }
}

/* ---------- Primary CTA ---------- */
.viking-tack__actions{
  display:flex;
  justify-content:center;
  margin-top:4px;
}
.viking-tack__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  background:var(--vb-button);
  color:var(--vb-button-text);
  border-radius:12px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  box-shadow:var(--vb-shadow-md);
  transition:background .15s var(--vb-ease), transform .15s var(--vb-ease);
}
.viking-tack__cta:hover{
  background:var(--vb-button-hover);
  color:var(--vb-button-text-hover);
  transform:translateY(-1px);
}

/* ---------- Footer (hall-info) ---------- */
.viking-tack__store{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  justify-content:center;
  font-size:13px;
  color:var(--vb-text-muted);
  margin-top:4px;
  text-align:center;
}
.viking-tack__store strong{ color:var(--vb-text); font-weight:700; }

/* ---------- ICS-knapp i bokningskort ---------- */
.viking-tack__card-actions{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--vb-border);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.viking-tack__ics{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  background:var(--vb-blue-soft);
  color:var(--vb-blue);
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border:1px solid color-mix(in srgb, var(--vb-blue) 18%, transparent);
  transition:background .15s var(--vb-ease), color .15s var(--vb-ease), transform .15s var(--vb-ease);
}
.viking-tack__ics:hover{
  background:var(--vb-blue);
  color:#fff;
  transform:translateY(-1px);
}
.viking-tack__ics svg{ flex-shrink:0; }

/* ---------- Karta (OSM-embed) ---------- */
.viking-tack__map{
  background:var(--vb-surface);
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-md);
  overflow:hidden;
  box-shadow:var(--vb-shadow-sm);
  display:grid;
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .viking-tack__map{
    grid-template-columns:1fr 1fr;
  }
}
.viking-tack__map-frame{
  position:relative;
  background:#e2e8f0;
  min-height:220px;
}
@media (min-width:640px){
  .viking-tack__map-frame{
    min-height:240px;
    border-right:1px solid var(--vb-border);
  }
}
.viking-tack__map-frame iframe{
  width:100%;
  height:100%;
  min-height:inherit;
  border:0;
  display:block;
}
.viking-tack__map-body{
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;
}
.viking-tack__map-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.01em;
}
.viking-tack__map-addr{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:var(--vb-text);
}
.viking-tack__map-addr strong{ font-weight:600; }
.viking-tack__map-cta{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  background:var(--vb-button);
  color:var(--vb-button-text);
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  transition:background .15s var(--vb-ease), transform .15s var(--vb-ease);
}
.viking-tack__map-cta:hover{
  background:var(--vb-button-hover);
  color:var(--vb-button-text-hover);
  transform:translateY(-1px);
}

/* ---------- Pris + moms-spec på bokningsraden ---------- */
.viking-tack__row--price dd{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  text-align:right;
}
.viking-tack__price-gross{
  font-weight:700;
  color:var(--vb-blue);
}
.viking-tack__price-vat{
  font-size:11px;
  font-weight:500;
  color:var(--vb-text-muted);
  letter-spacing:.01em;
}

/* ---------- Förbeställning (addons) i bokningskort ---------- */
/* ---------- Förbeställning på tack-sidan ----------
 *
 * Använder EXAKT samma `viking-tack__row`-struktur som Datum/Tid/Pris-
 * raderna ovanför. Ingen särskild "kort-i-kort"-styling, inga border-
 * boxar, inga thumbnails — bara samma layout/font/avstånd som resten av
 * detail-listan så förbeställning visuellt smälter in med bokningen.
 *
 * Skillnad från en standard __row:
 *   - dt får en sekundär meta-rad ("2 × 20 kr/st") under namnet
 *   - dd får moms-spec på egen rad under priset
 * Båda dessa är samma teknik som primärradens "Pris" — så semantik och
 * utseende är konsekvent över hela kortet.
 */
.viking-tack__addons-group{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--vb-border);
}
.viking-tack__addons-heading{
  margin:0 0 4px;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--vb-text-muted);
}
.viking-tack__details--addons .viking-tack__row dt{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.viking-tack__details--addons .viking-tack__addon-name{
  color:var(--vb-text);
  font-weight:600;
  font-size:15px;
}
.viking-tack__details--addons .viking-tack__addon-meta{
  font-size:12px;
  color:var(--vb-text-muted);
  font-weight:400;
}

/* ---------- Total med moms-spec i summary-aside ---------- */
.viking-tack__row--total dd{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}

/* ---------- Ladda ner kvitto-knapp ---------- */
.viking-tack__summary-actions{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--vb-border);
  display:flex;
  justify-content:center;
}
.viking-tack__download{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  background:transparent;
  color:var(--vb-text);
  border:1px solid var(--vb-border);
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s var(--vb-ease), border-color .15s var(--vb-ease), transform .15s var(--vb-ease);
  font-family:inherit;
}
.viking-tack__download:hover{
  background:var(--vb-blue-soft);
  border-color:color-mix(in srgb, var(--vb-blue) 30%, transparent);
  color:var(--vb-blue);
  transform:translateY(-1px);
}
.viking-tack__download svg{ flex-shrink:0; }

/* Embed tack-sida — utskriftsknapp (samma stil som WC-tacksidan) */
.vb-wizard-thankyou__actions{
  margin:0 0 18px;
  padding-top:4px;
  display:flex;
  justify-content:center;
}
.vb-wizard-receipt__print-title,
.vb-wizard-receipt__print-only{
  display:none;
}
.vb-wizard-receipt-meta{
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-sm);
  background:var(--vb-surface-muted);
}
.vb-wizard-receipt-meta__row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:4px 0;
  font-size:14px;
}
.vb-wizard-receipt-meta__row dt{
  margin:0;
  color:var(--vb-text-muted);
  font-weight:500;
  flex:0 0 auto;
}
.vb-wizard-receipt-meta__row dd{
  margin:0;
  text-align:right;
  font-weight:600;
  color:var(--vb-text);
  word-break:break-word;
}
.vb-wizard-receipt__footer{
  margin:12px 0 0;
  font-size:13px;
  color:var(--vb-text-muted);
}

/* ---------- Modal popup för tack-sida (inline-render efter checkout) ---------- */
.viking-thankyou-modal-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px 16px;
  overflow-y:auto;
  overflow-x:hidden;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:viking-thankyou-modal-in .25s var(--vb-ease, ease-out) both;
}
.viking-thankyou-modal-overlay,
.viking-thankyou-modal-overlay *{
  box-sizing:border-box;
}
@keyframes viking-thankyou-modal-in{
  from{ opacity:0; }
  to{ opacity:1; }
}
.viking-thankyou-modal-content{
  position:relative;
  width:min(820px, 100%);
  max-width:100%;          /* förhindrar att child:s sprängar containern på mobil */
  background:var(--vb-surface, #fff);
  color:var(--vb-text, #0f172a);
  border-radius:16px;
  padding:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  margin:auto;
  overflow:hidden;         /* inga horisontella spillkanter */
  animation:viking-thankyou-content-in .35s var(--vb-ease, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes viking-thankyou-content-in{
  from{ opacity:0; transform:translateY(20px) scale(.97); }
  to  { opacity:1; transform:translateY(0)    scale(1); }
}
.viking-thankyou-modal-close{
  position:absolute;
  top:14px; right:14px;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:var(--vb-bg, #f1f5f9);
  border:1px solid var(--vb-border, #e2e8f0);
  border-radius:50%;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  color:var(--vb-text, #0f172a);
  font-family:inherit;
  padding:0;
  transition:background .15s var(--vb-ease, ease), transform .15s var(--vb-ease, ease);
  z-index:1;
}
.viking-thankyou-modal-close:hover{
  background:var(--vb-blue-soft);
  color:var(--vb-blue);
  transform:rotate(90deg);
}
.viking-thankyou-modal-content .viking-tack{
  /* Inom modalen behöver vi inget extra padding/border — overlayn ger ramen. */
  padding:0;
  background:transparent;
  max-width:100%;
}
/* Hindra fasta bredder i barnen från att spränga containern på mobil */
.viking-thankyou-modal-content .viking-tack__cards,
.viking-thankyou-modal-content .viking-tack__card,
.viking-thankyou-modal-content .viking-tack__summary,
.viking-thankyou-modal-content .viking-tack__map,
.viking-thankyou-modal-content .viking-tack__map-frame,
.viking-thankyou-modal-content .vb-wizard-promo{
  max-width:100%;
  min-width:0;
}
.viking-thankyou-modal-content .viking-tack__map-frame iframe{
  width:100%;
  max-width:100%;
}
.viking-thankyou-modal-content .viking-tack__details{
  grid-template-columns:minmax(0, 1fr);  /* stack på smal skärm istället för 2-kol */
}
@media (min-width: 520px){
  .viking-thankyou-modal-content .viking-tack__details{
    grid-template-columns:minmax(140px, max-content) minmax(0, 1fr);
  }
}
@media (max-width: 600px){
  .viking-thankyou-modal-overlay{ padding:12px 8px; }
  .viking-thankyou-modal-content{ padding:16px; border-radius:12px; }
  .viking-thankyou-modal-content .viking-tack__title{ font-size:20px; }
  .viking-thankyou-modal-content .viking-tack__card{ padding:14px; }
  .viking-thankyou-modal-content .viking-tack__summary{ padding:14px; }
  /* Stack pris+moms i totalsektionen så de inte trycks utanför kanten */
  .viking-thankyou-modal-content .viking-tack__row--total dd{
    align-items:flex-start;
    text-align:left;
  }
}

/* ---------- Print: bara tack-kortet, inget annat på sidan ----------
 *
 * `body.viking-thankyou > *:not(.x) { display:none }` fungerar inte här:
 *  - På order-received-sidan ligger `.viking-tack` djupt inne i WC:s
 *    `.woocommerce` → `.woocommerce-order` så att gömma alla body-children
 *    gömmer även tack-cardet.
 *  - I popup-läge är `.viking-tack` inuti `.viking-thankyou-modal-content`
 *    inuti `.viking-thankyou-modal-overlay` → samma problem.
 *
 * Robusta mönstret: visibility:hidden på allt + visibility:visible på
 * tack-cardet + dess descendants, sedan absolut-positionera cardet på
 * 0,0 så det fyller pappret. Funkar oavsett DOM-djup.
 */
@media print{
  *, body, html{ background:#fff !important; color:#000 !important; }
  html, body, :is(#viking-wizard-root,#viking-group-booking-root), .vb-card.vb-wizard{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  /* WooCommerce tack-sida — visibility-tricket */
  body.viking-thankyou * { visibility:hidden !important; }
  body.viking-thankyou .viking-tack,
  body.viking-thankyou .viking-tack *{
    visibility:visible !important;
    box-shadow:none !important;
  }
  body.viking-thankyou .viking-tack{
    position:absolute !important;
    top:0 !important; left:0 !important; right:0 !important;
    width:100% !important;
    max-width:100% !important;
    padding:16px !important;
    margin:0 !important;
    background:#fff !important;
    color:#000 !important;
  }

  /* Embed / wizard tack-sida — dölj chrome, visa hela kvittot */
  html.vb-embed-shell .vb-wizard-progress,
  html.vb-print-receipt .vb-wizard-progress,
  .vb-wizard-thankyou__screen-only,
  .vb-wizard-thankyou__actions,
  .vb-wizard-thankyou__print,
  .vb-wizard-invite,
  .vb-wizard-promo,
  .viking-thankyou-modal-close{
    display:none !important;
  }
  .vb-wizard-receipt__print-title,
  .vb-wizard-receipt__print-only{
    display:block !important;
  }
  .vb-wizard-thankyou,
  .vb-wizard-receipt{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    background:#fff !important;
    color:#000 !important;
    box-shadow:none !important;
  }
  .vb-wizard-receipt-meta{
    background:#fff !important;
    border-color:#ccc !important;
  }
  .vb-wizard-summary{
    border-color:#ccc !important;
    overflow:visible !important;
  }
  .vb-wizard-summary .vb-summary-price,
  .vb-wizard-summary .vb-summary-price__gross,
  .vb-wizard-summary .vb-summary-name{
    color:#000 !important;
  }
  .vb-wizard-summary .vb-summary-time,
  .vb-wizard-summary .vb-summary-price__vat,
  .vb-wizard-receipt-meta__row dt,
  .vb-wizard-receipt__footer{
    color:#444 !important;
  }

  /* Dölj interaktiva element (WC) */
  .viking-tack__ics,
  .viking-tack__download,
  .viking-tack__cta,
  .viking-tack__map-cta,
  .viking-tack__summary-actions,
  .viking-tack__map-frame{ display:none !important; }
  .vb-wizard-promo__media{ display:none !important; }
  .viking-thankyou-modal-overlay{
    position:static !important;
    background:#fff !important;
    padding:0 !important;
    backdrop-filter:none !important;
    overflow:visible !important;
  }
  .viking-thankyou-modal-content{
    box-shadow:none !important;
    padding:0 !important;
    overflow:visible !important;
    width:100% !important;
  }
  .viking-tack__card,
  .viking-tack__summary{ page-break-inside:avoid; }
  .vb-wizard-summary li,
  .vb-wizard-receipt-meta{ page-break-inside:avoid; }
}

/* — Gruppbokning: tidförslag (steg datum & tid) — */
:is(#viking-wizard-root,#viking-group-booking-root) .gb-suggestion-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .gb-suggestion-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius-md);
  background:linear-gradient(180deg,var(--vb-surface) 0%,var(--vb-surface-muted) 100%);
  color:var(--vb-text);
  cursor:pointer;
  text-align:left;
  transition:border-color .18s var(--vb-ease), box-shadow .18s var(--vb-ease);
  box-shadow:var(--vb-shadow-sm);
}
:is(#viking-wizard-root,#viking-group-booking-root) .gb-suggestion-card:hover{
  border-color:var(--vb-blue);
  box-shadow:var(--vb-shadow-md);
}
:is(#viking-wizard-root,#viking-group-booking-root) .gb-suggestion-card.selected{
  border-color:var(--vb-selected-tint);
  background:var(--vb-card-selected-bg);
  box-shadow:0 4px 16px var(--vb-selected-tint-soft);
}
:is(#viking-wizard-root,#viking-group-booking-root) .gb-suggestion-card__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .gb-suggestion-card__summary{
  font-weight:700;
  font-size:15px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .gb-suggestion-card__price{
  font-weight:600;
  font-size:13px;
  color:var(--vb-kicker);
  flex-shrink:0;
}
:is(#viking-wizard-root,#viking-group-booking-root) .gb-suggestion-card.selected .gb-suggestion-card__price{
  color:var(--vb-selected-tint);
}
:is(#viking-wizard-root,#viking-group-booking-root) .gb-suggestion-card__details{
  display:flex;
  flex-direction:column;
  gap:2px;
}
:is(#viking-wizard-root,#viking-group-booking-root) .gb-suggestion-card__line{
  font-size:13px;
  color:var(--vb-text-muted);
}