/* ==========================================================================
   Shopify-style checkout - distraction free, no site header/footer.
   FluentCart renders its checkout app inside .ocs-chk-main; these styles
   skin its output (fct-* classes + generic form elements) to match the
   classic Shopify checkout: white left column, #fafafa order summary,
   rounded 5px fields, dark "Pay now" button.
   ========================================================================== */

:root {
	--ocs-chk-link: #2a9dcc;
	--ocs-chk-border: #d9d9d9;
	--ocs-chk-text: #333333;
	--ocs-chk-muted: #737373;
	--ocs-chk-btn: #222222;
	--ocs-chk-radius: 5px;
	--ocs-chk-summary-bg: #fafafa;
	--ocs-chk-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body.ocs-checkout-body {
	background: #fff;
	font-family: var(--ocs-chk-font);
	color: var(--ocs-chk-text);
	font-size: 14px;
	line-height: 1.5;
}

.ocs-checkout-page { min-height: 100vh; display: flex; flex-direction: column; }
.ocs-chk-container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; width: 100%; }

/* ------------------------------------------------------------- header */
.ocs-chk-header {
	background: #fff;
	border-bottom: 1px solid #e6e6e6;
	padding: 1.1rem 0;
}
.ocs-chk-header .ocs-chk-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ocs-chk-logo { display: inline-flex; align-items: center; }
.ocs-chk-logo img { display: block; }
.ocs-chk-store-name { font-size: 1.55rem; font-family: Georgia, 'Times New Roman', serif; color: #333; letter-spacing: .02em; }
.ocs-chk-header-right { display: flex; align-items: center; gap: 1.25rem; }
.ocs-chk-back { display: inline-flex; align-items: center; gap: .35rem; font-size: 12px; color: var(--ocs-chk-link); }
.ocs-chk-back:hover { color: #1f7ba3; text-decoration: underline; }
.ocs-chk-secure { display: inline-flex; align-items: center; gap: .35rem; font-size: 12px; color: var(--ocs-chk-muted); }

/* ------------------------------------------------------------- steps */
.ocs-chk-steps { padding: .9rem 0 0; font-size: 12px; }
.ocs-chk-steps a { color: var(--ocs-chk-link); }
.ocs-chk-steps a:hover { text-decoration: underline; }
.ocs-chk-steps span { color: var(--ocs-chk-muted); }
.ocs-chk-steps span.current { color: var(--ocs-chk-text); font-weight: 500; }
.ocs-chk-step-sep { margin: 0 .45rem; }

/* --------------------------------------------------------------- main */
.ocs-chk-main {
	flex: 1 0 auto;
	background: linear-gradient(90deg, #fff 50%, var(--ocs-chk-summary-bg) 50%);
	padding: 1.5rem 0 3rem;
}
@media (max-width: 899px) {
	.ocs-chk-main { background: #fff; }
}

/* FluentCart checkout wrapper - widen into two-column canvas */
.ocs-chk-main .fluent-cart-checkout,
.ocs-chk-main .fct-checkout,
.ocs-chk-main .fct_checkout,
.ocs-chk-main [class*="fct-checkout"],
.ocs-chk-main [class*="fluentcart-checkout"],
.ocs-chk-main .ocs-shopify-checkout {
	background: transparent;
	font-family: var(--ocs-chk-font);
}

/* Order summary column -> Shopify gray panel */
.ocs-chk-main .fct-order-summary,
.ocs-chk-main .fct_order_summary,
.ocs-chk-main .order-summary,
.ocs-chk-main [class*="order_summary"],
.ocs-chk-main [class*="order-summary"],
.ocs-chk-main [class*="cart-summary"],
.ocs-chk-main aside {
	background: var(--ocs-chk-summary-bg);
	border-left: 1px solid #e1e1e1;
	padding: 1.5rem;
}
@media (max-width: 899px) {
	.ocs-chk-main .fct-order-summary,
	.ocs-chk-main .fct_order_summary,
	.ocs-chk-main .order-summary,
	.ocs-chk-main [class*="order_summary"],
	.ocs-chk-main [class*="order-summary"],
	.ocs-chk-main [class*="cart-summary"],
	.ocs-chk-main aside {
		border-left: 0;
		border-top: 1px solid #e1e1e1;
	}
}

/* --------------------------------------------------------------- forms */
.ocs-chk-main label,
.ocs-chk-main .form-label {
	font-size: 12px;
	font-weight: 500;
	color: #545454;
	margin-bottom: 4px;
}

.ocs-chk-main input[type="text"],
.ocs-chk-main input[type="email"],
.ocs-chk-main input[type="tel"],
.ocs-chk-main input[type="number"],
.ocs-chk-main input[type="password"],
.ocs-chk-main input[type="url"],
.ocs-chk-main select,
.ocs-chk-main textarea,
.ocs-chk-main .form-control,
.ocs-chk-main .form-select {
	display: block;
	width: 100%;
	background: #fff;
	border: 1px solid var(--ocs-chk-border);
	border-radius: var(--ocs-chk-radius);
	padding: 12px 11px;
	font-size: 14px;
	color: var(--ocs-chk-text);
	font-family: var(--ocs-chk-font);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ocs-chk-main input:focus,
.ocs-chk-main select:focus,
.ocs-chk-main textarea:focus,
.ocs-chk-main .form-control:focus,
.ocs-chk-main .form-select:focus {
	border-color: var(--ocs-chk-link);
	box-shadow: 0 0 0 1px var(--ocs-chk-link);
	outline: none;
}
.ocs-chk-main input::placeholder, .ocs-chk-main textarea::placeholder { color: #999; }

.ocs-chk-main input[type="checkbox"],
.ocs-chk-main input[type="radio"] {
	width: 16px; height: 16px;
	accent-color: var(--ocs-chk-link);
}

/* Field headings like "Contact", "Shipping address" */
.ocs-chk-main h2, .ocs-chk-main h3, .ocs-chk-main legend,
.ocs-chk-main .fct-section-title, .ocs-chk-main [class*="section-title"] {
	font-family: var(--ocs-chk-font);
	font-size: 17px;
	font-weight: 500;
	color: var(--ocs-chk-text);
	margin: 1.4rem 0 .8rem;
}
.ocs-chk-main h1 { font-family: var(--ocs-chk-font); font-size: 22px; font-weight: 500; }

/* Links inside checkout */
.ocs-chk-main a { color: var(--ocs-chk-link); }
.ocs-chk-main a:hover { color: #1f7ba3; }

/* ------------------------------------------------------------- buttons */
.ocs-chk-main button[type="submit"],
.ocs-chk-main .fct-place-order-btn,
.ocs-chk-main [class*="place-order"],
.ocs-chk-main [class*="pay-button"],
.ocs-chk-main [class*="pay_button"],
.ocs-chk-main button.primary,
.ocs-chk-main .btn-primary {
	display: block;
	width: 100%;
	background: var(--ocs-chk-btn);
	border: 1px solid var(--ocs-chk-btn);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	padding: 14px 20px;
	border-radius: var(--ocs-chk-radius);
	font-family: var(--ocs-chk-font);
	cursor: pointer;
	transition: background .15s ease;
}
.ocs-chk-main button[type="submit"]:hover,
.ocs-chk-main .fct-place-order-btn:hover,
.ocs-chk-main [class*="place-order"]:hover,
.ocs-chk-main [class*="pay-button"]:hover,
.ocs-chk-main [class*="pay_button"]:hover,
.ocs-chk-main .btn-primary:hover {
	background: #000;
	border-color: #000;
	color: #fff;
}

/* Secondary buttons (apply coupon etc.) */
.ocs-chk-main button:not([type="submit"]):not(.btn-close),
.ocs-chk-main .btn:not(.btn-primary):not([class*="pay"]):not([class*="place"]) {
	border-radius: var(--ocs-chk-radius);
	font-family: var(--ocs-chk-font);
}

/* -------------------------------------------------------------- summary */
.ocs-chk-main table, .ocs-chk-main .fct-summary-table { font-size: 14px; }
.ocs-chk-main td, .ocs-chk-main th { padding: 8px 0; border: 0; }
.ocs-chk-main [class*="total"], .ocs-chk-main .fct-total { font-weight: 600; }

/* Product thumbnails with qty badge (Shopify style) */
.ocs-chk-main [class*="item-image"] img,
.ocs-chk-main [class*="product-image"] img,
.ocs-chk-main .fct-cart-item img {
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 8px;
	background: #fff;
}
.ocs-chk-main [class*="quantity-badge"],
.ocs-chk-main [class*="qty-badge"] {
	position: absolute; top: -8px; right: -8px;
	background: rgba(114, 114, 114, .9); color: #fff;
	border-radius: 50%; min-width: 21px; height: 21px;
	font-size: 12px; display: inline-flex;
	align-items: center; justify-content: center;
}

/* Express checkout divider "OR" look */
.ocs-chk-main hr, .ocs-chk-main [class*="divider"] { border-color: #e6e6e6; }

/* Error + notice styling */
.ocs-chk-main [class*="error"], .ocs-chk-main .is-invalid { color: #d72c0d; }
.ocs-chk-main input.is-invalid, .ocs-chk-main input[aria-invalid="true"] { border-color: #d72c0d; }
.ocs-chk-main [class*="notice"], .ocs-chk-main .alert {
	border-radius: var(--ocs-chk-radius);
	font-size: 13px;
}

/* -------------------------------------------------------------- footer */
.ocs-chk-footer {
	background: #fff;
	border-top: 1px solid #e6e6e6;
	padding: 1.4rem 0 2rem;
	font-size: 12px;
	color: var(--ocs-chk-muted);
}
.ocs-chk-footer .ocs-chk-container { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.ocs-chk-trust { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.ocs-chk-legal { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
.ocs-chk-legal a { color: var(--ocs-chk-link); font-size: 12px; }
.ocs-chk-legal a:hover { text-decoration: underline; }
.ocs-chk-copyright { margin: 0 0 0 auto; }
@media (max-width: 699px) { .ocs-chk-copyright { margin-left: 0; } }

/* Hide WP admin bar margin quirks on checkout */
body.ocs-checkout-body.admin-bar .ocs-checkout-page { margin-top: 0; }