:root {
    --app-brand: #009FE3;
    --app-brand-pressed: #0087C2;
    --app-brand-soft: #E6F7FF;
    --app-bg: #FFFFFF;
    --app-surface: #FFFFFF;
    --app-surface-raised: #F7FAFC;
    --app-border: #D9E4EC;
    --app-text: #10212B;
    --app-text-muted: #61727E;
    --app-text-subtle: #8A9AA5;
    --app-success: #168A4A;
    --app-warning: #C77800;
    --app-danger: #D92D20;
    --app-danger-pressed: #B42318;
    --app-danger-soft: #FDECEA;
    --app-space-xs: 4px;
    --app-space-sm: 8px;
    --app-space-md: 16px;
    --app-space-lg: 24px;
    --app-space-xl: 32px;
    --app-radius-sm: 8px;
    --app-radius-md: 12px;
    --app-radius-lg: 16px;
    --app-radius-xl: 24px;
    --app-radius-pill: 999px;
}

.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-sm);
    min-height: 52px;
    padding: 12px var(--app-space-lg);
    border: 1px solid transparent;
    border-radius: var(--app-radius-md);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, transform 120ms ease;
}

.app-btn:hover {
    text-decoration: none;
}

.app-btn:active:not(:disabled):not(.disabled) {
    transform: scale(0.98);
}

.app-btn:focus-visible {
    outline: 3px solid rgba(0, 159, 227, 0.28);
    outline-offset: 2px;
}

.app-btn:disabled,
.app-btn.disabled,
.app-btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.app-btn-primary {
    color: #FFFFFF;
    background-color: var(--app-brand);
    border-color: var(--app-brand);
}

.app-btn-primary:hover,
.app-btn-primary:active {
    color: #FFFFFF;
    background-color: var(--app-brand-pressed);
    border-color: var(--app-brand-pressed);
}

.app-btn-secondary {
    color: var(--app-brand);
    background-color: var(--app-brand-soft);
    border-color: var(--app-brand-soft);
}

.app-btn-secondary:hover,
.app-btn-secondary:active {
    color: var(--app-brand-pressed);
    background-color: #D5F1FE;
    border-color: #D5F1FE;
}

/* Bootstrap's own .btn-check:checked + .btn rule needs a .btn label, which app-btn deliberately
   isn't — without this a checked radio-button group shows no selection at all. */
.btn-check:checked + .app-btn {
    color: #fff;
    background-color: var(--app-brand);
    border-color: var(--app-brand);
}

.app-btn-tertiary {
    min-height: auto;
    padding: var(--app-space-sm);
    color: var(--app-brand);
    background-color: transparent;
    border-color: transparent;
}

.app-btn-tertiary:hover,
.app-btn-tertiary:active {
    color: var(--app-brand-pressed);
    background-color: var(--app-brand-soft);
}

.app-btn-danger {
    color: var(--app-danger);
    background-color: transparent;
    border-color: var(--app-danger);
}

.app-btn-danger:hover,
.app-btn-danger:active {
    color: var(--app-danger-pressed);
    background-color: var(--app-danger-soft);
    border-color: var(--app-danger-pressed);
}

.app-btn-danger-solid {
    color: #FFFFFF;
    background-color: var(--app-danger);
    border-color: var(--app-danger);
}

.app-btn-danger-solid:hover,
.app-btn-danger-solid:active {
    color: #FFFFFF;
    background-color: var(--app-danger-pressed);
    border-color: var(--app-danger-pressed);
}

.app-btn-block {
    width: 100%;
}

.app-btn-sm {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
}

.app-btn-icon {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
}

.app-btn-pill {
    border-radius: var(--app-radius-pill);
}

.confirm-modal-action {
    flex: 0 0 112px;
}

/* ── Courier-offer selection cards/chips ─────────────────────────────────────────────────────
   The active state belongs to the plain quick-price button, not a form control. */

.courier-offer-quick-price.active {
    color: #FFFFFF;
    background-color: var(--app-brand);
    border-color: var(--app-brand);
}

/* ── Plan cards ───────────────────────────────────────────────────────────────────────────────
   Self-contained on purpose: .app-card only exists inside app-shell.css, which desktop never
   loads, so leaning on it left these cards completely unstyled on the panel. Everything here uses
   the shared tokens instead and works in both shells, page or modal. */

.plan-panel {
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    padding: var(--app-space-md);
}

/* auto-fit tracks the container, not the viewport — the distinction matters inside a modal, where
   Bootstrap's col-* breakpoints size themselves against a width the cards don't actually have. */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--app-space-md);
    align-items: stretch;
}

.plan-card {
    display: flex;
    flex-direction: column;
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    padding: var(--app-space-md);
}

.plan-card-featured {
    border-color: var(--app-brand);
    box-shadow: 0 4px 16px rgba(0, 159, 227, 0.14);
}

.plan-card-current {
    background-color: var(--app-surface-raised);
}

.plan-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-sm);
    margin-bottom: var(--app-space-sm);
    min-height: 24px;
}

.plan-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--app-text);
}

.plan-card-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: var(--app-space-xs);
}

.plan-card-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1.2;
}

.plan-card-period,
.plan-card-price-custom {
    font-size: 14px;
    color: var(--app-text-muted);
}

.plan-card-price-custom {
    font-size: 18px;
    font-weight: 600;
    color: var(--app-text);
}

.plan-price-option {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.plan-card-list-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--app-text-muted);
    text-decoration: line-through;
    margin-right: 4px;
}

.plan-card-save {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-success);
    margin-bottom: var(--app-space-xs);
}

.plan-card-desc {
    font-size: 13px;
    color: var(--app-text-muted);
    margin-bottom: var(--app-space-sm);
}

.plan-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--app-space-md);
    flex-grow: 1;
}

.plan-feature {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: var(--app-space-sm);
    align-items: start;
    font-size: 13px;
    line-height: 1.45;
    color: var(--app-text);
    margin-bottom: 6px;
}

.plan-feature > i {
    color: var(--app-brand);
    font-size: 12px;
    margin-top: 3px;
}

.plan-feature-inherited {
    padding-bottom: 6px;
    margin-bottom: var(--app-space-sm);
    border-bottom: 1px dashed var(--app-border);
    color: var(--app-text-muted);
}

/* Pinned to the bottom so buttons line up across cards of different heights. */
.plan-card-action {
    margin-top: auto;
}

/* The comparison only works if all four cards are visible at once, so inside the modal the body
   takes whatever height the viewport actually has — the old 720px cap made even a tall screen
   scroll — and the whole block tightens its vertical rhythm to earn the fit. A short viewport
   still scrolls; nothing here is allowed to grow past the window. */
.plan-modal-body {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

.plan-modal-body > p {
    margin-bottom: var(--app-space-sm);
}

.plan-modal-body .plan-panel,
.plan-modal-body .plan-card {
    padding: var(--app-space-sm) var(--app-space-md);
}

.plan-modal-body .plan-panel .fs-5 {
    font-size: 1rem;
}

.plan-modal-body .plan-card-head {
    margin-bottom: var(--app-space-xs);
}

.plan-modal-body .plan-card-desc {
    margin-bottom: var(--app-space-xs);
}

.plan-modal-body .plan-feature-list {
    margin-bottom: var(--app-space-sm);
}

.plan-modal-body .plan-feature {
    margin-bottom: var(--app-space-xs);
}

@media (max-width: 575.98px) {
    .plan-grid {
        grid-template-columns: 1fr;
    }
}

/* Plan chip in the header, next to whoever is signed in. */
.app-plan-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
    color: #fff;
    background-color: var(--app-brand);
}

/* Brief outline on the order detail's delivery card when CreateOrder lands on it (#delivery) —
   loaded on both desktop and app-shell, so it works for both layouts. */
.delivery-section-highlight {
    box-shadow: 0 0 0 3px var(--app-brand-soft), 0 0 0 5px var(--app-brand);
    transition: box-shadow 0.4s ease;
}