/* ──────────────────────────────────────────────────────────────────────────
   WooCommerce cart & checkout — MindsCare Hub design
   Loaded only on is_cart() / is_checkout() (classic shortcodes). Styles the
   standard WooCommerce markup to match the theme (navy #244565, rounded UI).
   ────────────────────────────────────────────────────────────────────────── */

:root {
    --mch-navy: #244565;
    --mch-navy-2: #5d7f94;
    --mch-amber: #f59e0b;
}

#main-content .woocommerce { color: #1f2937; }

/* Headings */
#main-content .woocommerce h1,
#main-content .woocommerce h2,
#main-content .woocommerce h3,
#main-content .woocommerce-checkout h3#order_review_heading {
    color: var(--mch-navy);
    font-weight: 700;
}

/* ── Tables (cart + order review) ─────────────────────────────── */
#main-content .woocommerce table.shop_table {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
#main-content .woocommerce table.shop_table th {
    background: #f8fafc;
    color: var(--mch-navy);
    font-weight: 600;
    padding: 14px 16px;
}
#main-content .woocommerce table.shop_table td {
    padding: 14px 16px;
    border-top: 1px solid #f1f5f9;
}
#main-content .woocommerce table.shop_table tfoot th,
#main-content .woocommerce table.shop_table tfoot td {
    font-weight: 700;
    color: var(--mch-navy);
}

/* ── Form fields ──────────────────────────────────────────────── */
#main-content .woocommerce form .form-row label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
    display: inline-block;
}
#main-content .woocommerce .form-row input.input-text,
#main-content .woocommerce .form-row textarea,
#main-content .woocommerce .form-row select,
#main-content .woocommerce-checkout .select2-container .select2-selection {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#main-content .woocommerce .form-row input.input-text:focus,
#main-content .woocommerce .form-row textarea:focus,
#main-content .woocommerce .form-row select:focus {
    outline: none;
    border-color: var(--mch-navy);
    box-shadow: 0 0 0 3px rgba(36, 69, 101, .12);
}
#main-content .woocommerce form .form-row.woocommerce-invalid input.input-text {
    border-color: #dc2626;
}

/* ── Buttons ──────────────────────────────────────────────────── */
#main-content .woocommerce a.button,
#main-content .woocommerce button.button,
#main-content .woocommerce input.button,
#main-content .woocommerce #place_order,
#main-content .woocommerce .checkout-button {
    background: var(--mch-navy);
    color: #fff;
    border: 2px solid var(--mch-navy);
    border-radius: 9999px;
    font-weight: 700;
    padding: 12px 26px;
    line-height: 1.2;
    transition: background .2s ease, border-color .2s ease, transform .1s ease;
    cursor: pointer;
}
#main-content .woocommerce a.button:hover,
#main-content .woocommerce button.button:hover,
#main-content .woocommerce input.button:hover,
#main-content .woocommerce #place_order:hover,
#main-content .woocommerce .checkout-button:hover {
    background: var(--mch-navy-2);
    border-color: var(--mch-navy-2);
    color: #fff;
}
#main-content .woocommerce #place_order,
#main-content .woocommerce .checkout-button {
    width: 100%;
    font-size: 16px;
    padding: 15px 26px;
}
/* Secondary (ghost) buttons — e.g. "Update cart", "Apply coupon" */
#main-content .woocommerce .cart .button[name="update_cart"],
#main-content .woocommerce .coupon .button {
    background: #fff;
    color: var(--mch-navy);
    border: 2px solid var(--mch-navy);
}
#main-content .woocommerce .cart .button[name="update_cart"]:hover,
#main-content .woocommerce .coupon .button:hover {
    background: var(--mch-navy);
    color: #fff;
}

/* ── Cart totals / order review cards ─────────────────────────── */
#main-content .woocommerce .cart_totals,
#main-content .woocommerce-checkout #order_review,
#main-content .woocommerce-checkout .woocommerce-checkout-payment {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
}
#main-content .woocommerce-checkout .woocommerce-checkout-payment {
    background: #fff;
}

/* Payment methods list */
#main-content .woocommerce-checkout #payment ul.payment_methods {
    border: 0;
    padding: 0;
    margin: 0 0 12px;
}
#main-content .woocommerce-checkout #payment ul.payment_methods li {
    list-style: none;
    padding: 10px 0;
}
#main-content .woocommerce-checkout #payment div.payment_box {
    background: #eef2f7;
    border-radius: 10px;
    color: #374151;
}
#main-content .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #eef2f7; }

/* Consent checkbox row (added by WooCommerceCompliance) + WC terms */
#main-content .woocommerce-checkout .mch-consent,
#main-content .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: 14px 0;
    font-size: 14px;
}

/* Notices */
#main-content .woocommerce-info,
#main-content .woocommerce-message,
#main-content .woocommerce-error {
    border-top-color: var(--mch-navy);
    border-radius: 10px;
}
#main-content .woocommerce-error { border-top-color: #dc2626; }

/* Quantity input */
#main-content .woocommerce .quantity input.qty {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px;
}

/* Two-column checkout on wider screens is WC default; keep gaps tidy */
@media (min-width: 769px) {
    #main-content .woocommerce .col2-set .col-1,
    #main-content .woocommerce .col2-set .col-2 { width: 48%; }
}