/**
 * Checkout Block Styles - Modern UX Redesign
 * Mobile-First, WCAG 2.2 AA Compliant
 * 4-Step Process with Icon-Based Progress
 */

/* ============================================
   GLOBAL RESETS & BASE STYLES
   ============================================ */

.kabdalis-checkout-2 {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  /* C22: single danger/error colour token — prefers the theme's negative token
     (--no), then the plugin's own literal as a last-resort fallback so the
     checkout keeps working even if the theme doesn't define one. Use var(--danger)
     for all error/destructive colour instead of a hardcoded red hex. */
  --danger: var(--no, #b3261e);
  --danger-strong: var(--no-strong, #951f18);
}

/* Complete override of all heading styles - use custom classes only */
/* Exclude opening hours widget to preserve its styling */
/* C20: the `body.gutenberg-page …` variants were dead — the kabdalis2 theme
   strips the gutenberg-page body class (kabdalis2_strip_body_classes) — and were
   redundant with the strictly-more-general `body .kabdalis-checkout-2 …` variant
   below, which keeps the same specificity boost. Removed. */
.kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h1,
.kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h2,
.kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h3,
.kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h4,
.kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h5,
.kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h6,
body .kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h1,
body .kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h2,
body .kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h3,
body .kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h4,
body .kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h5,
body .kabdalis-checkout-2:not(.kabdalis-opening-hours-full) h6 {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
}

/* Ensure opening hours widget styles are preserved */
.kabdalis-opening-hours-full,
.kabdalis-opening-hours-full * {
  box-sizing: border-box;
}

.kabdalis-opening-hours-full h1,
.kabdalis-opening-hours-full h2,
.kabdalis-opening-hours-full h3,
.kabdalis-opening-hours-full h4,
.kabdalis-opening-hours-full h5,
.kabdalis-opening-hours-full h6 {
  margin: revert !important;
  padding: revert !important;
  font-weight: revert !important;
  font-size: revert !important;
  line-height: revert !important;
  letter-spacing: revert !important;
  text-transform: revert !important;
}

/* Step title — subtle, integrated with progress */
.kabdalis-checkout-2 .checkout-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kabdalis-checkout-2 .form-section-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 16px 0;
  padding: 0 0 12px 0;
  border-bottom: 2px solid var(--line);
  letter-spacing: -0.01em;
}

/* ============================================
   PROGRESS INDICATOR - ICON-BASED
   ============================================ */

.kabdalis-checkout-2 .checkout-progress {
  margin-bottom: 8px;
  padding: 0;
}

/* ── When moved into #page-top ─────────────────────────────────────────────── */

/* Reduce page top padding on checkout page */
body.kab-checkout-page.mesmerize-inner-page #page > .page-content {
  padding-top: 32px !important;
}

#page-top .checkout-progress.kab-checkout-topbar-progress {
  width: 100%;
  margin: 0;
  padding: 10px 32px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--accent) 13%, transparent);
  box-sizing: border-box;
}

/* Circles top-aligned so ::before/::after top values stay predictable */
#page-top .kab-checkout-topbar-progress .progress-steps {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding: 0;
  gap: 0;
  max-width: 560px;
  margin: 0 auto;
}

/* Grey track: from center of circle 1 to center of circle 4 */
#page-top .kab-checkout-topbar-progress .progress-steps::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  z-index: 0;
}

/* Colored fill line */
#page-top .kab-checkout-topbar-progress .progress-steps::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 12.5%;
  height: 2px;
  background: var(--accent);
  z-index: 1;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#page-top .kab-checkout-topbar-progress .progress-steps[data-completed="0"]::after { width: 0; }
#page-top .kab-checkout-topbar-progress .progress-steps[data-completed="1"]::after { width: 25%; }
#page-top .kab-checkout-topbar-progress .progress-steps[data-completed="2"]::after { width: 50%; }
#page-top .kab-checkout-topbar-progress .progress-steps[data-completed="3"]::after { width: 75%; }

#page-top .kab-checkout-topbar-progress .progress-steps .step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  z-index: 2;
  min-width: 0;
  padding: 0;
  cursor: pointer;
}

/* Step circles */
#page-top .kab-checkout-topbar-progress .step-box {
  position: relative;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

#page-top .kab-checkout-topbar-progress .step-box i {
  font-size: 14px;
  font-style: normal;       /* plain digits, not the <i> default italic */
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  transition: color 0.25s ease;
}

/* Active step */
#page-top .kab-checkout-topbar-progress .step.active .step-box {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

#page-top .kab-checkout-topbar-progress .step.active .step-box i {
  color: var(--on-accent);
}

/* Completed step */
#page-top .kab-checkout-topbar-progress .step.completed .step-box {
  border-color: var(--accent);
  background: var(--accent);
}

#page-top .kab-checkout-topbar-progress .step.completed .step-box i {
  color: var(--on-accent);
}

/* Disabled step */
#page-top .kab-checkout-topbar-progress .step.disabled .step-box {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

/* Labels — hidden on mobile, shown on larger screens */
#page-top .kab-checkout-topbar-progress .step-label {
  display: none;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

#page-top .kab-checkout-topbar-progress .step.active .step-label {
  color: var(--accent);
  font-weight: 700;
}

#page-top .kab-checkout-topbar-progress .step.completed .step-label {
  color: color-mix(in srgb, var(--accent) 55%, transparent);
}

@media (min-width: 640px) {
  #page-top .kab-checkout-topbar-progress .step-label {
    display: block;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */

.kabdalis-checkout-2 .progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0;
  gap: 8px;
}

/* Progress line - grey background track */
.kabdalis-checkout-2 .progress-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: calc(12.5% - 3px);
  right: calc(12.5% - 3px);
  height: 2px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  z-index: 0;
}

/* Progress line - colored completed line */
.kabdalis-checkout-2 .progress-steps::after {
  content: '';
  position: absolute;
  top: 20px;
  left: calc(12.5% - 3px);
  height: 2px;
  background: var(--accent);
  z-index: 1;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Each interval = flex_item_width + gap = (100%-24px)/4 + 8px = 25%+2px */
.kabdalis-checkout-2 .progress-steps[data-completed="0"]::after { width: 0; }
.kabdalis-checkout-2 .progress-steps[data-completed="1"]::after { width: calc(25% + 2px); }
.kabdalis-checkout-2 .progress-steps[data-completed="2"]::after { width: calc(50% + 4px); }
.kabdalis-checkout-2 .progress-steps[data-completed="3"]::after { width: calc(75% + 6px); }

.kabdalis-checkout-2 .progress-steps .step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  z-index: 2;
  min-width: 0;
  padding: 0 4px;
}

.kabdalis-checkout-2 .step-box {
  position: relative;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  touch-action: manipulation;
}

/* Disabled steps (more than one step ahead) */
.kabdalis-checkout-2 .progress-steps .step.disabled .step-box {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.kabdalis-checkout-2 .progress-steps .step.disabled .step-label {
  opacity: 0.5;
}

.kabdalis-checkout-2 .step-box i {
  font-size: 15px;
  font-style: normal;       /* plain digits, not the <i> default italic */
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  transition: all 0.3s ease;
}

.kabdalis-checkout-2 .step.active .step-box {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

.kabdalis-checkout-2 .step.active .step-box i {
  color: var(--on-accent);
}

.kabdalis-checkout-2 .step.completed .step-box {
  border-color: var(--accent);
  background: var(--accent);
}

.kabdalis-checkout-2 .step.completed .step-box i {
  color: var(--on-accent);
}

.kabdalis-checkout-2 .step-label {
  display: none;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.kabdalis-checkout-2 .step.active .step-label {
  color: var(--accent);
  font-weight: 600;
}

.kabdalis-checkout-2 .step.completed .step-label {
  color: var(--ink-soft);
}

/* Desktop: Show labels */
@media (min-width: 768px) {
  .kabdalis-checkout-2 .step-label {
    display: block;
  }
}

/* ============================================
   STEP CONTENT
   ============================================ */

.kabdalis-checkout-2 .checkout-step {
  display: none;
  animation: fadeIn 0.3s ease;
}

.kabdalis-checkout-2 .checkout-step.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kabdalis-checkout-2 .step-header {
  margin-bottom: 20px;
  padding-bottom: 0;
  text-align: center;
}

.kabdalis-checkout-2 .step-content {
  background: transparent;
  border-radius: 0;
  padding: 0px;
  margin: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   SUMMARY SECTIONS
   ============================================ */

.kabdalis-checkout-2 .summary-section {
  margin-top: 32px;
  margin-bottom: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  padding: 24px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}

.kabdalis-checkout-2 .summary-section:first-of-type {
  margin-top: 0;
  padding-top: 24px;
  border-top: none;
}

.kabdalis-checkout-2 .summary-section h3,
.kabdalis-checkout-2 .summary-section-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 20px 0 !important;
  padding: 0 0 12px 0 !important;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.02em;
  border-bottom: 2px solid var(--line);
}

.kabdalis-checkout-2 .summary-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  margin: 0;
}

.kabdalis-checkout-2 .summary-item + .summary-item {
  margin-top: 16px;
}

.kabdalis-checkout-2 .summary-item-main {
  flex: 1;
}

.kabdalis-checkout-2 .summary-item-main strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
  line-height: 1.4;
}

.kabdalis-checkout-2 .summary-item-dates {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 2px;
}

.kabdalis-checkout-2 .summary-item-price {
  text-align: right;
  margin-left: 16px;
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kabdalis-checkout-2 .price {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  display: inline-block;
}

.kabdalis-checkout-2 .summary-total {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kabdalis-checkout-2 .total-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.kabdalis-checkout-2 .total-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.4;
}

/* ============================================
   FORMS
   ============================================ */

.kabdalis-checkout-2 .checkout-form {
  max-width: 800px;
  margin: 0 auto;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
}

.kabdalis-checkout-2 .form-section {
  margin-top: 24px;
  margin-bottom: 0;
  padding: 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  border: 1px solid var(--line);
}

.kabdalis-checkout-2 .form-section:first-of-type {
  margin-top: 0;
  padding: 16px;
  border-top: 1px solid var(--line);
}

.kabdalis-checkout-2 .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 0;
  line-height: 0;
  padding: 0;
  margin: 0;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  grid-auto-flow: dense;
  list-style: none;
}

/* Disable pseudo-elements that can create spacing */
.kabdalis-checkout-2 .form-row::before,
.kabdalis-checkout-2 .form-row::after {
  content: none;
  display: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Restore font rendering for direct children */
.kabdalis-checkout-2 .form-row > * {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}

.kabdalis-checkout-2 .form-group {
  margin-bottom: 20px;
}

.kabdalis-checkout-2 .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.4;
}

/* Checkbox styling */
.kabdalis-checkout-2 .checkbox-group {
  margin-bottom: 16px;
}

.kabdalis-checkout-2 .checkbox-group label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.kabdalis-checkout-2 .checkbox-group label:hover {
  background-color: color-mix(in srgb, var(--ink) 2%, transparent);
}

.kabdalis-checkout-2 .checkbox-group input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 4px;
  background: var(--surface);
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s ease;
}

.kabdalis-checkout-2 .checkbox-group input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.kabdalis-checkout-2 .checkbox-group input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 6px;
  height: 12px;
  border: solid var(--surface);
  border-width: 0 2px 2px 0;
}

.kabdalis-checkout-2 .checkbox-group input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.kabdalis-checkout-2 .checkbox-group label span {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.kabdalis-checkout-2 .checkbox-group label a {
  color: var(--accent);
  text-decoration: underline;
}

.kabdalis-checkout-2 .checkbox-group label a:hover {
  text-decoration: none;
}

/* Terms & conditions card */
.kabdalis-checkout-2 .checkout-terms-card {
  margin-top: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 3%, transparent);
  overflow: hidden;
}

.kabdalis-checkout-2 .checkout-terms-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

.kabdalis-checkout-2 .checkout-terms-header i {
  font-size: 16px;
  opacity: 0.8;
}

.kabdalis-checkout-2 .checkout-terms-body {
  padding: 16px 20px;
}

.kabdalis-checkout-2 .checkout-terms-body .checkbox-group {
  margin-bottom: 8px;
}

.kabdalis-checkout-2 .checkout-terms-body .checkbox-group:last-child {
  margin-bottom: 0;
}

/* Newsletter row — opt-in card */
.kabdalis-checkout-2 .checkout-newsletter-row {
  margin-top: 20px;
  margin-bottom: 16px;
  padding: 0;
}

.kabdalis-checkout-2 .checkout-newsletter-row label {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 15%, transparent);
  transition: background 0.2s ease, border-color 0.2s ease;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.kabdalis-checkout-2 .checkout-newsletter-row label:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.kabdalis-checkout-2 .checkout-newsletter-row label:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: var(--accent);
}

.kabdalis-checkout-2 .checkout-newsletter-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 4px;
  background: var(--surface);
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.kabdalis-checkout-2 .checkout-newsletter-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.kabdalis-checkout-2 .checkout-newsletter-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid var(--surface);
  border-width: 0 2px 2px 0;
}

.kabdalis-checkout-2 .form-group.has-error input[type="checkbox"] {
  border-color: color-mix(in srgb, var(--no) 50%, transparent);
}

.kabdalis-checkout-2 .form-group.has-error .field-error {
  display: block;
  color: color-mix(in srgb, var(--no) 90%, transparent);
  font-size: 13px;
  margin-top: 6px;
  margin-left: 36px;
}

.kabdalis-checkout-2 .form-group input[type="text"],
.kabdalis-checkout-2 .form-group input[type="email"],
.kabdalis-checkout-2 .form-group input[type="tel"],
.kabdalis-checkout-2 .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.kabdalis-checkout-2 .form-group input:focus,
.kabdalis-checkout-2 .form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ============================================
   BUTTONS
   ============================================ */

.kabdalis-checkout-2 .step-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}


.kabdalis-checkout-2 .btn {
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kabdalis-checkout-2 .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.kabdalis-checkout-2 .btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 80%, var(--ink));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.kabdalis-checkout-2 .btn-secondary {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
}

.kabdalis-checkout-2 .btn-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

.kabdalis-checkout-2 .btn-full {
  width: 100%;
}

/* ============================================
   INFO GRID
   ============================================ */

.kabdalis-checkout-2 .summary-section-compact {
  padding: 16px;
}

.kabdalis-checkout-2 .summary-info-compact-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0;
  line-height: 0;
}

.kabdalis-checkout-2 .summary-info-compact {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kabdalis-checkout-2 .summary-info-compact.summary-info-with-icon {
  gap: 8px;
}

.kabdalis-checkout-2 .summary-info-compact.summary-info-with-icon i {
  font-size: 13px;
  color: var(--ink-soft);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.kabdalis-checkout-2 .summary-info-compact.summary-info-with-icon span {
  flex: 1;
}

.kabdalis-checkout-2 .summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 14px;
}

.kabdalis-checkout-2 .summary-table-row {
  border-bottom: 1px solid var(--line);
}

.kabdalis-checkout-2 .summary-table-row:last-child {
  border-bottom: none;
}

.kabdalis-checkout-2 .summary-table-desc {
  padding: 10px 0;
  color: var(--ink);
  line-height: 1.5;
  vertical-align: top;
}

.kabdalis-checkout-2 .summary-table-dates {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.kabdalis-checkout-2 .summary-table-price {
  padding: 10px 0 10px 16px;
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}

.kabdalis-checkout-2 .summary-table-row-addon .summary-item-remove {
  margin-left: 8px;
  vertical-align: middle;
}

/* ============================================
   ACTION BUTTONS (Extensions & Addons)
   ============================================ */

.action-buttons-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.action-buttons-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 20px 0 !important;
  padding: 0 0 12px 0 !important;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.02em;
  border-bottom: 2px solid var(--line);
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  min-height: 56px;
}

.action-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
}

.action-btn.selected {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

.action-btn.loading {
  opacity: 0.6;
  cursor: not-allowed;
}

.action-icon {
  font-size: 20px;
  font-weight: 600;
  margin-right: 12px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.action-text {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

.action-btn.selected .action-text {
  color: var(--accent);
  font-weight: 600;
}

.action-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.action-btn.selected .action-price {
  color: var(--accent);
}

/* Extension buttons */
.extension-buttons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.btn-extension {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  min-height: 56px;
  width: 100%;
  gap: 12px;
}

.btn-extension:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
}

.btn-extension.available {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

.btn-extension.available:hover:not(:disabled) {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 15%, transparent);
}

.btn-extension.unavailable {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-extension:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-extension-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}

.btn-extension.available .btn-extension-icon {
  color: var(--ok);
}

.btn-extension-text {
  flex: 1;
  text-align: left;
}

.btn-extension-price {
  flex-shrink: 0;
  text-align: right;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.btn-extension.available .btn-extension-price {
  color: var(--ok);
  font-weight: 700;
}

/* ============================================
   REMOVE BUTTON
   ============================================ */

.kabdalis-checkout-2 .summary-item-remove {
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.2s ease;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  vertical-align: middle;
}

.kabdalis-checkout-2 .summary-item-remove i {
  font-size: 14px;
}

.kabdalis-checkout-2 .summary-item-remove:hover {
  background: color-mix(in srgb, var(--no) 10%, transparent);
  color: var(--no);
}

.kabdalis-checkout-2 .summary-table-total {
  border-top: 2px solid var(--line);
  font-weight: 600;
}

.kabdalis-checkout-2 .summary-table-total td {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  .kabdalis-checkout-2 {
    font-size: 14px;
  }
  
  .kabdalis-checkout-2 .checkout-progress {
    margin-bottom: 6px;
  }

  .kabdalis-checkout-2 .progress-steps {
    gap: 4px;
  }

  .kabdalis-checkout-2 .step-box {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .kabdalis-checkout-2 .step-box i {
    font-size: 14px;
  }

  /* Mobile circles are 36px → center at 18px; gap 4px */
  .kabdalis-checkout-2 .progress-steps::before,
  .kabdalis-checkout-2 .progress-steps::after {
    top: 18px;
    height: 2px;
  }

  .kabdalis-checkout-2 .progress-steps::before {
    left: calc(12.5% - 1.5px);
    right: calc(12.5% - 1.5px);
  }

  .kabdalis-checkout-2 .progress-steps::after {
    left: calc(12.5% - 1.5px);
  }

  .kabdalis-checkout-2 .progress-steps[data-completed="1"]::after { width: calc(25% + 1px); }
  .kabdalis-checkout-2 .progress-steps[data-completed="2"]::after { width: calc(50% + 2px); }
  .kabdalis-checkout-2 .progress-steps[data-completed="3"]::after { width: calc(75% + 3px); }

  .kabdalis-checkout-2 .checkout-title {
    font-size: 13px;
  }

  .kabdalis-checkout-2 .step-header {
    margin-bottom: 16px;
  }
  
  .kabdalis-checkout-2 .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .kabdalis-checkout-2 .step-actions {
    flex-direction: column-reverse;
    margin-top: 24px;
    padding-top: 20px;
  }
  
  .kabdalis-checkout-2 .btn {
    width: 100%;
    padding: 14px 20px;
  }
  
  .kabdalis-checkout-2 .summary-section {
    margin-top: 24px;
    padding-top: 20px;
  }
  
  .kabdalis-checkout-2 .summary-item-price {
    margin-left: 12px;
    gap: 6px;
  }
  
  .kabdalis-checkout-2 .summary-total {
    margin-top: 24px;
    padding-top: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .kabdalis-checkout-2 .total-label {
    font-size: 16px;
  }
  
  .kabdalis-checkout-2 .total-amount {
    font-size: 20px;
  }
  
  .kabdalis-checkout-2 .summary-info-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .kabdalis-checkout-2 .summary-info-item {
    padding: 12px 14px;
  }
  
  .kabdalis-checkout-2 .cart-section {
    padding: 20px 16px;
    margin-bottom: 24px;
  }
  
  .kabdalis-checkout-2 .cart-section-title {
    font-size: 20px;
    margin-bottom: 16px !important;
  }
  
  .kabdalis-checkout-2 .booking-review-content {
    gap: 16px;
  }
  
  .kabdalis-checkout-2 .booking-card-header {
    padding: 16px 20px;
  }
  
  .kabdalis-checkout-2 .booking-card-body {
    padding: 20px;
  }
  
  .kabdalis-checkout-2 .booking-card-title {
    font-size: 18px;
  }
  
  .kabdalis-checkout-2 .accommodation-name {
    font-size: 16px;
  }
  
  .kabdalis-checkout-2 .accommodation-meta {
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 8px;
  }
  
  .kabdalis-checkout-2 .accommodation-meta-item {
    padding: 6px 10px;
    font-size: 13px;
    gap: 6px;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    border: 1px solid var(--line);
  }
  
  .kabdalis-checkout-2 .accommodation-meta-item-slopes {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
  }
  
  .kabdalis-checkout-2 .accommodation-meta-item-slopes i {
    color: var(--accent);
  }
  
  .kabdalis-checkout-2 .accommodation-meta-item-slopes span {
    color: var(--accent);
    font-weight: 500;
  }
  
  .kabdalis-checkout-2 .accommodation-meta-item i {
    font-size: 14px;
  }
  
  .kabdalis-checkout-2 .accommodation-meta-item span {
    font-size: 13px;
  }
  
  .kabdalis-checkout-2 .accommodation-price {
    font-size: 18px;
  }
  
  .kabdalis-checkout-2 .extension-upsells {
    gap: 10px;
  }
  
  .kabdalis-checkout-2 .btn-upsell {
    padding: 10px 14px;
    font-size: 14px;
    flex-wrap: wrap;
  }
  
  .kabdalis-checkout-2 .upsell-text {
    width: 100%;
    margin-top: 4px;
  }
  
  .kabdalis-checkout-2 .cancellation-options {
    flex-direction: column;
    gap: 10px;
  }
  
  .kabdalis-checkout-2 .btn-option {
    padding: 12px 16px;
  }
  
  .kabdalis-checkout-2 .service-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
  }
  
  .kabdalis-checkout-2 .service-controls {
    width: 100%;
    justify-content: flex-start;
  }
  
  .kabdalis-checkout-2 .service-price-total {
    width: 100%;
    text-align: left;
    margin-top: 8px;
  }
  
  .kabdalis-checkout-2 .qty-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 16px;
  }
  
  .kabdalis-checkout-2 .qty-input {
    width: 60px;
    height: 32px;
    font-size: 15px;
  }
  
  .kabdalis-checkout-2 .summary-total {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .kabdalis-checkout-2 .summary-total-label {
    font-size: 16px;
  }
  
  .kabdalis-checkout-2 .summary-total-amount {
    font-size: 22px;
  }
  
  .kabdalis-checkout-2 .add-to-cart-section {
    padding: 20px 16px;
  }
  
  .kabdalis-checkout-2 .add-to-cart-title {
    font-size: 20px;
    margin-bottom: 16px !important;
  }
  
  .kabdalis-checkout-2 .extension-buttons-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .kabdalis-checkout-2 .action-btn {
    min-width: 100%;
    padding: 12px 14px;
    min-height: 52px;
  }
  
  .kabdalis-checkout-2 .action-icon {
    font-size: 18px;
    margin-right: 10px;
    width: 20px;
  }
  
  .kabdalis-checkout-2 .action-text {
    font-size: 14px;
  }
  
  .kabdalis-checkout-2 .action-price {
    font-size: 13px;
    margin-left: 8px;
  }
  
  .kabdalis-checkout-2 .addons-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ============================================
   PAYMENT OPTIONS
   ============================================ */

.kabdalis-checkout-2 .checkout-card-payment {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 10%, transparent);
  margin: 32px 0;
}

.kabdalis-checkout-2 .payment-details {
  margin: 24px 0;
}

.kabdalis-checkout-2 .checkout-card-payment .checkout-card-header {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 15%, transparent);
}

.kabdalis-checkout-2 .checkout-card-payment .payment-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  grid-auto-flow: dense;
  list-style: none;
}

/* Disable pseudo-elements that can create spacing */
.kabdalis-checkout-2 .payment-options-grid::before,
.kabdalis-checkout-2 .payment-options-grid::after {
  content: none;
  display: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Restore font rendering for direct children */
.kabdalis-checkout-2 .payment-options-grid > * {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

.kabdalis-checkout-2 .payment-option {
  background: transparent;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.kabdalis-checkout-2 .payment-option:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 2%, transparent);
}

.kabdalis-checkout-2 .payment-option.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.kabdalis-checkout-2 .payment-option.selected .payment-icon,
.kabdalis-checkout-2 .payment-option.selected .payment-title {
  color: var(--accent);
}

.kabdalis-checkout-2 .payment-option label {
  display: block;
  cursor: pointer;
  margin: 0;
  width: 100%;
}

.kabdalis-checkout-2 .payment-option input[type="radio"] {
  margin: 0;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.kabdalis-checkout-2 .payment-option-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.kabdalis-checkout-2 .payment-icon {
  font-size: 28px;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--accent) 70%, transparent);
  margin-top: 2px;
  width: 32px;
  text-align: center;
}

.kabdalis-checkout-2 .payment-option input[type="radio"]:checked ~ .payment-option-content .payment-icon {
  color: var(--accent);
}

.kabdalis-checkout-2 .payment-text {
  flex: 1;
}

.kabdalis-checkout-2 .payment-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
  line-height: 1.4;
}

.kabdalis-checkout-2 .payment-option input[type="radio"]:checked ~ .payment-option-content .payment-title {
  color: var(--accent);
}

.kabdalis-checkout-2 .payment-description {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.kabdalis-checkout-2 .nets-container {
  margin-top: 24px;
  padding: 20px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* ============================================
   CONFIRMATION
   ============================================ */

.kabdalis-checkout-2 .booking-confirmation {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid var(--line);
  max-width: 800px;
  margin: 0 auto;
}

.kabdalis-checkout-2 .confirmation-header {
  text-align: center;
  margin-bottom: 32px;
}

.kabdalis-checkout-2 .confirmation-header h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--ok);
  margin-bottom: 8px;
}

.kabdalis-checkout-2 .confirmation-actions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ============================================
   STEP 1 CONTENT - Clean Simple Design
   ============================================ */

.kabdalis-checkout-2 .checkout-step1-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================================
   CHECKOUT CARD - Base card style
   ============================================ */

.kabdalis-checkout-2 .checkout-card {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.2s ease;
}

.kabdalis-checkout-2 .checkout-card-accommodation:hover {
  box-shadow: none;
}

.kabdalis-checkout-2 .checkout-card-subtitle {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 400;
}

.kabdalis-checkout-2 .checkout-card-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 40%, transparent);
}

.kabdalis-checkout-2 .checkout-card-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.kabdalis-checkout-2 .checkout-card-body {
  padding: 24px;
}

.kabdalis-checkout-2 .checkout-card-summary-contact,
.kabdalis-checkout-2 .checkout-card-summary-booking {
  margin-bottom: 16px;
}

.kabdalis-checkout-2 .checkout-card-summary-booking:last-child {
  margin-bottom: 0;
}

/* ============================================
   ACCOMMODATION CARD - Prominent
   ============================================ */

.kabdalis-checkout-2 .checkout-card-accommodation {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 10%, transparent);
}

.kabdalis-checkout-2 .checkout-card-accommodation .checkout-card-header {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Accommodation display - compact spacing */
.kabdalis-checkout-2 .accommodation-display {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kabdalis-checkout-2 .accommodation-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.kabdalis-checkout-2 .accommodation-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 300px;
  border-radius: var(--radius-sm);
}

.kabdalis-checkout-2 .accommodation-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 8px;
}

/* Discrete "read more about accommodation" link under the name */
.kabdalis-checkout-2 .accommodation-readmore {
  display: inline-block;
  margin: -2px 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kabdalis-checkout-2 .accommodation-readmore:hover {
  color: var(--accent);
}

.kabdalis-checkout-2 .accommodation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0;
  line-height: 0;
}

.kabdalis-checkout-2 .accommodation-meta::before,
.kabdalis-checkout-2 .accommodation-meta::after {
  content: none;
  display: none;
}

.kabdalis-checkout-2 .accommodation-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  font-weight: 500;
  box-sizing: border-box;
  white-space: nowrap;
}

.kabdalis-checkout-2 .accommodation-meta-item-slopes {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}

.kabdalis-checkout-2 .accommodation-meta-item i {
  font-size: 14px;
  color: var(--accent);
  opacity: 0.9;
  flex-shrink: 0;
}

.kabdalis-checkout-2 .accommodation-meta-item-slopes i {
  color: var(--accent);
  opacity: 1;
}

.kabdalis-checkout-2 .accommodation-meta-item span {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink-soft);
}

.kabdalis-checkout-2 .accommodation-meta-item-slopes span {
  color: var(--accent);
  font-weight: 600;
}

.kabdalis-checkout-2 .accommodation-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.kabdalis-checkout-2 .accommodation-date-item {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.kabdalis-checkout-2 .accommodation-date-item .date-label {
  font-weight: 500;
  min-width: 80px;
  margin-right: 12px;
  color: var(--ink-soft);
}

.kabdalis-checkout-2 .accommodation-date-item .date-value {
  font-weight: 600;
  color: var(--ink);
}

.kabdalis-checkout-2 .accommodation-date-item .date-value .price-original {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: line-through;
  margin-right: 6px;
}

.kabdalis-checkout-2 .accommodation-date-item .date-value .price-discounted,
.kabdalis-checkout-2 .accommodation-date-item .date-value .price {
  color: var(--accent);
  font-weight: 600;
}

/* Legacy price row styles - kept for backward compatibility */
.kabdalis-checkout-2 .accommodation-price-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.kabdalis-checkout-2 .accommodation-price-value {
  text-align: right;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.kabdalis-checkout-2 .accommodation-price-value .price-original {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: line-through;
  margin-right: 8px;
}

.kabdalis-checkout-2 .accommodation-price-value .price-discounted,
.kabdalis-checkout-2 .accommodation-price-value .price {
  color: var(--accent);
}

/* ============================================
   CANCELLATION PROTECTION CARD
   ============================================ */

.kabdalis-checkout-2 .checkout-card-cancellation {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.kabdalis-checkout-2 .cancellation-info {
  margin-bottom: 20px;
}

.kabdalis-checkout-2 .cancellation-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.kabdalis-checkout-2 .cancellation-benefits li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.kabdalis-checkout-2 .cancellation-benefits li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}

.kabdalis-checkout-2 .cancellation-benefits li:last-child {
  margin-bottom: 0;
}

.kabdalis-checkout-2 .cancellation-selection {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* No double line when selection buttons are the only content in card body */
.kabdalis-checkout-2 .checkout-card-body > .cancellation-selection:first-child {
  border-top: none;
  padding-top: 0;
}

.kabdalis-checkout-2 .btn-yes-no {
  flex: 1;
  padding: 16px 24px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 500;
  min-height: 56px; /* Ensure minimum touch target size */
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent);
}

.kabdalis-checkout-2 .btn-yes-no:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: var(--surface);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translateY(-1px);
}

.kabdalis-checkout-2 .btn-yes-no:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.kabdalis-checkout-2 .btn-yes-no.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 25%, transparent);
  border-width: 3px;
}

.kabdalis-checkout-2 .btn-yes-no-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
}

.kabdalis-checkout-2 .btn-yes-no-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.kabdalis-checkout-2 .btn-yes-no-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.3;
}

.kabdalis-checkout-2 .btn-yes-no-subtitle-left {
  text-align: left;
}

.kabdalis-checkout-2 .btn-yes-no.selected .btn-yes-no-label {
  color: var(--accent);
  font-weight: 700;
}

.kabdalis-checkout-2 .btn-yes-no.selected .btn-yes-no-subtitle {
  color: color-mix(in srgb, var(--accent) 80%, transparent);
}

.kabdalis-checkout-2 .btn-yes-no-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.kabdalis-checkout-2 .btn-yes-no.selected .btn-yes-no-price {
  color: var(--accent);
  font-weight: 700;
}

/* ============================================
   CLEANING CARD
   ============================================ */

.kabdalis-checkout-2 .checkout-card-cleaning {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.kabdalis-checkout-2 .cleaning-info {
  margin-bottom: 20px;
}

.kabdalis-checkout-2 .cleaning-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.kabdalis-checkout-2 .cleaning-benefits li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.kabdalis-checkout-2 .cleaning-benefits li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}

.kabdalis-checkout-2 .cleaning-benefits li:last-child {
  margin-bottom: 0;
}

.kabdalis-checkout-2 .cleaning-selection {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.kabdalis-checkout-2 .cleaning-info-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ============================================
   LINEN CARD
   ============================================ */

.kabdalis-checkout-2 .checkout-card-linen {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.kabdalis-checkout-2 .linen-info {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.kabdalis-checkout-2 .linen-subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.kabdalis-checkout-2 .tillval-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.kabdalis-checkout-2 .qty-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kabdalis-checkout-2 .qty-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}

.kabdalis-checkout-2 .qty-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

.kabdalis-checkout-2 .qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.kabdalis-checkout-2 .qty-input {
  width: 70px;
  height: 36px;
  text-align: center;
  border: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
}

/* Linen quantity dropdown inside button */
.kabdalis-checkout-2 .btn-yes-no-linen-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.kabdalis-checkout-2 .linen-qty-label-text {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
}

.kabdalis-checkout-2 .linen-qty-select {
  width: 70px;
  height: 36px;
  padding: 0 28px 0 12px;
  border: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230B1115' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
}

.kabdalis-checkout-2 .btn-yes-no-linen .linen-qty-select:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.kabdalis-checkout-2 .btn-yes-no-linen .linen-qty-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

.kabdalis-checkout-2 .tillval-price-display {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.kabdalis-checkout-2 .tillval-price-total {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  line-height: 1.3;
}

.kabdalis-checkout-2 .tillval-price-unit {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.3;
  white-space: nowrap;
}

.kabdalis-checkout-2 .tillval-price-empty {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

.kabdalis-checkout-2 .toggle-controls {
  display: flex;
  align-items: center;
}

.kabdalis-checkout-2 .btn-yes-no-toggle {
  padding: 10px 24px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  min-width: 80px;
}

.kabdalis-checkout-2 .btn-yes-no-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
}

.kabdalis-checkout-2 .btn-yes-no-toggle.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ============================================
   TOTAL
   ============================================ */

.kabdalis-checkout-2 .checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius);
  margin-top: 8px;
}

.kabdalis-checkout-2 .checkout-total-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  display: flex;
  align-items: center;
}

.kabdalis-checkout-2 .checkout-total-amount {
  text-align: right;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.kabdalis-checkout-2 .checkout-total-amount .price-original {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: line-through;
  margin-right: 8px;
}

.kabdalis-checkout-2 .checkout-total-amount .price-discounted,
.kabdalis-checkout-2 .checkout-total-amount .price {
  color: var(--accent);
}

/* ============================================
   CONTINUE BUTTON - Enhanced Prominence
   ============================================ */

.kabdalis-checkout-2 .btn-continue {
  width: 100%;
  margin-top: 32px;
  padding: 18px 32px;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 25%, transparent);
  letter-spacing: 0.02em;
}

.kabdalis-checkout-2 .btn-continue::after {
  content: '';
  margin-left: 0;
  font-size: 20px;
  transition: transform 0.2s ease;
}

.kabdalis-checkout-2 .btn-continue:hover:not(:disabled)::after {
  transform: translateX(4px);
}

/* Step actions hint text */
.kabdalis-checkout-2 .step-actions-hint {
  width: 100%;
  margin-bottom: 16px;
  text-align: center;
}

.kabdalis-checkout-2 .step-actions-hint-text {
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

/* Step actions container - enhanced styling (consolidated above) */

.kabdalis-checkout-2 .step-actions .btn-primary {
  min-width: 200px;
  font-size: 17px;
  font-weight: 700;
  padding: 16px 32px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 25%, transparent);
  position: relative;
}

.kabdalis-checkout-2 .step-actions .btn-primary::after {
  content: '';
  margin-left: 0;
  font-size: 18px;
  transition: transform 0.2s ease;
  display: inline-block;
}

.kabdalis-checkout-2 .step-actions .btn-primary:hover:not(:disabled)::after {
  transform: translateX(4px);
}

/* Make continue button stand out more */
.kabdalis-checkout-2 .btn-continue {
  position: relative;
  animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {
  0%, 100% {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 25%, transparent);
  }
  50% {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
  }
}

/* Highlight attention animation when option is selected */
.kabdalis-checkout-2 .btn-continue.highlight-attention {
  animation: highlight-pulse 0.6s ease-in-out;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
  transform: scale(1.02);
}

@keyframes highlight-pulse {
  0%, 100% {
    transform: scale(1.02);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 50%, transparent);
  }
}

/* ============================================
   EMPTY CART NOTICE
   ============================================ */

.kabdalis-checkout-2 .checkout-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--warn) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.kabdalis-checkout-2 .checkout-notice__icon {
  font-size: 18px;
  color: var(--warn);
  flex-shrink: 0;
  margin-top: 2px;
}

.kabdalis-checkout-2 .checkout-notice__body {
  flex: 1;
  min-width: 0;
}

.kabdalis-checkout-2 .checkout-notice__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.kabdalis-checkout-2 .checkout-notice__text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ============================================
   LOADING & MODALS
   ============================================ */

.kabdalis-checkout-2 {
  position: relative;
}

.kabdalis-checkout-2 .checkout-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.kabdalis-checkout-2 .loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   MODAL
   ============================================ */

.kabdalis-checkout-2 .checkout-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.kabdalis-checkout-2 .checkout-modal.active {
  display: flex;
}

.kabdalis-checkout-2 .checkout-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--ink) 50%, transparent);
  cursor: pointer;
}

.kabdalis-checkout-2 .checkout-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.kabdalis-checkout-2 .checkout-modal-content {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--ink) 20%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kabdalis-checkout-2 .checkout-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.kabdalis-checkout-2 .checkout-modal-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  line-height: 1.4;
}

.kabdalis-checkout-2 .checkout-modal-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.kabdalis-checkout-2 .checkout-modal-close:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
}

.kabdalis-checkout-2 .checkout-modal-body {
  padding: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  flex: 1;
  overflow-y: auto;
}

.kabdalis-checkout-2 .checkout-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.kabdalis-checkout-2 .checkout-modal-ok {
  min-width: 80px;
}

body.checkout-modal-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .checkout-modal {
    padding: 16px;
  }
  
  .checkout-modal-dialog {
    max-width: 100%;
  }
  
  .checkout-modal-header {
    padding: 16px 20px;
  }
  
  .checkout-modal-title {
    font-size: 18px;
  }
  
  .checkout-modal-body {
    padding: 20px;
    font-size: 14px;
  }
  
  .checkout-modal-footer {
    padding: 12px 20px;
    flex-direction: column;
  }
  
  .checkout-modal-ok {
    width: 100%;
  }
}

/* ============================================
   MOBILE: ADDITIONAL ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
  .checkout-step1-content {
    gap: 16px;
  }
  
  .checkout-card-header {
    padding: 16px 20px;
  }
  
  .kabdalis-checkout-2 .checkout-card-body {
    padding: 20px;
  }
  
  .kabdalis-checkout-2 .checkout-card-title {
    font-size: 18px;
  }
  
  .kabdalis-checkout-2 .accommodation-name {
    font-size: 18px;
  }
  
  .kabdalis-checkout-2 .accommodation-date-item {
    font-size: 14px;
  }
  
  .kabdalis-checkout-2 .accommodation-date-item .date-label {
    min-width: 70px;
    margin-right: 10px;
  }
  
  .kabdalis-checkout-2 .accommodation-price-row {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  
  .kabdalis-checkout-2 .accommodation-price-value {
    font-size: 20px;
    text-align: right;
  }
  
  .kabdalis-checkout-2 .cancellation-benefits li {
    font-size: 13px;
    padding-left: 20px;
  }
  
  .kabdalis-checkout-2 .cancellation-selection {
    flex-direction: column;
    gap: 10px;
  }
  
  .kabdalis-checkout-2 .tillval-controls-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  
  .kabdalis-checkout-2 .tillval-price-info {
    align-items: flex-end;
  }
  
  .kabdalis-checkout-2 .tillval-price-total {
    text-align: right;
  }
  
  .kabdalis-checkout-2 .checkout-total {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }
  
  .kabdalis-checkout-2 .checkout-total-label {
    font-size: 16px;
    line-height: 1.2;
    display: flex;
    align-items: center;
  }
  
  .kabdalis-checkout-2 .checkout-total-amount {
    font-size: 22px;
    text-align: right;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  .kabdalis-checkout-2 .summary-section-compact {
    padding: 12px;
  }
  
  .kabdalis-checkout-2 .summary-info-compact {
    font-size: 13px;
    padding: 1px 0;
  }
  
  .kabdalis-checkout-2 .summary-info-compact.summary-info-with-icon i {
    font-size: 12px;
    width: 14px;
  }
  
  .kabdalis-checkout-2 .summary-table {
    font-size: 13px;
  }
  
  .kabdalis-checkout-2 .summary-table-desc {
    padding: 8px 0;
    max-width: 60%;
  }
  
  .kabdalis-checkout-2 .summary-table-price {
    padding: 8px 0 8px 8px;
    font-size: 13px;
  }
  
  .kabdalis-checkout-2 .checkout-card-payment {
    margin: 24px 0;
  }
  
  .kabdalis-checkout-2 .checkout-card-payment .payment-options-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
  }
  
  .kabdalis-checkout-2 .payment-option {
    padding: 14px;
  }
  
  .kabdalis-checkout-2 .nets-container {
    margin-top: 20px;
    padding: 16px;
  }
  
  .kabdalis-checkout-2 .booking-confirmation {
    padding: 20px;
  }
  
  .kabdalis-checkout-2 .confirmation-header h2 {
    font-size: 24px;
  }
}

/* Bankgiro Payment Details Card */
.kabdalis-checkout-2 .checkout-card-bankgiro {
  margin-top: 16px;
}

.kabdalis-checkout-2 .payment-schedule {
  margin: 0px 0;
}

.kabdalis-checkout-2 .payment-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}


.kabdalis-checkout-2 .payment-schedule-table tbody tr {
  border-bottom: 1px solid var(--line);
}

.kabdalis-checkout-2 .payment-schedule-table tbody tr:last-child {
  border-bottom: none;
}

.kabdalis-checkout-2 .payment-schedule-table td {
  padding: 12px 16px;
  color: var(--ink);
  vertical-align: top;
}

.kabdalis-checkout-2 .payment-schedule-table td.text-right {
  text-align: right;
  vertical-align: middle;
}

.kabdalis-checkout-2 .payment-schedule-table .payment-amount {
  white-space: nowrap;
}

.kabdalis-checkout-2 .payment-label {
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}

.kabdalis-checkout-2 .payment-due-date {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.kabdalis-checkout-2 .payment-schedule-table tfoot {
  border-top: 2px solid var(--line);
}

.kabdalis-checkout-2 .payment-schedule-table tfoot td {
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
}

.kabdalis-checkout-2 .payment-instructions {
  margin-top: 24px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--accent);
}

.kabdalis-checkout-2 .payment-instructions p {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
}

.kabdalis-checkout-2 .payment-submit-container {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.kabdalis-checkout-2 .payment-submit-container .btn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
}

/* ============================================
   CONFIRMATION EMAIL LAYOUT
   ============================================ */

.kabdalis-checkout-2 .confirmation-email-layout {
  text-align: left;
}

.kabdalis-checkout-2 .confirmation-loading-msg {
  margin: 0;
  padding: 16px;
  font-size: 15px;
  color: var(--ink-soft);
}

.kabdalis-checkout-2 .confirmation-title-main {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: color-mix(in srgb, var(--accent) 95%, transparent) !important;
  margin: 0 0 8px 0 !important;
}

.kabdalis-checkout-2 .confirmation-booking-no {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: color-mix(in srgb, var(--accent) 95%, transparent) !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: 0.5px;
}

.kabdalis-checkout-2 .confirmation-sub {
  font-size: 16px;
  margin: 0;
  color: var(--ink-soft);
}

.kabdalis-checkout-2 .confirmation-intro {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--accent);
  font-size: 15px;
}

.kabdalis-checkout-2 .conf-email-block {
  margin-bottom: 24px;
}

.kabdalis-checkout-2 .conf-h2 {
  font-size: 17px !important;
  font-weight: 600 !important;
  margin: 0 0 10px 0 !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

.kabdalis-checkout-2 .conf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.kabdalis-checkout-2 .conf-table td,
.kabdalis-checkout-2 .conf-table th {
  padding: 8px 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.kabdalis-checkout-2 .conf-table tr:last-child td,
.kabdalis-checkout-2 .conf-table tr:last-child th {
  border-bottom: none;
}

.kabdalis-checkout-2 .conf-table-summary .conf-th-total {
  padding-top: 12px;
  font-size: 16px;
}

.kabdalis-checkout-2 .conf-td-right {
  text-align: right;
}

.kabdalis-checkout-2 .conf-td-left {
  text-align: left;
}

.kabdalis-checkout-2 .conf-comment {
  margin: 12px 0 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.kabdalis-checkout-2 .conf-pay-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--surface);
}

.kabdalis-checkout-2 .conf-pay-card-title {
  padding: 10px 14px;
  font-weight: 600;
  font-size: 15px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-bottom: 1px solid var(--line);
}

.kabdalis-checkout-2 .conf-pay-card-body {
  padding: 14px 16px 16px;
  font-size: 14px;
  line-height: 1.55;
}

.kabdalis-checkout-2 .conf-pay-amount {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
}

.kabdalis-checkout-2 .conf-pay-details {
  margin-bottom: 8px;
  color: var(--ink-soft);
}

.kabdalis-checkout-2 .conf-paid {
  color: var(--ok);
  font-weight: 600;
  font-size: 14px;
}

.kabdalis-checkout-2 .conf-overdue {
  color: var(--no);
  font-weight: 600;
  font-size: 14px;
}

.kabdalis-checkout-2 .conf-bank-box {
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: 12px 16px 16px;
}

.kabdalis-checkout-2 .conf-footer-note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.kabdalis-checkout-2 .conf-app-card {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 4%, transparent) 0%, color-mix(in srgb, var(--accent) 10%, transparent) 100%);
}

.kabdalis-checkout-2 .conf-app-card-title {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
}

.kabdalis-checkout-2 .conf-app-card-text {
  margin: 0 0 14px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.kabdalis-checkout-2 .conf-app-card-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kabdalis-checkout-2 .conf-app-badge {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-accent) !important;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  transition: opacity 0.2s;
}

.kabdalis-checkout-2 .conf-app-badge:hover {
  opacity: 0.88;
}

/* ============================================
   KABDALIS 2 DESIGN-SYSTEM ALIGNMENT
   Genuine headings use the theme display font (Source Serif 4 in warm,
   Hanken Grotesk in crisp/minimal) + direction-aware weight/tracking.
   `.checkout-title` is intentionally excluded — it's a small uppercase
   eyebrow label, not a heading, so it keeps the body font.
   ============================================ */
.kabdalis-checkout-2 .form-section-title,
.kabdalis-checkout-2 .summary-section-title,
.kabdalis-checkout-2 .checkout-card-title,
.kabdalis-checkout-2 .booking-card-title,
.kabdalis-checkout-2 .cart-section-title,
.kabdalis-checkout-2 .add-to-cart-title,
.kabdalis-checkout-2 .payment-title,
.kabdalis-checkout-2 .checkout-modal-title,
.kabdalis-checkout-2 .conf-pay-card-title,
.kabdalis-checkout-2 .conf-app-card-title,
.kabdalis-checkout-2 .action-buttons-title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
}

/* ── Multi-item cart (staging, data-multi-item="1") ─────────────────────────
   Scoped extras for the generic line-item renderer. Everything else reuses the
   existing .checkout-card / .summary-table / .btn-secondary styling. */
.kabdalis-checkout-2.checkout-multi-item .checkout-card-accommodation .checkout-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kabdalis-checkout-2 .accommodation-remove {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
  padding: 6px 9px;
  line-height: 1;
  transition: color .15s, border-color .15s, background .15s;
}
.kabdalis-checkout-2 .accommodation-remove:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
}
.kabdalis-checkout-2 .checkout-card-addmore .addmore-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kabdalis-checkout-2 .addmore-btn {
  flex: 1 1 auto;
  text-align: center;
  text-decoration: none;
}
.kabdalis-checkout-2 .addmore-panel {
  margin-top: 16px;
}
.kabdalis-checkout-2 .addmore-panel:empty {
  margin-top: 0;
}

/* ── Inline product pickers (multi-item "Lägg till mer") ─────────────────── */
.kabdalis-checkout-2 .addmore-picker {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface);
}
.kabdalis-checkout-2 .addmore-picker-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: var(--display-w);
}
.kabdalis-checkout-2 .addmore-loading {
  text-align: center;
  padding: 24px;
  color: var(--muted);
}
.kabdalis-checkout-2 .addmore-note {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 0;
}
.kabdalis-checkout-2 .addmore-picker-actions {
  margin-top: 14px;
}
.kabdalis-checkout-2 .addmore-liftpass-table {
  width: 100%;
  border-collapse: collapse;
}
.kabdalis-checkout-2 .addmore-lp-row td {
  padding: 8px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  vertical-align: middle;
}
.kabdalis-checkout-2 .addmore-lp-name { font-weight: 600; }
.kabdalis-checkout-2 .addmore-lp-qty label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.kabdalis-checkout-2 .addmore-lp-input {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.kabdalis-checkout-2 .addmore-lp-price { font-size: 13px; color: var(--ink-soft); }
.kabdalis-checkout-2 .addmore-ski-person,
.kabdalis-checkout-2 .addmore-sp-person {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.kabdalis-checkout-2 .addmore-ski-field,
.kabdalis-checkout-2 .addmore-sp-name,
.kabdalis-checkout-2 .addmore-sp-bdate {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  flex: 1 1 120px;
  min-width: 110px;
}
.kabdalis-checkout-2 .addmore-ski-remove,
.kabdalis-checkout-2 .addmore-sp-remove {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  padding: 7px 9px;
}
.kabdalis-checkout-2 .addmore-ski-remove:hover,
.kabdalis-checkout-2 .addmore-sp-remove:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.kabdalis-checkout-2 .addmore-ski-add-person,
.kabdalis-checkout-2 .addmore-sp-add-person {
  margin-top: 10px;
}

/* ============================================================================
   UX/CODE-QUALITY PASS (kabdalis-checkout-2 review)
   New styles for: inline SVG icons, mini-summary, skeletons, sticky mobile
   actions, focus-visible, tap targets, payment trust row, confirmation hero,
   "included" chip, lift-hours table, form legend/hints, reduced motion.
   ============================================================================ */

/* --- Inline SVG icons (item 18) --- */
.kabdalis-checkout-2 .kab-ico {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
}
@keyframes kab-spin { to { transform: rotate(360deg); } }
.kabdalis-checkout-2 .kab-ico.kab-spin { animation: kab-spin 0.8s linear infinite; }
.kabdalis-checkout-2 .accommodation-meta-item .kab-ico { width: 16px; height: 16px; color: var(--accent); }
.kabdalis-checkout-2 .checkout-notice__icon { width: 20px; height: 20px; }
.kabdalis-checkout-2 .summary-info-with-icon .kab-ico { width: 15px; height: 15px; color: var(--muted); }
.kabdalis-checkout-2 .payment-icon .kab-ico { width: 24px; height: 24px; }
.kabdalis-checkout-2 .summary-item-remove .kab-ico,
.kabdalis-checkout-2 .accommodation-remove .kab-ico { width: 16px; height: 16px; }

/* --- Persistent mini order summary on step 2 (item 7) --- */
.kabdalis-checkout-2 .checkout-mini-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.kabdalis-checkout-2 .checkout-mini-summary__label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.kabdalis-checkout-2 .checkout-mini-summary__line { font-weight: 600; color: var(--ink); }
.kabdalis-checkout-2 .checkout-mini-summary__total { font-weight: 700; white-space: nowrap; }

/* --- Skeleton loaders (item 15) --- */
.kabdalis-checkout-2 .checkout-skeleton-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.kabdalis-checkout-2 .skeleton-line {
  height: 14px;
  border-radius: 6px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, var(--surface2) 25%, var(--bg2) 37%, var(--surface2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}
.kabdalis-checkout-2 .skeleton-line:last-child { margin-bottom: 0; }
.kabdalis-checkout-2 .skeleton-line--title { width: 40%; height: 18px; }
.kabdalis-checkout-2 .skeleton-line--media { height: 150px; border-radius: var(--radius-sm); }
.kabdalis-checkout-2 .skeleton-line--short { width: 55%; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --- Empty-cart CTA (item 6) --- */
.kabdalis-checkout-2 .checkout-empty-cta { display: inline-block; margin-top: 14px; }

/* --- Payment trust cues (item 14) --- */
.kabdalis-checkout-2 .payment-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.kabdalis-checkout-2 .payment-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.kabdalis-checkout-2 .payment-trust__item .kab-ico { width: 16px; height: 16px; color: var(--accent); }

/* --- Payment option: whole card focusable + clearer hit area (item 38) --- */
.kabdalis-checkout-2 .payment-option label { cursor: pointer; display: block; }
.kabdalis-checkout-2 .payment-option:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- "Included" chip + tillval/cleaning info (items 21, 43) --- */
.kabdalis-checkout-2 .checkout-included-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.kabdalis-checkout-2 .tillval-price-empty { color: var(--ink-soft); }
.kabdalis-checkout-2 .cleaning-info { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.kabdalis-checkout-2 .cleaning-info__text { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; }

/* --- Check-in/out sub-label (item 31) --- */
.kabdalis-checkout-2 .date-time { color: var(--ink-soft); font-weight: 400; }

/* --- Lift-hours table, responsive (item 39) --- */
.kabdalis-checkout-2 .lift-hours-table { margin-top: 8px; border-collapse: collapse; width: 100%; font-size: 13px; }
.kabdalis-checkout-2 .lift-hours-table__day { vertical-align: top; padding: 4px 8px 4px 0; white-space: nowrap; font-weight: 600; }
.kabdalis-checkout-2 .lift-hours-table__lifts { vertical-align: top; padding: 4px 0; }
@media (max-width: 480px) {
  .kabdalis-checkout-2 .lift-hours-table,
  .kabdalis-checkout-2 .lift-hours-table tbody,
  .kabdalis-checkout-2 .lift-hours-table tr,
  .kabdalis-checkout-2 .lift-hours-table td { display: block; width: 100%; }
  .kabdalis-checkout-2 .lift-hours-table__day { padding: 0; }
  .kabdalis-checkout-2 .lift-hours-table__lifts { padding: 0 0 8px; }
}

/* --- Confirmation hero (item 17) --- */
.kabdalis-checkout-2 .confirmation-hero { text-align: center; padding: 8px 0 4px; }
.kabdalis-checkout-2 .confirmation-hero__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.kabdalis-checkout-2 .confirmation-hero__icon .kab-ico { width: 28px; height: 28px; }
.kabdalis-checkout-2 .confirmation-hero__title { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.kabdalis-checkout-2 .confirmation-hero .confirmation-booking-no { font-size: 15px; color: var(--ink-soft); margin: 0 0 4px; }
.kabdalis-checkout-2 .confirmation-hero__intro { color: var(--ink-soft); margin: 0; }
.kabdalis-checkout-2 .confirmation-hero__actions { margin-top: 14px; }

/* --- Form legend, hints, error state (items 33, 34, 9) --- */
.kabdalis-checkout-2 .form-required-legend { font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; }
.kabdalis-checkout-2 .form-required-legend .req-mark { color: var(--accent); font-weight: 700; }
.kabdalis-checkout-2 .form-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.kabdalis-checkout-2 .form-group.has-error .form-hint { display: none; }
.kabdalis-checkout-2 input[aria-invalid="true"],
.kabdalis-checkout-2 textarea[aria-invalid="true"] { border-color: var(--danger); }
.kabdalis-checkout-2 .field-error { display: block; margin-top: 5px; font-size: 12.5px; color: var(--danger); }

/* --- Newsletter row grouped with the terms cards (item 42) --- */
.kabdalis-checkout-2 .checkout-newsletter-row {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* --- Branded confirm "danger" button (item 3) --- */
.kabdalis-checkout-2 .btn-danger {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #fff;
}
.kabdalis-checkout-2 .btn-danger:hover { background: var(--danger-strong); border-color: var(--danger-strong); }

/* --- Visible keyboard focus everywhere (item 36) --- */
.kabdalis-checkout-2 .btn:focus-visible,
.kabdalis-checkout-2 .btn-yes-no:focus-visible,
.kabdalis-checkout-2 .addmore-btn:focus-visible,
.kabdalis-checkout-2 .step-box:focus-visible,
.kabdalis-checkout-2 .checkout-modal-close:focus-visible,
.kabdalis-checkout-2 input:focus-visible,
.kabdalis-checkout-2 select:focus-visible,
.kabdalis-checkout-2 textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Touch tap targets ≥44px (item 37) --- */
@media (pointer: coarse) {
  .kabdalis-checkout-2 .summary-item-remove,
  .kabdalis-checkout-2 .accommodation-remove,
  .kabdalis-checkout-2 .checkout-modal-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* The primary action button sits in normal flow at the end of the step content
   (no sticky bottom bar) — users scroll down to find the next button. */
@media (max-width: 600px) {
  .kabdalis-checkout-2 .checkout-step.active .step-actions {
    margin-top: 16px;
    padding: 12px 0;
  }
}

/* --- Collapsible cancellation terms (item 44) --- */
.kabdalis-checkout-2 .cancellation-details { margin-bottom: 16px; }
.kabdalis-checkout-2 .cancellation-summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
  padding: 4px 0;
}
.kabdalis-checkout-2 .cancellation-summary::-webkit-details-marker { display: none; }
.kabdalis-checkout-2 .cancellation-summary::after { content: " ▾"; }
.kabdalis-checkout-2 .cancellation-details[open] .cancellation-summary::after { content: " ▴"; }
.kabdalis-checkout-2 .cancellation-benefits { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); }
.kabdalis-checkout-2 .cancellation-benefits li { margin-bottom: 4px; line-height: 1.5; }
/* On wider screens always show the terms; the summary is decorative there. */
@media (min-width: 601px) {
  .kabdalis-checkout-2 .cancellation-summary { display: none; }
  .kabdalis-checkout-2 .cancellation-details > .cancellation-benefits { display: block; }
}

/* --- Honor prefers-reduced-motion (item 11) --- */
@media (prefers-reduced-motion: reduce) {
  body.kab-checkout-page *,
  .kabdalis-checkout-2 * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Inline accommodation mini-search (date-locked) ─────────────────────────── */
.kabdalis-checkout-2 .addmore-acc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.kabdalis-checkout-2 .addmore-acc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.kabdalis-checkout-2 .addmore-acc-thumb {
  width: 72px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--line) 50%, transparent);
}
.kabdalis-checkout-2 .addmore-acc-info {
  flex: 1 1 140px;
  min-width: 0;
}
.kabdalis-checkout-2 .addmore-acc-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.kabdalis-checkout-2 .addmore-acc-meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.kabdalis-checkout-2 .addmore-acc-add {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── Multi-item compact addon controls (cleaning / linen / cancellation) ─────── */
/* Per-cabin cleaning block = the row + a guidance hint below it. */
.kabdalis-checkout-2 .addon-compact-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.kabdalis-checkout-2 .addon-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.kabdalis-checkout-2 .addon-compact-hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.kabdalis-checkout-2 .addon-linen-qtylabel {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}
.kabdalis-checkout-2 .addon-compact-cleaning { cursor: pointer; }
.kabdalis-checkout-2 .addon-compact-check {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex: 0 0 auto;
  margin: 0;
}
.kabdalis-checkout-2 .addon-compact-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
}
.kabdalis-checkout-2 .addon-compact-price {
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink-soft);
}
.kabdalis-checkout-2 .addon-compact-note { color: var(--muted); font-weight: 400; font-size: 13px; }
.kabdalis-checkout-2 .addon-compact-included { color: var(--muted); font-style: italic; }

/* Booking-level extras card (linen + cancellation, one choice each) */
.kabdalis-checkout-2 .checkout-card-extras .addon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.kabdalis-checkout-2 .checkout-card-extras .addon-row:last-child { border-bottom: 0; }
.kabdalis-checkout-2 .addon-compact-check-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  margin: 0;
}
.kabdalis-checkout-2 .addon-linen-qtywrap { display: inline-flex; align-items: center; gap: 6px; }
.kabdalis-checkout-2 .addon-linen-select {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.kabdalis-checkout-2 .checkout-card-extras .cancellation-details { flex: 1 1 100%; margin-top: 4px; }

/* Inline accommodation mini-search — keep it inside the panel on small screens */
.kabdalis-checkout-2 .addmore-panel,
.kabdalis-checkout-2 .addmore-picker { max-width: 100%; box-sizing: border-box; }
/* break only long words (not every character) — info has a 140px min basis */
.kabdalis-checkout-2 .addmore-acc-name { overflow-wrap: break-word; }
@media (max-width: 560px) {
  .kabdalis-checkout-2 .addmore-acc-thumb { width: 56px; height: 44px; }
  .kabdalis-checkout-2 .addmore-acc-add { flex: 1 1 100%; margin-top: 8px; }
  .kabdalis-checkout-2 .addmore-actions .addmore-btn { flex: 1 1 100%; }
}

/* ── "Ändra datum" control inside the accommodation card (multi-item) ───────── */
.kabdalis-checkout-2 .accommodation-date-change { margin-top: 12px; }
.kabdalis-checkout-2 .btn-change-dates {
  padding: 7px 14px;
  font-size: 13px;
}
/* Inline range calendar.
   Self-contained on purpose: the calendar LOGIC is the shared JS engine
   (window.BookingCalendarUtils), but the styling lives here so it always loads
   in <head> with the rest of the checkout CSS and never depends on a second,
   cross-plugin stylesheet being printed at the right moment. All colours use the
   kabdalis2 theme tokens, so it matches the design system. */
.kabdalis-checkout-2 .cart-dates-form {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--line) 14%, var(--surface));
}
.kabdalis-checkout-2 .cart-dates-form[hidden] { display: none; }
.kabdalis-checkout-2 .cartcal {
  max-width: 340px;
  margin: 0 auto;
}

/* Month nav row */
.kabdalis-checkout-2 .cartcal-calendar-month-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}
.kabdalis-checkout-2 .cartcal-calendar-month {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  min-width: 150px;
  text-align: center;
  text-transform: capitalize;
}
.kabdalis-checkout-2 .cartcal-calendar-prev,
.kabdalis-checkout-2 .cartcal-calendar-next {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}
.kabdalis-checkout-2 .cartcal-calendar-prev:hover:not([disabled]),
.kabdalis-checkout-2 .cartcal-calendar-next:hover:not([disabled]) {
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
}
.kabdalis-checkout-2 .cartcal-calendar-prev[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.kabdalis-checkout-2 .cartcal-calendar-prev .kab-ico,
.kabdalis-checkout-2 .cartcal-calendar-next .kab-ico {
  width: 1em;
  height: 1em;
}

/* 7-column grid */
.kabdalis-checkout-2 .cartcal-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.kabdalis-checkout-2 .cartcal-calendar-day-header {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.5;
  text-align: center;
  padding: 6px 0;
  line-height: 1;
}
.kabdalis-checkout-2 .cartcal-calendar-day-empty {
  aspect-ratio: 1;
}

/* Day cell — plain class selector so it matches no matter what state modifier
   class the JS appends (…-day-start/-range/-end/-disabled). */
.kabdalis-checkout-2 .cartcal-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--line) 30%, var(--surface));
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.kabdalis-checkout-2 .cartcal-calendar-day:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Unavailable / past — greyed and not selectable */
.kabdalis-checkout-2 .cartcal-calendar-day-past,
.kabdalis-checkout-2 .cartcal-calendar-day-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--line) 45%, var(--surface));
  color: var(--muted);
}
.kabdalis-checkout-2 .cartcal-calendar-day-past:hover,
.kabdalis-checkout-2 .cartcal-calendar-day-disabled:hover {
  background: color-mix(in srgb, var(--line) 45%, var(--surface));
  border-color: transparent;
}

/* Selected range — accent fill on the ends, light wash between */
.kabdalis-checkout-2 .cartcal-calendar-day-range {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-radius: 0;
  color: var(--ink);
}
.kabdalis-checkout-2 .cartcal-calendar-day-hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.kabdalis-checkout-2 .cartcal-calendar-day-start,
.kabdalis-checkout-2 .cartcal-calendar-day-end {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.kabdalis-checkout-2 .cartcal-calendar-day-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.kabdalis-checkout-2 .cartcal-calendar-day-end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.kabdalis-checkout-2 .cartcal-calendar-day-start.cartcal-calendar-day-end { border-radius: var(--radius-sm); }
.kabdalis-checkout-2 .cartcal-calendar-day-start:hover,
.kabdalis-checkout-2 .cartcal-calendar-day-end:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.kabdalis-checkout-2 .cartcal-loading,
.kabdalis-checkout-2 .cartcal-error {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 18px 0;
  margin: 0;
}
.kabdalis-checkout-2 .cart-dates-selected {
  margin: 12px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.kabdalis-checkout-2 .cart-dates-apply {
  display: block;
  width: 100%;
}
.kabdalis-checkout-2 .cart-dates-apply[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   Second 50-item pass (items 5,67,69,72,73,74,77,80,100)
   ============================================================ */

/* Item 77: the step circles are <button>s now — strip native button chrome so
   they look identical to the previous <div> circles. */
.kabdalis-checkout-2 .step-box,
#page-top .kab-checkout-topbar-progress .step-box {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Item 80: visually-hidden live region for screen-reader step announcements. */
.checkout-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Item 67: disabled button (e.g. continue while the cart loads). */
.kabdalis-checkout-2 .btn:disabled,
.kabdalis-checkout-2 .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Item 73: provider mark under the card payment option. */
.kabdalis-checkout-2 .payment-provider {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}
.kabdalis-checkout-2 .payment-provider .kab-ico { width: 13px; height: 13px; color: var(--accent); }

/* Item 72: "preliminär" note under the BG/Invoice schedule. */
.kabdalis-checkout-2 .payment-instructions__note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Item 5: spaced lift-warning contact line (was an inline style). */
.kabdalis-checkout-2 .checkout-notice__text--spaced { margin-top: 8px; }

/* Item 69: email "did you mean …?" hint. */
.kabdalis-checkout-2 .email-typo-hint {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
}
.kabdalis-checkout-2 .email-typo-hint:hover { text-decoration: underline; }

/* Item 100: reassurance row at the payment step. */
.kabdalis-checkout-2 .checkout-reassurance {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.kabdalis-checkout-2 .checkout-reassurance__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.kabdalis-checkout-2 .checkout-reassurance__item .kab-ico {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  color: var(--accent);
}

/* Item 74: visible focus ring on modal controls (focus is trapped there). */
#checkout-alert .checkout-modal-content button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   C3: "Förläng vistelsen" upsell card
   ============================================ */
.kabdalis-checkout-2 .checkout-card-extension .extension-offer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.kabdalis-checkout-2 .extension-offer-text {
  font-weight: 600;
  color: var(--ink);
  flex: 1 1 auto;
}
.kabdalis-checkout-2 .extension-offer-price {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.kabdalis-checkout-2 .btn-extension-offer {
  flex: none;
}

/* ============================================
   C7/C9: server payment-plan loading + retry
   ============================================ */
.kabdalis-checkout-2 .payment-plan-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px;
  color: var(--ink-soft);
  font-size: 14px;
}
.kabdalis-checkout-2 .payment-plan-loading .kab-ico {
  width: 20px; height: 20px;
  color: var(--accent);
}
.kabdalis-checkout-2 .payment-plan-retry {
  margin-top: 6px;
}