/* ============================================================
   JD Cart Widget v2.0 — Premium Modern Cart Layout
   
   IMPORTANT: This file MUST override:
   - woocommerce-layout.css  (floats, widths)
   - woocommerce-general.css (borders, colors)
   - woocommerce-smallscreen.css (mobile table rewrite)
   
   All selectors use !important to win specificity wars.
   ============================================================ */


/* ──────────────────────────────────────────────────────────
   0. MASTER WRAPPER & TWO-COLUMN LAYOUT
   
   WooCommerce's layout.css applies:
     .woocommerce-cart-form { float: left; width: 55%; }
     .cart-collaterals { float: right; width: 45%; }
   We MUST kill those floats and replace with flexbox.
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper {
    width: 100% !important;
}

.jd-cart-wrapper .woocommerce {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    align-items: flex-start !important;
}

/* Kill ALL WooCommerce floats inside our wrapper */
.jd-cart-wrapper .woocommerce::after,
.jd-cart-wrapper .woocommerce::before {
    display: none !important;
}

/* Left Column: Items */
.jd-cart-wrapper .woocommerce-cart-form {
    float: none !important;
    width: auto !important;
    flex: 1 1 55% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Right Column: Order Summary */
.jd-cart-wrapper .cart-collaterals {
    float: none !important;
    width: auto !important;
    flex: 0 0 340px !important;
    clear: none !important;
    position: sticky !important;
    top: 100px !important;
}

/* Notices take full width */
.jd-cart-wrapper .woocommerce-notices-wrapper {
    width: 100% !important;
    flex-basis: 100% !important;
}


/* ──────────────────────────────────────────────────────────
   1. TABLE → CARD CONVERSION
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper table.shop_table {
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    background: transparent !important;
}

/* Hide old table headers */
.jd-cart-wrapper .woocommerce-cart-form table.shop_table thead {
    display: none !important;
}

/* Stack rows vertically with gap */
.jd-cart-wrapper .woocommerce-cart-form table.shop_table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* ── Each Product = A Card ─────────────────────────────── */
.jd-cart-wrapper table.shop_table tr.cart_item,
.jd-cart-wrapper table.shop_table tr.woocommerce-cart-form__cart-item {
    display: grid !important;
    grid-template-columns: 90px 1fr auto auto auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "img  name  name  name  remove"
        "img  price qty   sub   remove" !important;
    align-items: center !important;
    gap: 8px 20px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.jd-cart-wrapper table.shop_table tr.cart_item:hover {
    border-color: #d1d5db !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
}

/* Reset ALL td styles */
.jd-cart-wrapper table.shop_table tr.cart_item td,
.jd-cart-wrapper table.shop_table tr.cart_item th {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
}

/* Grid area assignments */
.jd-cart-wrapper td.product-thumbnail  { grid-area: img !important; }
.jd-cart-wrapper td.product-name       { grid-area: name !important; }
.jd-cart-wrapper td.product-price      { grid-area: price !important; }
.jd-cart-wrapper td.product-quantity   { grid-area: qty !important; justify-content: center !important; }
.jd-cart-wrapper td.product-subtotal   { grid-area: sub !important; justify-content: flex-end !important; }
.jd-cart-wrapper td.product-remove     { grid-area: remove !important; justify-content: flex-end !important; align-self: start !important; }


/* ──────────────────────────────────────────────────────────
   2. PRODUCT IMAGE
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper td.product-thumbnail a {
    display: block !important;
}

.jd-cart-wrapper td.product-thumbnail img {
    width: 90px !important;
    height: 90px !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
    background: #f8fafc !important;
}


/* ──────────────────────────────────────────────────────────
   3. PRODUCT TITLE
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper td.product-name {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}

.jd-cart-wrapper td.product-name a {
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    transition: color 0.2s !important;
}

.jd-cart-wrapper td.product-name a:hover {
    color: #3b82f6 !important;
}

.jd-cart-wrapper td.product-name .variation,
.jd-cart-wrapper td.product-name dl.variation {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}


/* ──────────────────────────────────────────────────────────
   4. PRICE & SUBTOTAL
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper td.product-price,
.jd-cart-wrapper td.product-price .woocommerce-Price-amount,
.jd-cart-wrapper td.product-price .amount,
.jd-cart-wrapper td.product-price bdi {
    font-weight: 600 !important;
    font-size: 18px !important;
    color: #0f172a !important;
}

.jd-cart-wrapper td.product-subtotal,
.jd-cart-wrapper td.product-subtotal .woocommerce-Price-amount,
.jd-cart-wrapper td.product-subtotal .amount,
.jd-cart-wrapper td.product-subtotal bdi {
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #0f172a !important;
}


/* ──────────────────────────────────────────────────────────
   5. QUANTITY PILLS ( — 1 + )
   
   Override EVERYTHING including plugin button styles.
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    height: 42px !important;
    background: #ffffff !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Custom − and + buttons injected by JS */
.jd-cart-wrapper .jd-qty-btn {
    all: unset !important; /* nuclear reset */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #475569 !important;
    transition: background 0.15s, color 0.15s !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    font-size: 16px !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    min-width: 38px !important;
    max-width: 38px !important;
}

.jd-cart-wrapper .jd-qty-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.jd-cart-wrapper .jd-qty-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
    pointer-events: none !important;
}

/* The number input */
.jd-cart-wrapper .quantity input.qty,
.jd-cart-wrapper .quantity input[type="text"],
.jd-cart-wrapper .quantity input[type="number"] {
    width: 40px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    border: none !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #0f172a !important;
    background: transparent !important;
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
    appearance: textfield !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    line-height: 42px !important;
    min-height: auto !important;
    max-width: 40px !important;
}

.jd-cart-wrapper .quantity input::-webkit-outer-spin-button,
.jd-cart-wrapper .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}


/* ──────────────────────────────────────────────────────────
   6. REMOVE / BIN ICON
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper td.product-remove a.remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px;
    background-color: #fef2f2;
    color: #ef4444;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-size: 0 !important; /* Hide the × text */
    line-height: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.jd-cart-wrapper td.product-remove a.remove:hover {
    background-color: #ef4444;
    color: #ffffff;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(239,68,68,0.25);
}

.jd-cart-wrapper td.product-remove a.remove svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
    display: block !important;
}


/* ──────────────────────────────────────────────────────────
   7. ACTIONS ROW (Coupon / Update Cart)
   ────────────────────────────────────────────────────────── */

/* The actions row is NOT a cart_item — needs block display */
.jd-cart-wrapper table.shop_table tr:not(.cart_item):not(.woocommerce-cart-form__cart-item) {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.jd-cart-wrapper td.actions {
    display: block !important;
    padding: 15px 0 0 0 !important;
    border: none !important;
}

/* Coupon Block — we move this to Order Summary via JS */
.jd-cart-wrapper .coupon {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.jd-cart-wrapper .coupon label { display: none !important; }

.jd-cart-wrapper .coupon input.input-text {
    height: 46px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    transition: all 0.2s !important;
    background: #ffffff !important;
    min-width: 180px !important;
    outline: none !important;
    color: #334155 !important;
}

.jd-cart-wrapper .coupon input.input-text::placeholder {
    color: #94a3b8 !important;
}

.jd-cart-wrapper .coupon input.input-text:focus {
    border-color: #0f172a !important;
    box-shadow: 0 0 0 3px rgba(15,23,42,0.06) !important;
}

/* Apply Coupon Button */
.jd-cart-wrapper button[name="apply_coupon"] {
    height: 46px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    border: none !important;
    padding: 0 22px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.jd-cart-wrapper button[name="apply_coupon"]:hover {
    background: #1e293b !important;
}

/* Hide Update Cart — JS auto-updates */
.jd-cart-wrapper button[name="update_cart"] {
    display: none !important;
}


/* ──────────────────────────────────────────────────────────
   8. ORDER SUMMARY (Cart Totals Box)
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper .cart_totals {
    width: 100% !important;
    max-width: none !important;
    background: #f8fafc !important;
    padding: 32px !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
    float: none !important;
}

.jd-cart-wrapper .cart_totals h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 0 24px 0 !important;
    padding: 0 0 20px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-family: inherit !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
}

.jd-cart-wrapper .cart_totals table.shop_table {
    margin-bottom: 20px !important;
    border: none !important;
}

.jd-cart-wrapper .cart_totals table.shop_table thead {
    display: none !important;
}

.jd-cart-wrapper .cart_totals table.shop_table tbody {
    display: block !important;
    gap: 0 !important;
}

.jd-cart-wrapper .cart_totals table.shop_table tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 0 !important;
    grid-template-columns: unset !important;
}

.jd-cart-wrapper .cart_totals table.shop_table tr:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.jd-cart-wrapper .cart_totals table.shop_table th {
    text-transform: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border: none !important;
    padding: 0 !important;
    color: #64748b !important;
    background: transparent !important;
    text-align: left !important;
    display: block !important;
    letter-spacing: normal !important;
    width: auto !important;
}

.jd-cart-wrapper .cart_totals table.shop_table td {
    text-align: right !important;
    border: none !important;
    padding: 0 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #0f172a !important;
    background: transparent !important;
    display: block !important;
}

/* Total Row — make it bigger */
.jd-cart-wrapper .cart_totals .order-total th {
    font-weight: 700 !important;
    font-size: 17px !important;
    color: #0f172a !important;
}

.jd-cart-wrapper .cart_totals .order-total td {
    font-size: 20px !important;
    font-weight: 800 !important;
}


/* ──────────────────────────────────────────────────────────
   9. COUPON (inside Order Summary — moved by JS)
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper .cart_totals .coupon {
    flex-direction: row !important;
    margin: 20px 0 !important;
    gap: 8px !important;
}

.jd-cart-wrapper .cart_totals .coupon input.input-text {
    flex: 1 !important;
    min-width: 0 !important;
}


/* ──────────────────────────────────────────────────────────
   10. CHECKOUT BUTTON
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper .wc-proceed-to-checkout {
    padding: 0 !important;
    margin: 0 !important;
}

.jd-cart-wrapper .wc-proceed-to-checkout .checkout-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    text-align: center !important;
    background-color: #0f172a;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 18px 30px;
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.15);
    border: none !important;
    letter-spacing: 0.01em;
    margin-top: 10px !important;
}

.jd-cart-wrapper .wc-proceed-to-checkout .checkout-button:hover {
    background-color: #1e293b;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.25);
    color: #fff;
}

/* Arrow icon inside button */
.jd-cart-wrapper .checkout-button .jd-btn-arrow {
    display: inline-flex !important;
    margin-left: 4px !important;
}

.jd-cart-wrapper .checkout-button .jd-btn-arrow svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
}


/* ──────────────────────────────────────────────────────────
   11. EMPTY CART STATE
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper .cart-empty {
    text-align: center !important;
    padding: 60px 20px !important;
    font-size: 18px !important;
    color: #64748b !important;
}

.jd-cart-wrapper .return-to-shop .button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
}


/* ──────────────────────────────────────────────────────────
   12. WOO NOTICES — Modern Override
   
   Override WooCommerce defaults globally on pages where
   the JD Cart widget is present.
   ────────────────────────────────────────────────────────── */

/* Base notice reset */
.jd-cart-wrapper .woocommerce-message,
.jd-cart-wrapper .woocommerce-info,
.jd-cart-wrapper .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    border-radius: 12px !important;
    border: none !important;
    border-left: none !important;
    padding: 16px 24px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* Hide the default WooCommerce left-border top pseudo-element */
.jd-cart-wrapper .woocommerce-message::before,
.jd-cart-wrapper .woocommerce-info::before,
.jd-cart-wrapper .woocommerce-error::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
    display: none !important;
}

/* Success (green) */
.jd-cart-wrapper .woocommerce-message,
.woocommerce .woocommerce-message {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

/* Info (blue) */
.jd-cart-wrapper .woocommerce-info,
.woocommerce .woocommerce-info {
    background: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}

/* Error (red) */
.jd-cart-wrapper .woocommerce-error,
.woocommerce .woocommerce-error {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

.jd-cart-wrapper .woocommerce-error li {
    list-style: none !important;
}

/* Notice links — "Undo" etc. */
.jd-cart-wrapper .woocommerce-message a,
.jd-cart-wrapper .woocommerce-info a,
.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-info a {
    font-weight: 700 !important;
    text-decoration: underline !important;
    color: inherit !important;
    margin-left: auto !important;
}

/* Continue Shopping button (shows alongside notice) */
.jd-cart-wrapper .woocommerce-message .button,
.jd-cart-wrapper .woocommerce-info .button,
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
    margin-left: auto !important;
    float: none !important;
    background: transparent !important;
    color: inherit !important;
    border: 1.5px solid currentColor !important;
    border-radius: 8px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}

.jd-cart-wrapper .woocommerce-message .button:hover,
.woocommerce .woocommerce-message .button:hover {
    background: #065f46 !important;
    color: #fff !important;
    border-color: #065f46 !important;
}


/* ──────────────────────────────────────────────────────────
   12b. EMPTY CART STATE
   ────────────────────────────────────────────────────────── */

.jd-cart-wrapper .cart-empty.woocommerce-info {
    flex-direction: column !important;
    text-align: center !important;
    padding: 60px 30px !important;
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    color: #64748b !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    gap: 8px !important;
}

.jd-cart-wrapper .cart-empty.woocommerce-info::before {
    display: none !important;
}

.jd-cart-wrapper .return-to-shop {
    text-align: center !important;
    margin-top: 24px !important;
}

.jd-cart-wrapper .return-to-shop .button,
.woocommerce .return-to-shop .button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    padding: 14px 32px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.15) !important;
}

.jd-cart-wrapper .return-to-shop .button:hover,
.woocommerce .return-to-shop .button:hover {
    background: #1e293b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(15,23,42,0.25) !important;
}


/* ──────────────────────────────────────────────────────────
   13. RESPONSIVE — MOBILE
   
   Override woocommerce-smallscreen.css which rewrites
   entire table layout with data-title attributes.
   ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .jd-cart-wrapper .woocommerce {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .jd-cart-wrapper .woocommerce-cart-form {
        flex: 1 1 100% !important;
    }

    .jd-cart-wrapper .cart-collaterals {
        flex: 1 1 100% !important;
        position: static !important;
    }
}

@media (max-width: 768px) {
    /* Override WooCommerce smallscreen.css table rewrites */
    .jd-cart-wrapper table.shop_table tr.cart_item td::before {
        display: none !important; /* Kill data-title labels */
    }

    .jd-cart-wrapper table.shop_table tr.cart_item {
        grid-template-columns: 70px 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "img  name   remove"
            "img  price  price"
            "qty  qty    sub" !important;
        gap: 6px 16px !important;
        padding: 16px !important;
    }

    .jd-cart-wrapper td.product-thumbnail img {
        width: 70px !important;
        height: 70px !important;
    }

    .jd-cart-wrapper td.product-name a {
        font-size: 14px !important;
    }

    .jd-cart-wrapper td.product-quantity {
        justify-content: flex-start !important;
    }

    /* Mobile Remove stays in grid area */
    .jd-cart-wrapper td.product-remove {
        align-self: start !important;
    }

    /* Coupon stacks */
    .jd-cart-wrapper .coupon {
        flex-direction: column !important;
        width: 100% !important;
    }

    .jd-cart-wrapper .coupon input.input-text {
        width: 100% !important;
        min-width: 0 !important;
    }

    .jd-cart-wrapper button[name="apply_coupon"] {
        width: 100% !important;
    }

    .jd-cart-wrapper .cart_totals {
        padding: 24px 20px !important;
    }
}

@media (max-width: 480px) {
    .jd-cart-wrapper table.shop_table tr.cart_item {
        grid-template-columns: 60px 1fr auto !important;
        padding: 14px !important;
    }

    .jd-cart-wrapper td.product-thumbnail img {
        width: 60px !important;
        height: 60px !important;
        border-radius: 8px !important;
    }
}