/* ============================================================
   KLM Booking Form — Design System
   ============================================================ */

/* ── Design tokens (dark theme — default) ───────────────── */
[data-klm-theme="dark"],
.klm-booking-wrap {
    --klm-bg:             #0f0f12;
    --klm-surface:        #1a1a22;
    --klm-surface-raised: #22222e;
    --klm-border:         rgba(255,255,255,.10);
    --klm-text-primary:   #f0ede8;
    --klm-text-secondary: #b8b4ad;
    --klm-text-muted:     #928e88; /* #928e88 on #22222e = 5.4:1, meets WCAG AA */
    --klm-accent:         #d4af37;
    --klm-accent-dim:     rgba(212,175,55,.18);
    --klm-accent-text:    #0f0f12;
    --klm-cta-bg:         #d4af37;
    --klm-cta-text:       #0f0f12;
    --klm-cta-hover:      #e2c24a;
    --klm-error:          #e05c5c;
    --klm-shadow-card:    0 2px 12px rgba(0,0,0,.45);
    --klm-shadow-hover:   0 6px 24px rgba(0,0,0,.6);
    --klm-shadow-modal:   0 16px 48px rgba(0,0,0,.75);

    /* form fields */
    --klm-input-bg:       #13131a;
    --klm-input-border:   rgba(255,255,255,.12);
    --klm-input-focus:    #d4af37;
    --klm-bg-subtle:      #22222e;

    /* progress bar */
    --klm-progress-done:    #d4af37;
    --klm-progress-active:  #d4af37;
    --klm-progress-pending: rgba(255,255,255,.12);
    --klm-progress-line:    rgba(255,255,255,.10);
}

[data-klm-theme="light"] {
    --klm-bg:             #edecea;
    --klm-surface:        #ffffff;
    --klm-surface-raised: #f0ede8;
    --klm-border:         rgba(0,0,0,.14);
    --klm-text-primary:   #111111;
    --klm-text-secondary: #2e2c2a;
    --klm-text-muted:     #4a4845;
    --klm-accent:         #a08228;
    --klm-accent-dim:     rgba(160,130,40,.13);
    --klm-accent-text:    #1a1a20;
    --klm-cta-bg:         #d4af37;
    --klm-cta-text:       #111111;
    --klm-cta-hover:      #b8942e;
    --klm-error:          #c42828;
    --klm-shadow-card:    0 2px 10px rgba(0,0,0,.10);
    --klm-shadow-hover:   0 6px 20px rgba(0,0,0,.16);
    --klm-shadow-modal:   0 16px 48px rgba(0,0,0,.20);

    --klm-input-bg:       #ffffff;
    --klm-input-border:   rgba(0,0,0,.32);
    --klm-input-focus:    #a08228;

    --klm-progress-done:    #d4af37;
    --klm-progress-active:  #d4af37;
    --klm-progress-pending: rgba(0,0,0,.14);
    --klm-progress-line:    rgba(0,0,0,.12);
}

/* ── Wrapper ─────────────────────────────────────────────── */
.klm-booking-wrap {
    font-family: 'Montserrat', sans-serif;
    background: var(--klm-bg);
    color: var(--klm-text-primary);
    min-height: 100vh;
    padding: 32px 16px 80px;
    box-sizing: border-box;
    overflow-x: clip; /* clip (not hidden) so position:sticky on sidebar still works */
    -webkit-font-smoothing: antialiased;
}

/* ── Progress bar ────────────────────────────────────────── */
.klm-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 860px;
    margin: 0 auto 40px;
    padding: 0 12px;
}

.klm-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}

.klm-progress-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--klm-progress-pending);
    border: 2px solid var(--klm-progress-pending);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--klm-text-muted);
    position: relative;
    z-index: 2;
    transition: background .25s, border-color .25s, color .25s;
}

.klm-progress-check {
    display: none;
    position: absolute;
}

.klm-progress-step--done .klm-progress-circle {
    background: var(--klm-progress-done);
    border-color: var(--klm-progress-done);
    color: var(--klm-accent-text);
}
.klm-progress-step--done .klm-progress-num { display: none; }
.klm-progress-step--done .klm-progress-check { display: block; }

.klm-progress-step--active .klm-progress-circle {
    background: var(--klm-progress-active);
    border-color: var(--klm-progress-active);
    color: var(--klm-accent-text);
    box-shadow: 0 0 0 4px var(--klm-accent-dim);
}

.klm-progress-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--klm-text-muted);
    margin-top: 6px;
    white-space: nowrap;
}

.klm-progress-step--active .klm-progress-label,
.klm-progress-step--done .klm-progress-label {
    color: var(--klm-text-secondary);
}

.klm-progress-connector {
    position: absolute;
    top: 15px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 2px;
    background: var(--klm-progress-line);
    z-index: 1;
}

.klm-progress-step--done .klm-progress-connector {
    background: var(--klm-progress-done);
}

/* ── Layout (sidebar + main) ─────────────────────────────── */
.klm-booking-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}

.klm-booking-main {
    min-width: 0;
}

/* ── Steps ───────────────────────────────────────────────── */
.klm-step--hidden {
    display: none;
}

/* scrollIntoView accounts for the sticky site nav offset on all screen sizes */
[id^="klm-step-"] {
    scroll-margin-top: 80px;
}

.klm-step-header {
    margin-bottom: 32px;
}

.klm-step-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--klm-text-primary);
    margin: 0 0 8px;
    line-height: 1.2;
}

.klm-step-subtitle {
    font-size: 14px;
    color: var(--klm-text-secondary);
    margin: 0;
}

/* ── Section headings ────────────────────────────────────── */
.klm-section {
    margin-bottom: 48px;
}

.klm-section-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--klm-text-secondary);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--klm-border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.klm-compare-btn {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--klm-accent);
    background: none;
    border: 1.5px solid var(--klm-accent);
    border-radius: 4px;
    padding: 3px 10px;
    line-height: 1.5;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    height: auto !important;
}
.klm-compare-btn:hover {
    background: var(--klm-accent);
    color: #0d0d0d;
}

.klm-required-note,
.klm-optional-note {
    font-weight: 400;
    font-size: 11px;
    color: var(--klm-text-muted);
    letter-spacing: .02em;
    text-transform: none;
}

/* ── Package cards ───────────────────────────────────────── */
.klm-package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* !important on border/border-radius/padding/display: theme's button selector sets these at higher specificity */
.klm-package-card {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    background: var(--klm-surface);
    border: 1.5px solid var(--klm-border) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    box-shadow: var(--klm-shadow-card);
    transition: border-color .2s, box-shadow .2s, transform .15s;
    font-family: inherit;
    color: var(--klm-text-primary);
}

.klm-package-card:hover {
    border-color: var(--klm-accent);
    box-shadow: var(--klm-shadow-hover);
    transform: translateY(-2px);
}

.klm-package-card[aria-checked="true"] {
    border-color: var(--klm-accent);
    box-shadow: 0 0 0 2px var(--klm-accent), var(--klm-shadow-hover);
    background: var(--klm-surface-raised);
}

.klm-package-media {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background-color: var(--klm-surface-raised);
    overflow: hidden;
    flex-shrink: 0;
}

.klm-package-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.klm-package-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--klm-accent);
    opacity: 0.6;
}

.klm-package-body {
    padding: 20px 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.klm-package-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--klm-text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3;
    margin: 0;
}

/* Description hidden from card — visible only in the Learn More modal */
.klm-package-desc {
    display: none;
}

.klm-package-includes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.klm-pkg-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--klm-surface-raised);
    border: 1px solid var(--klm-border);
    border-radius: 20px;
    padding: 3px 9px 3px 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--klm-text-secondary);
    line-height: 1.5;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden; /* clips long chip text at the chip boundary */
}

.klm-pkg-chip svg {
    flex-shrink: 0;
    color: var(--klm-accent);
}

.klm-package-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--klm-border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    flex-shrink: 0;
    margin-top: auto;
}

.klm-pkg-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto; /* push to right on same line; right-aligns when footer wraps */
}

.klm-package-price {
    font-size: 17px;
    font-weight: 700;
    color: var(--klm-accent);
    letter-spacing: .01em;
    line-height: 1;
}

.klm-pkg-select-indicator {
    display: inline-flex;
    align-items: center;
    background: var(--klm-cta-bg);
    color: var(--klm-cta-text);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}

.klm-package-card:hover .klm-pkg-select-indicator {
    background: var(--klm-cta-hover);
}

.klm-package-card[aria-checked="true"] .klm-pkg-select-indicator {
    background: var(--klm-accent-dim);
    color: var(--klm-text-primary);
    border: 1.5px solid var(--klm-accent);
}

.klm-select-label, .klm-selected-label, .klm-included-label { display: none; }
.klm-package-card .klm-select-label   { display: inline; }
.klm-package-card[aria-checked="true"] .klm-select-label   { display: none; }
.klm-package-card[aria-checked="true"] .klm-selected-label { display: inline; }

/* Bundle covered by selected package */
.klm-bundle-card--pkg-included {
    opacity: .5;
    cursor: default !important;
}
.klm-bundle-card--pkg-included:hover {
    border-color: var(--klm-border) !important;
    box-shadow: var(--klm-shadow-card) !important;
    transform: none !important;
}
.klm-bundle-card--pkg-included .klm-select-label    { display: none; }
.klm-bundle-card--pkg-included .klm-selected-label  { display: none; }
.klm-bundle-card--pkg-included .klm-included-label  { display: inline; }
.klm-bundle-card--pkg-included .klm-pkg-select-indicator {
    background: var(--klm-surface-raised) !important;
    color: var(--klm-text-secondary) !important;
    border: 1.5px solid var(--klm-border);
}

/* ── Bundle cards ────────────────────────────────────────── */
.klm-bundle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.klm-bundle-card {
    /* inherits full layout from .klm-package-card — only override visual distinction */
    position: relative;
}

.klm-bundle-card:hover {
    border-color: var(--klm-accent);
    box-shadow: var(--klm-shadow-hover);
}

.klm-bundle-card[aria-checked="true"] {
    border-color: var(--klm-accent);
    background: var(--klm-accent-dim);
    box-shadow: 0 0 0 1.5px var(--klm-accent);
}

.klm-bundle-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--klm-text-primary);
}

.klm-bundle-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--klm-accent);
}

.klm-bundle-includes {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--klm-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.klm-bundle-includes li::before {
    content: '· ';
    color: var(--klm-accent);
}

.klm-bundle-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--klm-accent);
    color: var(--klm-accent-text);
    font-size: 11px;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.klm-bundle-card[aria-checked="true"] .klm-bundle-check {
    display: flex;
}

/* ── Add-on rows ─────────────────────────────────────────── */
.klm-addon-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* same theme button override as .klm-package-card */
.klm-addon-row {
    height: auto !important;
    background: var(--klm-surface);
    border: 1.5px solid var(--klm-border) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--klm-text-primary);
    transition: border-color .15s, background .15s;
}

.klm-addon-row:hover {
    background: var(--klm-surface-raised);
    border-color: rgba(212,175,55,.4);
}

.klm-addon-row[aria-checked="true"] {
    background: var(--klm-accent-dim);
    border-color: var(--klm-accent);
}

.klm-addon-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.klm-addon-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.klm-addon-desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--klm-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.klm-addon-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.klm-addon-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--klm-accent);
    white-space: nowrap;
}

.klm-addon-toggle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--klm-border);
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    position: relative;
}

.klm-addon-row[aria-checked="true"] .klm-addon-toggle {
    background: var(--klm-accent);
    border-color: var(--klm-accent);
}

.klm-addon-row[aria-checked="true"] .klm-addon-toggle::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--klm-accent-text);
}

/* qty-stepper rows */
.klm-addon-row--has-qty {
    cursor: default;
}
.klm-addon-row--has-qty.klm-addon-row--active {
    border-color: var(--klm-accent);
    background: rgba(212,175,55,.06);
}

.klm-qty-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--klm-border);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.klm-qty-btn {
    background: none;
    border: none;
    color: var(--klm-text-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}
.klm-qty-btn:hover:not(:disabled) {
    background: rgba(212,175,55,.15);
    color: var(--klm-accent);
}
.klm-qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.klm-qty-val {
    min-width: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--klm-text-primary);
    border-left: 1px solid var(--klm-border);
    border-right: 1px solid var(--klm-border);
    padding: 0 4px;
    line-height: 32px;
    display: block;
}

.klm-addon-row--has-qty.klm-addon-row--active .klm-qty-stepper {
    border-color: var(--klm-accent);
}
.klm-addon-row--has-qty.klm-addon-row--active .klm-qty-val {
    border-color: rgba(212,175,55,.4);
    color: var(--klm-accent);
}

/* ── Order summary sidebar ───────────────────────────────── */
.klm-order-summary {
    background: var(--klm-surface);
    border: 1px solid var(--klm-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--klm-shadow-card);
    position: sticky;
    top: 24px; /* overridden by JS to nav-bottom + 16px on init */
    will-change: transform; /* promotes to compositor layer for JS spring translateY animation */
}

.klm-order-summary__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--klm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.klm-order-summary__title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--klm-text-primary);
    margin: 0;
}

.klm-order-summary__drawer-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--klm-accent);
    gap: 6px;
    align-items: center;
    font-family: inherit;
    padding: 0;
}

.klm-order-summary__body {
    padding: 16px 20px;
}

.klm-order-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 40px;
}

.klm-order-empty {
    font-size: 12px;
    color: var(--klm-text-muted);
    font-style: italic;
}

.klm-order-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.klm-order-item__name {
    color: var(--klm-text-secondary);
    line-height: 1.4;
}

.klm-order-item__price {
    color: var(--klm-text-primary);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.klm-order-travel-fee {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 13px;
    color: var(--klm-text-secondary);
}

.klm-order-travel-fee__label {
    font-size: 12px;
    color: var(--klm-text-muted);
}

.klm-order-travel-fee__value {
    font-weight: 600;
    color: #d4a017;
}

.klm-order-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 12px;
    border-top: 1px solid var(--klm-border);
}

.klm-order-total__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--klm-text-muted);
}

.klm-order-total__value {
    font-size: 20px;
    font-weight: 700;
    color: var(--klm-accent);
    font-family: 'Playfair Display', serif;
}

.klm-order-note {
    font-size: 11px;
    color: var(--klm-text-muted);
    margin: 10px 0 0;
    line-height: 1.5;
}

.klm-order-done {
    margin-top: 14px;
    padding: 11px 20px;
    background: var(--klm-surface-raised);
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--klm-text-secondary);
    letter-spacing: .04em;
}

/* theme sets height:3.125rem and display:inline-block on all <button> elements */
/* JS hides this via style.setProperty('display','none','important') which beats this rule */
.klm-order-continue {
    height: auto !important;
    display: block !important;
    width: 100%;
    margin-top: 14px;
    padding: 11px 20px;
    background: var(--klm-cta-bg);
    color: var(--klm-cta-text);
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .2s, box-shadow .2s, transform .1s;
    text-align: center;
    box-sizing: border-box;
}

.klm-order-continue:hover {
    background: var(--klm-cta-hover);
    box-shadow: 0 4px 16px rgba(212,175,55,.35);
}

.klm-order-continue:active {
    transform: scale(.97);
}

/* ── Included-addon states ───────────────────────────────── */
.klm-addon-row--included {
    border-color: var(--klm-accent) !important;
    background: var(--klm-accent-dim) !important;
    cursor: default;
}

.klm-addon-row--included:hover {
    background: var(--klm-accent-dim) !important;
    border-color: var(--klm-accent) !important;
}

.klm-addon-price__orig {
    text-decoration: line-through;
    opacity: 0.45;
    font-size: 11px;
}

.klm-addon-incl-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--klm-accent);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.klm-order-item__incl {
    font-size: 11px;
    font-weight: 700;
    color: var(--klm-accent);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.klm-order-item__incl-note {
    font-size: 10px;
    color: var(--klm-text-muted);
    display: block;
    margin-top: 1px;
}

/* ── Form fields ─────────────────────────────────────────── */
.klm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
}

.klm-col-full {
    grid-column: 1 / -1;
}

.klm-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.klm-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--klm-text-secondary);
}

.klm-req {
    color: var(--klm-error);
    margin-left: 2px;
}

/* High-specificity rule — beats most theme selectors even without !important */
#klm-booking-wrap .klm-input,
#klm-booking-wrap .klm-select,
#klm-booking-wrap .klm-textarea,
#klm-booking-wrap .klm-promo-input {
    color: var(--klm-text-primary) !important;
    background-color: var(--klm-input-bg) !important;
}

.klm-input,
.klm-select,
.klm-textarea {
    background: var(--klm-input-bg);
    border: 1.5px solid var(--klm-input-border);
    border-radius: 8px;
    color: var(--klm-text-primary);
    font-family: inherit;
    font-size: 14px;
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.klm-select {
    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 d='M1 1l5 5 5-5' stroke='%23b8b4ad' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

[data-klm-theme="light"] .klm-select {
    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 d='M1 1l5 5 5-5' stroke='%23555555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.klm-input:focus,
.klm-select:focus,
.klm-textarea:focus {
    border-color: var(--klm-input-focus);
    box-shadow: 0 0 0 3px var(--klm-accent-dim);
}

.klm-input::placeholder,
.klm-textarea::placeholder {
    color: var(--klm-text-muted);
    opacity: 1; /* Firefox reduces placeholder opacity by default */
}

.klm-textarea {
    resize: vertical;
    min-height: 80px;
}

.klm-field-hint {
    font-size: 11px;
    color: var(--klm-text-muted);
    margin: 0;
    line-height: 1.5;
}

.klm-field-hint.klm-rush-note {
    color: var(--klm-accent);
    font-weight: 600;
}

/* ── Custom address autocomplete dropdown ── */
/* PlaceAutocompleteElement (gmp-place-autocomplete) was abandoned: its selection events
   don't escape the shadow DOM. We use AutocompleteSuggestion API with our own input. */
.klm-ac-list {
    position:    absolute;
    top:         100%;
    left:        0;
    right:       0;
    z-index:     9999;
    list-style:  none;
    margin:      0;
    padding:     0;
    background:  var(--klm-surface);
    border:      1px solid var(--klm-border);
    border-top:  none;
    border-radius: 0 0 6px 6px;
    box-shadow:  var(--klm-shadow-card);
    max-height:  280px;
    overflow-y:  auto;
    display:     none;
}

.klm-ac-item {
    padding:     10px 14px;
    font-size:   14px;
    line-height: 1.4;
    cursor:      pointer;
    color:       var(--klm-text-primary, #22222e);
    outline:     none;
}

.klm-ac-item strong {
    font-weight: 600;
}

.klm-ac-item:hover,
.klm-ac-item:focus {
    background: var(--klm-bg-subtle, #f8f6f3);
}

/* ── Travel fee notice (amber) + error (red) ── */
.klm-travel-notice,
.klm-travel-error {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.klm-travel-notice {
    background: rgba(212, 160, 23, 0.12);
    border: 1px solid rgba(212, 160, 23, 0.35);
    color: var(--klm-text-primary);
}

.klm-travel-notice p,
.klm-travel-error p {
    margin: 0 0 8px;
}

.klm-travel-notice p:last-child,
.klm-travel-error p:last-child {
    margin-bottom: 0;
}

.klm-travel-ack-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--klm-text-primary);
    margin-top: 4px;
}

.klm-travel-ack-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--klm-accent);
}

.klm-travel-error {
    background: rgba(220, 53, 69, 0.10);
    border: 1px solid rgba(220, 53, 69, 0.35);
    color: var(--klm-text-primary);
}

.klm-travel-error a {
    color: var(--klm-accent);
}

.klm-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.klm-radio {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--klm-text-secondary);
    cursor: pointer;
}

.klm-radio input[type="radio"] {
    accent-color: var(--klm-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.klm-toggle-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--klm-text-primary);
}

.klm-toggle-label input[type="checkbox"] {
    accent-color: var(--klm-accent);
    width: 16px;
    height: 16px;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.klm-conditional-field,
.klm-conditional-fields {
    transition: opacity .2s;
}

/* ── Navigation buttons ──────────────────────────────────── */
.klm-nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--klm-border);
}

.klm-nav-buttons--final {
    justify-content: flex-end;
    gap: 12px;
}

.klm-btn {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    padding: 12px 28px;
    cursor: pointer;
    border: none;
    transition: background .2s, color .2s, box-shadow .2s, transform .1s;
    letter-spacing: .04em;
}

.klm-btn:active {
    transform: scale(.97);
}

.klm-btn--primary {
    background: var(--klm-cta-bg);
    color: var(--klm-cta-text);
}

.klm-btn--primary:hover {
    background: var(--klm-cta-hover);
    box-shadow: 0 4px 16px rgba(212,175,55,.35);
}

.klm-btn--back {
    background: transparent;
    color: var(--klm-text-muted);
    border: 1.5px solid var(--klm-border);
}

.klm-btn--back:hover {
    color: var(--klm-text-primary);
    border-color: var(--klm-text-secondary);
}

.klm-btn--start-over {
    background: transparent;
    color: var(--klm-accent);
    border: 1.5px solid var(--klm-accent);
}

.klm-btn--start-over:hover {
    background: var(--klm-accent-dim);
}

/* ── Review / confirm step ───────────────────────────────── */
.klm-review-summary {
    background: var(--klm-surface);
    border: 1px solid var(--klm-border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.klm-review-block {
    border-bottom: 1px solid var(--klm-border);
    padding-bottom: 14px;
}

.klm-review-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.klm-review-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.klm-review-block__heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--klm-text-muted);
    margin: 0;
}

/* same theme button height/display override as .klm-order-continue */
.klm-review-edit {
    height: auto !important;
    background: none !important;
    border: 1px solid var(--klm-accent) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--klm-accent);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    display: flex !important;
    align-items: center;
}

.klm-review-edit:hover {
    background: var(--klm-accent) !important;
    color: var(--klm-accent-text);
}

.klm-review-block__content {
    font-size: 14px;
    color: var(--klm-text-primary);
    line-height: 1.6;
}

.klm-review-disclaimer {
    font-size: 12px;
    color: var(--klm-text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* ── Slot picker placeholder ─────────────────────────────── */
.klm-slot-picker--placeholder {
    background: var(--klm-surface);
    border: 1px dashed var(--klm-border);
    border-radius: 10px;
    padding: 40px 24px;
    text-align: center;
    margin-bottom: 32px;
}

.klm-slot-coming-soon p {
    color: var(--klm-text-muted);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

/* ── Booking result area ─────────────────────────────────── */
.klm-booking-result {
    background: var(--klm-surface-raised);
    border: 1px solid var(--klm-border);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    font-size: 15px;
    color: var(--klm-text-primary);
    margin-top: 20px;
}

.klm-input--error,
.klm-select--error {
    border-color: var(--klm-error) !important;
    box-shadow: 0 0 0 3px rgba(224, 92, 92, .15) !important;
}

.klm-field-error {
    font-size: 11px;
    color: var(--klm-error);
    margin: 4px 0 0;
    line-height: 1.4;
}

.klm-booking-result--error {
    border-color: var(--klm-error);
    color: var(--klm-error);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1280px) {
    /* With sidebar visible (>860px), the main area is viewport minus ~240px. At 1280px
       that leaves ~1000px for 3 cards (~320px each) — chips and footer get cramped.
       2-col gives ~480px per card, comfortable at all sidebar-visible widths. */
    .klm-package-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    /* Below 860px the sidebar collapses to a fixed bottom drawer, giving the main
       area full viewport width. Package cards stay 3-col — plenty of room now. */
    .klm-booking-body {
        grid-template-columns: 1fr;
    }

    .klm-booking-main {
        /* Fixed bottom drawer is ~56px tall; 100px gives slot-pill rows full clearance */
        padding-bottom: 100px;
    }

    /* scrollIntoView({block:'start'}) doesn't know about the sticky site nav (~80px);
       scroll-margin-top shifts the snap point so the form clears the nav on step change */
    #klm-booking-wrap {
        scroll-margin-top: 80px;
    }

    .klm-order-summary {
        position: fixed;
        top: auto !important; /* override the JS-set top value — drawer lives at bottom */
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 12px 12px 0 0;
        z-index: 100;
        box-shadow: 0 -4px 24px rgba(0,0,0,.4);
        /* Cap open height so content is scrollable if drawer expands */
        max-height: 70vh;
        overflow-y: auto;
    }

    .klm-order-summary__drawer-toggle {
        display: flex;
    }

    .klm-order-summary__body {
        display: none;
    }

    .klm-order-summary--open .klm-order-summary__body {
        display: block;
    }

    .klm-order-summary--open .klm-drawer-toggle__chevron {
        display: inline-block;
        transform: rotate(180deg);
    }

    /* Help card has no home in the drawer layout — hide it */
    .klm-help-card {
        display: none;
    }

    /* In drawer mode the viewport is phone/tablet — single column for package
       selection gives each card full width and is easier to tap/read. */
    .klm-package-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    /* Compact calendar cells on mobile — aspect-ratio:1 makes rows too tall at phone width */
    .klm-cal-cell {
        aspect-ratio: unset;
        height: 40px;
    }

    .klm-addon-list {
        grid-template-columns: 1fr;
    }

    .klm-form-grid {
        grid-template-columns: 1fr;
    }

    .klm-col-full {
        grid-column: 1;
    }

    .klm-step-title {
        font-size: 22px;
    }

    .klm-progress-label {
        font-size: 0;
    }

    /* Prevent iOS auto-zoom on input focus — triggered when font-size < 16px */
    .klm-input,
    .klm-select,
    .klm-textarea,
    .klm-ac-input,
    input[type="date"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="text"],
    select {
        font-size: 16px !important;
    }
}

@media (max-width: 600px) {
    /* Bundle cards also go to 2-col at narrow phone widths (package grid is
       already 1-col from the 860px rule above). */
    .klm-bundle-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .klm-booking-wrap {
        padding: 20px 12px 100px;
    }

    .klm-btn {
        padding: 11px 20px;
        font-size: 13px;
    }

    .klm-package-grid,
    .klm-bundle-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Calendar slot picker ─────────────────────────────────────────────────── */

.klm-slot-picker {
    margin-top: 20px;
}

.klm-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.klm-cal-nav-btn {
    background: none;
    border: 1.5px solid var(--klm-border);
    border-radius: 6px;
    color: var(--klm-text-secondary);
    width: 34px;
    height: 34px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, color .15s;
    padding: 0;
    flex-shrink: 0;
}

.klm-cal-nav-btn:hover:not(:disabled) {
    border-color: var(--klm-accent);
    color: var(--klm-accent);
}

.klm-cal-nav-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.klm-cal-month-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--klm-text-primary);
    text-align: center;
    flex: 1;
}

.klm-cal-grid {
    user-select: none;
}

.klm-cal-day-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 4px;
}

.klm-cal-dh {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--klm-text-muted);
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 3px 0;
}

.klm-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.klm-cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: default;
    border: 1.5px solid transparent;
    background: none;
}

.klm-cal-cell--available {
    background: var(--klm-accent-dim);
    color: var(--klm-accent);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.klm-cal-cell--available:hover {
    border-color: var(--klm-accent);
}

.klm-cal-cell--selected {
    background: var(--klm-accent) !important;
    color: #0d0d0d !important;
    border-color: var(--klm-accent) !important;
    font-weight: 700;
    cursor: pointer;
}

.klm-cal-cell--unavailable {
    color: var(--klm-text-muted);
    opacity: .4;
}

.klm-cal-cell--disabled {
    color: var(--klm-text-muted);
    opacity: .2;
}

/* ── Slot time pills ──────────────────────────────────────────────────────── */

.klm-slot-times {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--klm-border);
}

.klm-slot-date-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--klm-text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.klm-slot-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.klm-slot-pill {
    background: var(--klm-surface-raised);
    border: 1.5px solid var(--klm-border);
    border-radius: 999px;
    padding: 7px 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--klm-text-primary);
    cursor: pointer;
    transition: border-color .12s, color .12s;
}

.klm-slot-pill:hover {
    border-color: var(--klm-accent);
    color: var(--klm-accent);
}

.klm-slot-pill--selected {
    background: var(--klm-accent);
    border-color: var(--klm-accent);
    color: #0d0d0d;
    font-weight: 700;
}

/* ── Slot hold countdown timer ────────────────────────────────────────────── */

.klm-slot-hold-timer {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    padding: 7px 12px;
    background: var(--klm-accent-dim);
    border: 1px solid color-mix(in srgb, var(--klm-accent) 30%, transparent);
    border-radius: 6px;
    font-size: 12px;
    color: var(--klm-accent);
}

.klm-slot-hold-timer strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
}

.klm-slot-hold-timer--warning {
    background: rgba(220, 50, 50, .12);
    border-color: rgba(220, 50, 50, .35);
    color: var(--klm-error, #e53935);
    animation: klm-timer-pulse 1s ease-in-out infinite;
}

@keyframes klm-timer-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .65; }
}

/* ── Loading spinner ──────────────────────────────────────────────────────── */

.klm-slot-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    color: var(--klm-text-muted);
    font-size: 13px;
}

.klm-spinner {
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 2px solid var(--klm-border);
    border-top-color: var(--klm-accent);
    border-radius: 50%;
    animation: klm-spin .65s linear infinite;
    flex-shrink: 0;
}

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

/* ── Inline errors ────────────────────────────────────────────────────────── */

.klm-slot-error {
    margin-top: 10px;
    padding: 9px 13px;
    background: rgba(220, 50, 50, .1);
    border: 1px solid rgba(220, 50, 50, .3);
    border-radius: 6px;
    font-size: 12px;
    color: var(--klm-error, #e53935);
}

/* ── Placeholder (calendar disabled) ─────────────────────────────────────── */

.klm-slot-picker--placeholder .klm-slot-coming-soon {
    padding: 28px 20px;
    background: var(--klm-surface-raised);
    border: 1.5px dashed var(--klm-border);
    border-radius: 8px;
    text-align: center;
    color: var(--klm-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ── Preference prompt (shown before a radio is selected) ─────────────────── */

.klm-cal-prompt {
    padding: 14px 18px;
    background: var(--klm-surface-raised);
    border: 1.5px dashed var(--klm-border);
    border-radius: 8px;
    color: var(--klm-text-muted);
    font-size: 13px;
    margin-top: 16px;
}

/* ── Day-confirmed message (preference/flexible modes) ────────────────────── */

.klm-day-confirmed {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--klm-accent-dim);
    border: 1px solid color-mix(in srgb, var(--klm-accent) 35%, transparent);
    border-radius: 8px;
    font-size: 13px;
    color: var(--klm-text-primary);
    line-height: 1.6;
}

/* ── Schedule option groups (Time Window / Flexible / Specific) ─────────────── */

.klm-sched-option-group {
    margin-bottom: 12px;
}

.klm-sched-option-group:last-child {
    margin-bottom: 0;
}

.klm-sched-option-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--klm-text-muted);
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--klm-border);
}

.klm-sched-option-group .klm-radio-group {
    margin-top: 6px;
}

/* ── "Need Help?" sidebar card ──────────────────────────────────────────────── */

.klm-help-card {
    background: var(--klm-surface);
    border: 1px solid var(--klm-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--klm-shadow-card);
    margin-top: 12px;
}

.klm-help-card__header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--klm-border);
}

.klm-help-card__title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--klm-text-primary);
    margin: 0;
}

.klm-help-card__body {
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.klm-help-card__link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--klm-text-secondary);
    text-decoration: none;
    transition: color .15s;
}

.klm-help-card__link:hover {
    color: var(--klm-accent);
}

.klm-help-card__icon {
    font-size: 14px;
    opacity: .7;
}

/* ── Learn More span-button (in package/bundle card footer) ─────────── */
.klm-learn-more-btn {
    display: none; /* shown by JS when card content overflows */
    background: var(--klm-surface) !important;
    border: 1.5px solid var(--klm-border) !important;
    border-radius: 6px !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--klm-text-secondary) !important;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
    line-height: 1;
    user-select: none;
}
.klm-learn-more-btn:hover,
.klm-learn-more-btn:focus-visible {
    border-color: var(--klm-accent) !important;
    color: var(--klm-accent) !important;
    outline: none;
}

/* ── Addon expand toggle ─────────────────────────────────────────────── */
.klm-addon-desc-wrap {
    display: block;
}

.klm-addon-expand {
    display: none; /* shown by JS adding --visible class */
    font-size: 11px;
    font-weight: 700;
    color: var(--klm-accent);
    cursor: pointer;
    background: none;
    border: none;
    padding: 3px 0 0;
    line-height: 1.3;
    letter-spacing: .03em;
    user-select: none;
    transition: opacity .15s;
}
.klm-addon-expand--visible {
    display: block;
}
.klm-addon-expand:hover { opacity: .75; }
.klm-addon-desc--expanded {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

/* ── Learn More modal ────────────────────────────────────────────────── */
.klm-learn-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.klm-learn-modal {
    position: relative;
    background: var(--klm-surface);
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .4);
    overflow: hidden;
    color: var(--klm-text-primary);
}

.klm-learn-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 32px;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, .35) !important;
    color: #fff !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.klm-learn-modal-close:hover { background: rgba(0, 0, 0, .55) !important; }

.klm-learn-modal-scroll {
    overflow-y: auto;
    flex: 1;
}

.klm-learn-modal-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--klm-surface-raised);
    flex-shrink: 0;
}

.klm-learn-modal-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.klm-learn-modal-content {
    padding: 24px 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.klm-learn-modal-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--klm-text-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.3;
    padding-right: 40px; /* clear X button when no image */
}

.klm-learn-modal-media + .klm-learn-modal-content .klm-learn-modal-name {
    padding-right: 0;
}

.klm-learn-modal-desc {
    font-size: 14px;
    color: var(--klm-text-secondary);
    line-height: 1.65;
    margin: 0;
}

.klm-learn-modal-includes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.klm-learn-modal-pricing {
    border-top: 1px solid var(--klm-border);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.klm-learn-modal-pricing-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--klm-text-muted);
}

.klm-learn-modal-pricing-detail {
    font-size: 15px;
    color: var(--klm-accent);
    font-weight: 700;
    line-height: 1.6;
}

/* Manual-tier price table inside modal */
.klm-price-tier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 2px;
}
.klm-price-tier-table td {
    padding: 5px 0;
    color: var(--klm-text-primary);
    border-bottom: 1px solid var(--klm-border);
}
.klm-price-tier-table tr:last-child td { border-bottom: none; }
.klm-price-tier-table td:first-child { color: var(--klm-text-secondary); font-size: 12px; }
.klm-price-tier-table td:last-child  { text-align: right; font-weight: 700; color: var(--klm-accent); }

/* ── Package Compare modal ───────────────────────────────────────────── */
.klm-compare-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.klm-compare-modal {
    position: relative;
    background: var(--klm-surface);
    border-radius: 16px;
    max-width: 860px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .4);
    overflow: hidden;
    color: var(--klm-text-primary);
}

.klm-compare-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--klm-border);
    flex-shrink: 0;
    gap: 12px;
}

#klm-compare-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--klm-text-secondary);
}

.klm-compare-close {
    width: 32px;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    padding: 0 !important;
    background: var(--klm-surface-raised) !important;
    color: var(--klm-text-secondary) !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.klm-compare-close:hover {
    background: var(--klm-border) !important;
    color: var(--klm-text-primary) !important;
}

.klm-compare-scroll {
    overflow: auto;
    flex: 1;
    /* horizontal scroll for mobile */
    -webkit-overflow-scrolling: touch;
}

.klm-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 500px; /* prevents collapse before horizontal scroll kicks in */
}

/* Column headers */
.klm-compare-table thead th {
    padding: 14px 16px;
    font-weight: 700;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--klm-text-secondary);
    background: var(--klm-surface);
    border-bottom: 2px solid var(--klm-border);
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Service name column header */
.klm-compare-table thead th:first-child {
    text-align: left;
    z-index: 3; /* above other sticky headers */
}

/* Package price sub-label in header */
.klm-compare-th-price {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--klm-accent);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 3px;
}

/* Body rows */
.klm-compare-table tbody tr {
    border-bottom: 1px solid var(--klm-border);
}
.klm-compare-table tbody tr:last-child {
    border-bottom: none;
}
.klm-compare-table tbody tr:nth-child(even) td {
    background: var(--klm-surface-raised);
}
.klm-compare-table tbody tr:nth-child(even) td:first-child {
    background: var(--klm-surface-raised);
}

/* Service name cell */
.klm-compare-td-service {
    padding: 11px 16px;
    font-size: 12px;
    color: var(--klm-text-primary);
    white-space: nowrap;
    background: var(--klm-surface);
}

/* Sticky first column (service names) */
.klm-compare-table th:first-child,
.klm-compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid var(--klm-border);
}

/* Value cells */
.klm-compare-td {
    padding: 11px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    min-width: 90px;
}

.klm-compare-td--yes {
    color: var(--klm-accent);
}

.klm-compare-td--no {
    color: var(--klm-text-muted);
    font-weight: 400;
    opacity: .4;
}

/* ── Promo code field ─────────────────────────────────────────────────── */
.klm-promo-field {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--klm-border);
}

.klm-promo-input-row {
    display: flex;
    gap: 6px;
}

.klm-promo-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--klm-border);
    border-radius: 6px;
    background: var(--klm-input-bg, var(--klm-surface));
    color: var(--klm-text-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    outline: none;
    transition: border-color .15s;
}
.klm-promo-input:focus {
    border-color: var(--klm-accent);
}
.klm-promo-input:disabled {
    opacity: .7;
}

.klm-promo-apply-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid var(--klm-accent);
    border-radius: 6px;
    background: transparent;
    color: var(--klm-accent);
    cursor: pointer;
    transition: background .15s, color .15s, opacity .15s;
    white-space: nowrap;
}
.klm-promo-apply-btn:hover:not(:disabled) {
    background: var(--klm-accent);
    color: #000;
}
.klm-promo-apply-btn:disabled {
    opacity: .4;
    cursor: default;
}

/* Notice line below the input */
.klm-promo-notice {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    display: none;
}
.klm-promo-notice--success {
    color: #46b450;
    display: block;
}
.klm-promo-notice--error {
    color: #d63638;
    display: block;
}
.klm-promo-notice--warn {
    color: #f0b429;
    display: block;
}

/* Promo discount line in the order summary */
.klm-order-promo-discount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 13px;
    color: #46b450;
}

.klm-order-promo-discount__label {
    font-weight: 500;
}

.klm-order-promo-discount__value {
    font-weight: 600;
}

/* iOS 16px font-size fix for promo input — prevents auto-zoom on focus */
@media (max-width: 767px) {
    .klm-promo-input {
        font-size: 16px !important;
    }
}