/**
 * Classic Checkout Styling to Match Blocks
 * 
 * This CSS styles the classic WooCommerce checkout to match the Blocks checkout design.
 * Apply this to forms with class: .bms-classic-checkout
 */

/* === CONTAINER WIDTH (override OceanWP/Elementor constraints) === */
.bms-classic-checkout ~ *,
body:has(.bms-classic-checkout) #content-wrap.container,
body:has(.bms-classic-checkout) .content-area,
body:has(.bms-classic-checkout) .site-content .container,
body:has(.bms-classic-checkout) .elementor-section.elementor-top-section,
body:has(.bms-classic-checkout) .elementor-container {
	max-width: 1200px !important;
	width: 100% !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* === TWO-COLUMN GRID LAYOUT (65/35 ratio) === */
.bms-classic-checkout {
	display: grid !important;
	grid-template-columns: minmax(0, 65%) minmax(360px, 35%) !important;
	grid-column-gap: 28px !important;
	align-items: start !important;
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	grid-auto-flow: row !important;
	overflow: visible !important;
	position: relative !important;
}

/* Express checkout wrapper spans full width, row 1 */
.bms-classic-checkout > .wcpay-express-checkout-wrapper {
	grid-column: 1 / -1 !important;
	grid-row: 1 !important;
	margin-bottom: 20px !important;
}

/* Customer details in column 1, row 2 */
.bms-classic-checkout #customer_details {
	grid-column: 1 !important;
	grid-row: 2 !important;
	width: auto !important;
	float: none !important;
	max-width: 100% !important;
	display: block !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* Order review heading in column 2, row 2 */
.bms-classic-checkout #order_review_heading {
	grid-column: 2 !important;
	grid-row: 2 !important;
	width: auto !important;
	float: none !important;
	margin: 0 0 16px 0 !important;
}

/* Order review in column 2, row 2 - with 15px right margin */
.bms-classic-checkout #order_review {
	grid-column: 2 !important;
	grid-row: 2 !important;
	width: auto !important;
	float: none !important;
	max-width: 100% !important;
	position: sticky !important;
	top: 24px !important;
	align-self: start !important;
	margin-right: 15px !important;
}

/* === REMOVE LEGACY FLOATS === */
.bms-classic-checkout .col2-set {
	float: none !important;
	width: 100% !important;
	clear: none !important;
	max-width: 100% !important;
	display: block !important;
}

.bms-classic-checkout .col2-set .col-1,
.bms-classic-checkout .col2-set .col-2 {
	float: none !important;
	width: 100% !important;
	clear: none !important;
	max-width: 100% !important;
	display: block !important;
}

.bms-classic-checkout .woocommerce-billing-fields,
.bms-classic-checkout .woocommerce-shipping-fields {
	float: none !important;
	width: 100% !important;
	clear: none !important;
	max-width: 100% !important;
}

.bms-classic-checkout .form-row-first,
.bms-classic-checkout .form-row-last {
	float: none !important;
	width: 100% !important;
}

/* === SECTION STYLING === */
/* Billing and shipping - NO borders */
.bms-classic-checkout .woocommerce-billing-fields,
.bms-classic-checkout .woocommerce-shipping-fields {
	background: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 24px !important;
	margin: 0 0 20px 0 !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}

/* Order notes - NO border */
.bms-classic-checkout .woocommerce-additional-fields {
	background: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 24px !important;
	margin: 0 0 20px 0 !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}

/* Account fields - match padding */
.bms-classic-checkout .woocommerce-account-fields {
	padding: 0 24px 24px 24px !important;
	margin: 0 !important;
}

/* Payment section - keep border */
.bms-classic-checkout #payment {
	background: #fff !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 8px !important;
	padding: 24px !important;
	margin: 0 0 20px 0 !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* Right column: order summary card */
.bms-classic-checkout .woocommerce-checkout-review-order {
	background: #fff !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 8px !important;
	padding: 24px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* === TYPOGRAPHY === */
.bms-classic-checkout h3,
.bms-classic-checkout #order_review_heading {
	font-size: 20px !important;
	font-weight: 600 !important;
	margin: 0 0 16px 0 !important;
	color: #000 !important;
	line-height: 1.4 !important;
}

.bms-classic-checkout h3 + p,
.bms-classic-checkout .description {
	font-size: 14px !important;
	color: #666 !important;
	margin-bottom: 16px !important;
	line-height: 1.5 !important;
}

.bms-classic-checkout label {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #000 !important;
	margin-bottom: 8px !important;
	display: block !important;
}

/* === INPUT FIELDS === */
.bms-classic-checkout .input-text,
.bms-classic-checkout textarea {
	border: 1px solid hsla(0, 0%, 7%, .8) !important;
	border-radius: 4px !important;
	padding: 12px 14px !important;
	font-size: 1em !important;
	color: #2b2d2f !important;
	background: #fff !important;
	width: 100% !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s !important;
}

.bms-classic-checkout .input-text:focus,
.bms-classic-checkout select:focus,
.bms-classic-checkout textarea:focus {
	border-color: #000 !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.05) !important;
}

/* Select fields - height 58px */
.bms-classic-checkout select:not(.select2-hidden-accessible) {
	appearance: none !important;
	background: none !important;
	background-color: rgba(0, 0, 0, 0) !important;
	border: 1px solid hsla(0, 0%, 7%, .8) !important;
	border-radius: 4px !important;
	color: #2b2d2f !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	height: 58px !important;
	min-height: 58px !important;
	letter-spacing: normal !important;
	line-height: 25.6px !important;
	padding: 0 8px !important;
	text-decoration: none !important;
	text-transform: none !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	vertical-align: middle !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
}

/* === SELECT2 STYLING === */
.bms-classic-checkout .select2-container .select2-selection {
	height: 58px !important;
	min-height: 58px !important;
	padding: 0 8px !important;
	border: 1px solid hsla(0, 0%, 7%, .8) !important;
	border-radius: 4px !important;
	font-size: 16px !important;
	line-height: 25.6px !important;
	color: #2b2d2f !important;
	background: none !important;
	background-color: rgba(0, 0, 0, 0) !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	display: flex !important;
	align-items: center !important;
}

.bms-classic-checkout .select2-container .select2-selection__rendered {
	line-height: 25.6px !important;
	padding: 0 !important;
	color: #2b2d2f !important;
}

.bms-classic-checkout .select2-container .select2-selection__arrow {
	height: 56px !important;
	right: 8px !important;
}

.bms-classic-checkout .select2-container {
	width: 100% !important;
	position: relative !important;
	z-index: 1 !important;
}

/* Select2 dropdown positioning */
.bms-classic-checkout .select2-dropdown,
.bms-classic-checkout .select2-container--open .select2-dropdown {
	position: absolute !important;
	z-index: 9999 !important;
}

.bms-classic-checkout .select2-container--open {
	z-index: 9999 !important;
}

.bms-classic-checkout .select2-container--open .select2-dropdown--below {
	margin-top: 0 !important;
}

.bms-classic-checkout .select2-container--open .select2-dropdown--above {
	margin-bottom: 0 !important;
}

/* Select2 dropdown when inside form-row */
.bms-classic-checkout .form-row .select2-dropdown {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	width: 100% !important;
	z-index: 99999 !important;
	margin-top: 0 !important;
	transform: none !important;
}

/* Select2 dropdown in body - positioned via JavaScript */
.bms-classic-checkout ~ .select2-dropdown,
body .select2-dropdown {
	z-index: 99999 !important;
	max-height: 300px !important;
	overflow-y: auto !important;
}

/* Hide original select visually but keep in layout for Select2 */
.bms-classic-checkout .form-row.has-select select.select2-hidden-accessible {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 58px !important;
	opacity: 0 !important;
	z-index: -1 !important;
	pointer-events: none !important;
}

/* Lower select border z-index so label appears above it */
.bms-classic-checkout .form-row.has-select .select2-container,
.bms-classic-checkout .form-row.has-select .woocommerce-input-wrapper {
	position: relative !important;
	z-index: 1 !important;
}

/* === FLOATING LABELS === */
.bms-classic-checkout .form-row {
	position: relative !important;
	margin-bottom: 20px !important;
	overflow: visible !important;
	z-index: auto !important;
}

.bms-classic-checkout .form-row .woocommerce-input-wrapper {
	position: relative !important;
}

/* Labels positioned inside fields initially - centered vertically */
.bms-classic-checkout .form-row > label {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 1em !important;
	color: hsla(0, 0%, 7%, .7) !important;
	pointer-events: none !important;
	transition: all 0.2s ease !important;
	background: #fff !important;
	padding: 0 4px !important;
	margin: 0 !important;
	z-index: 2 !important;
	display: block !important;
	line-height: 1 !important;
}

/* Label when field is focused or has value */
.bms-classic-checkout .form-row.focused > label,
.bms-classic-checkout .form-row.has-value > label {
	top: 10px !important;
	left: 0.5625em !important;
	transform: none !important;
	font-size: 0.75em !important;
	color: #2b2d2f !important;
	font-weight: 300 !important;
}

/* Dropdown labels - always cut across top border */
.bms-classic-checkout .form-row.has-select > label {
	top: -3px !important;
	left: 0.5em !important;
	transform: none !important;
	font-size: 0.875em !important;
	color: #2b2d2f !important;
	font-weight: 300 !important;
	background: #fff !important;
	padding: 0 4px !important;
	z-index: 999 !important;
	position: absolute !important;
}

/* Labels with validation errors */
.bms-classic-checkout .form-row.woocommerce-invalid > label,
.bms-classic-checkout .form-row.woocommerce-invalid-required-field > label,
.bms-classic-checkout .form-row.woocommerce-invalid-email > label {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.bms-classic-checkout .form-row.woocommerce-invalid.focused > label,
.bms-classic-checkout .form-row.woocommerce-invalid.has-value > label,
.bms-classic-checkout .form-row.woocommerce-invalid-required-field.focused > label,
.bms-classic-checkout .form-row.woocommerce-invalid-required-field.has-value > label {
	top: 10px !important;
	transform: none !important;
}

/* Error messages */
.bms-classic-checkout .form-row .woocommerce-error,
.bms-classic-checkout .form-row small.woocommerce-error {
	display: block !important;
	margin-top: 4px !important;
	margin-bottom: 0 !important;
	clear: both !important;
	position: relative !important;
	z-index: 1 !important;
}

/* Adjust input padding when label is floating */
.bms-classic-checkout .form-row.focused .input-text,
.bms-classic-checkout .form-row.has-value .input-text,
.bms-classic-checkout .form-row.focused textarea,
.bms-classic-checkout .form-row.has-value textarea {
	padding-top: 18px !important;
	padding-bottom: 6px !important;
}

/* Select fields always have floating label */
.bms-classic-checkout .form-row select,
.bms-classic-checkout .form-row.has-select select {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/* Hide placeholder when label is visible */
.bms-classic-checkout .form-row.focused .input-text::placeholder,
.bms-classic-checkout .form-row.has-value .input-text::placeholder {
	opacity: 0 !important;
}

/* Remove default label spacing and asterisk */
.bms-classic-checkout .form-row > label .required {
	display: none !important;
}

/* === TWO-COLUMN FIELD ROWS === */
.bms-classic-checkout .woocommerce-billing-fields__field-wrapper,
.bms-classic-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	grid-column-gap: 16px !important;
}

.bms-classic-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.bms-classic-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
	margin: 0 0 16px 0 !important;
}

.bms-classic-checkout .woocommerce-billing-fields__field-wrapper > .form-row-wide,
.bms-classic-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-wide {
	grid-column: 1 / -1 !important;
}

/* === SHIPPING METHODS === */
.bms-classic-checkout .woocommerce-checkout-review-order .woocommerce-shipping-methods,
.bms-classic-checkout .woocommerce-checkout-review-order .shipping,
.bms-classic-checkout #order_review .shipping,
.bms-classic-checkout #order_review .woocommerce-shipping-methods {
	display: table-row !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.bms-classic-checkout .woocommerce-checkout-review-order .shipping td,
.bms-classic-checkout #order_review .shipping td {
	display: table-cell !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.bms-classic-checkout .woocommerce-shipping-methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bms-classic-checkout .woocommerce-shipping-methods li {
	display: block !important;
	margin-bottom: 8px !important;
}

.bms-classic-checkout .woocommerce-shipping-methods li label {
	display: block !important;
	margin-bottom: 4px !important;
	cursor: pointer !important;
}

.bms-classic-checkout .shipping_method {
	display: block !important;
	background: #fff !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 6px !important;
	padding: 12px 16px !important;
	margin: 8px 0 !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
}

.bms-classic-checkout .shipping_method:hover {
	border-color: #000 !important;
	background: #f9f9f9 !important;
}

.bms-classic-checkout .shipping_method input[type="radio"]:checked + label {
	font-weight: 600 !important;
}

/* Contact for Shipping Quote plugin elements */
.bms-classic-checkout .wccsq-contact-link,
.bms-classic-checkout .wccsq-refresh-link,
.bms-classic-checkout .wccsq-quote-description,
.bms-classic-checkout .wccsq-quote-description p,
.bms-classic-checkout .wccsq-quote-description a {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.bms-classic-checkout .wccsq-quote-description {
	margin-top: 8px !important;
	margin-bottom: 8px !important;
	font-size: 0.875em !important;
	line-height: 1.5 !important;
}

.bms-classic-checkout .wccsq-contact-link,
.bms-classic-checkout .wccsq-refresh-link {
	color: #4f844b !important;
	text-decoration: underline !important;
	cursor: pointer !important;
	margin-right: 8px !important;
	display: inline !important;
}

.bms-classic-checkout .wccsq-quote-description a {
	color: #4f844b !important;
	text-decoration: underline !important;
}

/* Prevent popups/modals */
.bms-classic-checkout .wccsq-modal,
.bms-classic-checkout .wccsq-popup,
.bms-classic-checkout .wccsq-overlay,
.bms-classic-checkout [class*="modal"],
.bms-classic-checkout [class*="popup"],
.bms-classic-checkout [id*="modal"],
.bms-classic-checkout [id*="popup"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Ensure Select2 doesn't hide quote elements */
.bms-classic-checkout .select2-container ~ .wccsq-quote-description,
.bms-classic-checkout .woocommerce-input-wrapper ~ .wccsq-quote-description,
.bms-classic-checkout .woocommerce-shipping-methods li ~ .wccsq-quote-description {
	display: block !important;
	margin-top: 8px !important;
}

/* === ORDER SUMMARY === */
.bms-classic-checkout .woocommerce-checkout-review-order-table {
	width: 100% !important;
	margin: 0 0 16px 0 !important;
}

.bms-classic-checkout .woocommerce-checkout-review-order-table th,
.bms-classic-checkout .woocommerce-checkout-review-order-table td {
	border: 0 !important;
	padding: 12px 0 !important;
	vertical-align: top !important;
}

.bms-classic-checkout .woocommerce-checkout-review-order-table .product-name {
	font-weight: 500 !important;
	color: #000 !important;
	font-size: 15px !important;
}

.bms-classic-checkout .woocommerce-checkout-review-order-table .product-total {
	text-align: right !important;
	font-weight: 600 !important;
	color: #000 !important;
}

.bms-classic-checkout .woocommerce-checkout-review-order .cart-subtotal,
.bms-classic-checkout .woocommerce-checkout-review-order .shipping,
.bms-classic-checkout .woocommerce-checkout-review-order .order-total {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 12px 0 !important;
	border-bottom: 1px solid #e8e8e8 !important;
	font-size: 14px !important;
}

.bms-classic-checkout .woocommerce-checkout-review-order .order-total {
	border-bottom: 0 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	padding-top: 16px !important;
	margin-top: 8px !important;
	border-top: 2px solid #000 !important;
}

.bms-classic-checkout .woocommerce-checkout-review-order .amount {
	color: #000 !important;
	font-weight: 600 !important;
}

/* === BUTTONS === */
.bms-classic-checkout #place_order,
.bms-classic-checkout .woocommerce a.button.alt,
.bms-classic-checkout .woocommerce button.button.alt {
	background: #000 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 14px 24px !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	width: 100% !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.bms-classic-checkout #place_order:hover,
.bms-classic-checkout .woocommerce a.button.alt:hover,
.bms-classic-checkout .woocommerce button.button.alt:hover {
	background: #333 !important;
	color: #fff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* === CHECKBOXES === */
.bms-classic-checkout input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	margin-right: 8px !important;
	cursor: pointer !important;
}

/* === ERRORS == */
.checkout-inline-error-message {
    font-size:0.75em;
    color:red;
}

/* === RESPONSIVE BREAKPOINT === */
@media (max-width: 1080px) {
	.bms-classic-checkout {
		display: block !important;
		grid-template-columns: none !important;
		grid-column-gap: 0 !important;
	}
	
	.bms-classic-checkout #customer_details {
		grid-column: auto !important;
		grid-row: auto !important;
		width: 100% !important;
		margin-bottom: 24px !important;
	}
	
	.bms-classic-checkout #order_review_heading {
		grid-column: auto !important;
		grid-row: auto !important;
		width: 100% !important;
	}
	
	.bms-classic-checkout #order_review {
		position: static !important;
		margin-top: 24px !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		grid-column: auto !important;
		grid-row: auto !important;
		width: 100% !important;
	}
	
	.bms-classic-checkout .woocommerce-billing-fields__field-wrapper,
	.bms-classic-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr !important;
	}
}