/*
 * checkout-layout.css (task 1225)
 * Two-column layout for the Checkout page and the Make a Payment page,
 * gradservices pattern: form fields LEFT, order summary + payment RIGHT.
 * Enqueued by inc/ngp/checkout-layout.php on those two pages only.
 *
 * Tokens reused from the theme: navy #172f41, orange #eb931f, card shadow
 * 0 0 10px rgba(0,0,0,.3) + radius 3px + border #d5d8dc (student-info-box,
 * ngp-payment-box), Poppins headings, Open Sans body.
 */

/* ------------------------------------------------------------------ */
/* Checkout: form.checkout becomes the grid                            */
/* ------------------------------------------------------------------ */
.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid;
    /* 3/5 | 2/5 split: form left ~60%, summary right ~40% (task 1267).
       minmax(0,...) on both tracks keeps long content (tables, long words)
       from forcing horizontal overflow. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    column-gap: 40px;
    align-items: start;
}

/* Left column: customer details (billing + native shipping + order notes),
   wrapped in the theme white shadow card. The student band renders at the top
   of the billing form via woocommerce_before_checkout_billing_form
   (decision #1294). */
.woocommerce-checkout form.checkout .col2-set.customer_details,
.woocommerce-checkout form.checkout #customer_details {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    background: #fff;
    border: 1px solid #d5d8dc;
    border-radius: 3px;
    padding: 20px 30px 24px;
    margin: 0 0 24px;
}
/* Uniform checkout headings (decision #1297): "Student's Information:",
   "Billing details", and "Your order" all read at ONE size, a touch smaller
   than WooCommerce's default billing h3. 22px/700/1.3, Poppins, bold. The
   .ngp-checkout-summary #order_review_heading rule below matches this. */
.woocommerce-checkout form.checkout #customer_details #student-info-box h3,
.woocommerce-checkout form.checkout #customer_details .woocommerce-billing-fields > h3,
.woocommerce-checkout form.checkout #customer_details h3#ship-to-different-address,
.woocommerce-checkout form.checkout .ngp-checkout-summary #order_review_heading {
    font-family: "Poppins", "Open Sans", Sans-serif;
    font-size: 22px;
    line-height: 1.3em;
    font-weight: 700;
}
/* Per-heading margins (font size unified above; spacing stays per context). */
.woocommerce-checkout form.checkout #customer_details .woocommerce-billing-fields > h3,
.woocommerce-checkout form.checkout #customer_details h3#ship-to-different-address {
    margin: 10px 0 15px;
}

/* Reorder the billing card so the Student's Information band sits FIRST, then
   the "Billing details" heading (with a gap above it), then the native billing
   fields (decision #1297). WooCommerce's form-billing.php template prints the
   <h3>Billing details</h3> BEFORE the woocommerce_before_checkout_billing_form
   hook (where the student band renders at pri 5), so the natural DOM order is
   h3 -> student band -> fields. Flex column ordering flips the h3 below the
   band without overriding the core template or unhooking anything. */
.woocommerce-checkout form.checkout #customer_details .woocommerce-billing-fields {
    display: flex;
    flex-direction: column;
}
.woocommerce-checkout form.checkout #customer_details .woocommerce-billing-fields > #student-info-box {
    order: 1;
}
.woocommerce-checkout form.checkout #customer_details .woocommerce-billing-fields > h3 {
    order: 2;
    margin-top: 28px;
}
.woocommerce-checkout form.checkout #customer_details .woocommerce-billing-fields > .woocommerce-billing-fields__field-wrapper {
    order: 3;
}

/* Student's Information: full-width band across the TOP of the billing card,
   above native First/Last name. The inline card skin from checkout-fields.php
   is flattened here so the band reads as a section of the card, not a nested
   box; a navy underline separates it from the billing fields below. */
.woocommerce-checkout form.checkout #customer_details #student-info-box {
    box-shadow: none;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0 0 22px;
    border-bottom: 2px solid #172f41;
    padding-bottom: 20px;
}
.woocommerce-checkout form.checkout #customer_details #student-info-box h3 {
    margin: 0 0 12px;
}
/* Band layout: student name group (first/middle/last) on the left, School Name
   on the right, side by side across the top of the billing card. */
.woocommerce-checkout form.checkout #customer_details #student-info-box .student-name-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}
.woocommerce-checkout form.checkout #customer_details #student-info-box .student-name-fields > .form-row {
    flex: 1 1 30%;
    min-width: 110px;
    margin-bottom: 0;
    padding: 0;
    float: none;
}
/* School Name field sits to the right of the name group on wide screens. */
.woocommerce-checkout form.checkout #customer_details #student-info-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0 24px;
    align-items: start;
}
.woocommerce-checkout form.checkout #customer_details #student-info-box h3 {
    grid-column: 1 / -1;
}
.woocommerce-checkout form.checkout #customer_details #student-info-box > label[for="student_first_name"] {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
}
.woocommerce-checkout form.checkout #customer_details #student-info-box .student-name-fields {
    grid-column: 1;
    grid-row: 3;
}
.woocommerce-checkout form.checkout #customer_details #student-info-box #school_name_field {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: start;
    margin: 0;
    padding: 0;
    float: none;
    width: 100%;
}
.woocommerce-checkout form.checkout #customer_details #student-info-box .form-row {
    width: 100%;
    float: none;
}
/* Band inputs match the billing card fields (override the inline card-skin from
   checkout-fields.php: 2-ID specificity beats its single #student-info-box). */
.woocommerce-checkout form.checkout #customer_details #student-info-box input.input-text {
    color: #172f41;
    background-color: #fff;
    border: 1px solid #d5d8dc;
    border-radius: 3px;
    padding: 12px 14px;
    font-size: 15px;
    box-sizing: border-box;
    width: 100%;
}
.woocommerce-checkout form.checkout #customer_details #student-info-box input.input-text:focus {
    border-color: #eb931f;
    outline: none;
}
/* Locked School Name reads as read-only (regular schools). */
.woocommerce-checkout form.checkout #customer_details #student-info-box input[readonly] {
    background-color: #f4f5f6;
    color: #69727d;
    cursor: not-allowed;
}
.woocommerce-checkout form.checkout #customer_details #student-info-box label {
    display: block;
    margin-bottom: 4px;
}

/* Billing and shipping groups no longer sit side by side inside the
   left column; each takes the full column width. */
.woocommerce-checkout form.checkout #customer_details .col-1,
.woocommerce-checkout form.checkout #customer_details .col-2 {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 25px;
}
.woocommerce-checkout form.checkout #customer_details::after {
    content: none;
}

/* Billing fields: consistent height, labels, spacing inside the card so the
   billing form reads tidy alongside the student band (decision #1294). */
.woocommerce-checkout form.checkout #customer_details .form-row {
    margin-bottom: 14px;
    padding: 0;
}
.woocommerce-checkout form.checkout #customer_details .form-row label {
    font-family: "Open Sans", Sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4em;
    margin-bottom: 4px;
    display: block;
}
.woocommerce-checkout form.checkout #customer_details .form-row input.input-text,
.woocommerce-checkout form.checkout #customer_details .form-row textarea,
.woocommerce-checkout form.checkout #customer_details .form-row .select2-selection,
.woocommerce-checkout form.checkout #customer_details .form-row select {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid #d5d8dc;
    border-radius: 3px;
    background: #fff;
    line-height: 1.4;
    box-sizing: border-box;
}
.woocommerce-checkout form.checkout #customer_details .form-row input.input-text:focus,
.woocommerce-checkout form.checkout #customer_details .form-row textarea:focus,
.woocommerce-checkout form.checkout #customer_details .form-row select:focus {
    border-color: #eb931f;
    outline: none;
}
/* select2 (country/state) height parity with the text inputs. */
.woocommerce-checkout form.checkout #customer_details .select2-container .select2-selection--single {
    height: auto;
    min-height: 44px;
    display: flex;
    align-items: center;
    border: 1px solid #d5d8dc;
    border-radius: 3px;
}

/* Order Notes sit last in the left column (native position, after billing +
   any shipping block). Give the textarea more height so a full note is
   comfortable to write (task 1267). */
.woocommerce-checkout form.checkout .woocommerce-additional-fields {
    clear: both;
    margin-top: 8px;
}
.woocommerce-checkout form.checkout #order_comments {
    min-height: 130px;
}

/* Right column: one sticky card wrapping heading + review + payment. */
.woocommerce-checkout form.checkout .ngp-checkout-summary {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 24px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    background: #fff;
    border: 1px solid #d5d8dc;
    border-radius: 3px;
    padding: 20px 30px 24px;
    margin: 0 0 24px;
}
.woocommerce-checkout form.checkout .ngp-checkout-summary #order_review_heading {
    /* Font size unified with the other checkout headings above (decision #1297);
       only the summary-card margin lives here. */
    margin: 10px 0 15px;
}

/* Review table: lighter, card-native. */
.ngp-checkout-summary table.shop_table {
    border: none;
    border-radius: 0;
    margin-bottom: 20px;
    font-size: 15px;
}
.ngp-checkout-summary table.shop_table th,
.ngp-checkout-summary table.shop_table td {
    border-top: 1px solid #ececec;
    padding: 10px 6px;
    vertical-align: top;
}

/* Column widths: the total column shrinks to its content (grows only if the
   amount is long); the product+meta column takes the rest so field labels wrap
   only when genuinely out of room. table-layout auto lets the 1% total column
   collapse to its natural width. */
.ngp-checkout-summary table.shop_table {
    table-layout: auto;
}
.ngp-checkout-summary table.shop_table .product-total,
.ngp-checkout-summary table.shop_table th.product-total,
.ngp-checkout-summary table.shop_table td.product-total {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.ngp-checkout-summary table.shop_table .product-name,
.ngp-checkout-summary table.shop_table th.product-name,
.ngp-checkout-summary table.shop_table td.product-name {
    width: auto;
}
.ngp-checkout-summary table.shop_table thead th {
    border-top: none;
    border-bottom: 2px solid #172f41;
    padding-top: 0;
}
.ngp-checkout-summary table.shop_table tfoot .order-total th,
.ngp-checkout-summary table.shop_table tfoot .order-total td {
    border-top: 2px solid #172f41;
    font-size: 18px;
    color: #172f41;
}
.ngp-checkout-summary table.shop_table tfoot .order-total td .amount {
    font-weight: 700;
}
.ngp-checkout-summary table.shop_table .woocommerce-shipping-totals td small,
.ngp-checkout-summary table.shop_table tr.fee + tr td {
    font-size: 13px;
    color: #555;
}

/* Partial-payment field (markup lives in ngp-ops, task #1271). The grey card
   shell is removed (decision #1294): the block sits flush in the summary flow,
   no background, no border, no card padding. The input + "Balance due later"
   readout sit in a 50/50 row (decision #1297); the h3 spans full width above
   and the fine print spans full width below. */
.ngp-checkout-summary #ngpops-deposit-choice {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    /* Top margin adds white space above "Amount to Pay Now" (below the Total row). */
    margin: 28px 0 20px !important;
}
/* "Amount to Pay Now" joins the uniform 22px heading family (decision #1301). */
.ngp-checkout-summary #ngpops-deposit-choice h3 {
    font-size: 22px;
    line-height: 1.3em;
    font-weight: 700;
    margin: 0 0 12px !important;
}
/* 50/50 row: amount input LEFT, balance-due-later readout RIGHT. */
.ngp-checkout-summary #ngpops-deposit-choice .ngpops-choice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    align-items: center;
}
.ngp-checkout-summary #ngpops-deposit-choice .ngpops-amount-col {
    min-width: 0;
}
.ngp-checkout-summary #ngpops-deposit-choice .ngpops-amount-row {
    display: flex;
    align-items: center;
    margin: 0;
}
.ngp-checkout-summary #ngpops-deposit-choice .ngpops-amount-prefix {
    font-weight: 700;
    font-size: 16px;
    margin-right: 6px;
    color: #333;
}
.ngp-checkout-summary #ngpops-deposit-choice input[type="number"] {
    accent-color: #eb931f;
    background-color: #fff;
    border: 1px solid #d5d8dc;
    border-radius: 3px;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 400;
    flex: 1 1 auto;
    min-width: 0;
}
.ngp-checkout-summary #ngpops-deposit-choice input[type="number"]:focus {
    border-color: #eb931f;
    outline: none;
}
/* Under-min hint: small red note beneath the input. */
.ngp-checkout-summary #ngpops-deposit-choice .ngpops-min-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: #c0392b;
}
.ngp-checkout-summary #ngpops-deposit-choice .ngpops-min-hint[hidden] {
    display: none;
}
/* Balance-due-later readout: right column, red emphasized amount. */
.ngp-checkout-summary #ngpops-deposit-choice .ngpops-due-later {
    text-align: right;
    font-size: 14px;
    line-height: 1.35;
}
.ngp-checkout-summary #ngpops-deposit-choice .ngpops-due-later-label {
    display: block;
    color: #555;
    font-weight: 400;
}
.ngp-checkout-summary #ngpops-deposit-choice .ngpops-due-later-amount {
    display: block;
    color: #c0392b;
    font-weight: 700;
    font-size: 18px;
}
.ngp-checkout-summary #ngpops-deposit-choice .description {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px !important;
}
/* Narrow: stack the 50/50 into input then due-later. */
@media (max-width: 560px) {
    .ngp-checkout-summary #ngpops-deposit-choice .ngpops-choice-row {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .ngp-checkout-summary #ngpops-deposit-choice .ngpops-due-later {
        text-align: left;
    }
}

/* Payment block: flush in the card, no grey shell (decision #1294). No grey
   background, no boxed border, no extra card padding. Fields stay legible and
   the Place Order button styling is kept. */
.woocommerce-checkout .ngp-checkout-summary #payment {
    background: transparent;
    border: none;
    border-radius: 0;
    /* White space above the "Credit Card" heading (space above, per #1301). */
    margin-top: 28px;
}
/* "Credit Card" gateway label joins the uniform 22px heading family, with the
   gap tightened below it so it sits close to the TEST MODE / card fields. */
.woocommerce-checkout .ngp-checkout-summary #payment ul.payment_methods {
    border-bottom: none;
    padding: 0;
    margin: 0;
}
/* Direct-child combinator ONLY: the gateway title "Credit Card" is a direct
   child of the payment-method li. The nested field labels (Card Number,
   Expiration) live inside .payment_box > fieldset > p.form-row and must NOT be
   caught, so they keep their normal field-label size. */
.woocommerce-checkout .ngp-checkout-summary #payment ul.payment_methods > li > label {
    font-size: 22px;
    line-height: 1.3em;
    font-weight: 700;
    font-family: "Poppins", sans-serif;
    margin: 0;
}
.woocommerce-checkout .ngp-checkout-summary #payment div.payment_box {
    background: transparent;
    border: none;
    border-radius: 0;
    color: #333;
    padding: 0;
    /* Tight to the "Credit Card" heading above (remove space below, per #1301). */
    margin: 6px 0 0;
}
.woocommerce-checkout .ngp-checkout-summary #payment div.payment_box::before {
    display: none;
}
.woocommerce-checkout .ngp-checkout-summary #payment div.payment_box .form-row {
    margin-bottom: 12px;
}
.woocommerce-checkout .ngp-checkout-summary #payment .place-order {
    padding: 0;
}
.woocommerce-checkout .ngp-checkout-summary #payment .woocommerce-privacy-policy-text p,
.woocommerce-checkout .ngp-checkout-summary #payment .woocommerce-terms-and-conditions-wrapper p {
    font-size: 13px;
    line-height: 1.5;
}
.woocommerce-checkout .ngp-checkout-summary #payment #place_order {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 0.9rem 1.5rem;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ------------------------------------------------------------------ */
/* Make a Payment page                                                 */
/* ------------------------------------------------------------------ */
.ngp-payment-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: stretch;
}
.ngp-payment-layout .ngp-payment-main {
    grid-column: 1;
    height: 100%;
}
.ngp-payment-layout .ngp-payment-side {
    grid-column: 2;
    height: 100%;
}
.ngp-payment-layout .ngp-payment-box {
    margin: 0 0 24px !important;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ngp-payment-box .ngp-payment-heading {
    font-size: 24px;
    line-height: 1.3em;
    margin: 10px 0 15px;
}
/* Field rows and inputs mirror the checkout billing fields
   (#customer_details .form-row above) so the payment page reads the same:
   tight bold labels, padded inputs, orange focus. Scoped to the payment form. */
.ngp-payment-form .ngp-payment-field {
    margin-bottom: 14px;
    padding: 0;
}
.ngp-payment-form .ngp-payment-field label {
    display: block;
    font-family: "Open Sans", Sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4em;
    margin-bottom: 4px;
}
.ngp-payment-form .ngp-payment-field input[type="text"],
.ngp-payment-form .ngp-payment-field input[type="email"],
.ngp-payment-form .ngp-payment-field input[type="number"],
.ngp-payment-form .ngp-payment-field textarea,
.ngp-payment-form .ngp-payment-field select {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid #d5d8dc;
    border-radius: 3px;
    background: #fff;
    line-height: 1.4;
    box-sizing: border-box;
}
.ngp-payment-form .ngp-payment-field input[type="text"]:focus,
.ngp-payment-form .ngp-payment-field input[type="email"]:focus,
.ngp-payment-form .ngp-payment-field input[type="number"]:focus,
.ngp-payment-form .ngp-payment-field textarea:focus,
.ngp-payment-form .ngp-payment-field select:focus {
    border-color: #eb931f;
    outline: none;
}
.ngp-payment-form .ngp-payment-field input[type="number"] {
    max-width: 220px;
}
.ngp-payment-form .ngp-payment-field .description {
    font-size: 13px;
    color: #555;
}
.ngp-payment-form .button.btn-submit {
    display: inline-block;
    background: #172f41;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 0.8rem 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.ngp-payment-form .button.btn-submit:hover {
    background: #eb931f;
    color: #fff;
}
.ngp-payment-form .ngp-payment-restart {
    margin-left: 12px;
    font-size: 14px;
}

/* Balance summary card (confirm step, right column). */
.ngp-payment-summary-card dl {
    margin: 0;
}
.ngp-payment-summary-card dt {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    margin-top: 12px;
}
.ngp-payment-summary-card dd {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #172f41;
}
.ngp-payment-summary-card dd.ngp-payment-summary-balance {
    font-size: 26px;
    border-top: 2px solid #172f41;
    padding-top: 8px;
}

/* ------------------------------------------------------------------ */
/* Mobile / narrow: single column                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .woocommerce-checkout form.checkout.woocommerce-checkout,
    .ngp-payment-layout {
        display: block;
    }
    .woocommerce-checkout form.checkout .ngp-checkout-summary,
    .ngp-payment-layout .ngp-payment-side {
        position: static;
    }
    /* Billing card first, then summary/payment card: both stack full width. */
    .woocommerce-checkout form.checkout .col2-set.customer_details,
    .woocommerce-checkout form.checkout #customer_details,
    .woocommerce-checkout form.checkout .ngp-checkout-summary {
        padding: 16px 20px 20px;
    }
    /* Student band stacks: student name group, then School Name below it. */
    .woocommerce-checkout form.checkout #customer_details #student-info-box {
        display: block;
    }
    .woocommerce-checkout form.checkout #customer_details #student-info-box #school_name_field {
        margin-top: 14px;
    }
    .woocommerce-checkout form.checkout #customer_details #student-info-box .student-name-fields > .form-row {
        flex: 1 1 45%;
    }
}