/**
 * Elastic screen.css applies global resets (body, div, ul, footer, etc.) and
 * Bootstrap adds link-color / button overrides.
 *
 * WP block-theme class selectors (.is-layout-flex, .has-global-padding, etc.)
 * already beat Elastic element selectors via normal specificity, so we must NOT
 * add our own element-scoped reverts inside .ot-external-theme-chrome — that
 * would create specificity (0,1,1) which overrides the theme's (0,1,0) classes
 * and breaks layout.
 *
 * This file therefore targets ONLY the cases where Elastic/Bootstrap use
 * !important or structural element-level changes that the theme cannot override.
 */

/* ================================================================
 * 1. BODY — Elastic body{font-family:'Gilroy'!important; …} overrides
 *    the theme's font. The actual theme values (Manrope etc.) are injected
 *    as inline CSS by class-ot-external-public.php via wp_get_global_styles().
 *    Here we only handle non-typography properties.
 * ================================================================ */
body.ot-external-page {
	background-image: none !important;
	overflow-x: hidden;
}

/* ================================================================
 * 2. PLUGIN ROOT — keep Elastic look inside #ot-external-root
 * ================================================================ */
#ot-external-root {
	font-family: "Gilroy", "PT Sans", sans-serif !important;
	font-size: 14px;
	color: #0f2a38;
	background-color: #fff;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flow-root;
	min-width: 0;
	overflow-x: hidden;
}

/* ================================================================
 * 3. CONTENT WRAP — keep plugin content within theme wide-width
 * ================================================================ */
.ot-external-content-wrap {
	width: min(100%, var(--wp--style--global--wide-size, 1200px));
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--style--root--padding-left, 0);
	padding-right: var(--wp--style--root--padding-right, 0);
	box-sizing: border-box;
}

.ot-external-content-wrap.alignwide {
	width: min(100%, var(--wp--style--global--wide-size, 1200px)) !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ot-external-content-wrap #ot-external-root {
	width: 100% !important;
	max-width: 100% !important;
}

/* ================================================================
 * 4. CHROME — targeted fixes for Elastic/Bootstrap !important and
 *    structural element-level rules. No margin/padding reverts here!
 * ================================================================ */

/* 4a. Header/footer chrome — proper stacking context */
.ot-external-theme-chrome {
	position: relative;
	z-index: 10;
}

/* 4b. Elastic: footer{float:left; width:100%; border-top:1px solid; z-index:1}
 *     This is an element selector that structurally breaks the footer. */
body.ot-external-page > footer,
.ot-external-theme-chrome footer {
	float: none !important;
	width: auto !important;
	border-top: none !important;
}

body.ot-external-page > header,
.ot-external-theme-chrome header {
	float: none !important;
}

/* 4c. Override Bootstrap a{color:#007bff} and Elastic a:hover{color:#ff4141}.
 *     Elastic a{text-decoration:none!important} is fine — nav links need no underline.
 *     We do NOT touch text-decoration here. */
body.ot-external-page .ot-external-theme-chrome a {
	color: inherit !important;
	background-color: transparent !important;
}

body.ot-external-page .ot-external-theme-chrome a:hover,
body.ot-external-page .ot-external-theme-chrome a:focus {
	color: inherit !important;
}

/* 4d. Elastic: input[type="checkbox"]{display:none} — (0,0,2) beats some theme
 *     rules. Restore checkboxes outside the plugin root. */
body.ot-external-page input[type="checkbox"] {
	display: revert !important;
}

#ot-external-root input[type="checkbox"] {
	display: none !important;
}

/* 4e. Re-apply Elastic list reset inside plugin root only */
#ot-external-root ul:not(.listUL) {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ================================================================
 * 5. WOOCOMMERCE MINI-CART — keep button clickable & readable
 * ================================================================ */
.ot-external-theme-chrome .wc-block-mini-cart {
	position: relative;
	z-index: 20;
}

.ot-external-theme-chrome .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button {
	pointer-events: auto !important;
	cursor: pointer !important;
	position: relative;
	z-index: 20;
}

body.ot-external-page .wc-block-mini-cart__drawer {
	z-index: 100000 !important;
	position: fixed !important;
}

/* ================================================================
 * 6. PLUGIN ROOT UI — keep Elastic component styles
 * ================================================================ */

#ot-external-root .panel-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	float: none;
}

#ot-external-root .panel-buttons .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#ot-external-root .panel-buttons .button i {
	display: inline-block;
	float: none;
	position: static;
	flex: 0 0 20px;
	margin-right: 10px;
}

#ot-external-root .modal-footer,
body.ot-external-page .confirmDialog .modal-footer {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
}

#ot-external-root .modal-footer .button,
body.ot-external-page .confirmDialog .modal-footer .button {
	width: auto;
	flex: 1 1 0;
	margin: 0;
}

body.ot-external-page .confirmDialog .modal-footer__button-cancel {
	background-color: #e9eff7 !important;
	border-color: #e9eff7 !important;
	color: #0f2a38 !important;
	opacity: 1 !important;
}

body.ot-external-page .confirmDialog .modal-footer__button-cancel:hover {
	background-color: #dbe6f5 !important;
	border-color: #dbe6f5 !important;
	color: #0f2a38 !important;
}

body.ot-external-page .confirmDialog .modal-footer__button-confirm {
	background-color: #ff4141 !important;
	border-color: #ff4141 !important;
	color: #fff !important;
	opacity: 1 !important;
}

body.ot-external-page .confirmDialog .modal-footer__button-confirm:hover {
	background-color: #fff !important;
	border-color: #ff4141 !important;
	color: #ff4141 !important;
}