/* ==============================================
   Quote Cart Page — Figma Design Match
   ============================================== */

/* --- Page Layout & Background --- */
body.woocommerce-cart #content.site-content {
    background: linear-gradient(180deg, rgba(229, 240, 246, 0) 0%, #E5F0F6 100%), #fff !important;
}

.woocommerce-cart .woocommerce {
    padding: 80px 120px !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
}

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper + .entry-title,
.woocommerce-cart .page-title,
.woocommerce-cart .entry-title {
    font-family: var(--font-family-heading) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 48px !important;
    line-height: 1.25 !important;
    color: var(--color-brand-blue) !important;
    margin-bottom: 16px !important;
}

/* --- Empty Quote Cart CTA --- */
.woocommerce-cart .cart-empty {
    border-top: 3px solid var(--color-brand-blue) !important;
    background: #f7f7f8 !important;
    color: var(--color-brand-navy) !important;
    font-family: var(--font-family-body) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 80px auto 24px !important;
    max-width: 960px !important;
    padding: 20px 24px !important;
}

.woocommerce-cart .cart-empty::before,
.woocommerce-cart .cart-empty::after {
    content: none !important;
    display: none !important;
}

.woocommerce-cart .return-to-shop {
    margin: 0 auto !important;
    max-width: 960px !important;
}

.woocommerce-cart .return-to-shop .button,
.woocommerce-cart .return-to-shop .wc-backward {
    align-items: center !important;
    background-color: var(--color-brand-blue) !important;
    border: 2px solid var(--color-brand-blue) !important;
    border-radius: var(--border-radius-button) !important;
    color: #fff !important;
    display: inline-flex !important;
    font-family: var(--font-family-body) !important;
    font-size: 16px !important;
    font-weight: var(--font-weight-bold) !important;
    justify-content: center !important;
    line-height: 1.5 !important;
    min-height: 48px !important;
    min-width: 174px !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
}

.woocommerce-cart .return-to-shop .button:hover,
.woocommerce-cart .return-to-shop .button:focus,
.woocommerce-cart .return-to-shop .wc-backward:hover,
.woocommerce-cart .return-to-shop .wc-backward:focus {
    background-color: var(--color-brand-navy) !important;
    border-color: var(--color-brand-navy) !important;
    color: #fff !important;
}


/* ==============================================
   Cart Table
   ============================================== */

.woocommerce-cart-form .shop_table {
    border: 1px solid var(--color-ui-02) !important;
    border-radius: 4px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* --- Table Header --- */
.woocommerce-cart-form .shop_table thead {
    background-color: var(--color-brand-blue) !important;
}

.woocommerce-cart-form .shop_table thead tr:first-child th:first-child {
    border-top-left-radius: 4px !important;
}

.woocommerce-cart-form .shop_table thead tr:first-child th:last-child {
    border-top-right-radius: 4px !important;
}

.woocommerce-cart-form .shop_table thead th {
    font-family: var(--font-family-body) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #fff !important;
    padding: 12px 16px !important;
    border: none !important;
    text-align: left !important;
}

.woocommerce-cart-form .shop_table thead th .screen-reader-text {
    position: static !important;
    clip: unset !important;
    clip-path: unset !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    color: #fff !important;
    font-family: var(--font-family-body) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 0 !important;
}

/* --- Table Body --- */
.woocommerce-cart-form .shop_table tbody td {
    padding: 16px !important;
    border-bottom: 1px solid var(--color-ui-02) !important;
    border-top: none !important;
    vertical-align: middle !important;
    background: #fff !important;
}

.woocommerce-cart-form .shop_table tbody tr:last-child td {
    border-bottom: none !important;
}

/* --- Product Thumbnail --- */
.woocommerce-cart-form .shop_table .product-thumbnail {
    width: 112px !important;
}

.woocommerce-cart-form .shop_table .product-thumbnail img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    border: 1px solid var(--color-ui-02) !important;
    border-radius: 4px !important;
}

/* --- Product Name --- */
.woocommerce-cart-form .shop_table .product-name a {
    font-family: var(--font-family-body) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--color-brand-blue) !important;
    text-decoration: none !important;
}

.woocommerce-cart-form .shop_table .product-name a:hover {
    text-decoration: underline !important;
}

/* --- Quantity Column --- */
.woocommerce-cart-form .shop_table .product-quantity {
    width: 150px !important;
}

/* Hide the "Quantity" label inside cart table (header already labels it) */
.woocommerce-cart-form .mcc-qty__label {
    display: none !important;
}

/* --- Additional Details Textarea --- */
.woocommerce-cart-form .shop_table .product-details {
    min-width: 200px !important;
}

.woocommerce-cart-form .shop_table .product-details textarea {
    width: 100% !important;
    height: 80px !important;
    min-height: 80px !important;
    border: 1px solid var(--color-ui-02) !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    font-family: var(--font-family-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #4d4f53 !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}

.woocommerce-cart-form .shop_table .product-details textarea::placeholder {
    color: #4d4f53 !important;
    opacity: 0.7 !important;
}

/* --- Remove Button --- */
.woocommerce-cart-form .shop_table .product-remove {
    width: 48px !important;
    text-align: center !important;
}

.woocommerce-cart-form .shop_table .product-remove a.remove {
    color: var(--color-brand-blue) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background: none !important;
    border: none !important;
}

.woocommerce-cart-form .shop_table .product-remove a.remove:hover {
    background: none !important;
    color: var(--color-brand-navy) !important;
}

/* --- Actions Row — Hidden (no update cart / coupon on quote cart) --- */
.woocommerce-cart-form .shop_table .actions {
    display: none !important;
}

.woocommerce-cart-form .shop_table .product-remove a:before {
    border: none !important;
}

/* ==============================================
   Cart to Quote — Quote Request Form
   ============================================== */

.cquote_cart_to_quote {
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
    padding: 64px !important;
    margin-top: 64px !important;
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Form Title --- */
.cquote_cart_to_quote h3 {
    font-family: var(--font-family-heading) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 40px !important;
    line-height: 1.25 !important;
    color: var(--color-brand-blue) !important;
    text-align: center !important;
    margin-bottom: 40px !important;
}

/* --- Form Layout — 2-column grid --- */
.cquote_submission_form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: start !important;
}

/* Override float-based layout */
.cquote_submission_form .cquote-half {
    width: 100% !important;
    float: none !important;
}

.cquote_submission_form .cquote-full {
    grid-column: 1 / -1 !important;
    clear: none !important;
}

/* Full-width: only the submit button row (div, not p) */
.cquote_submission_form > div.form-row {
    grid-column: 1 / -1 !important;
}

/* --- Labels --- */
.cquote_submission_form p.form-row {
    margin: 0 !important;
    padding: 0 !important;
}

.cquote_submission_form label {
    display: block !important;
    font-family: var(--font-family-body) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--color-brand-navy) !important;
    margin-bottom: 8px !important;
}

/* Hide the asterisk, show "(required)" instead */
.cquote_submission_form abbr.required {
    text-decoration: none !important;
    font-style: normal !important;
    color: var(--color-brand-blue) !important;
    font-family: var(--font-family-body) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 14px !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
}

.cquote_submission_form abbr.required::after {
    content: '(required)' !important;
    font-size: 14px !important;
    color: var(--color-brand-blue) !important;
    font-family: var(--font-family-body) !important;
    font-weight: var(--font-weight-bold) !important;
    text-decoration: none !important;
}

/* "(optional)" for fields without required marker */
.cquote_submission_form .form-row label:not(:has(abbr.required))::after {
    content: ' (optional)' !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #4d4f53 !important;
    font-family: var(--font-family-body) !important;
}

/* --- Inputs --- */
.cquote_submission_form .input-text,
.cquote_submission_form input[type="text"],
.cquote_submission_form input[type="email"],
.cquote_submission_form input[type="tel"],
.cquote_submission_form input[type="number"],
.cquote_submission_form select {
    width: 100% !important;
    height: 48px !important;
    border: 1px solid var(--color-ui-02) !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    font-family: var(--font-family-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #4d4f53 !important;
    /* background-color (not the shorthand) so the chevron background-image
     * on `select` further down isn't clobbered for state/country fields
     * that carry the `.input-text` class. */
    background-color: #fff !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.cquote_submission_form .input-text:focus,
.cquote_submission_form input:focus,
.cquote_submission_form select:focus {
    border-color: var(--color-brand-blue) !important;
}

.cquote_submission_form .input-text::placeholder,
.cquote_submission_form input::placeholder {
    color: #4d4f53 !important;
    opacity: 0.7 !important;
}

/* --- Textarea --- */
.cquote_submission_form textarea.input-text,
.cquote_submission_form textarea {
    height: auto !important;
    min-height: 96px !important;
    resize: vertical !important;
}

/* --- Select / Dropdown --- */
.cquote_submission_form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23a3a5a8' d='M6 8.825L0.375 3.2l0.85-0.85L6 7.125l4.775-4.775l0.85 0.85L6 8.825z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px !important;
    padding-right: 40px !important;
}

/* --- Dropdown fields (Market, State, Country) — select/input is inside label --- */
.cquote_submission_form .cquote_multioptions:has(select) label,
.cquote_submission_form .cquote_multioptions:has(input[type="text"]) label {
    display: block !important;
    font-family: var(--font-family-body) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--color-brand-navy) !important;
    margin-bottom: 0 !important;
}

.cquote_submission_form .cquote_multioptions:has(select) label select,
.cquote_submission_form .cquote_multioptions:has(input[type="text"]) label input[type="text"] {
    display: block !important;
    margin-top: 8px !important;
}

/* --- Checkbox / Radio --- */
.cquote_submission_form .cquote_multioptions:not(:has(select)) label {
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #4d4f53 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

.cquote_submission_form .cquote_multioptions input[type="checkbox"],
.cquote_submission_form .cquote_multioptions input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    border: 1px solid var(--color-ui-02) !important;
    border-radius: 4px !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

/* --- Submit Button --- */
.cquote_submission_form .cquote-footer {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 16px !important;
}

.cquote_submit_quote {
    background-color: var(--color-brand-blue) !important;
    color: #fff !important;
    font-family: var(--font-family-body) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    height: 48px !important;
    padding: 12px 24px !important;
    border: 2px solid var(--color-brand-blue) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.cquote_submit_quote:hover {
    background-color: var(--color-brand-navy) !important;
    border-color: var(--color-brand-navy) !important;
}

/* --- Error messages --- */
.cquote_submission_form .cquote_error {
    color: #e2401c !important;
    font-family: var(--font-family-body) !important;
    font-size: 14px !important;
    grid-column: 1 / -1 !important;
}


/* ==============================================
   Cart Collaterals / Totals — Hide default
   ============================================== */

.woocommerce-cart .cart-collaterals .cart_totals {
    display: none !important;
}


/* --- "Details" header — visible only on tablet/mobile --- */
.mcc-cart-details-header {
    display: none !important;
}


/* ==============================================
   Responsive — Tablet & Mobile (≤1199px)
   ============================================== */

@media (max-width: 1199px) {

    /* --- Page Layout --- */
    .woocommerce-cart .woocommerce {
        padding: 40px 20px !important;
    }

    .woocommerce-cart .page-title,
    .woocommerce-cart .entry-title {
        font-size: 32px !important;
    }

    /* --- Cart Table → Card Grid --- */
    .woocommerce-cart-form .shop_table {
        border: none !important;
        border-radius: 0 !important;
    }

    .woocommerce-cart-form .shop_table thead {
        display: none !important;
    }

    .woocommerce-cart-form .shop_table,
    .woocommerce-cart-form .shop_table tbody {
        display: block !important;
        width: 100% !important;
    }

    /* --- "Details" header — full-width bar above cart items --- */
    .mcc-cart-details-header {
        display: block !important;
        background-color: var(--color-brand-blue) !important;
        color: #fff !important;
        font-family: var(--font-family-body) !important;
        font-weight: var(--font-weight-bold) !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: left !important;
        padding: 12px 16px !important;
        border-radius: 4px 4px 0 0 !important;
        margin-bottom: 0 !important;
    }

    /* --- Each cart item = grid card --- */
    .woocommerce-cart-form .shop_table tbody tr.cart_item {
        display: grid !important;
        grid-template-columns: 100px 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        gap: 4px 12px !important;
        width: 100% !important;
        border: 1px solid var(--color-ui-02) !important;
        border-radius: 0 !important;
        padding: 16px !important;
        margin-bottom: 0 !important;
        background: #fff !important;
        align-items: start !important;
    }

    .woocommerce-cart-form .shop_table tbody tr.cart_item:last-of-type {
        border-radius: 0 0 4px 4px !important;
    }

    /* --- Reset all td cells --- */
    .woocommerce-cart-form .shop_table tbody td {
        border-bottom: none !important;
        padding: 0 !important;
        background: transparent !important;
        text-align: left !important;
        width: auto !important;
    }

    /* Hide WooCommerce responsive data-title labels */
    .woocommerce-cart-form .shop_table tbody td::before {
        display: none !important;
    }

    /* --- Row 1–2: Image (left, spans two rows) --- */
    .woocommerce-cart-form .shop_table .product-thumbnail {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-self: start !important;
    }

    .woocommerce-cart-form .shop_table .product-thumbnail img {
        width: 80px !important;
        height: 80px !important;
    }

    /* --- Row 1: Product name (right of image) --- */
    .woocommerce-cart-form .shop_table .product-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .woocommerce-cart-form .shop_table td.product-name[data-title] {
        text-align: left !important;
    }

    .woocommerce-cart-form .shop_table .product-name a {
        display: block !important;
        text-align: left !important;
    }

    /* --- Row 1: Remove X (far right, same row as name) --- */
    .woocommerce-cart-form .shop_table .product-remove {
        grid-column: 3 !important;
        grid-row: 1 !important;
        position: static !important;
        width: auto !important;
        text-align: right !important;
        align-self: start !important;
    }

    /* --- Row 2: Quantity (right of image, under name) --- */
    .woocommerce-cart-form .shop_table .product-quantity {
        grid-column: 2 / 4 !important;
        grid-row: 2 !important;
        width: auto !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .woocommerce-cart-form .shop_table td.product-quantity[data-title] {
        text-align: left !important;
    }

    /* Show Quantity label at this breakpoint */
    .woocommerce-cart-form .mcc-qty__label {
        display: block !important;
        text-align: left !important;
        font-weight: 400 !important;
    }

    .woocommerce-cart-form .shop_table .product-quantity .mcc-qty {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* --- Row 3: Additional Details (full width) --- */
    .woocommerce-cart-form .shop_table .product-details {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        min-width: unset !important;
        margin-top: 8px !important;
    }

    .woocommerce-cart-form .shop_table .product-details::before {
        content: 'Additional Details' !important;
        display: block !important;
        font-family: var(--font-family-body) !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        color: var(--color-brand-navy) !important;
        margin-bottom: 8px !important;
    }

    .woocommerce-cart-form .shop_table .product-details textarea {
        width: 100% !important;
    }

    /* --- Quote Form — single column --- */
    .cquote_submission_form {
        grid-template-columns: 1fr !important;
    }

    .cquote_submission_form .cquote-half {
        grid-column: 1 / -1 !important;
    }

    .cquote_cart_to_quote {
        padding: 32px 20px !important;
        margin-top: 40px !important;
    }

    .cquote_cart_to_quote h3 {
        font-size: 28px !important;
    }

    .cquote_submit_quote {
        width: 100% !important;
    }
}

/* --- Extra small screens --- */
@media (max-width: 480px) {
    .woocommerce-cart .woocommerce {
        padding: 24px 16px !important;
    }

    .woocommerce-cart .page-title,
    .woocommerce-cart .entry-title {
        font-size: 28px !important;
    }

    .cquote_cart_to_quote h3 {
        font-size: 24px !important;
    }
}