/* order2.html layout overrides — adds a sidebar summary alongside the existing order form */

/* .page / .o2-sidebar / .sum-* rules now live in order.css so order.html
   can share the same Order Summary sidebar shell. The .order-summary-inline
   hide rule also moved to order.css. */

/* ─── SERVICE SELECTION — booking-row redesign (order2 only) ──────────
   Flattens the card grid from order.css into a single-column list of
   row-style cards: icon (48px) | title + price | pill action. Feature
   bullets collapse into an expand panel under the selected row. */
.services-selection-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 10px;
    margin-bottom: 24px;
}

.service-selection-card {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-width: 1.5px;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(11, 26, 43, 0.04);
    animation: none;
}

.service-selection-card:hover {
    transform: none;
    border-color: #bcd9ea;
    background: #fbfdff;
    box-shadow: 0 1px 2px rgba(11, 26, 43, 0.04);
}

.service-selection-card.selected {
    box-shadow: 0 0 0 4px rgba(0, 167, 226, 0.10), 0 1px 2px rgba(11, 26, 43, 0.04);
}

.service-selection-card .service-icon {
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 6px;
    background: #E8F7FD;
    border-radius: 12px;
    flex: 0 0 48px;
}

.svc-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.service-selection-card h3 {
    text-align: left;
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    color: #0B1A2B;
    min-height: 0;
}

.service-selection-card .card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: 13px;
}

.service-selection-card .card-price b {
    color: #00A7E2;
    font-size: 18px;
    font-weight: 800;
}

.service-selection-card .card-price span {
    color: #5b6a7d;
    font-size: 13px;
    font-weight: 500;
}

.service-selection-card .card-select-indicator {
    align-self: center;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1.5px solid #e3e8ef;
    background: #fff;
    color: #1d2b3d;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    transition: 0.15s;
    width: auto;
    margin: 0;
}

.service-selection-card .card-select-indicator:hover,
.service-selection-card:hover .card-select-indicator {
    border-color: #aac4d3;
}

.service-selection-card.selected .card-select-indicator,
.service-selection-card .card-select-indicator.active {
    background: #00A7E2;
    color: #fff;
    border-color: #00A7E2;
}

.service-selection-card.selected:hover .card-select-indicator,
.service-selection-card .card-select-indicator.active:hover {
    background: #0089bb;
    border-color: #0089bb;
}

.service-selection-card .card-select-indicator.dark {
    background: #0B1A2B;
    color: #fff;
    border-color: #0B1A2B;
}

.service-selection-card .card-select-indicator.dark:hover {
    background: #1d2b3d;
    border-color: #1d2b3d;
}

.service-selection-card .service-features-list {
    grid-column: 1 / -1;
    border-top: 1px dashed #e3e8ef;
    margin: 4px 0 0;
    padding: 14px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    list-style: none;
}

.service-selection-card .service-features-list li {
    font-size: 13.5px;
    color: #1d2b3d;
    line-height: 1.4;
}

/* Collapse feature bullets by default; show only when selected */
.service-selection-card:not(.selected) .service-features-list {
    display: none;
}

@media (max-width: 600px) {
    .service-selection-card {
        grid-template-columns: 48px 1fr auto;
        gap: 12px;
        padding: 12px;
    }
    .service-selection-card .service-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }
    .service-selection-card h3 { font-size: 15px; }
    .service-selection-card .card-select-indicator {
        padding: 8px 14px;
        font-size: 12px;
    }
    .service-selection-card .service-features-list {
        grid-template-columns: 1fr;
    }
}

/* ─── QUANTITY ROW — booking-pill redesign (order2 only) ──────────────
   Mirrors the Figma .qty-row: a single horizontal pill containing the
   uppercase label, the stepper controls, and the live price in blue.
   Targets the existing markup via :has() so order.html is unaffected. */
.product-options-panel .option-section:has(> .qty-stepper) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    padding: 10px 12px;
    background: #fafcff;
    margin-bottom: 24px;
}

.product-options-panel .option-section:has(> .qty-stepper) > .option-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #5b6a7d;
    text-transform: uppercase;
    margin: 0;
    flex: 0 0 auto;
}

.product-options-panel .option-section:has(> .qty-stepper) > .qty-stepper {
    gap: 10px;
    flex: 0 0 auto;
}

.product-options-panel .option-section:has(> .qty-stepper) .qty-stepper-btn {
    width: 34px;
    height: 34px;
    border-width: 1.5px;
    color: #1d2b3d;
}

.product-options-panel .option-section:has(> .qty-stepper) .qty-stepper-btn:hover {
    border-color: #00A7E2;
    color: #00A7E2;
    background: #fff;
}

.product-options-panel .option-section:has(> .qty-stepper) .qty-stepper-value {
    font-size: 18px;
    min-width: 24px;
    color: #0B1A2B;
}

.product-options-panel .option-section:has(> .qty-stepper) > .qty-price-display {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #00A7E2;
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .product-options-panel .option-section:has(> .qty-stepper) {
        gap: 8px;
        padding: 10px;
    }
    .product-options-panel .option-section:has(> .qty-stepper) > .option-label {
        flex: 1 1 100%;
    }
}

/* When the qty-row pill is DOM-moved into the selected service card, span
   all three grid columns and sit flush against the feature list above. */
.service-selection-card > .option-section:has(> .qty-stepper) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    padding: 10px 12px;
    background: #fafcff;
    grid-column: 1 / -1;
    margin: 4px 0 0;
}

.service-selection-card > .option-section:has(> .qty-stepper) > .option-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #5b6a7d;
    text-transform: uppercase;
    margin: 0;
    flex: 0 0 auto;
}

.service-selection-card > .option-section:has(> .qty-stepper) > .qty-stepper {
    gap: 10px;
    flex: 0 0 auto;
}

.service-selection-card > .option-section:has(> .qty-stepper) .qty-stepper-btn {
    width: 34px;
    height: 34px;
    border-width: 1.5px;
    color: #1d2b3d;
}

.service-selection-card > .option-section:has(> .qty-stepper) .qty-stepper-btn:hover {
    border-color: #00A7E2;
    color: #00A7E2;
    background: #fff;
}

.service-selection-card > .option-section:has(> .qty-stepper) .qty-stepper-value {
    font-size: 18px;
    min-width: 24px;
    color: #0B1A2B;
}

.service-selection-card > .option-section:has(> .qty-stepper) > .qty-price-display {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #00A7E2;
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .service-selection-card > .option-section:has(> .qty-stepper) {
        gap: 8px;
        padding: 10px;
    }
    .service-selection-card > .option-section:has(> .qty-stepper) > .option-label {
        flex: 1 1 100%;
    }
}

/* Bin Size + Frequency option-sections moved into the Shredding Bin card.
   They sit below the feature list, span all three grid columns, and use a
   muted uppercase label for visual consistency with the qty-row pill. */
.service-selection-card > #optBinSize,
.service-selection-card > #optOrderType,
.service-selection-card > #optEwasteSize {
    grid-column: 1 / -1;
    margin: 8px 0 0;
}

.service-selection-card > #optBinSize > .option-label,
.service-selection-card > #optOrderType > .option-label,
.service-selection-card > #optEwasteSize > .option-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #5b6a7d;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* ─── COMBINED STEP 2: hide the now-orphaned 'Date & Payment' pill and
   its trailing connector line. We keep the DOM node so any order.js
   lookups (e.g. document.querySelector('.progress-step[data-step="3"]'))
   don't throw, but it never renders. */
#progressSteps .progress-step[data-step="3"],
#progressSteps .progress-step[data-step="3"] + .progress-line {
    display: none;
}

/* .order-summary-inline hide rule moved to order.css for sharing. */

/* Terms checkbox styled to mirror the quick-order widget's .qo-terms
   pill — soft cyan tinted background, subtle border, larger accent-color
   checkbox, and bold underlined link. The .form-field selector boosts
   specificity to beat order.css's `.form-field label { display: block }`
   (0,1,1) so the label flexes its children horizontally. */
.form-field label.o2-terms,
.o2-terms {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    padding: 14px 16px;
    background: #E8F7FC;
    border: 1px solid rgba(0, 167, 226, 0.18);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #0E1E2D;
    font-weight: 500;
    cursor: pointer;
}

.o2-terms input[type="checkbox"] {
    margin: 2px 0 0;
    width: 18px;
    height: 18px;
    accent-color: #00A7E2;
    flex: none;
}

.o2-terms a {
    color: #00A7E2;
    font-weight: 700;
    text-decoration: underline;
}

/* Tighter quick-dates grid on order2 — 160px minmax instead of order.css's
   200px so more dates fit per row at narrower step-content widths. */
.quick-dates-buttons {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Force Frequency selector to a clean 3 × 2 grid on order2 */
.freq-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 520px) {
    .freq-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}