/* ==========================================================================
   Order Page — redesign theme
   Loaded after site.css and order.css. Visual overrides only: every id and
   state class toggled by order.js (active, completed, open, hidden, loading,
   error, show) keeps the behaviour defined in order.css.
   ========================================================================== */

body { background: var(--paper); }

/* Page title */
.order-title { padding-top: 36px; padding-bottom: 4px; }
.order-title h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.025em; }
.order-title p { margin-top: 6px; font-size: 15px; color: var(--gray-700); max-width: 720px; }

.order-section { padding: 24px 0 80px; }
.order-layout { grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; }
.order-options-col {
    top: 92px; max-height: calc(100vh - 108px);
    padding: 24px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 22px;
}

/* Stepper: pills */
.stepper-nav { gap: 8px; margin-bottom: 20px; }
.stepper-nav::before { display: none; }
.stepper-nav-item {
    flex: 0 1 auto; flex-direction: row; gap: 8px; padding: 8px 14px 8px 8px;
    border-radius: 999px; background: var(--white); border: 1px solid var(--gray-200);
}
.stepper-nav-dot { width: 26px; height: 26px; font-size: 12px; background: var(--off-white); color: var(--gray-700); }
.stepper-nav-label { font-size: 14px; color: var(--gray-700); }
.stepper-nav-item.active { background: var(--sky); border-color: var(--light-blue); }
.stepper-nav-item.active .stepper-nav-dot { background: var(--light-blue); color: var(--dark-blue); box-shadow: none; }
.stepper-nav-item.active .stepper-nav-label { color: var(--dark-blue); font-weight: 600; }
.stepper-nav-item.completed .stepper-nav-dot { background: var(--dark-blue); color: var(--white); }
.stepper-nav-item.completed .stepper-nav-label { color: var(--dark-blue); }

/* Step headers */
.order-step-header h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.step-subtitle { color: var(--gray-600); }

/* Search */
.search-input { border: 1.5px solid var(--dark-blue); border-radius: 12px; font-size: 16px; min-height: 52px; }
.search-input::placeholder { color: var(--gray-600); }
.search-input:focus { border-color: var(--dark-blue); box-shadow: 0 0 0 4px rgba(43,171,227,0.25); }
.search-results { border-radius: 12px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); }

/* Map */
.map-wrapper { border: 1px solid var(--gray-200); border-radius: 22px; box-shadow: var(--shadow-md); background: var(--white); }
.map-wrapper:focus-within { border-color: var(--light-blue); }
.map-container { height: 560px; }
.map-instructions { border-radius: 10px; }

/* Format cards: selected = dark card */
.format-option { border: 1.5px solid var(--gray-200); border-radius: 14px; padding: 14px 16px; }
.format-option:hover { border-color: var(--gray-300); box-shadow: none; }
.format-option-ext { font-family: var(--mono); background: var(--off-white); color: var(--dark-blue); border-radius: 6px; padding: 3px 8px; }
.format-option-name { color: var(--dark-blue); font-weight: 600; }
.format-option-desc { color: var(--gray-600); }
.format-option:has(input:checked) { background: var(--dark-blue); border-color: var(--dark-blue); }
.format-option:has(input:checked) .format-option-name { color: var(--white); }
.format-option:has(input:checked) .format-option-desc { color: #c6d3dc; }
.format-option:has(input:checked) .format-option-ext { background: var(--light-blue); color: var(--dark-blue); }
.format-option:has(input:checked) .format-option-example { color: #6fc6ec; }
.format-option:has(input:checked) .format-check { color: var(--light-blue); }
.format-option:has(input:focus-visible) { outline: 3px solid var(--light-blue); outline-offset: 2px; }

/* Step buttons */
.btn-step { min-height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 600; }
.btn-step-next { background: var(--dark-blue); color: var(--white); }
.btn-step-next:hover { background: #0c1f2b; }
.btn-step-next:disabled:hover { background: var(--dark-blue); }
.btn-step-back { border: 1.5px solid var(--gray-300); background: var(--white); color: var(--dark-blue); }

/* Included layers + setbacks */
.layer-group-label { color: var(--medium-brown); letter-spacing: 0.1em; }
.layer-icon { color: var(--dark-blue); }
.layer-name { color: var(--dark-blue); }
.layer-check { color: var(--text-blue); }
.layer-badge { font-family: var(--mono); background: var(--off-white); color: var(--dark-blue); }
.setback-config { background: var(--off-white); border: 0; border-radius: 14px; }
.setback-row input[type="number"] { border-radius: 8px; font-family: var(--mono); }

/* Price */
.price-card-inner { background: var(--off-white); color: var(--dark-blue); border-radius: 16px; text-align: left; }
.price-card-inner::before { display: none; }
.price-label { color: var(--gray-700); }
.price-currency, .price-amount { color: var(--dark-blue); }
.price-detail { color: var(--gray-600); }

/* Form + pay */
.form-label { color: var(--dark-blue); }
.form-input { border: 1.5px solid var(--gray-300); border-radius: 10px; min-height: 46px; }
.form-input::placeholder { color: var(--gray-600); }
.form-input:focus { border-color: var(--dark-blue); box-shadow: 0 0 0 4px rgba(43,171,227,0.25); }
.btn-pay { min-height: 54px; border-radius: 12px; }
.btn-pay:disabled:hover { background: var(--light-blue); border-color: transparent; }
.btn-pay.loading::before { border-color: rgba(19,43,59,0.25); border-top-color: var(--dark-blue); }
.pay-disclaimer { color: var(--gray-600); }

@media (max-width: 1024px) {
    .order-layout { grid-template-columns: 1fr; }
    .order-options-col { position: static; max-height: none; overflow: visible; }
    .map-container { height: 420px; }
}

@media (max-width: 640px) {
    .stepper-nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .stepper-nav-item { flex-shrink: 0; }
    .order-options-col { padding: 18px; border-radius: 18px; }
    .map-container { height: 340px; }
}

/* Two-column layer list: let columns shrink inside the padded panel (descriptions ellipsize) */
.layer-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layer-item { min-width: 0; }