/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet is loaded from functions.php, not via @import */

/* --------------------------------------------------------------
   Checkout – mobile payment section & terms
-------------------------------------------------------------- */

@media (max-width: 768px) {
	/* 1. Make payment method image full-width under the label text */
	/* Target the li container to control layout of radio, text, and image */
	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_grow-wallet-payment {
		display: flex !important;
		flex-wrap: wrap !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		width: 100% !important;
		padding: 15px 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	/* Hide the radio button input */
	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_grow-wallet-payment > input[type="radio"] {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		position: absolute !important;
		clip: rect(0, 0, 0, 0) !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Label contains text and image - make it flex */
	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_grow-wallet-payment > label {
		display: flex !important;
		flex-wrap: wrap !important;
		flex-direction: row !important;
		align-items: center !important;
		width: auto !important;
		flex: 1 1 auto !important;
		order: 1 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		line-height: 1.5 !important;
	}

	/* Label :before (radio visual) stays inline with text */
	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_grow-wallet-payment > label:before {
		display: inline-block !important;
		margin-bottom: 0 !important;
		margin-right: 8px !important;
		order: 0 !important;
		flex-shrink: 0 !important;
		vertical-align: middle !important;
		align-self: center !important;
	}

	/* Text content in label - wrap it in a span-like behavior */
	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_grow-wallet-payment > label > *:not(img),
	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_grow-wallet-payment > label > span,
	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_grow-wallet-payment > label .label-text-content {
		order: 1 !important;
		margin-bottom: 0 !important;
		display: inline-block !important;
		vertical-align: middle !important;
		white-space: nowrap !important;
	}

	/* Make the image appear on a new line and full width with reduced margin */
	/* Override plugin CSS with more specific selectors */
	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_grow-wallet-payment > label img,
	.woocommerce-checkout-payment .wc_payment_methods .wc_payment_method.payment_method_grow-wallet-payment label img,
	li.wc_payment_method.payment_method_grow-wallet-payment label img,
	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_grow-wallet-payment label img,
	body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_grow-wallet-payment label img,
	body.rtl.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_grow-wallet-payment label img,
	body.woocommerce-checkout li.wc_payment_method.payment_method_grow-wallet-payment label img,
	body.rtl.woocommerce-checkout li.wc_payment_method.payment_method_grow-wallet-payment label img {
		display: block !important;
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		margin-top: 6px !important;
		margin-bottom: 8px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
		vertical-align: baseline !important;
		position: relative !important;
		top: auto !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		order: 2 !important;
		align-self: stretch !important;
		clear: both !important;
		flex-basis: 100% !important;
	}

	/* 2. Make the terms checkbox larger and clearly aligned below */
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
		overflow: hidden !important;
		overflow-x: hidden !important;
		overflow-y: hidden !important;
		max-height: none !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p.form-row {
		margin-top: 0.75rem !important;
		margin-bottom: 1rem !important;
		padding: 0 !important;
		text-align: right !important;
		direction: rtl !important;
		overflow: hidden !important;
		max-height: none !important;
		height: auto !important;
	}

	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox.checkbox {
		display: flex !important;
		flex-direction: row-reverse !important; /* checkbox on right side, text on left (for RTL) */
		align-items: flex-start !important;
		justify-content: flex-end !important;
		gap: 12px !important;
		font-size: 16px !important;
		line-height: 1.6 !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		direction: rtl !important;
		text-align: right !important;
	}

	/* Hide spinner controls (number input spinners) */
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="number"]::-webkit-inner-spin-button,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="number"]::-webkit-outer-spin-button,
	.woocommerce-checkout input[type="number"]::-webkit-inner-spin-button,
	.woocommerce-checkout input[type="number"]::-webkit-outer-spin-button,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input::-webkit-inner-spin-button,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input::-webkit-outer-spin-button,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper *::-webkit-inner-spin-button,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper *::-webkit-outer-spin-button {
		-webkit-appearance: none !important;
		margin: 0 !important;
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}

	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="number"],
	.woocommerce-checkout input[type="number"] {
		-moz-appearance: textfield !important;
	}

	/* Hide any scrollbars and spinners in terms section */
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper *,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p.form-row,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
		overflow: hidden !important;
		overflow-x: hidden !important;
		overflow-y: hidden !important;
		max-height: none !important;
		height: auto !important;
	}

	/* Hide the terms content box if it's causing scrolling */
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions {
		display: none !important;
	}

	/* Hide any input spinners globally in checkout */
	.woocommerce-checkout input[type="number"]::-webkit-inner-spin-button,
	.woocommerce-checkout input[type="number"]::-webkit-outer-spin-button {
		-webkit-appearance: none !important;
		appearance: none !important;
		margin: 0 !important;
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
	}

	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input.woocommerce-form__input-checkbox.input-checkbox {
		width: 24px !important;
		height: 24px !important;
		min-width: 24px !important;
		min-height: 24px !important;
		margin-top: 2px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		flex-shrink: 0 !important;
		cursor: pointer !important;
		order: 2 !important; /* Put checkbox last (right side in RTL) */
	}

	/* Ensure the required asterisk stays close to the text */
	.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text + .required,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper abbr.required {
		font-size: 16px !important;
		color: #e2401c !important;
		margin-right: 2px !important;
		order: 0 !important;
	}

	/* Text content should be right-aligned */
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
		text-align: right !important;
		direction: rtl !important;
		order: 1 !important;
	}

	/* 3. Prevent horizontal scrolling / overflow on checkout */
	html.woocommerce-checkout,
	body.woocommerce-checkout {
		overflow-x: hidden !important;
		max-width: 100vw !important;
		position: relative !important;
	}

	.woocommerce-checkout #payment,
	.woocommerce-checkout .woocommerce-checkout-review-order,
	.woocommerce-checkout .woocommerce-checkout-payment,
	.woocommerce-checkout .place-order,
	.woocommerce-checkout .form-row,
	.woocommerce-checkout #payment ul.payment_methods,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
		max-width: 100% !important;
		overflow-x: hidden !important;
		overflow-y: visible !important;
		box-sizing: border-box !important;
		width: 100% !important;
	}

	/* Defensive: avoid any element in payment area from exceeding screen width */
	.woocommerce-checkout #payment *,
	.woocommerce-checkout #payment ul.payment_methods *,
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper * {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Ensure payment methods list doesn't overflow */
	.woocommerce-checkout #payment ul.payment_methods {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: visible !important;
	}

	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: visible !important;
	}

	/* Remove any scrollbars from payment section */
	.woocommerce-checkout #payment,
	.woocommerce-checkout #payment .payment_methods,
	.woocommerce-checkout #payment ul.payment_methods li {
		overflow: visible !important;
		overflow-x: hidden !important;
		overflow-y: visible !important;
	}
}