/* Cost simulator on the Fees and Costs page: order-type tabs, a four step
   accordion (order / services / shipping / duties), Simulate button and the
   results panel. Tokens, fields, buttons, collapse, table and the shared
   fee-breakdown and the step accordion (.stepper) come from global.css /
   content-pages.css. */

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.luna .simulator__tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.luna .simulator__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--field-height);
    padding: 0 var(--space-lg);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--body-text);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.luna .simulator__tab:hover {
    border-color: var(--accent);
    color: var(--accent-pressed);
}

.luna .simulator__tab.is-active {
    border-color: var(--accent);
    background: var(--tint);
    color: var(--accent-pressed);
    font-weight: var(--font-weight-semibold);
}

/* ── Tab panels (order step) ──────────────────────────────────────────────── */
.luna .simulator__tab-panel {
    display: none;
    gap: var(--space);
    align-items: start;
}

.luna .simulator__tab-panel.is-active {
    display: grid;
}

.luna .simulator__panel-online     { grid-template-columns: minmax(9rem, 11rem) minmax(9rem, 12.5rem) 1fr; }
.luna .simulator__panel-offline    { grid-template-columns: minmax(9rem, 1fr) minmax(12.5rem, 1.4fr); }
.luna .simulator__panel-forwarding { grid-template-columns: minmax(9rem, 12.5rem) 1fr; }

.luna .simulator__span {
    grid-column: 1 / -1;
}

.luna .simulator__radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.luna .simulator__radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    cursor: pointer;
}

.luna .simulator__radio span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Labels share one line box so fee cells and field cells align. */
.luna .simulator__steps .field-label,
.luna .simulator__fee-label-top {
    display: block;
    line-height: var(--space-lg);
    margin-bottom: var(--space);
}

.luna .simulator__field-note,
.luna .simulator__note {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--body-text);
}

.luna .simulator__field-note {
    margin-top: var(--space-2xs);
}

/* Read-only fee cell: same height as an input. */
.luna .simulator__fee-box {
    display: flex;
    align-items: center;
    height: var(--field-height);
    padding: 0 var(--space);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.luna .simulator__fee-box p {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* Row grids: item (url / price / action) and HS (category / code / value / action). */
.luna .simulator__item-grid,
.luna .simulator__hs-grid {
    --action-col: 6.25rem;
    display: grid;
    gap: var(--space);
    align-items: end;
}

.luna .simulator__item-grid {
    grid-template-columns: minmax(11rem, 1.6fr) minmax(7.5rem, 1fr) var(--action-col);
}

.luna .simulator__hs-grid {
    grid-template-columns: minmax(10rem, 1.2fr) minmax(7.5rem, 1fr) minmax(7.5rem, 1fr) var(--action-col);
}

.luna .simulator__grid-head {
    align-items: initial;
    margin-bottom: var(--space-2xs);
}

.luna .simulator__row-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.luna .simulator__add-row {
    margin-top: var(--space-sm);
}

/* ── Services step ────────────────────────────────────────────────────────── */
.luna .simulator__services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
}

.luna .simulator__service {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.luna .simulator__service:hover {
    background: var(--tint);
}

.luna .simulator__service-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.luna .simulator__service-qty {
    --qty-width: 4.5rem;
    width: var(--qty-width);
}

.luna .simulator__service-rate {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--accent-pressed);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Duties step ──────────────────────────────────────────────────────────── */
.luna .simulator__duties-box {
    padding: var(--space);
    background: var(--background);
    border-radius: var(--radius-md);
}

/* ── Shipping step ────────────────────────────────────────────────────────── */
.luna .simulator__address-select {
    --address-width: 22.5rem;
    max-width: var(--address-width);
}

.luna .simulator__steps {
    margin: 0 0 var(--space-xl);
}

.luna .simulator__steps .stepper__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space);
}

/* ── Run + results ────────────────────────────────────────────────────────── */
.luna .simulator__run {
    margin: 0 0 var(--space-xl);
}

.luna .simulator__run .button {
    padding: 0 var(--space-2xl);
}

.luna .simulator__results {
    display: flex;
    flex-direction: column;
    gap: var(--space);
    margin-top: var(--space-xl);
}

.luna .simulator__results[hidden] {
    display: none;
}

.luna .simulator__results > h3 {
    margin-bottom: 0;
}

.luna .simulator__zone-label {
    margin-bottom: var(--space-sm);
}

.luna .simulator__ship-table col:nth-child(1) { width: 2.5rem; }
.luna .simulator__ship-table col:nth-child(2) { width: 30%; }
.luna .simulator__ship-table col:nth-child(3) { width: 35%; }
.luna .simulator__ship-table col:nth-child(4) { width: 35%; }

.luna .simulator__ship-method {
    font-weight: var(--font-weight-semibold);
}

.luna .simulator__ship-transit {
    color: var(--body-text);
}

.luna .simulator__ship-price {
    text-align: right;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.luna .simulator__breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-top: var(--space);
    border-top: 1px solid var(--border-soft);
}

.luna .simulator__fee-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
}

.luna .simulator__fee-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--body-text);
}

.luna .simulator__fee-amount {
    color: var(--heading);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.luna .simulator__fee-amount--duties {
    max-width: 65%;
    text-align: right;
}

.luna .simulator__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: var(--space-xs);
    padding-top: var(--space);
    border-top: 2px solid var(--accent);
}

.luna .simulator__total-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--body-text);
}

.luna .simulator__total-amount {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ── How to + FAQ collapses above the accordion ───────────────────────────── */
.luna .simulator__faq {
    margin-bottom: var(--space);
}

.luna .simulator__howto-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-sm) 0 0;
    padding-left: var(--space-lg);
}

@media (max-width: 640px) {
    .luna .simulator__panel-online,
    .luna .simulator__panel-offline,
    .luna .simulator__panel-forwarding {
        grid-template-columns: 1fr;
    }

    /* Two shrinkable columns: head and rows wrap their cells in the same order,
       so labels stay above their fields. */
    .luna .simulator__item-grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }

    .luna .simulator__hs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .luna .simulator__grid-head > span {
        display: none;
    }
}

@media (max-width: 600px) {
    .luna .simulator__services {
        grid-template-columns: minmax(0, 1fr);
    }
}