/* ============================================================================
   LYLIX order form (templates/orderforms/lx-2026-orderform).
   Loaded on top of portal.css — all the palette / type / panel tokens come
   from there. This file only adds order-flow-specific layout: the step
   indicator, the two-column main+summary layout, and the radio-card list.
   ============================================================================ */

.lx-order {
    max-width: var(--lx-content-max);
    margin: 0 auto;
    padding: 18px 0 36px;
}

/* ----- Step indicator (horizontal, replaces the old left-rail) ----- */
.lx-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 28px 0;
    border: 1px solid var(--lx-gray-300);
    background: var(--lx-white);
    box-shadow: var(--lx-shadow);
    overflow: hidden;
}
.lx-step {
    flex: 1 1 0;
    padding: 12px 16px;
    color: var(--lx-gray-500);
    font-size: 0.85rem;
    border-right: 1px solid var(--lx-gray-300);
    display: flex;
    align-items: center;
    gap: 10px;
}
.lx-step:last-child { border-right: 0; }
.lx-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--lx-gray-300);
    color: var(--lx-white);
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.lx-step--done       { color: var(--lx-blue-700); }
.lx-step--done .lx-step__num    { background: var(--lx-blue-700); }
.lx-step--current    { color: var(--lx-blue-900); background: var(--lx-blue-100); }
.lx-step--current .lx-step__num { background: var(--lx-rose); }

/* ----- Two-column shell: main + sticky summary ----- */
.lx-order__cols {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--lx-gutter);
    align-items: start;
}
.lx-order__main { min-width: 0; }
.lx-order__side {
    position: sticky;
    top: 84px;
}

/* ----- Cart summary box ----- */
.lx-summary {
    background: var(--lx-white);
    border: 1px solid var(--lx-gray-300);
    box-shadow: var(--lx-shadow);
}
.lx-summary__head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--lx-gray-300);
    background: var(--lx-gray-100);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lx-gray-700);
    font-weight: 600;
}
.lx-summary__body { padding: 14px 18px; font-size: 0.92rem; }
.lx-summary__line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--lx-gray-100);
}
.lx-summary__line:last-child { border-bottom: 0; }
.lx-summary__line--total {
    border-top: 2px solid var(--lx-blue-700);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lx-blue-900);
}
.lx-summary__foot {
    padding: 12px 18px;
    background: var(--lx-gray-100);
    border-top: 1px solid var(--lx-gray-300);
    font-size: 0.82rem;
    color: var(--lx-gray-500);
}

/* ----- Radio-card list (billing cycle, OS, addons) ----- */
.lx-radiocards { display: grid; gap: 10px; }
.lx-radiocard {
    display: block;
    padding: 12px 14px;
    background: var(--lx-white);
    border: 1px solid var(--lx-gray-300);
    cursor: pointer;
}
.lx-radiocard:hover { border-color: var(--lx-blue-500); }
.lx-radiocard input[type=radio] { margin-right: 8px; vertical-align: middle; }
.lx-radiocard__title { font-weight: 600; color: var(--lx-blue-900); display: inline; }
.lx-radiocard__price {
    float: right;
    color: var(--lx-rose);
    font-weight: 600;
    font-size: 0.95rem;
}
.lx-radiocard__desc {
    margin: 6px 0 0 24px;
    color: var(--lx-gray-700);
    font-size: 0.9rem;
}

/* ----- Form rows ----- */
.lx-order .lx-panel__body table.lx-form-table {
    width: 100%;
    border-collapse: collapse;
}
.lx-order .lx-panel__body table.lx-form-table td {
    padding: 8px 4px;
    vertical-align: top;
    border: 0;
}
.lx-order .lx-panel__body table.lx-form-table td:first-child {
    color: var(--lx-gray-700);
    font-weight: 500;
    font-size: 0.9rem;
    width: 180px;
}

/* ----- Product chooser (gid=919 landing) ----- */
.lx-productgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.lx-productcard {
    background: var(--lx-white);
    border: 1px solid var(--lx-gray-300);
    box-shadow: var(--lx-shadow);
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.lx-productcard h3 {
    margin: 0 0 6px 0;
    color: var(--lx-blue-900);
    font-size: 1.15rem;
}
.lx-productcard__price {
    color: var(--lx-rose);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 14px;
}
.lx-productcard__desc {
    color: var(--lx-gray-700);
    font-size: 0.92rem;
    flex: 1 1 auto;
    margin-bottom: 18px;
}
.lx-productcard__cta { margin-top: auto; }

/* ----- Order complete screen ----- */
.lx-complete {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 24px;
}
.lx-complete__num {
    display: inline-block;
    padding: 6px 18px;
    background: var(--lx-blue-100);
    color: var(--lx-blue-900);
    font-family: var(--lx-font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 14px 0 22px;
}

@media (max-width: 880px) {
    .lx-order__cols { grid-template-columns: 1fr; }
    .lx-order__side { position: static; }
    .lx-steps { font-size: 0.78rem; }
    .lx-step__num { width: 18px; height: 18px; font-size: 0.7rem; }
}
@media (max-width: 600px) {
    .lx-steps { flex-wrap: wrap; }
    .lx-step { flex: 1 1 50%; border-bottom: 1px solid var(--lx-gray-300); }
}