html:has(> body.wc-modal-open),
body.wc-modal-open {
	overflow: hidden !important;
}
body.wc-modal-open dialog.sc-cart-drawer {
	display: none !important;
}

:root{
	--wc-checkout-accent-color: #11A8FF; /*store's color by default*/
	--wc-checkout-text-color: #0D131E;
	--wc-checkout-input-color: #FFFFFF;
	
	--wc-checkout-backdrop-color: #F5F5F580;
	--wc-checkout-backdrop-blur: 10px;

	--wc-checkout-width: 367px;
	--logo-dimensions: 30px;

	--wc-checkout-border-color: #DCE0E6;
	--wc-checkout-top-bg-color: #F4F5F6;
	--wc-checkout-bottom-bg-color: #FFFFFF;
}
.wc-modal{
	--sc-color-primary-500: var(--wc-checkout-accent-color);
	--sc-focus-ring-color-primary: var(--wc-checkout-accent-color);
	--sc-input-border-color-focus: var(--wc-checkout-accent-color);

	/* Base text color — everything that uses `inherit` or
	   `currentColor` picks this up automatically. */
	color: var(--wc-checkout-text-color);

	/* ── Text color palette ──────────────────────────────
	   A single --wc-checkout-text-color drives every gray
	   shade SureCart uses for text. Each level is mixed with
	   transparent so it proportionally adapts to any background. */
	--sc-color-gray-950: var(--wc-checkout-text-color);
	--sc-color-gray-900: color-mix(in srgb, var(--wc-checkout-text-color) 98%, transparent);
	--sc-color-gray-800: color-mix(in srgb, var(--wc-checkout-text-color) 91%, transparent);
	--sc-color-gray-700: color-mix(in srgb, var(--wc-checkout-text-color) 81%, transparent);
	--sc-color-gray-600: color-mix(in srgb, var(--wc-checkout-text-color) 72%, transparent);
	--sc-color-gray-500: color-mix(in srgb, var(--wc-checkout-text-color) 60%, transparent);
	--sc-color-gray-400: color-mix(in srgb, var(--wc-checkout-text-color) 39%, transparent);
	--sc-color-gray-300: color-mix(in srgb, var(--wc-checkout-text-color) 13%, transparent);
	--sc-color-gray-200: color-mix(in srgb, var(--wc-checkout-text-color) 10%, transparent);

	/* Higher-level SC text variables */
	--sc-input-label-color: var(--sc-color-gray-600);
	--sc-input-color: var(--sc-color-gray-700);
	--sc-input-color-hover: var(--sc-color-gray-700);
	--sc-input-color-focus: var(--sc-color-gray-700);
	--sc-input-placeholder-color: var(--sc-color-gray-400);
	--sc-input-help-text-color: var(--sc-color-gray-500);
	--sc-input-icon-color: var(--sc-color-gray-400);
	--sc-input-icon-color-hover: var(--sc-color-gray-600);
	--sc-input-icon-color-focus: var(--sc-color-gray-600);
	--sc-input-control-color: var(--wc-checkout-text-color); /* SC fallback: --sc-color-black (#000) → 100% of base */
	--sc-input-color-disabled: var(--sc-color-gray-900);   /* SC :root uses gray-900; opacity handled by container */
	--sc-line-item-title-color: var(--sc-color-gray-600);  /* SC fallback: --sc-input-label-color → gray-600 */

	/* ── Border & background protection ──────────────────
	   Gray overrides above would also affect variables that
	   SureCart maps to borders / backgrounds. Re-pin them so
	   borders stay neutral regardless of text color. */
	--sc-input-border-color: var(--wc-checkout-border-color);
	--sc-input-border-color-hover: var(--wc-checkout-border-color);
	--sc-input-border-color-disabled: var(--wc-checkout-border-color);
	--sc-select-border-color: var(--wc-checkout-border-color);
	--sc-card-border-color: var(--wc-checkout-border-color);
	--sc-panel-border-color: var(--wc-checkout-border-color);
	--sc-button-default-focus-border-color: var(--wc-checkout-border-color);

	--sc-input-background-color: var(--wc-checkout-input-color);
	--sc-input-background-color-hover: var(--wc-checkout-input-color);
	--sc-input-background-color-focus: var(--wc-checkout-input-color);
	--sc-input-background-color-disabled: color-mix(in srgb, var(--wc-checkout-input-color) 90%, #9ca3af);
	--sc-select-background-color: var(--wc-checkout-input-color);
	--sc-card-background-color: var(--wc-checkout-input-color);
	--sc-toggle-background-color: var(--wc-checkout-input-color);
	--sc-panel-background-color: var(--wc-checkout-input-color);
	--sc-choice-background-color: var(--wc-checkout-input-color);
	--sc-button-default-hover-background-color: var(--wc-checkout-input-color);

	--sc-overlay-background-color: var(--wc-checkout-bottom-bg-color);
	--sc-block-ui-background-color: var(--wc-checkout-bottom-bg-color);

	--sc-checkout-font-size: 14px; /*if this is not 0px, there's a bug at the bottom of the modals created from a buy now button from a product page*/

	--sc-font-size-x-small: 12px;
	--sc-font-size-small: 14px;
	--sc-font-size-medium: 14px;
	--sc-font-size-large: 15px;
	--sc-font-size-x-large: 15px;
	--sc-font-size-xxx-large: 16px;

	--sc-input-label-font-size-medium: 14px;
	--sc-input-font-size-medium: 14px;
	--sc-button-font-size-large: 15px;

	--button-border-radius: 8px;
	--sc-input-border-radius-large: 8px;
	--sc-border-radius-medium: 8px;
	--sc-input-border-radius-medium: 8px;
	--sc-input-height-medium: 35px;
	--sc-input-height-large: 35px;
	--sc-input-spacing-medium: 12px;

	--c-inputHeight: 35px;

	--sc-form-row-spacing: 0px;
}
.wc-modal .wp-block-surecart-column{
	--sc-form-row-spacing: 0px !important;
}

/*Modal structure before SureCart*/
.wc-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;

	padding: 50px 20px;

	display: none;
	overscroll-behavior: contain;
}
.wc-modal.is-open {
	display: flex;
	justify-content: center;
	align-items: center;
}

.wc-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--wc-checkout-backdrop-color);
	-webkit-backdrop-filter: blur(var(--wc-checkout-backdrop-blur));
	backdrop-filter: blur(var(--wc-checkout-backdrop-blur));
	display: flex;
	justify-content: center;
	align-items: center;
}
.wc-modal__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-top-color: var(--wc-checkout-accent-color);
	border-radius: 50%;
	animation: wc-spin 0.6s linear infinite;
}
.wc-modal.is-loading .wc-modal__spinner {
	display: block;
}
.wc-modal.is-loading .wc-modal__wrapper {
	visibility: hidden;
	pointer-events: none;
}
@keyframes wc-spin {
	to { transform: rotate(360deg); }
}

.wc-modal__wrapper {
	position: relative;
	width: var(--wc-checkout-width);
	max-width: 100%;
	max-height: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wc-checkout-bottom-bg-color);
	border: 1px solid var(--wc-checkout-border-color);
	box-shadow: 0 1px 2px 0 rgba(13, 19, 30, 0.10);
	display: flex;
	flex-direction: column;
}
.wc-modal__wrapper{
	opacity: 0;
	transform: scale(0.9);
	transform-origin: top;
	transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wc-modal.is-ready .wc-modal__wrapper{
	opacity: 1;
	transform: scale(1);
}
.wc-modal__scroller {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

/*SureCart overrides*/
.wc-modal .wp-block-surecart-columns,
.wc-modal sc-columns{
	flex-direction: column;
}
.wc-modal .wp-block-surecart-columns.is-full-height,
.wc-modal sc-columns.is-full-height{
	min-height: unset !important;
}
.wp-block-surecart-columns{
	background-color: unset !important;
}
.wc-modal .wp-block-surecart-columns,
.wc-modal sc-columns{
	gap: 0;
}
.wc-modal .wp-block-surecart-column{
	width: 100%;
	max-height: fit-content;
	padding: 20px !important;
	background-color: var(--wc-checkout-bottom-bg-color) !important;
}
.wc-modal .wp-block-surecart-columns:not(.is-not-stacked-on-mobile).is-full-height > .wp-block-surecart-column,
.wc-modal sc-columns:not(.is-not-stacked-on-mobile).is-full-height>sc-column{
	padding: 20px !important;
}
.wc-modal sc-column:last-child{
	background-color: var(--wc-checkout-bottom-bg-color) !important;
}
.wc-modal .wp-block-surecart-column:has(> sc-order-summary){
	background-color: var(--wc-checkout-top-bg-color) !important;
}
.wc-modal sc-column:first-child{
	background-color: var(--wc-checkout-top-bg-color) !important;
}
.wc-modal .wp-block-surecart-column > sc-order-summary:first-child{
	margin-block-start: 0px !important
}
.wc-modal .wp-block-surecart-column:has(> sc-order-summary):before,
.wc-modal sc-column:first-child:before{
	content: '';
	display: block;
	width: auto;
	height: var(--logo-dimensions);
	background-image: var(--wc-store-logo);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 20px;
}

/*SureCart variables overrides*/
.wc-modal sc-prose{
	line-height: 1.4;
    font-size: 14px;
}
.wc-modal sc-text{
	font-size: 16px !important;
}
.wc-modal sc-column:first-child {
    --sc-form-row-spacing: 14px !important;
}
.wc-modal sc-column:last-child {
    --sc-form-row-spacing: 0px !important;
}
.wc-modal sc-form-control:last-of-type{
	margin-bottom: 0 !important;
}
.wc-modal sc-line-item{
	--price-size: 14px !important;
}
.wc-modal sc-button::part(base) {
	border: unset;
	background: var(--wc-checkout-accent-color);
	box-shadow:
	0 -1px 4px 0 color-mix(in oklch, var(--wc-checkout-accent-color), white 8%) inset,
	0 0 0 1px color-mix(in oklch, var(--wc-checkout-accent-color), black 20%),
	0 1px 0 0 color-mix(in oklch, var(--wc-checkout-accent-color), white 35%) inset;
	margin-top: 6px;
}
:root .wc-modal .is-layout-constrained > *:not(.wp-block-surecart-column){
	margin-block-start: 14px !important;
}
:root .wc-modal .is-layout-constrained > :nth-child(2){
	margin-block-start: 0 !important;
}

/*Product header: name + price on one line*/
.wc-modal .wc-product-header{
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.wc-modal .wc-product-header sc-product-selected-price{
	flex-shrink: 0;
}

.wc-modal .price-choice{
	display: flex;
	flex-direction: row;
}
.wc-modal .price-choice__price{
	display: flex;
    justify-content: flex-end;
}
.wc-modal .sc-secure-notice{
    display: none;
}
.wc-modal .sc-test-mode-info-content{
	display: none !important;
}
.wc-modal .sc-test-mode-info-footer{
	display: none !important;
}
.wc-modal .wp-block-surecart-column.is-sticky{
	position: static !important;
}