/**
 * NextDay — Order Form Specific Styles
 */

/* Add-on price notes — match Promo Banner description size (text-sm) */
#nd-order-form .nd-addon-price-note {
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Plan Selection Cards */
#nd-plan-selection label {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#nd-plan-selection label:hover {
    border-color: #2563eb;
    background-color: rgba(37, 99, 235, 0.02);
}

#nd-plan-selection input:checked + span + span + span {
    color: #2563eb;
}

#nd-plan-selection label:has(input:checked) {
    border-color: #2563eb;
    background-color: rgba(37, 99, 235, 0.05);
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.1);
}

/* Custom Checkbox Styles */
.nd-checkbox-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.nd-checkbox-card:hover {
    border-color: #2563eb;
}

.nd-checkbox-card:has(input:checked) {
    border-color: #2563eb;
    background-color: rgba(37, 99, 235, 0.02);
}

/* Upload Zones */
.nd-upload-zone {
    border: 2px dashed #e2e8f0;
    transition: all 0.2s ease;
}

.nd-upload-zone:hover {
    border-color: #2563eb;
    background-color: #f8fafc;
}

/* Responsive Fixes */
@media (max-width: 768px) {
    .font-headline-md {
        font-size: 1.25rem;
    }
    .p-12 {
        padding: 1.5rem;
    }
    .gap-8 {
        gap: 1rem;
    }
}

/* Quantity steppers (order page only) — Promo Banners and Extra Website Storage.
   §3.7: the storage stepper was unframed because this rule was scoped to the promo
   card alone; both now share one frame style. */
.nd-promo-banner-addon .nd-promo-qty-control,
.nd-storage-addon .nd-promo-qty-control {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}

.nd-promo-banner-addon.nd-plan-selected .nd-promo-qty-control,
.nd-storage-addon.nd-plan-selected .nd-promo-qty-control {
    border-color: #2563eb;
}

.nd-promo-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: #f9fafb;
    color: #111827;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}

.nd-promo-qty-btn:hover {
    background: #eff6ff;
    color: #2563eb;
}

.nd-promo-qty-value {
    min-width: 2.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
    padding: 0 0.35rem;
}

/* Summary Sticky Bar (Mobile) */
@media (max-width: 1024px) {
    #nd-order-summary {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        border-radius: 0;
        border-top: 1px solid #e2e8f0;
        padding: 1rem;
        box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.1);
    }
}

/* Mobile: roomier input/select padding so placeholder text isn't clipped behind
   the field edge; keep placeholders on one line (order page). */
@media (max-width: 767px) {
    .nd-input,
    .nd-textarea {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .nd-select {
        padding-left: 1rem;
        padding-right: 40px; /* room for the dropdown chevron */
    }
    .nd-input::placeholder,
    .nd-select::placeholder {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Add-ons: mobile-only collapse to the first (featured) 4.
   Below md the non-featured cards hide until "More Add-ons" is tapped; at md+ every
   add-on is always visible and the toggle is hidden. */
@media (max-width: 767px) {
    #nd-order-addons-grid:not(.is-expanded) .nd-order-addon-rest {
        display: none;
    }
}
@media (min-width: 768px) {
    #nd-order-addons-toggle-wrap {
        display: none;
    }
}

/* "Services You Offer" — the "Select an industry first" placeholder is a <p> inside the
   3-column services grid, so it was landing in one ~87px column and wrapping to 3 lines on
   mobile. Make that placeholder span the full grid width so it stays on one line (client §4.4). */
#nd-services-list > p {
    grid-column: 1 / -1;
}

/* "Additional Files" at its 3-file cap (§3.5.3): fade the whole drop zone so it reads as
   unavailable, and stop the hover highlight suggesting it is still clickable. Clicking it
   still explains why via the "Upload Limit Reached" dialog. */
#nd-content-files-upload-zone.nd-upload-zone--disabled {
    opacity: .55;
}
#nd-content-files-upload-zone.nd-upload-zone--disabled:hover {
    background-color: var(--nd-surface, #fff);
}
#nd-content-files-upload-zone.nd-upload-zone--disabled button {
    cursor: not-allowed;
}