/* The router order form (templates/order.html). Builds on the contact form's
   layout (.contact-grid, .contact-step, .contact-fields) and the plan builder's
   cards (.outcome-card), adding the plan prices, the quantity steppers and the
   sticky order summary. */

.order-step-blurb { color: var(--ink-muted); font-size: .92rem; margin: 0 0 1rem; clear: both; }
.order-step-blurb a { color: var(--primary-2); }

/* ---- plans ---- */
.order-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; }
.order-plan .outcome-copy { gap: .3rem; }
.order-plan-price { margin-top: .35rem; color: var(--ink) !important; font-size: .92rem !important; }
.order-plan-price b { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.order-plan-upfront {
    align-self: flex-start; margin-top: .2rem; padding: .18rem .55rem; border-radius: 999px;
    background: var(--chip-brand-bg); color: var(--chip-brand-fg) !important; font-size: .8rem !important; font-weight: 500;
}

/* ---- quantities ---- */
.order-qtys { display: grid; gap: .7rem; }
.order-qty {
    display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem;
    background: var(--glass); border: 1px solid var(--glass-border); border-radius: 15px;
}
.order-qty-ico {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    font-size: 1.15rem; color: var(--primary-2); background: rgba(61, 157, 255, .14);
}
.order-qty-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.order-qty-copy strong { color: var(--ink); font-weight: 500; }
.order-qty-copy span { color: var(--ink-muted); font-size: .88rem; line-height: 1.45; }
.order-stepper { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.order-step {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    border: 1px solid var(--glass-border-hover); background: var(--glass-strong); color: var(--ink);
    transition: border-color .15s, background .15s;
}
.order-step:hover { border-color: var(--primary); background: rgba(61, 157, 255, .14); }
.order-step:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }
.order-step[hidden] { display: none; }
.order-count.tool-input { width: 4.6rem; text-align: center; padding-left: .4rem; padding-right: .4rem; }
.order-terms { margin-top: 1.2rem; }
.order-address, .order-address-top { margin-top: 1rem; }
@media (max-width: 575px) {
    .order-qty { flex-wrap: wrap; }
    .order-stepper { width: 100%; justify-content: flex-end; }
    .order-address { grid-template-columns: 1fr; }
}
.order-commit { color: var(--ink-muted); font-size: .9rem; margin: 0 0 1rem; }

/* ---- summary ---- */
.order-summary { border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.order-sum-what { color: var(--ink); margin: 0 0 .9rem; font-weight: 500; }
.order-lines { margin: 0; display: grid; gap: .45rem; }
.order-lines > div { display: flex; justify-content: space-between; gap: 1rem; }
.order-lines dt { color: var(--ink-muted); font-weight: 400; }
.order-lines dd { margin: 0; color: var(--ink); font-family: var(--f-data); font-size: .92rem; white-space: nowrap; }
.order-due, .order-monthly { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.order-due { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--glass-border); }
.order-due span { color: var(--ink); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.order-due strong { font-family: var(--f-display); font-size: 1.7rem; color: var(--ink); letter-spacing: -.02em; }
.order-monthly { margin-top: .6rem; }
.order-monthly span { color: var(--ink-muted); }
.order-monthly strong { font-family: var(--f-data); font-weight: 500; color: var(--ink); }
.order-tax { color: var(--ink-faint); font-size: .84rem; margin: .2rem 0 0; text-align: right; }
.order-next {
    display: flex; gap: .55rem; align-items: flex-start; margin: 1rem 0 0; padding: .75rem .85rem;
    border-radius: 12px; background: rgba(61, 157, 255, .08); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--ink-muted); font-size: .9rem; line-height: 1.5;
}
.order-next i { color: var(--primary-2); font-size: 1.15rem; margin-top: .1rem; }
.order-next strong { color: var(--ink); font-weight: 500; }
.order-empty { color: var(--ink-faint); font-size: .9rem; margin: 1rem 0 0; }
.order-summary [hidden], .order-form [hidden] { display: none !important; }

/* ---- confirmation ---- */
.order-confirm-sum {
    max-width: 520px; margin: 1.2rem auto 0; padding: .9rem 1rem; border-radius: 12px; text-align: left;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); background: rgba(61, 157, 255, .08);
}
.order-confirm-sum p { margin: .3rem 0; }

/* ---- subscription model additions ---- */
.order-was { color: var(--ink-faint); font-size: .85rem; margin-right: .2rem; }
.order-qty-note { display: block; color: var(--ink-faint); font-size: .8rem; font-family: var(--f-data); }
.order-lines-extra { margin-top: .45rem; }
.order-prepay { margin-top: .9rem; padding: .75rem .85rem; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--glass-border); }
.order-prepay-head { margin: 0 0 .3rem; color: var(--ink); }
.order-prepay-head i { color: var(--primary-2); }
.order-prepay-why { margin: 0; color: var(--ink-muted); font-size: .86rem; line-height: 1.5; }
.order-totals { margin-top: .9rem; }
.order-problem { margin: .8rem 0 0; color: var(--warning); font-size: .9rem; }
.order-note { margin: .7rem 0 0; color: var(--ink-muted); font-size: .86rem; line-height: 1.5; }
.order-aside-note { margin: .8rem 0 0; font-size: .86rem; }
.order-outside-note { margin: .6rem 0 0; }
.order-closed-ico { color: var(--warning); }

/* A customer type not open yet (private persons): visible, not choosable. */
.order-soon { cursor: not-allowed; opacity: .6; }
.order-soon-badge { margin-left: .4rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .45rem; border-radius: 999px; border: 1px solid currentColor; }