/* =========================================================================
   TEMPORARY CART/CHECKOUT STYLES
   To remove: delete this file + the four <link> tags marked "cart-temp" in
   add-to-cart.php, cart-load.php, checkout.php, payment.php.
   Scoped to cart-specific IDs/classes; safe to drop.
   ========================================================================= */

/* Layout — keep #upd (items) and #billing (summary) side by side on desktop */
#upd {
    box-sizing: border-box;
    padding: 12px;
    font-size: 15px;
}
#billing {
    box-sizing: border-box;
    padding: 18px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.55;
}
#billing .left  { display: inline-block; }
#billing .right { float: right; }
#billing .clear { clear: both; height: 6px; }
#billing .container.grey {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 17px;
}
#billing h4 { margin: 8px 0; font-size: 16px; }
#billing h5 { margin: 6px 0; font-size: 14px; }

/* Item cards */
.row-padding.card-2 {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 15px;
}
.row-padding.card-2 img {
    max-width: 110px !important;
    max-height: 110px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 4px;
    object-fit: cover;
}
.row-padding.card-2 h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}
.row-padding.card-2 h5 a { color: #111827; text-decoration: none; }
.row-padding.card-2 h5 a:hover { text-decoration: underline; }

/* Qty controls */
.qty {
    width: 56px !important;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    padding: 5px;
    font-size: 15px;
}
.add_qty, .rmv_qty {
    width: 30px !important;
    height: 30px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
}
.add_qty:hover, .rmv_qty:hover { background: #f3f4f6; }
.add_qty:disabled, .rmv_qty:disabled { opacity: 0.4; cursor: not-allowed; }

/* Remove button */
.row-padding.card-2 .remove {
    background: transparent;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 3px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 13px;
}
.row-padding.card-2 .remove:hover { background: #fef2f2; }

/* Primary action buttons — shared class across cart, cart-load, checkout, payment.
   Use the class instead of #checkout to avoid collision with checkout.php's <form id="checkout">. */
.button.green.buy, button#checkout, button#buy, input#buy {
    width: 100%;
    padding: 13px 18px;
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
}
.button.green.buy:hover, button#checkout:hover, button#buy:hover, input#buy:hover {
    background: #15803d;
}
.button.green.buy:disabled, button#checkout:disabled, button#buy:disabled, input#buy:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

#apply-coupon {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 14px;
}
#apply-coupon:hover { background: #1d4ed8; }

#coupon-code {
    border: 1px solid #d1d5db;
    border-radius: 3px;
    padding: 9px;
    font-size: 15px;
}

#coupon-message div {
    border-radius: 3px;
    padding: 7px 9px;
    font-size: 13px;
}

/* Empty cart */
.empty-cart-container {
    text-align: center;
    padding: 44px 20px;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
}
.empty-cart-icon { font-size: 52px; margin-bottom: 10px; }
.empty-cart-title { margin: 6px 0; font-size: 20px; color: #374151; }
.empty-cart-message { color: #6b7280; font-size: 15px; }

/* Continue shopping button */
.continue-shopping-wrapper { padding: 10px 12px; }
.btn-continue-shopping {
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
}
.btn-continue-shopping:hover { background: #f9fafb; }

/* ---------- checkout.php form (#checkout is the <form> id; .input.border.round on each field) ---------- */
form#checkout {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 18px;
    margin: 12px 0;
    font-size: 15px;
}
form#checkout .input.border.round,
form#checkout input[type="text"],
form#checkout input[type="email"],
form#checkout input[type="tel"],
form#checkout input[type="number"],
form#checkout textarea,
form#checkout select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.4;
    background: #fff;
    color: #111827;
    margin: 4px 0 10px;
}
form#checkout textarea {
    min-height: 70px;
    resize: vertical;
}
form#checkout .input.border.round:focus,
form#checkout input:focus,
form#checkout textarea:focus,
form#checkout select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
form#checkout input[readonly] {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}
form#checkout label {
    display: inline-block;
    font-size: 14px;
    color: #374151;
    margin-bottom: 4px;
}

/* Pincode "not serviceable" message */
#pinMsg {
    color: #dc2626;
    font-size: 13px;
    margin: 2px 0 8px;
}

/* Override the inline qty input style inside the checkout form clone (it lives inside #upd
   but here it's never editable in #checkout — keep narrow so the row aligns) */
form#checkout .qty { width: 56px !important; }