/* ==========================================================================
   House of Omaira — Luxury Checkout
   Restyles native WooCommerce checkout markup. No header/footer overrides —
   this only targets .loc-checkout-body (set by template-luxury-checkout.php).
   ========================================================================== */

:root{
	--loc-bg-deep:      #041A14;
	--loc-bg-panel:     #072B1F;
	--loc-bg-card:      #0a3326;
	--loc-bg-card-2:    #0d4a36;
	--loc-gold:         #D4AF37;
	--loc-gold-light:   #E9D18B;
	--loc-gold-bright:  #F4D97A;
	--loc-cream:        #F7F5F0;
	--loc-border:       rgba(233,209,139,0.15);
	--loc-border-hover: rgba(233,209,139,0.26);
	--loc-font-display: 'Playfair Display', serif;
	--loc-font-accent:  'Cormorant Garamond', serif;
	--loc-font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

.loc-checkout-body{
	margin:0;
	background:var(--loc-bg-deep);
	color:var(--loc-cream);
	font-family:var(--loc-font-body);
	-webkit-font-smoothing:antialiased;
}

.loc-wrap{ min-height:100vh; display:flex; flex-direction:column; }

/* ---------- Minimal top bar (no site header) ---------- */
.loc-topbar{
	display:flex; align-items:center; justify-content:space-between;
	padding:24px 48px;
	border-bottom:1px solid var(--loc-border);
}
.loc-logo, .loc-logo img{ max-height:40px; color:var(--loc-gold-light); text-decoration:none; font-family:var(--loc-font-display); font-size:20px; letter-spacing:.04em; }
.loc-topbar-secure{
	display:flex; align-items:center; gap:8px;
	font-size:12px; letter-spacing:.08em; text-transform:uppercase;
	color:rgba(247,245,240,.6);
}
.loc-icon-lock{ width:14px; height:14px; border:1.5px solid var(--loc-gold-light); border-radius:2px; display:inline-block; position:relative; }
.loc-icon-lock:before{ content:""; position:absolute; top:-7px; left:2px; width:6px; height:7px; border:1.5px solid var(--loc-gold-light); border-bottom:none; border-radius:4px 4px 0 0; }

/* ---------- Main layout ---------- */
.loc-main{ flex:1; max-width:1280px; width:100%; margin:0 auto; padding:40px 48px 80px; }

/*
 * functions.php wraps the real WooCommerce output in two divs:
 *   .checkout-left-column  → #customer_details (billing/shipping/notes/gift)
 *   .checkout-right-column → #order_review_heading + #order_review (totals + payment)
 * Plain flexbox on those two wrappers — no grid-placement hacks needed.
 */
form.woocommerce-checkout{
	display:flex;
	gap:40px;
	align-items:flex-start;
	flex-wrap:wrap;
}
.checkout-left-column{ flex:1 1 480px; min-width:0; display:flex; flex-direction:column; gap:24px; }
.checkout-right-column{ flex:0 0 400px; position:sticky; top:24px; }

/* col2-set defaults to a 48%/48% flex row (billing | shipping side by side) — stack instead,
   since the shipping column is usually empty until "ship to different address" is checked. */
#customer_details.col2-set{ display:flex; flex-direction:column; margin:0; gap:24px; }
#customer_details .col-1,
#customer_details .col-2{ width:100%; flex:none; margin:0; }
#customer_details .col-2:empty{ display:none; }

/* ---------- Card styling for every section ---------- */
.woocommerce-billing-fields,
.woocommerce-shipping-fields:not(:empty),
#loc-gift-card,
#order_review{
	background:linear-gradient(180deg, var(--loc-bg-card), var(--loc-bg-panel));
	border:1px solid var(--loc-border);
	border-radius:16px;
	padding:28px 32px;
}

/* Additional-fields wraps order notes + our gift card — no double card border around it,
   the gift card underneath already has its own. */
.woocommerce-additional-fields{ background:none; border:none; padding:0; }
.woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper{ margin-bottom:24px; }

/* Default WooCommerce headings ("Billing details" / "Shipping details" / "Additional information").
   We render our own "Contact Information" title inside the billing block, so hide that one;
   the others get styled to match instead of being replaced. */
.woocommerce-billing-fields > h3:first-child{ display:none; }
.woocommerce-shipping-fields > h3:first-child,
.woocommerce-additional-fields > h3:first-child,
#order_review_heading,
.loc-card-title{
	font-family:var(--loc-font-display);
	font-size:20px;
	font-weight:600;
	color:var(--loc-gold-light);
	margin:0 0 20px;
	letter-spacing:.01em;
}

/* ---------- Curator strip ---------- */
.loc-curator-strip{
	display:flex; align-items:center; gap:20px; flex-wrap:wrap;
	padding:14px 20px; margin-bottom:20px;
	border:1px dashed var(--loc-border);
	border-radius:12px;
	font-size:13px;
}
.loc-curator-label{ color:rgba(247,245,240,.45); text-transform:uppercase; letter-spacing:.1em; font-size:11px; }
.loc-curator-strip a{ color:var(--loc-gold-light); text-decoration:none; border-bottom:1px solid transparent; }
.loc-curator-strip a:hover{ border-bottom-color:var(--loc-gold-light); }

/* ---------- Form fields → floating, glassy, gold-glow on focus ---------- */
.woocommerce-checkout .form-row{ margin:0 0 16px; }
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{ width:calc(50% - 8px); }

.woocommerce-checkout label{
	display:block;
	font-size:11px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:rgba(247,245,240,.45);
	margin-bottom:6px;
}
.woocommerce-checkout label .required{ color:var(--loc-gold); text-decoration:none; }

.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.select2-container .select2-selection{
	width:100%;
	background:rgba(255,255,255,0.05) !important;
	border:1px solid var(--loc-border) !important;
	border-radius:10px !important;
	padding:12px 14px !important;
	height:auto !important;
	color:var(--loc-cream) !important;
	font-size:14px;
	font-family:var(--loc-font-body);
	transition:border-color .2s, box-shadow .2s, background .2s;
}
.woocommerce-checkout input.input-text::placeholder,
.woocommerce-checkout textarea::placeholder{ color:rgba(247,245,240,.3); }

.woocommerce-checkout input.input-text:hover,
.woocommerce-checkout textarea:hover,
.woocommerce-checkout select:hover{ border-color:var(--loc-border-hover) !important; }

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus{
	outline:none;
	border-color:rgba(233,209,139,.6) !important;
	background:rgba(255,255,255,.08) !important;
	box-shadow:0 0 0 3px rgba(212,175,55,.14), 0 0 22px rgba(212,175,55,.18) !important;
}

/* "ship to a different address" + our custom toggles → gold switch, not a checkbox */
#ship-to-different-address{ margin-bottom:16px; }
#ship-to-different-address label{ display:flex; align-items:center; gap:12px; cursor:pointer; text-transform:none; font-size:14px; color:var(--loc-cream); }
#ship-to-different-address input[type="checkbox"],
.loc-switch input[type="checkbox"]{
	position:absolute; opacity:0; width:0; height:0;
}
#ship-to-different-address .woocommerce-input-wrapper,
.loc-switch{ position:relative; display:inline-block; width:46px; height:28px; }
#ship-to-different-address .woocommerce-input-wrapper:before,
.loc-switch-track{
	content:""; position:absolute; inset:0;
	background:rgba(255,255,255,.08); border:1px solid var(--loc-border);
	border-radius:999px; transition:all .25s;
}
#ship-to-different-address input:checked ~ .woocommerce-input-wrapper:before,
.loc-switch input:checked + .loc-switch-track{
	background:linear-gradient(90deg,var(--loc-gold),var(--loc-gold-light));
	border-color:var(--loc-gold-light);
	box-shadow:0 0 16px rgba(212,175,55,.4);
}
.loc-switch-thumb{
	position:absolute; top:2px; left:2px; width:24px; height:24px;
	background:var(--loc-cream); border-radius:999px;
	box-shadow:0 2px 8px rgba(0,0,0,.25);
	transition:left .25s;
}
.loc-switch input:checked + .loc-switch-track .loc-switch-thumb{ left:18px; }

/* ---------- Gift & Personalization card ---------- */
.loc-toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--loc-border); }
.loc-toggle-row:last-of-type{ border-bottom:none; }
.loc-toggle-row strong{ display:block; font-size:14px; }
.loc-subtle{ display:block; font-size:12px; color:rgba(247,245,240,.45); margin-top:2px; }
.loc-engraving-fields{ margin-top:16px; }

/* ---------- Shipping method cards ---------- */
ul#shipping_method{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
ul#shipping_method li{
	border:1px solid var(--loc-border); border-radius:12px; padding:14px 16px;
	display:flex; align-items:center; gap:12px; transition:border-color .2s, background .2s;
}
ul#shipping_method li:has(input:checked){
	border-color:rgba(233,209,139,.6);
	background:rgba(255,255,255,.06);
	box-shadow:0 0 0 3px rgba(212,175,55,.14);
}
ul#shipping_method label{ text-transform:none; font-size:14px; color:var(--loc-cream); margin:0; }
.woocommerce-Price-amount{ color:var(--loc-gold-light); font-weight:500; }

/* ---------- Order summary sidebar ---------- */
#order_review{ padding:0; overflow:hidden; }
.woocommerce-checkout-review-order-table{ width:100%; border-collapse:collapse; padding:28px 32px 0; }
.woocommerce-checkout-review-order-table thead{ display:none; }
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th{ border:none; padding:10px 32px; font-size:13px; }
.woocommerce-checkout-review-order-table .cart_item{ border-bottom:1px solid var(--loc-border); }
.woocommerce-checkout-review-order-table .product-name{ color:var(--loc-cream); }
.woocommerce-checkout-review-order-table .product-name .quantity{ display:block; color:rgba(247,245,240,.45); font-size:12px; margin-top:2px; }
.woocommerce-checkout-review-order-table tfoot tr:last-child{ border-top:1px solid var(--loc-gold-light); }
.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td{
	font-family:var(--loc-font-display); font-size:18px; color:var(--loc-gold-light); padding-top:16px; padding-bottom:24px;
}

/* Coupon */
.woocommerce-form-coupon-toggle .woocommerce-info{
	background:rgba(255,255,255,.04);
	border:1px solid var(--loc-border);
	border-radius:12px;
	padding:14px 20px;
	color:var(--loc-cream);
	font-size:13px;
	margin:0 0 20px;
	list-style:none;
}
.woocommerce-form-coupon-toggle .showcoupon{ color:var(--loc-gold-light); text-decoration:underline; }
.checkout_coupon{ background:rgba(255,255,255,.04); border:1px dashed var(--loc-border); border-radius:12px; padding:16px 20px; margin:0 0 20px; }
.checkout_coupon .form-row{ display:flex; gap:10px; margin:0; }
.checkout_coupon button{ flex-shrink:0; background:transparent; border:1px solid var(--loc-gold-light); color:var(--loc-gold-light); border-radius:8px; padding:0 18px; }

/* Payment box */
#payment{ background:transparent; border-top:1px solid var(--loc-border); padding:24px 32px 32px; }
#payment ul.payment_methods{ list-style:none; margin:0 0 16px; padding:0; }
#payment ul.payment_methods li{ padding:12px 0; border-bottom:1px solid var(--loc-border); font-size:14px; }
#payment div.payment_box{
	background:rgba(255,255,255,.04); border:1px solid var(--loc-border); border-radius:10px;
	padding:16px; margin-top:10px; font-size:13px; color:rgba(247,245,240,.7);
}

/* Place order button */
#payment #place_order,
.checkout button.button{
	width:100%;
	background:linear-gradient(90deg,var(--loc-gold),var(--loc-gold-light));
	color:var(--loc-bg-deep);
	font-family:var(--loc-font-display);
	font-weight:600;
	font-size:15px;
	letter-spacing:.04em;
	border:none;
	border-radius:10px;
	padding:16px 20px;
	cursor:pointer;
	transition:box-shadow .2s, transform .1s;
}
#payment #place_order:hover{ box-shadow:0 0 24px rgba(212,175,55,.4); }
#payment #place_order:active{ transform:translateY(1px); }

/* ---------- Trust footer ---------- */
.loc-trust-footer{
	display:flex; flex-wrap:wrap; justify-content:center; gap:32px;
	padding:20px 24px; border-top:1px solid var(--loc-border);
	font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(247,245,240,.55);
}
.loc-badge-dot{ width:6px; height:6px; border-radius:999px; background:var(--loc-gold-light); display:inline-block; margin-right:8px; box-shadow:0 0 8px rgba(212,175,55,.7); }

/* ---------- Notices ---------- */
.woocommerce-error, .woocommerce-info, .woocommerce-message{
	background:var(--loc-bg-card); border:1px solid var(--loc-border-hover); color:var(--loc-cream);
	border-radius:10px; padding:14px 18px; list-style:none;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
	.loc-topbar{ padding:18px 20px; }
	.loc-main{ padding:24px 20px 48px; }
	form.woocommerce-checkout{ flex-direction:column; }
	.checkout-left-column,
	.checkout-right-column{ flex-basis:auto; width:100%; }
	.checkout-right-column{ position:static; top:auto; }
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last{ width:100%; }
}


/* Two-column checkout: 50% customer info / 50% payment */
#customer_details {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.checkout .col2-set,
.checkout form.checkout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
}

.checkout-left-column,
.checkout-right-column {
	flex: 1 1 50%;
	max-width: calc(50% - 20px);
	box-sizing: border-box;
}

/* Stack on mobile */
@media (max-width: 782px) {
	.checkout-left-column,
	.checkout-right-column {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* Hide WooCommerce's default "Billing details" heading — loc-card-title replaces it */
.woocommerce-billing-fields > h3:first-child {
	display: none;
}