/**
 * Mariya Dykalo — Frame Option
 * Bordered "Add a frame" checkbox block. States: default, hover, checked.
 */

:root {
	--mdframe-border: #dcdcdc;
	--mdframe-border-hover: #737373;
	--dark: #4E4E4E;
	--mdframe-desc: #8a8a8a;
}

.mdframe-block {
	margin: 22px 0;
	max-width: 100%;
}

.mdframe-block .mdframe-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid rgba(181, 181, 181, 0.5);
	border-radius: 1px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mdframe-block .mdframe-option:hover {
	background-color: rgba(181, 181, 181, 0.1);
}


/* Hide the native checkbox but keep it accessible. */
.mdframe-block .mdframe-checkbox {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

/* Custom checkbox box. */
.mdframe-block .mdframe-box {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 5px;
	border: 1px solid var(--mdframe-border-hover);
	border-radius: 4px;
	position: relative;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}


/* Checkmark. */
.mdframe-block .mdframe-box::after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 1px;
	width: 5.42px;
	height: 9.33px;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	border-radius: 1.2px;
	transform: rotate(45deg) scale(0);
	transition: transform 0.12s ease;
}

.mdframe-block.is-checked .mdframe-box::after {
	transform: rotate(45deg) scale(1);
}

.mdframe-block .mdframe-option:hover .mdframe-box {
	border: 2px solid var(--mdframe-border-hover);
}
.mdframe-block .mdframe-option:hover .mdframe-box::after {
    left: 3.5px;
    top: 0px;
}

.mdframe-block.is-checked .mdframe-box,
.mdframe-block.is-checked .mdframe-option:hover .mdframe-box {
	background: var(--dark);
	border-color: var(--dark);
}

/* Keyboard focus ring on the box. */
.mdframe-block .mdframe-checkbox:focus-visible + .mdframe-box {
	outline: 2px solid var(--dark);
	outline-offset: 2px;
}

.mdframe-block .mdframe-content {
	flex: 1 1 auto;
	min-width: 0;
}

.mdframe-block .mdframe-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.mdframe-block .mdframe-title,
.mdframe-block .mdframe-fee {
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
    letter-spacing: var(--e-global-typography-text-letter-spacing);
    color: var(--e-global-color-76fa23a);
}

.mdframe-block .mdframe-fee .woocommerce-Price-amount {
	white-space: nowrap;
}

.mdframe-block .mdframe-desc {
	margin-top: 4px;
	font-family: var(--e-global-typography-10f7d7e-font-family), Sans-serif;
    font-size: var(--e-global-typography-10f7d7e-font-size);
    line-height: var(--e-global-typography-10f7d7e-line-height);
    color: var(--e-global-color-75487ad);
}