/**
 * Klinik James – Checkout Page Customisations
 * File: /wp-content/themes/YOUR-THEME/css/checkout-customisations.css
 *
 * Companion stylesheet for checkout-customisations.php
 * Design tokens match the cart page (cart-customer-information.css v2.1.2)
 *
 *   Primary dark blue : #0a3d62
 *   Accent blue       : #1e90ff
 *   Button blue       : #0057b7
 *   Gold highlight    : #ffd700
 *   Success green     : #1b8f3c / #27ae60
 *   Card background   : #fff
 *   Page background   : #f8f9fa
 *   Border            : #e0e0e0 / #eee
 *   Border-radius     : 16px (cards) / 8px (inputs, small elements)
 *   Shadow            : 0 6px 25px rgba(0,0,0,0.08)
 */


/* ─────────────────────────────────────────────────────────────────────────────
   0. Page title  (.custom-checkout wraps [woocommerce_checkout])
   ───────────────────────────────────────────────────────────────────────────── */

.custom-checkout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.custom-checkout .checkout-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #0a3d62;
    margin: 40px 0 10px;
    letter-spacing: -0.3px;
}

.custom-checkout .checkout-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #1e90ff;
    margin: 10px auto 0;
    border-radius: 2px;
}

.custom-checkout .store-sub {
    text-align: center;
    font-size: 18px;
    color: #555;
    margin-bottom: 40px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   1. Two-column layout wrapper
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout-review-order {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
}

.kj-checkout-left #customer_details {
    display: flex;
    flex-direction: column;
}

.kj-checkout-left #customer_details .col-1,
.kj-checkout-left #customer_details .col-2 {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    clear: both;
}

.kj-checkout-left #customer_details .col-2 {
    margin-top: 24px !important;
}

.kj-checkout-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

.kj-checkout-col.kj-checkout-left {
    flex: 0 0 55%;
    max-width: 55%;
}

.kj-checkout-col.kj-checkout-right {
    flex: 1;
    min-width: 0;
    position: sticky;
    top: 20px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. Card panels
   ───────────────────────────────────────────────────────────────────────────── */

.kj-checkout-left .woocommerce-billing-fields,
.kj-checkout-left .woocommerce-additional-fields,
.kj-checkout-right .woocommerce-checkout-review-order,
.kj-checkout-right #payment {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    /* overflow:hidden removed — it was clipping the h3 top radius.
       Instead we apply radius directly to the first and last children. */
}

.kj-checkout-left .woocommerce-billing-fields,
.kj-checkout-left .woocommerce-additional-fields {
    margin-bottom: 24px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. Section headings
   ───────────────────────────────────────────────────────────────────────────── */

.kj-checkout-left h3,
.kj-checkout-right h3 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #1e90ff;
    margin: 0;
    padding: 15px 20px;
    /* Top corners always rounded to match the parent card */
    border-radius: 16px 16px 0 0;
}

/* Left column cards: billing and additional fields headings */
.kj-checkout-left .woocommerce-billing-fields > h3,
.kj-checkout-left .woocommerce-additional-fields > h3 {
    border-radius: 16px 16px 0 0;
}

/* Right column: "Your order" heading sits directly inside .woocommerce-checkout-review-order */
.kj-checkout-right .woocommerce-checkout-review-order > h3,
/* Right column: payment heading */
.kj-checkout-right #payment > h3 {
    border-radius: 16px 16px 0 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. Billing / Additional fields area
   ───────────────────────────────────────────────────────────────────────────── */

.kj-checkout-left .woocommerce-billing-fields__field-wrapper,
.kj-checkout-left .woocommerce-additional-fields__field-wrapper {
    padding: 20px;
}

.kj-checkout-left .form-row {
    margin-bottom: 15px;
}

.kj-checkout-left .form-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
    font-size: 13px;
}

.kj-checkout-left .form-row .required {
    color: #e74c3c;
    margin-left: 3px;
}

.kj-checkout-left .form-row input.input-text,
.kj-checkout-left .form-row select,
.kj-checkout-left .form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #0a3d62;
    background: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.kj-checkout-left .form-row input.input-text:focus,
.kj-checkout-left .form-row select:focus,
.kj-checkout-left .form-row textarea:focus {
    outline: none;
    border-color: #1e90ff;
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.15);
}

.kj-checkout-left .form-row input.input-text::placeholder,
.kj-checkout-left .form-row textarea::placeholder {
    color: #999;
    font-size: 13px;
}

.kj-checkout-left .form-row.woocommerce-invalid input.input-text,
.kj-checkout-left .form-row.woocommerce-invalid select {
    border-color: #e74c3c;
}

.kj-checkout-left .form-row.woocommerce-invalid label {
    color: #e74c3c;
}

.woocommerce-checkout .woocommerce-error {
    background: #fee;
    border: 1px solid #e74c3c;
    border-radius: 8px;
    padding: 10px 14px;
    color: #c0392b;
    font-size: 13px;
    list-style: none;
    margin-bottom: 16px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. Order review table
   ───────────────────────────────────────────────────────────────────────────── */

.kj-checkout-right .woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.kj-checkout-right .woocommerce-checkout-review-order-table th,
.kj-checkout-right .woocommerce-checkout-review-order-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.kj-checkout-right .woocommerce-checkout-review-order-table .product-name {
    font-weight: 600;
    color: #0a3d62;
}

.kj-checkout-right .woocommerce-checkout-review-order-table .product-total {
    text-align: right;
    font-weight: 700;
    color: #1b8f3c;
}

.kj-checkout-right .woocommerce-checkout-review-order-table tfoot tr td,
.kj-checkout-right .woocommerce-checkout-review-order-table tfoot tr th {
    font-size: 14px;
    color: #555;
}

.kj-checkout-right .woocommerce-checkout-review-order-table tfoot .order-total th,
.kj-checkout-right .woocommerce-checkout-review-order-table tfoot .order-total td {
    font-weight: 700;
    font-size: 16px;
    color: #0a3d62;
    border-top: 2px solid #e0e0e0;
    border-bottom: none;
}

.kj-checkout-right .woocommerce-checkout-review-order-table tfoot .order-total td .amount {
    color: #0057b7;
    font-size: 20px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. Payment section
   ───────────────────────────────────────────────────────────────────────────── */

.kj-checkout-right #payment {
    margin-top: 24px;
    padding: 0;
}

.kj-checkout-right #payment ul.payment_methods {
    list-style: none;
    margin: 0;
    padding: 0 20px;
    border-bottom: 1px solid #e0e0e0;
}

.kj-checkout-right #payment ul.payment_methods li {
    padding: 14px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.kj-checkout-right #payment ul.payment_methods li:last-child {
    border-bottom: none;
}

.kj-checkout-right #payment ul.payment_methods li label {
    font-weight: 600;
    color: #0a3d62;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kj-checkout-right #payment ul.payment_methods li input[type="radio"] {
    accent-color: #1e90ff;
    width: 16px;
    height: 16px;
}

.kj-checkout-right #payment .payment_box {
    width: 100%;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px;
    margin-top: 8px;
    font-size: 13px;
    color: #555;
}

.kj-checkout-right #payment .form-row.place-order {
    padding: 20px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. Place Order / Pay button  (gold — matches cart checkout button)
   ───────────────────────────────────────────────────────────────────────────── */

#place_order,
.woocommerce-checkout #place_order {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.03em;
    cursor: pointer;
    background: #ffd700;
    color: #003f82;
    border: none;
    border-radius: 8px;
    transition: background 0.3s ease, transform 0.3s ease;
}

#place_order:hover,
.woocommerce-checkout #place_order:hover {
    background: #e6c200;
    color: #003f82;
    transform: translateY(-2px);
}

#place_order:disabled,
.woocommerce-checkout #place_order:disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. Hide "Subscribe to our Newsletter" checkbox
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-checkout .mailchimp-newsletter-subscribe-row,
.woocommerce-checkout .form-row.place-order > .woocommerce-newsletter,
.woocommerce-checkout #place_order_newsletter,
.woocommerce-checkout .woo-subscribe-to-newsletter,
.woocommerce-checkout .form-row.place-order > p.form-row:has( input[type="checkbox"] ),
.woocommerce-checkout .form-row.place-order > .checkout-subscribe {
    display: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. Accessibility
   ───────────────────────────────────────────────────────────────────────────── */

.kj-checkout-left .form-row input.input-text:focus-visible,
.kj-checkout-left .form-row select:focus-visible,
.kj-checkout-left .form-row textarea:focus-visible,
#place_order:focus-visible {
    outline: 3px solid #1e90ff;
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. Responsive – tablet (≤ 768px)
   ───────────────────────────────────────────────────────────────────────────── */

@media screen and ( max-width: 768px ) {
    .custom-checkout .checkout-title { font-size: 26px; }
    .custom-checkout .store-sub { font-size: 16px; }

    .kj-checkout-wrapper {
        flex-direction: column;
        gap: 24px;
    }

    .kj-checkout-col.kj-checkout-left,
    .kj-checkout-col.kj-checkout-right {
        flex: 0 0 100%;
        max-width: 100%;
        position: static;
    }

    .kj-checkout-left h3,
    .kj-checkout-right h3 {
        font-size: 15px;
        padding: 12px 15px;
    }

    .kj-checkout-left .woocommerce-billing-fields__field-wrapper,
    .kj-checkout-left .woocommerce-additional-fields__field-wrapper {
        padding: 15px;
    }

    .kj-checkout-right .woocommerce-checkout-review-order-table th,
    .kj-checkout-right .woocommerce-checkout-review-order-table td {
        padding: 12px 15px;
    }

    .kj-checkout-right #payment ul.payment_methods { padding: 0 15px; }
    .kj-checkout-right #payment .form-row.place-order { padding: 15px; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   11. Responsive – mobile (≤ 480px)
   ───────────────────────────────────────────────────────────────────────────── */

@media screen and ( max-width: 480px ) {
    .custom-checkout { padding: 0 12px; }
    .custom-checkout .checkout-title { font-size: 22px; margin: 20px 0 8px; }
    .custom-checkout .store-sub { font-size: 14px; margin-bottom: 24px; }

    /* Prevent iOS zoom on input focus */
    .kj-checkout-left .form-row input.input-text,
    .kj-checkout-left .form-row select,
    .kj-checkout-left .form-row textarea {
        font-size: 16px;
    }

    .kj-checkout-left .woocommerce-billing-fields,
    .kj-checkout-left .woocommerce-additional-fields,
    .kj-checkout-right .woocommerce-checkout-review-order,
    .kj-checkout-right #payment {
        border-radius: 12px;
    }

    .kj-checkout-left h3,
    .kj-checkout-right h3 {
        font-size: 14px;
        padding: 12px;
    }

    .kj-checkout-right .woocommerce-checkout-review-order-table th,
    .kj-checkout-right .woocommerce-checkout-review-order-table td {
        padding: 10px 12px;
        font-size: 13px;
    }

    .kj-checkout-right .woocommerce-checkout-review-order-table tfoot .order-total td .amount {
        font-size: 17px;
    }

    #place_order,
    .woocommerce-checkout #place_order {
        font-size: 15px;
        padding: 13px 16px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. Print
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
    .kj-checkout-col.kj-checkout-right { position: static; }
    #place_order { display: none; }

    .kj-checkout-left .woocommerce-billing-fields,
    .kj-checkout-left .woocommerce-additional-fields,
    .kj-checkout-right .woocommerce-checkout-review-order,
    .kj-checkout-right #payment {
        box-shadow: none;
        border: 1px solid #333;
        page-break-inside: avoid;
    }
}


/* ═════════════════════════════════════════════════════════════════════════════
   ORDER CONFIRMATION / THANK YOU PAGE
   Targets: .woocommerce-order-received  (body class added by WooCommerce)
   Sections mirrored from the screenshot:
     A. Success notice + order meta strip
     B. Order details card  (table with product rows + totals)
     C. Billing address card
   ═════════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────────
   13. Thank-you page wrapper — same max-width & title style as checkout
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-order-received .custom-checkout,
.woocommerce-order-received .entry-content,
.woocommerce-order-received .woocommerce {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   14. Success notice  ("Thank you. Your order has been received.")
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
    display: block;
    background: #d4edda;
    border: 1px solid #28a745;
    border-radius: 8px;
    padding: 14px 20px;
    color: #155724;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 24px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   15. Order meta strip  (Order Number · Date · Email · Total · Payment Method)
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-order-received .woocommerce-order-overview,
.woocommerce-order-received ul.woocommerce-order-overview {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.woocommerce-order-received .woocommerce-order-overview li,
.woocommerce-order-received ul.woocommerce-order-overview li {
    flex: 1 1 auto;
    padding: 16px 24px;
    border-right: 1px solid #eee;
    font-size: 13px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.woocommerce-order-received .woocommerce-order-overview li:last-child,
.woocommerce-order-received ul.woocommerce-order-overview li:last-child {
    border-right: none;
}

.woocommerce-order-received .woocommerce-order-overview li strong,
.woocommerce-order-received ul.woocommerce-order-overview li strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0a3d62;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px;
}

/* Highlight the total amount in gold */
.woocommerce-order-received .woocommerce-order-overview .woocommerce-Price-amount,
.woocommerce-order-received ul.woocommerce-order-overview .woocommerce-Price-amount {
    color: #0057b7;
    font-size: 17px;
    font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────────────────────
   16. Section headings on the thank-you page  (reuse card + blue header style)
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    margin-bottom: 32px;
    overflow: hidden;
}

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title,
.woocommerce-order-received h2.woocommerce-order-details__title,
.woocommerce-order-received h2.woocommerce-column__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #1e90ff;
    margin: 0;
    padding: 15px 20px;
    border-radius: 16px 16px 0 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   17. Order details table
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-order-received .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0;
}

/* thead — "Product" / "Total" labels */
.woocommerce-order-received .woocommerce-table--order-details thead th {
    background: #f8f9fa;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #0a3d62;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #e0e0e0;
    text-align: left;
}

.woocommerce-order-received .woocommerce-table--order-details thead th:last-child {
    text-align: right;
}

/* tbody — product rows */
.woocommerce-order-received .woocommerce-table--order-details tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    color: #333;
    font-size: 14px;
}

/* Product name link */
.woocommerce-order-received .woocommerce-table--order-details .product-name a {
    color: #1e90ff;
    font-weight: 600;
    text-decoration: none;
}

.woocommerce-order-received .woocommerce-table--order-details .product-name a:hover {
    text-decoration: underline;
}

/* Customer meta lines (Name, IC, Nationality) */
.woocommerce-order-received .woocommerce-table--order-details .product-name strong {
    display: inline;
    color: #0a3d62;
    font-weight: 700;
}

/* Row totals (right-aligned) */
.woocommerce-order-received .woocommerce-table--order-details .product-total {
    text-align: right;
    font-weight: 700;
    color: #1b8f3c;
    white-space: nowrap;
}

/* tfoot — Subtotal / Tax / Total rows */
.woocommerce-order-received .woocommerce-table--order-details tfoot tr th,
.woocommerce-order-received .woocommerce-table--order-details tfoot tr td {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #555;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot tr th {
    font-weight: 600;
    text-align: left;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot tr td {
    text-align: right;
}

/* Total row */
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total th,
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total td {
    font-weight: 700;
    font-size: 16px;
    color: #0a3d62;
    border-top: 2px solid #e0e0e0;
    border-bottom: none;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total td .woocommerce-Price-amount {
    color: #0057b7;
    font-size: 20px;
}

/* Payment method row */
.woocommerce-order-received .woocommerce-table--order-details tfoot .payment-method td,
.woocommerce-order-received .woocommerce-table--order-details tfoot .payment-method th {
    color: #555;
    font-size: 14px;
    border-bottom: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   18. Billing address card
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-order-received .woocommerce-customer-details address {
    padding: 20px;
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    border: none;
}

/* Phone and email links inside the address block */
.woocommerce-order-received .woocommerce-customer-details address a {
    color: #1e90ff;
    text-decoration: none;
}

.woocommerce-order-received .woocommerce-customer-details address a:hover {
    text-decoration: underline;
}

/* Two-column layout for billing + shipping addresses if both present */
.woocommerce-order-received .woocommerce-customer-details .col2-set {
    display: flex;
    gap: 24px;
    padding: 20px;
}

.woocommerce-order-received .woocommerce-customer-details .col2-set .col-1,
.woocommerce-order-received .woocommerce-customer-details .col2-set .col-2 {
    flex: 1;
}


/* ─────────────────────────────────────────────────────────────────────────────
   19. Responsive – tablet (≤ 768px)
   ───────────────────────────────────────────────────────────────────────────── */

@media screen and ( max-width: 768px ) {
    .woocommerce-order-received .woocommerce-order-overview,
    .woocommerce-order-received ul.woocommerce-order-overview {
        flex-direction: column;
        border-radius: 12px;
    }

    .woocommerce-order-received .woocommerce-order-overview li,
    .woocommerce-order-received ul.woocommerce-order-overview li {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 12px 16px;
    }

    .woocommerce-order-received .woocommerce-order-overview li:last-child,
    .woocommerce-order-received ul.woocommerce-order-overview li:last-child {
        border-bottom: none;
    }

    .woocommerce-order-received .woocommerce-order-details,
    .woocommerce-order-received .woocommerce-customer-details {
        border-radius: 12px;
    }

    .woocommerce-order-received .woocommerce-order-details__title,
    .woocommerce-order-received .woocommerce-column__title,
    .woocommerce-order-received h2.woocommerce-order-details__title,
    .woocommerce-order-received h2.woocommerce-column__title {
        font-size: 15px;
        padding: 12px 15px;
        border-radius: 12px 12px 0 0;
    }

    .woocommerce-order-received .woocommerce-table--order-details thead th,
    .woocommerce-order-received .woocommerce-table--order-details tbody td,
    .woocommerce-order-received .woocommerce-table--order-details tfoot tr th,
    .woocommerce-order-received .woocommerce-table--order-details tfoot tr td {
        padding: 12px 15px;
    }

    .woocommerce-order-received .woocommerce-customer-details .col2-set {
        flex-direction: column;
        gap: 16px;
        padding: 15px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   20. Responsive – mobile (≤ 480px)
   ───────────────────────────────────────────────────────────────────────────── */

@media screen and ( max-width: 480px ) {
    .woocommerce-order-received .woocommerce-order-overview li,
    .woocommerce-order-received ul.woocommerce-order-overview li {
        padding: 10px 12px;
        font-size: 12px;
    }

    .woocommerce-order-received .woocommerce-order-overview li strong,
    .woocommerce-order-received ul.woocommerce-order-overview li strong {
        font-size: 14px;
    }

    .woocommerce-order-received .woocommerce-order-details__title,
    .woocommerce-order-received .woocommerce-column__title,
    .woocommerce-order-received h2.woocommerce-order-details__title,
    .woocommerce-order-received h2.woocommerce-column__title {
        font-size: 14px;
        padding: 12px;
    }

    .woocommerce-order-received .woocommerce-table--order-details thead th,
    .woocommerce-order-received .woocommerce-table--order-details tbody td,
    .woocommerce-order-received .woocommerce-table--order-details tfoot tr th,
    .woocommerce-order-received .woocommerce-table--order-details tfoot tr td {
        padding: 10px 12px;
        font-size: 13px;
    }

    .woocommerce-order-received .woocommerce-table--order-details tfoot .order-total td .woocommerce-Price-amount {
        font-size: 17px;
    }

    .woocommerce-order-received .woocommerce-customer-details address {
        padding: 15px;
        font-size: 13px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   21. Print — thank-you page
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
    .woocommerce-order-received .woocommerce-order-details,
    .woocommerce-order-received .woocommerce-customer-details,
    .woocommerce-order-received .woocommerce-order-overview,
    .woocommerce-order-received ul.woocommerce-order-overview {
        box-shadow: none;
        border: 1px solid #333;
        page-break-inside: avoid;
    }
}