/* ==============================================================
   Skill Civil — Checkout branding skin
   Layered on top of WooCommerce's own checkout CSS (not a
   replacement for it) — see inc/checkout-redesign.php.
   ============================================================== */

.woocommerce-checkout .woocommerce{
	max-width:1180px;
	margin:0 auto;
	padding:0 24px 60px;
}

/* ---- Trust bar above the form ---- */
.sc-checkout-trustbar{
	display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
	max-width:1180px; margin:28px auto 24px; padding:0 24px;
}
.sc-checkout-trustbar span{
	background:var(--blue-tint); color:var(--blue-deep);
	font-size:12.5px; font-weight:700; padding:8px 16px;
	border-radius:100px; border:1px solid #CFE0F2;
	display:inline-flex; align-items:center; gap:6px;
}

/* ---- Notices (errors / messages) ---- */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info{
	max-width:1180px; margin:0 auto 20px; padding:16px 20px;
	border-radius:10px; font-size:14px; list-style:none;
}
.woocommerce-checkout .woocommerce-error{ background:#FEE2E2; color:#B91C1C; border:1px solid #FCA5A5; }
.woocommerce-checkout .woocommerce-message{ background:#DCFCE7; color:#15803D; border:1px solid #86EFAC; }
.woocommerce-checkout .woocommerce-info{ background:var(--blue-tint); color:var(--blue-deep); border:1px solid #CFE0F2; }
/* The "you already added this course" notice — a caution look instead of a hard error red. */
.sc-caution-notice{ background:#FFF3CD !important; color:#8A6116 !important; border:1px solid #FCE39A !important; }

/* ---- Two-column layout: details left, sticky summary right ---- */
@media (min-width:901px){
	.woocommerce-checkout form.checkout{
		display:grid;
		grid-template-columns:1fr 400px;
		grid-template-areas:
			"details heading"
			"details review";
		column-gap:32px;
		align-items:stretch; /* keeps both cards the same height */
	}
	#customer_details{ grid-area:details; }
	#order_review_heading{ grid-area:heading; align-self:end; }
	#order_review{ grid-area:review; position:sticky; top:96px; display:flex; flex-direction:column; }
	/* Pushes the trust line to the bottom, filling any leftover height
	   instead of leaving a blank gap — so the card looks intentional
	   even when its content is shorter than the billing form. */
	#order_review .sc-checkout-trustfoot{ margin-top:auto; padding-top:20px; }
}

/* ---- Customer details card — white, with a visible shadow so it
   stands out from the page's light-grey background ---- */
#customer_details{
	background:var(--card); border:1px solid var(--border); border-radius:16px;
	padding:28px 28px 6px; box-shadow:0 10px 26px rgba(20,40,70,.10);
}
#customer_details .col-1, #customer_details .col-2{ width:100%; float:none; }
#customer_details .col-2:empty{ display:none; margin:0; padding:0; }
/* "BILLING DETAILS" heading — same solid brand-blue header-bar
   treatment as "YOUR ORDER" above it, bled to the card's own edges
   with negative margins, so both cards read as one consistent
   "premium" design instead of one plain and one accented.

   WooCommerce's checkout form can render a SECOND <h3> further down
   (usually "Additional information", the order-notes fieldset — and
   a "Shipping details" one too if "ship to a different address" is
   ticked). The negative top margin below is only correct for the
   FIRST heading, which sits flush against the card's own top edge —
   applied to a later heading it drags it upward into whatever field
   sits right above it instead, overlapping them.

   IMPORTANT: WooCommerce nests each heading in its OWN wrapper div
   — <div class="woocommerce-billing-fields"><h3>Billing details</h3>
   ...</div> followed by a SEPARATE <div class="woocommerce-additional-
   fields"><h3>Additional information</h3>...</div>. Because each h3
   is the only h3 child of its own parent, ":first-of-type" is true
   for BOTH of them (it only compares siblings under the SAME parent)
   — so a plain "h3:first-of-type" rule cannot tell them apart and the
   bleed/overlap kept happening. Targeting ".woocommerce-billing-
   fields > h3" specifically (rather than :first-of-type) is what
   actually isolates just the true first heading. */
#customer_details h3{
	font-family:var(--font-display); font-size:13px; text-transform:uppercase;
	letter-spacing:.06em; font-weight:700; color:#fff; background:var(--blue-deep);
	margin:32px -28px 20px; padding:16px 28px;
}
#customer_details .woocommerce-billing-fields > h3{
	margin:-28px -28px 24px; border-radius:16px 16px 0 0;
}

/* "YOUR ORDER" heading — styled as a solid brand-blue header bar
   (the same blue as the site's top bar) sitting flush on top of the
   white order-summary card below it, so the two read as one card
   with a colored header, not two separate floating pieces. */
.woocommerce-checkout #order_review_heading{
	background:var(--blue-deep); color:#fff;
	font-family:var(--font-display); font-size:13px; text-transform:uppercase;
	letter-spacing:.06em; font-weight:700; margin:0; padding:16px 24px;
	border-radius:16px 16px 0 0;
}

.woocommerce-checkout .form-row label{
	font-size:13px; font-weight:600; color:var(--ink); margin-bottom:5px;
}
.woocommerce-checkout .form-row label .required{ color:#D33; text-decoration:none; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select{
	width:100%; box-sizing:border-box; padding:12px 14px;
	border:1.5px solid var(--border); border-radius:9px;
	font-family:var(--font-body); font-size:14px; color:var(--ink); background:#fff;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus{
	outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,100,200,.14);
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text{ border-color:#D33; }
.woocommerce-checkout .form-row.woocommerce-validated input.input-text{ border-color:#22A06B; }
/* "Have a coupon?" prompt — made to stand out instead of blending
   into a plain info line. Covers both markups WooCommerce may use
   (a bare toggle <p>, or wrapped in the shared .woocommerce-info box). */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-info:has(a.showcoupon){
	background:#FFF7E6 !important; border:1px dashed var(--amber) !important;
	color:#8A5A00 !important; font-weight:600; padding-left:46px !important;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle::before,
.woocommerce-checkout .woocommerce-info:has(a.showcoupon)::before{
	content:"🎟️" !important; font-size:17px !important;
}
.woocommerce-checkout a.showcoupon{
	color:var(--blue-deep) !important; font-weight:700; font-size:13.5px;
	text-decoration:underline; text-underline-offset:2px;
}
.woocommerce-checkout .checkout_coupon{
	background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:18px; margin-bottom:20px;
}

/* ---- Order summary card — white body under the blue header bar
   above, same elevated shadow as the billing card so both stand out
   from the page equally. ---- */
#order_review{
	background:#fff; border:1px solid var(--border); border-top:none; border-radius:0 0 16px 16px;
	padding:24px; box-shadow:0 10px 26px rgba(20,40,70,.10);
}
/* WooCommerce gives its own payment box a grey "speech bubble" look
   with a pointer arrow — flatten that so the whole card reads as one
   seamless surface instead of a mismatched patch of grey. */
#payment, .woocommerce-checkout-payment{
	background:transparent !important; border:none !important; box-shadow:none !important;
}
#payment:before, #payment:after{ display:none !important; }
.woocommerce-checkout-review-order-table{ border:none; background:none; margin:0 0 12px; width:100%; }
.woocommerce-checkout-review-order-table thead{ display:none; }
.woocommerce-checkout-review-order-table tr{ border:none; }
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th{
	border:none; border-bottom:1px solid var(--border); padding:12px 0; font-size:13.5px;
}
.woocommerce-checkout-review-order-table tfoot tr:last-child td,
.woocommerce-checkout-review-order-table tfoot tr:last-child th{ border-bottom:none; padding-top:14px; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{
	font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--blue-deep);
}

.sc-checkout-item{ display:flex; align-items:center; gap:10px; }
.sc-checkout-thumb-wrap img{ width:44px; height:44px; border-radius:8px; object-fit:cover; border:1px solid var(--border); display:block; }
.sc-checkout-item-title{ font-weight:600; font-size:13.5px; line-height:1.4; }

/* ---- Payment methods ---- */
ul.wc_payment_methods{ list-style:none; margin:0 0 20px; padding:0; border-top:1px solid var(--border); }
ul.wc_payment_methods li.wc_payment_method{ border-bottom:1px solid var(--border); padding:14px 6px; border-radius:10px; }
ul.wc_payment_methods li.wc_payment_method label{ font-weight:600; font-size:14px; cursor:pointer; color:var(--ink); }
ul.wc_payment_methods input.input-radio{ margin-right:8px; accent-color:var(--blue); width:17px; height:17px; vertical-align:middle; }
ul.wc_payment_methods .payment_box{
	background:var(--bg); border-radius:10px; margin-top:10px !important; padding:14px 16px;
	font-size:13px; color:var(--ink-soft); border:1px solid var(--border) !important;
}
ul.wc_payment_methods li.wc_payment_method:has(input:checked){ background:rgba(30,100,200,.06); border-radius:10px; }

/* ---- Terms + place order ---- */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{ font-size:13px; color:var(--ink-soft); margin-bottom:14px; }
.woocommerce-checkout #place_order{
	width:100%; background:var(--blue); color:#fff; border:none;
	padding:16px 0; border-radius:10px; font-size:15.5px; font-weight:700;
	font-family:var(--font-body); cursor:pointer;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.woocommerce-checkout #place_order:hover{
	background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 10px 22px rgba(30,100,200,.32);
}

.sc-checkout-trustfoot{
	display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
	margin-top:16px; font-size:12px; color:var(--ink-soft);
}
.sc-checkout-trustfoot span{ display:inline-flex; align-items:center; gap:5px; }

@media (max-width:900px){
	#order_review{ position:static; }
	.woocommerce-checkout #order_review_heading{ margin-top:24px; }
	#customer_details{ padding:20px 20px 4px; }
	#customer_details h3{ margin:24px -20px 16px; padding:14px 20px; }
	#customer_details .woocommerce-billing-fields > h3{ margin:-20px -20px 20px; }
	.sc-checkout-trustbar{ margin-top:20px; }
}

/* ---- Order received / thank-you step ---- */
.woocommerce-order-received .woocommerce{ max-width:760px; }
.woocommerce-order-received .woocommerce-thankyou-order-received{
	background:var(--card); border:1px solid var(--border); border-radius:16px;
	padding:36px 28px 28px; text-align:center; font-size:16px; color:var(--ink);
	box-shadow:0 6px 18px rgba(20,40,70,.06); margin-top:28px;
}
.woocommerce-order-received .woocommerce-thankyou-order-received::before{
	content:"✅"; display:block; font-size:40px; margin-bottom:10px;
}
.woocommerce-order-received ul.woocommerce-order-overview{
	display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
	list-style:none; margin:24px 0 0; padding:0;
}
.woocommerce-order-received ul.woocommerce-order-overview li{
	background:var(--blue-tint); color:var(--blue-deep); border-radius:10px;
	padding:12px 18px; font-size:13px; text-align:left; margin:0;
}
.woocommerce-order-received ul.woocommerce-order-overview li strong{ display:block; font-size:14px; margin-top:2px; }

/* ==============================================================
   Cart page (/cart/) — same brand skin as checkout. Someone can
   still land here (e.g. the "View cart" link on the "already added"
   notice above), so it shouldn't look like a completely different,
   unstyled site.
   ============================================================== */
.woocommerce-cart .woocommerce{ max-width:1180px; margin:0 auto; padding:0 24px 60px; }

.woocommerce-cart table.shop_table{
	background:var(--card); border:1px solid var(--border); border-radius:16px;
	border-collapse:separate; border-spacing:0; overflow:hidden;
	box-shadow:0 6px 18px rgba(20,40,70,.06); width:100%; margin-bottom:24px;
}
.woocommerce-cart table.shop_table thead th{
	background:var(--bg); font-size:12px; text-transform:uppercase; letter-spacing:.04em;
	color:var(--ink-soft); padding:14px 16px; border-bottom:1px solid var(--border); text-align:left; font-weight:700;
}
.woocommerce-cart table.shop_table td{
	padding:16px; border-bottom:1px solid var(--border); font-size:14px; color:var(--ink); vertical-align:middle;
}
.woocommerce-cart table.shop_table tr:last-child td{ border-bottom:none; }

/* "#" row number instead of a product photo — pure CSS counter, no
   image involved at all, so there's nothing left to show broken. */
.woocommerce-cart table.shop_table tbody{ counter-reset:sc-cart-row; }
.woocommerce-cart table.shop_table tbody tr.cart_item{ counter-increment:sc-cart-row; }
.woocommerce-cart table.shop_table th.product-thumbnail::before{ content:"#"; color:var(--ink-soft); font-weight:700; }
.woocommerce-cart table.shop_table td.product-thumbnail{ text-align:center; width:40px; }
.woocommerce-cart table.shop_table td.product-thumbnail a{ display:none; }
.woocommerce-cart table.shop_table td.product-thumbnail::before{
	content:counter(sc-cart-row); font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--blue-deep);
}

.woocommerce-cart table.shop_table .product-name a{ color:var(--ink); font-weight:600; text-decoration:none; }
.woocommerce-cart table.shop_table .product-price, .woocommerce-cart table.shop_table .product-subtotal{ color:var(--ink); font-weight:600; }
.woocommerce-cart table.shop_table .product-remove a.remove{
	color:#D33 !important; background:transparent !important; font-size:18px;
}

.woocommerce-cart table.shop_table .quantity .qty{
	width:64px; padding:10px 8px; border:1.5px solid var(--border); border-radius:8px;
	text-align:center; font-size:14px; font-family:var(--font-body); color:var(--ink); box-sizing:border-box;
}
.woocommerce-cart table.shop_table .quantity .qty:focus{
	outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,100,200,.14);
}

.woocommerce-cart .coupon .input-text{
	padding:11px 14px; border:1.5px solid var(--border); border-radius:8px;
	font-family:var(--font-body); font-size:14px; box-sizing:border-box;
}
.woocommerce-cart .button, .woocommerce-cart input.button, .woocommerce-cart a.checkout-button{
	background:var(--blue); color:#fff !important; border:none; padding:12px 22px;
	border-radius:9px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.woocommerce-cart .button:hover, .woocommerce-cart input.button:hover, .woocommerce-cart a.checkout-button:hover{
	background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 8px 18px rgba(30,100,200,.28);
}
.woocommerce-cart .button.disabled, .woocommerce-cart input.button.disabled{
	background:var(--border); color:var(--ink-soft) !important; cursor:not-allowed; transform:none; box-shadow:none;
}
.woocommerce-cart a.checkout-button{ display:block; width:100%; text-align:center; padding:16px 0; font-size:15.5px; }

.woocommerce-cart .cart-collaterals .cart_totals{
	background:var(--card); border:1px solid var(--border); border-radius:16px; padding:24px;
	box-shadow:0 6px 18px rgba(20,40,70,.06); max-width:420px; margin-left:auto;
}
.woocommerce-cart .cart_totals h2{ font-family:var(--font-display); font-size:18px; margin:0 0 14px; }
.woocommerce-cart .cart_totals table{ width:100%; }
.woocommerce-cart .cart_totals th, .woocommerce-cart .cart_totals td{
	padding:12px 0; border-bottom:1px solid var(--border); text-align:left; font-size:14px;
}
.woocommerce-cart .cart_totals tr:last-child th, .woocommerce-cart .cart_totals tr:last-child td{ border-bottom:none; }
.woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td{
	font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--blue-deep);
}

@media (max-width:700px){
	.woocommerce-cart table.shop_table thead{ display:none; }
	.woocommerce-cart table.shop_table td{ display:block; border-bottom:none; padding:6px 16px; }
	.woocommerce-cart table.shop_table tr{ display:block; border-bottom:1px solid var(--border); padding:10px 0; }
	.woocommerce-cart table.shop_table td.product-thumbnail{ display:none; }
	.woocommerce-cart .cart_totals{ max-width:none; margin-left:0; }
}