.productsection {
    margin-top: 20px;
}

select, input {
    width: 100%;
    padding: 6px;
}

.section-title {
    font-weight: bold;
    font-size: 18px;
}

.button {
    margin-top: 20px;
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.delete-button {
    background-color: #dc3545;
    color: white;
    border: none;
    cursor: pointer;
}

.table.table-bordered th, .table.table-bordered td {
    width: 10%; /* Divides evenly across 5 columns */
}

/* #dynamicTable .select::after {
        top: 18px !important;
        right: -11px !important;
    } */

.text-end {
    text-align: right;
}

#staticTable label {
    font-size: 20px !important;
}

/* ---------- Modal shell ---------- */
.modal-dialog {
    max-width: 900px !important;
    width: 100%;
}

@media (max-width: 576px) {
    .addons-modal .modal-dialog {
        margin: 0;
        max-width: none;
    }

    .addons-modal .modal-content {
        min-height: 100vh;
        border-radius: 0;
    }
}

#addonsModal .modal-header {
    border-bottom: 1px solid #dee2e6 !important;
    padding-bottom: 10px !important;
}

.addons-modal .modal-title {
    font-weight: 700;
    letter-spacing: .2px;
}

.addons-modal .btn-close {
    opacity: .7;
}

    .addons-modal .btn-close:hover {
        opacity: 1;
    }

.addons-modal .addons-list {
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
}

.addons-modal .addons-summary {
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    margin-bottom:10px;
}

.addons-modal .addons-summary .card-body {
    padding: 16px 18px;
}

#addonsModal .addons-summary .card-body span.fw-semibold,
#addonsModal .addons-summary .card-body span.fw-bold,
#addonsModal .text-muted {
    font-size: 13px;
}

#addonsModal .addons-summary .card-body .fs-6 {
    font-size: 14px !important;
}

#addonsModal .addons-summary .card-body .fs-5 {
    font-size: 16px !important;
}

.addons-modal .modal-content input.form-control {
    height: 34px !important;
    font-size: 16px;
}

/* ---------- NEW grid (no conflicts) ---------- */
/* Base grid (desktop/tablet): Accessory | Qty | Price */
#addonsModal .at-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 72px 100px;
    align-items: center;
    column-gap: 12px
}

#addonsModal .at-row {
    border-bottom: 1px solid #f3f4f6
}

    #addonsModal .at-row:hover {
        background: #fafafa
    }

#addonsModal .at-qty {
    justify-self: center
}

#addonsModal .at-price {
    justify-self: end;
    text-align: right
}

/* Accessory cell: checkbox + label */
#addonsModal .at-acc {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0
}

    #addonsModal .at-acc .addon-check {
        width: 18px;
        height: 18px;
        margin: 0;
        appearance: auto;
        position: static
    }

    #addonsModal .at-acc .at-name {
        margin: 0;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

/* Kill theme/legacy decorations that draw extra boxes or position things */
#addonsModal .form-check-label::before,
#addonsModal .form-check-label::after {
    content: none !important
}

#addonsModal .form-check-label {
    padding-left: 0 !important
}

#addonsModal .form-check-input {
    position: static !important;
}

/* Qty + Price visuals */
#addonsModal .addon-qty {
    width: 62px;
    height: 34px !important;
    font-size: 16px;
    margin: 0 auto;
    display: block
}

#addonsModal .addon-price {
    white-space: nowrap;
    font-size: 13px
}

/* MOBILE: line 1 = checkbox+name, line 2 = qty | price */
@media (max-width:576px) {
    #addonsModal .at-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "acc acc"
            "qty price";
        row-gap: 6px;
        column-gap: 10px
    }

    #addonsModal .at-acc {
        grid-area: acc
    }

    #addonsModal .at-qty {
        grid-area: qty;
        justify-self: start
    }

    #addonsModal .at-price {
        grid-area: price;
        justify-self: end;
        text-align: right;
        margin-top: 2px
    }

    /* Slightly larger labels/prices on phones */
    #addonsModal .at-name, #addonsModal .addon-price {
        font-size: 14px
    }
}

/* Mobile: header shows ONLY "Accessory" */
@media (max-width: 576px) {
    /* Collapse header grid to one column */
    #addonsModal .at-head {
        grid-template-columns: 1fr !important;
        grid-template-areas: "acc";
    }

    #addonsModal .at-head .at-acc {
        grid-area: acc;
        justify-self: start;
        text-align: left;
    }
    /* Hide QTY and PRICE header cells */
    #addonsModal .at-head .at-qty,
    #addonsModal .at-head .at-price {
        display: none !important;
    }
}