/**
 * Extended Warranty box + cart widget styles.
 *
 * Layout rules live under .eww-layout-*; visual "skins" only override the
 * CSS custom properties below (accent color is injected inline from the
 * eww_accent_color setting and wins over skin defaults for --eww-accent
 * only when the user changed it).
 *
 * Variable contract:
 *   --eww-bg / --eww-text / --eww-muted  — period buttons and inner controls
 *   --eww-box-bg / --eww-box-text / --eww-box-muted — the widget container;
 *   seasonal skins set --eww-box-bg: transparent so only the buttons carry
 *   the skin background, and dark skins keep container text readable on a
 *   light page via --eww-box-text/--eww-box-muted.
 */

.eww-warranty-box,
.eww-cart-widget {
	--eww-accent: #2e7d32;
	--eww-bg: #ffffff;
	--eww-text: #1f2933;
	--eww-muted: #6b7280;
	--eww-border: #d9dee3;
	--eww-radius: 8px;
	color: var(--eww-box-text, var(--eww-text));
	font-size: 14px;
	line-height: 1.4;
}

.eww-warranty-box {
	margin: 12px 0;
	clear: both;
	position: relative;
	overflow: hidden;
}

/* ------ Seasonal animations & decorations ------ */

@keyframes eww-fall {
	0% { transform: translateY(-16px) rotate(0deg); opacity: 0; }
	12% { opacity: 0.9; }
	80% { opacity: 0.6; }
	100% { transform: translateY(160px) rotate(45deg); opacity: 0; }
}

@keyframes eww-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

.eww-deco {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	line-height: 1;
}

.eww-deco .eww-deco-item {
	position: absolute;
	top: 0;
	color: var(--eww-accent);
	opacity: 0.8;
}

.eww-deco .eww-deco-item-0 { left: 6%;  font-size: 11px; animation: eww-fall 3s linear 0s infinite; }
.eww-deco .eww-deco-item-1 { left: 20%; font-size: 14px; animation: eww-fall 4s linear 0.7s infinite; }
.eww-deco .eww-deco-item-2 { left: 34%; font-size: 17px; animation: eww-fall 5s linear 1.4s infinite; }
.eww-deco .eww-deco-item-3 { left: 48%; font-size: 11px; animation: eww-fall 3s linear 2.1s infinite; }
.eww-deco .eww-deco-item-4 { left: 62%; font-size: 14px; animation: eww-fall 4s linear 2.8s infinite; }
.eww-deco .eww-deco-item-5 { left: 76%; font-size: 17px; animation: eww-fall 5s linear 3.5s infinite; }
.eww-deco .eww-deco-item-6 { left: 90%; font-size: 11px; animation: eww-fall 3s linear 4.2s infinite; }

.eww-icon-badge {
	width: var(--eww-icon-size, 28px);
	height: var(--eww-icon-size, 28px);
	border-radius: 50%;
	background: var(--eww-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	animation: eww-float 3s ease-in-out infinite;
}

/* Icon glyph scales with the badge (protection shield fills more of it). */
.eww-icon-badge .eww-icon-svg {
	width: 58%;
	height: 58%;
	display: block;
}

.eww-icon-badge .eww-protection {
	width: 92%;
	height: 92%;
}

/* Container variants (eww_icon_container setting) */
.eww-icon-circle {
	border-radius: 50%;
}

.eww-icon-rounded {
	border-radius: 12px;
}

.eww-icon-square {
	border-radius: 4px;
}

.eww-icon-plain {
	background: transparent;
	color: var(--eww-accent);
}

/* The protection icon carries its own colors — never tint it via the badge. */
.eww-icon-type-protection {
	background: transparent;
}

/* ------ Protection icon animation (CSS-only) ------ */

@keyframes eww-prot-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

@keyframes eww-prot-glow {
	0%, 100% { opacity: 0.85; }
	50% { opacity: 1; }
}

@keyframes eww-prot-spark {
	0%, 100% { opacity: 0.35; transform: scale(0.7); }
	50% { opacity: 1; transform: scale(1.15); }
}

.eww-protection .eww-prot-body,
.eww-protection .eww-prot-outline {
	transform-box: fill-box;
	transform-origin: center;
}

.eww-protection .eww-prot-body {
	animation: eww-prot-breathe 3.2s ease-in-out infinite;
}

.eww-protection .eww-prot-outline {
	animation: eww-prot-glow 3.2s ease-in-out infinite;
}

.eww-protection .eww-prot-spark {
	transform-box: fill-box;
	transform-origin: center;
	animation: eww-prot-spark 2.4s ease-in-out infinite;
}

.eww-protection .eww-prot-spark-b {
	animation-delay: 0.5s;
}

.eww-protection .eww-prot-spark-c {
	animation-delay: 1s;
}

@media (prefers-reduced-motion: reduce) {
	.eww-deco .eww-deco-item,
	.eww-icon-badge,
	.eww-protection .eww-prot-body,
	.eww-protection .eww-prot-outline,
	.eww-protection .eww-prot-spark {
		animation: none;
	}
	.eww-deco {
		display: none;
	}
	.eww-period-btn,
	.eww-period-btn .eww-period-label::before {
		transition: none;
	}
	.eww-period-btn:hover {
		transform: none;
	}
}

.eww-box-title {
	display: block;
	font-weight: 600;
}

.eww-box-subtitle {
	display: block;
	font-size: 12px;
	color: var(--eww-box-muted, var(--eww-muted));
}

/* Period picker (shared) */
.eww-periods {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

/* Theme hardening: aggressive theme button rules (e.g. Flatsome's
   `.woocommerce div.product form.cart button`) force uppercase, letter-spacing,
   min-height and margins onto our buttons — reset them explicitly. */
.eww-warranty-box button.eww-period-btn,
.eww-warranty-box button.eww-toggle-switch,
.eww-warranty-box button.eww-toggle-chip,
.eww-cart-widget button.eww-period-btn,
.eww-cart-widget button.eww-toggle-switch,
.eww-cart-widget button.eww-toggle-chip {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	min-height: 0;
	margin: 0;
	box-shadow: none;
	text-decoration: none;
}

/* Restore states the hardening reset would otherwise flatten (layout-specific
   rules like `.eww-layout-toggle .eww-period-btn` are more specific and win). */
:where(.eww-warranty-box, .eww-cart-widget) button.eww-period-btn:hover {
	box-shadow: 0 2px 6px rgba(31, 41, 51, 0.1);
}

:where(.eww-warranty-box, .eww-cart-widget) button.eww-period-btn.is-active {
	box-shadow: 0 0 0 1px var(--eww-accent) inset;
}

.eww-period-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 12px;
	border: 1px solid var(--eww-border);
	border-radius: var(--eww-radius);
	background: var(--eww-bg);
	color: var(--eww-text);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
	min-width: 90px;
}

.eww-period-btn:hover {
	border-color: var(--eww-accent);
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(31, 41, 51, 0.1);
}

.eww-period-btn.is-active {
	border-color: var(--eww-accent);
	box-shadow: 0 0 0 1px var(--eww-accent) inset;
}

@supports (background: color-mix(in srgb, red 8%, transparent)) {
	.eww-period-btn.is-active {
		background: color-mix(in srgb, var(--eww-accent) 8%, var(--eww-bg));
	}
}

/* Radio indicator + checkmark inside the label */
.eww-period-btn .eww-period-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 13px;
}

.eww-period-btn .eww-period-label::before {
	content: "";
	box-sizing: border-box;
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	border: 2px solid var(--eww-border);
	border-radius: 50%;
	background: transparent center / 9px 9px no-repeat;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.eww-period-btn:hover .eww-period-label::before {
	border-color: var(--eww-accent);
}

.eww-period-btn.is-active .eww-period-label::before {
	border-color: var(--eww-accent);
	background-color: var(--eww-accent);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.eww-period-btn .eww-period-price {
	font-size: 12px;
	color: var(--eww-muted);
}

.eww-period-btn.is-active .eww-period-price {
	color: var(--eww-accent);
	font-weight: 600;
}

/* Minimal layout: compact inline pills */
.eww-layout-minimal .eww-periods {
	gap: 6px;
}

.eww-layout-minimal .eww-period-btn {
	flex-direction: row;
	gap: 6px;
	padding: 4px 10px;
	min-width: 0;
	border-radius: 999px;
}

.eww-layout-minimal .eww-period-btn .eww-period-label::before {
	width: 12px;
	height: 12px;
	border-width: 1.5px;
	background-size: 7px 7px;
}

/* Card layout */
.eww-layout-card {
	border: var(--eww-border-width, 1px) var(--eww-border-style, solid) var(--eww-border-color, var(--eww-border));
	border-radius: var(--eww-radius);
	background: var(--eww-box-bg, var(--eww-bg));
	padding: 14px 16px;
}

.eww-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.eww-card-icon {
	display: inline-flex;
}

/* Card layout: periods as an even grid (up to 4 columns) */
.eww-layout-card .eww-periods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 6px;
}

.eww-layout-card .eww-period-btn {
	min-width: 0;
	text-align: center;
}

@media (min-width: 481px) {
	.eww-layout-card .eww-periods {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Banner layout */
.eww-layout-banner {
	border-radius: var(--eww-radius);
	background: var(--eww-box-bg, var(--eww-bg));
	border: var(--eww-border-width, 1px) var(--eww-border-style, solid) var(--eww-border-color, var(--eww-border));
	padding: 10px 16px;
}

.eww-layout-banner .eww-banner-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.eww-layout-banner .eww-periods {
	margin-top: 0;
}

/* Segmented layout: one joined control strip */
.eww-layout-segmented .eww-periods {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 0;
	border: 1px solid var(--eww-border);
	border-radius: var(--eww-radius);
	overflow: hidden;
	max-width: 100%;
	overflow-x: auto;
}

.eww-layout-segmented .eww-period-btn {
	border: 0;
	border-radius: 0;
	min-width: 0;
	padding: 8px 14px;
	box-shadow: none;
}

.eww-layout-segmented .eww-period-btn + .eww-period-btn {
	border-left: 1px solid var(--eww-border);
}

.eww-layout-segmented .eww-period-btn .eww-period-label::before {
	display: none;
}

.eww-layout-segmented .eww-period-btn:hover {
	transform: none;
	box-shadow: none;
}

.eww-layout-segmented .eww-period-btn.is-active {
	background: var(--eww-accent);
	color: #fff;
	box-shadow: none;
}

.eww-layout-segmented .eww-period-btn.is-active .eww-period-price {
	color: rgba(255, 255, 255, 0.85);
}

/* List layout: vertical rows (like shipping method choices) */
.eww-warranty-box.eww-layout-list,
.eww-cart-widget.eww-layout-list,
.eww-warranty-box.eww-layout-tiles,
.eww-cart-widget.eww-layout-tiles {
	border: var(--eww-border-width, 1px) var(--eww-border-style, solid) var(--eww-border-color, var(--eww-border));
	border-radius: var(--eww-radius);
	background: var(--eww-box-bg, var(--eww-bg));
	padding: 14px 16px;
}

.eww-layout-list .eww-periods {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.eww-layout-list .eww-period-btn {
	flex-direction: row;
	justify-content: flex-start;
	width: 100%;
	min-width: 0;
	padding: 10px 14px;
}

.eww-layout-list .eww-period-btn .eww-period-price {
	margin-left: auto;
	font-size: 13px;
}

.eww-layout-list .eww-period-btn:hover {
	transform: none;
}

/* Dropdown layout: single-line select */
.eww-layout-dropdown .eww-dropdown-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.eww-period-select {
	padding: 6px 28px 6px 10px;
	border: 1px solid var(--eww-border);
	border-radius: var(--eww-radius);
	background: var(--eww-bg);
	color: var(--eww-text);
	font-size: 13px;
	max-width: 100%;
}

.eww-period-select:focus {
	border-color: var(--eww-accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--eww-accent);
}

/* Tiles layout: big 2-column pricing tiles, price first */
.eww-layout-tiles .eww-periods {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.eww-layout-tiles .eww-period-btn {
	flex-direction: column-reverse;
	gap: 4px;
	min-width: 0;
	padding: 14px 12px;
}

.eww-layout-tiles .eww-period-btn .eww-period-price {
	font-size: 16px;
	font-weight: 700;
	color: var(--eww-text);
}

.eww-layout-tiles .eww-period-btn.is-active .eww-period-price {
	color: var(--eww-accent);
}

/* Steps layout: horizontal timeline (product page box only; the cart
   widget falls back to the standard button strip) */
.eww-warranty-box.eww-layout-steps,
.eww-cart-widget.eww-layout-steps,
.eww-warranty-box.eww-layout-glass,
.eww-cart-widget.eww-layout-glass {
	border: var(--eww-border-width, 1px) var(--eww-border-style, solid) var(--eww-border-color, var(--eww-border));
	border-radius: var(--eww-radius);
	background: var(--eww-box-bg, var(--eww-bg));
	padding: 14px 16px;
}

.eww-warranty-box.eww-layout-steps .eww-periods {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 0;
	position: relative;
	margin-top: 14px;
}

.eww-warranty-box.eww-layout-steps .eww-periods::before {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	top: 16px;
	height: 2px;
	background: var(--eww-border);
}

.eww-warranty-box.eww-layout-steps .eww-period-btn {
	background: transparent;
	border: 0;
	box-shadow: none;
	min-width: 0;
	padding: 8px 4px;
	position: relative;
}

.eww-warranty-box.eww-layout-steps .eww-period-btn:hover {
	transform: none;
	box-shadow: none;
}

.eww-warranty-box.eww-layout-steps .eww-period-btn .eww-period-label {
	flex-direction: column;
	gap: 6px;
}

.eww-warranty-box.eww-layout-steps .eww-period-btn .eww-period-label::before {
	width: 16px;
	height: 16px;
	background-color: var(--eww-box-bg, var(--eww-bg));
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.eww-warranty-box.eww-layout-steps .eww-period-btn.is-active .eww-period-label::before {
	transform: scale(1.3);
	background-color: var(--eww-accent);
}

.eww-warranty-box.eww-layout-steps .eww-period-btn .eww-period-price {
	font-size: 11px;
}

/* Glass layout: glassmorphism card */
.eww-warranty-box.eww-layout-glass,
.eww-cart-widget.eww-layout-glass {
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 24px rgba(31, 41, 51, 0.12);
	padding: 16px 18px;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
	.eww-warranty-box.eww-layout-glass,
	.eww-cart-widget.eww-layout-glass {
		background: linear-gradient(135deg, color-mix(in srgb, var(--eww-accent) 10%, transparent), rgba(255, 255, 255, 0.4));
	}
}

.eww-layout-glass .eww-period-btn {
	background: rgba(255, 255, 255, 0.6);
}

/* Classic / Radio / Plans / Dark layouts: boxed containers */
.eww-warranty-box.eww-layout-classic,
.eww-cart-widget.eww-layout-classic,
.eww-warranty-box.eww-layout-radio,
.eww-cart-widget.eww-layout-radio,
.eww-warranty-box.eww-layout-plans,
.eww-cart-widget.eww-layout-plans,
.eww-warranty-box.eww-layout-dark,
.eww-cart-widget.eww-layout-dark {
	border: var(--eww-border-width, 1px) var(--eww-border-style, solid) var(--eww-border-color, var(--eww-border));
	border-radius: var(--eww-radius);
	background: var(--eww-box-bg, var(--eww-bg));
	padding: 14px 16px;
}

/* Classic layout: text header, flat 4-column grid, solid accent when active */
.eww-layout-classic .eww-periods {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.eww-layout-classic .eww-period-btn {
	min-width: 0;
	padding: 8px 6px;
	border-radius: 4px;
	text-align: center;
}

.eww-layout-classic .eww-period-btn .eww-period-label::before {
	display: none;
}

.eww-layout-classic .eww-period-btn:hover {
	transform: none;
	box-shadow: none;
}

.eww-layout-classic .eww-period-btn.is-active {
	background: var(--eww-accent);
	border-color: var(--eww-accent);
	color: #fff;
	box-shadow: none;
}

.eww-layout-classic .eww-period-btn.is-active .eww-period-price {
	color: rgba(255, 255, 255, 0.85);
}

/* Radio layout: 2-column tiles with a pure-CSS radio circle */
.eww-layout-radio .eww-periods {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.eww-layout-radio .eww-period-btn {
	flex-direction: row;
	justify-content: flex-start;
	gap: 8px;
	min-width: 0;
	padding: 10px 12px;
	text-align: left;
}

.eww-layout-radio .eww-period-btn:hover {
	transform: none;
}

.eww-layout-radio .eww-period-btn .eww-period-label::before {
	width: 16px;
	height: 16px;
	border-width: 1.5px;
	background-image: none;
}

.eww-layout-radio .eww-period-btn.is-active .eww-period-label::before {
	border-width: 5px;
	border-color: var(--eww-accent);
	background: transparent;
}

.eww-layout-radio .eww-period-btn .eww-period-price {
	margin-left: auto;
	white-space: nowrap;
}

/* Toggle layout: white card with an on/off switch, segmented pill track,
   product chips (cart widget) and a summary bar. Deliberately independent
   from skins — fixed neutral palette; only --eww-accent applies (seasonal
   skins change the accent and decorations, the card stays white). */
.eww-warranty-box.eww-layout-toggle,
.eww-cart-widget.eww-layout-toggle {
	background: #fff;
	border: var(--eww-border-width, 1px) var(--eww-border-style, solid) var(--eww-border-color, var(--eww-border));
	border-radius: var(--eww-radius, 16px);
	padding: 22px 24px;
	box-shadow: 0 1px 2px rgba(31, 41, 51, 0.06), 0 8px 24px rgba(31, 41, 51, 0.07);
	color: #1f2933;
}

/* Spacing from surrounding WooCommerce product/cart/checkout elements */
.eww-warranty-box.eww-layout-toggle,
.eww-cart-widget.eww-layout-toggle {
	margin-bottom: 15px;
}

.eww-layout-toggle .eww-toggle-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.eww-layout-toggle .eww-toggle-row .eww-card-heading {
	min-width: 0;
}

.eww-layout-toggle .eww-box-title {
	font-size: 15.5px;
	font-weight: 700;
	color: #1f2933;
}

.eww-layout-toggle .eww-box-subtitle {
	font-size: 12.5px;
	color: #7b8590;
}

.eww-layout-toggle .eww-toggle-switch {
	position: relative;
	width: 56px;
	height: 36px;
	margin-left: auto;
	flex-shrink: 0;
	border: 0;
	border-radius: 99px;
	background: #d3d9de;
	cursor: pointer;
	padding: 2px;
	transition: background-color 0.15s ease;
}

.eww-layout-toggle .eww-toggle-switch .eww-toggle-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease;
}

.eww-layout-toggle .eww-toggle-switch[aria-pressed="true"] {
	background: var(--eww-accent);
}

.eww-layout-toggle .eww-toggle-switch[aria-pressed="true"] .eww-toggle-knob {
	transform: translateX(20px);
}

/* Segmented pill track (prices live in the summary bar, not in the pills) */
.eww-layout-toggle .eww-periods {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	margin-top: 16px;
	padding: 4px;
	border-radius: 99px;
	background: #f1f3f5;
}

.eww-layout-toggle .eww-period-btn {
	flex: 1;
	flex-direction: row;
	justify-content: center;
	min-width: 0;
	padding: 8px 4px;
	border: 0;
	border-radius: 99px;
	background: transparent;
	color: #7b8590;
	box-shadow: none;
}

.eww-layout-toggle .eww-period-btn:hover {
	transform: none;
	box-shadow: none;
}

.eww-layout-toggle .eww-period-btn.is-active {
	background: #fff;
	color: #1f2933;
	box-shadow: 0 1px 3px rgba(31, 41, 51, 0.15);
}

.eww-layout-toggle .eww-period-btn .eww-period-label {
	font-size: 13px;
	font-weight: 600;
}

.eww-layout-toggle .eww-period-btn .eww-period-label::before {
	display: none;
}

/* Hidden in the pills; kept in the markup as the summary's data source. */
.eww-layout-toggle .eww-period-btn .eww-period-price {
	display: none;
}

/* Scope pills + product checkbox list inside the toggle card
   (cart/checkout widget). Neutral palette to match the white card. */
.eww-layout-toggle .eww-widget-scope {
	margin-top: 16px;
}

.eww-layout-toggle .eww-scope-btn {
	border: 1px solid #d3d9de;
	background: #fff;
	color: #7b8590;
	font-size: 12.5px;
	padding: 6px 14px;
}

.eww-layout-toggle .eww-scope-btn.is-active {
	border-color: var(--eww-accent);
	color: var(--eww-accent);
	background: #f1f3f5;
	font-weight: 600;
}

.eww-layout-toggle .eww-widget-items {
	margin-top: 12px;
	color: #4a5560;
	font-size: 13px;
}

@supports (background: color-mix(in srgb, red 8%, #fff)) {
	.eww-layout-toggle .eww-scope-btn.is-active {
		background: color-mix(in srgb, var(--eww-accent) 8%, #fff);
	}
}

/* Summary bar */
.eww-layout-toggle .eww-toggle-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #f1f3f5;
}

.eww-layout-toggle .eww-toggle-summary-label {
	font-size: 13.5px;
	color: #4a5560;
}

.eww-layout-toggle .eww-toggle-summary-amount {
	font-size: 16px;
	font-weight: 700;
	color: var(--eww-accent);
}

.eww-layout-toggle .eww-toggle-summary-amount .woocommerce-Price-amount {
	color: inherit;
}

@supports (background: color-mix(in srgb, red 8%, #fff)) {
	.eww-layout-toggle .eww-toggle-summary {
		background: color-mix(in srgb, var(--eww-accent) 8%, #fff);
	}
}

/* Switch OFF: only the header row stays visible.
   (Kept after the display rules above so is-off wins.) */
.eww-layout-toggle .eww-period-btn.eww-toggle-zero,
.eww-toggle-wrap.is-off .eww-periods,
.eww-toggle-wrap.is-off .eww-toggle-summary,
.eww-toggle-wrap.is-off .eww-widget-scope,
.eww-toggle-wrap.is-off .eww-widget-items {
	display: none;
}

/* Plans layout: protection-plan cards + dashed opt-out button */
.eww-layout-plans .eww-periods {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.eww-plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
}

.eww-layout-plans .eww-period-btn {
	position: relative;
	min-width: 0;
	padding: 16px 10px 12px;
	overflow: visible;
}

.eww-layout-plans .eww-period-btn .eww-period-label::before {
	display: none;
}

.eww-layout-plans .eww-plan-badge {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--eww-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap;
}

.eww-layout-plans .eww-plan-monthly {
	font-size: 15px;
	font-weight: 700;
	color: var(--eww-text);
}

.eww-layout-plans .eww-period-btn.is-active .eww-plan-monthly {
	color: var(--eww-accent);
}

.eww-layout-plans .eww-period-btn.eww-plans-optout {
	flex-direction: row;
	justify-content: center;
	width: 100%;
	padding: 9px 12px;
	border-style: dashed;
	background: transparent;
	color: var(--eww-box-muted, var(--eww-muted));
}

.eww-layout-plans .eww-period-btn.eww-plans-optout:hover {
	transform: none;
	box-shadow: none;
}

.eww-layout-plans .eww-period-btn.eww-plans-optout.is-active {
	border-style: solid;
	border-color: var(--eww-accent);
	color: var(--eww-accent);
}

/* Dark layout: full-width option rows (see .eww-skin-dark for the palette) */
.eww-layout-dark .eww-periods {
	flex-direction: column;
	gap: 6px;
}

.eww-layout-dark .eww-period-btn {
	flex-direction: row;
	justify-content: flex-start;
	width: 100%;
	min-width: 0;
	padding: 11px 14px;
}

.eww-layout-dark .eww-period-btn:hover {
	transform: none;
}

.eww-layout-dark .eww-period-btn .eww-period-price {
	margin-left: auto;
	font-size: 13px;
	white-space: nowrap;
}

/* ------ Skins (CSS custom properties only) ------ */

.eww-skin-banner {
	--eww-bg: #f4f7f6;
}

/* Seasonal skins: the container goes transparent (--eww-box-bg), the skin
   background stays on the period buttons only. Dark skins additionally set
   --eww-box-text/--eww-box-muted so container text stays readable on a
   light page. */

.eww-skin-black-friday {
	--eww-accent: #f5a623;
	--eww-bg: #111111;
	--eww-text: #f5f5f5;
	--eww-muted: #b3b3b3;
	--eww-border: #333333;
	--eww-box-bg: transparent;
	--eww-box-text: #1f2933;
	--eww-box-muted: #6b7280;
}

.eww-skin-womens-day {
	--eww-accent: #d81b60;
	--eww-bg: #fdf2f6;
	--eww-border: #f3c6d8;
	--eww-box-bg: transparent;
}

.eww-skin-christmas {
	--eww-accent: #c62828;
	--eww-bg: #f2f8f2;
	--eww-border: #bcd9bc;
	--eww-box-bg: transparent;
}

.eww-skin-halloween {
	--eww-accent: #ef6c00;
	--eww-bg: #1b1325;
	--eww-text: #f3ede4;
	--eww-muted: #b8aec9;
	--eww-border: #3f3355;
	--eww-box-bg: transparent;
	--eww-box-text: #1f2933;
	--eww-box-muted: #6b7280;
}

.eww-skin-easter {
	--eww-accent: #7b1fa2;
	--eww-bg: #fbf8ee;
	--eww-border: #e3d9b8;
	--eww-box-bg: transparent;
}

.eww-skin-valentines {
	--eww-accent: #e91e63;
	--eww-bg: #fff0f5;
	--eww-border: #f5c1d4;
	--eww-box-bg: transparent;
}

.eww-skin-cyber-monday {
	--eww-accent: #00e5ff;
	--eww-bg: #0d1117;
	--eww-text: #e6f7fb;
	--eww-muted: #8aa3ad;
	--eww-border: #1f3a44;
	--eww-box-bg: transparent;
	--eww-box-text: #1f2933;
	--eww-box-muted: #6b7280;
}

.eww-skin-new-year {
	--eww-accent: #ffd54f;
	--eww-bg: #14142b;
	--eww-text: #f5f2e6;
	--eww-muted: #b6b1cf;
	--eww-border: #35355c;
	--eww-box-bg: transparent;
	--eww-box-text: #1f2933;
	--eww-box-muted: #6b7280;
}

.eww-skin-summer {
	--eww-accent: #ff9800;
	--eww-bg: #fff8e1;
	--eww-border: #f2ddab;
	--eww-box-bg: transparent;
}

.eww-skin-autumn {
	--eww-accent: #d84315;
	--eww-bg: #fbf3e7;
	--eww-border: #e8d3b5;
	--eww-box-bg: transparent;
}

.eww-skin-childrens-day {
	--eww-accent: #7c4dff;
	--eww-bg: #f3efff;
	--eww-border: #d8ccf5;
	--eww-box-bg: transparent;
}

.eww-skin-gold-premium {
	--eww-accent: #c9a227;
	--eww-bg: #1a1a1a;
	--eww-text: #f3ecd7;
	--eww-muted: #b3a97f;
	--eww-border: #4d431f;
	--eww-box-bg: transparent;
	--eww-box-text: #1f2933;
	--eww-box-muted: #6b7280;
}

.eww-skin-spring {
	--eww-accent: #43a047;
	--eww-bg: #f1f8ec;
	--eww-border: #cbe4bd;
	--eww-box-bg: transparent;
}

/* Dark layout's own palette — applies only with skin "none" (class
   .eww-skin-dark); a seasonal skin's inline variables win by design. */
.eww-skin-dark {
	--eww-box-bg: #161b21;
	--eww-box-text: #eef1f3;
	--eww-box-muted: #9aa5b1;
	--eww-bg: #1f2730;
	--eww-text: #eef1f3;
	--eww-muted: #9aa5b1;
	--eww-border: rgba(255, 255, 255, 0.12);
}

/* ------ Cart / checkout widget ------ */

.eww-cart-widget {
	border: var(--eww-border-width, 1px) var(--eww-border-style, solid) var(--eww-border-color, var(--eww-border));
	border-radius: var(--eww-radius);
	background: var(--eww-box-bg, var(--eww-bg));
	padding: 14px 16px;
	margin: 0 0 16px;
	position: relative;
	overflow: hidden;
}

.eww-cart-widget .eww-periods {
	margin-top: 10px;
}

.eww-cart-widget > span,
.eww-cart-widget > div,
.eww-cart-widget > ul {
	padding-left: 10px;
	padding-right: 10px;
}

.eww-widget-scope {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.eww-scope-btn {
	padding: 4px 12px;
	border: 1px solid var(--eww-border);
	border-radius: 999px;
	background: transparent;
	color: var(--eww-box-text, var(--eww-text));
	cursor: pointer;
	font-size: 12px;
}

.eww-scope-btn.is-active {
	border-color: var(--eww-accent);
	color: var(--eww-accent);
	font-weight: 600;
}

.eww-widget-items {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.eww-widget-items li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 0;
	font-size: 13px;
}

.eww-widget-items li + li {
	border-top: 1px dashed #666;
}

.eww-widget-items .eww-item-fee {
	color: var(--eww-box-muted, var(--eww-muted));
	white-space: nowrap;
}

/* Chips variant of the product list (eww_widget_items_style = chips).
   Universal across layouts; replaces the checkbox list. */
.eww-cart-widget .eww-items-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.eww-cart-widget button.eww-toggle-chip {
	border: 1px solid #d3d9de;
	border-radius: 99px;
	background: #fff;
	color: #7b8590;
	font-size: 12.5px;
	line-height: 1.3;
	text-transform: none;
	padding: 7px 13px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.eww-cart-widget button.eww-toggle-chip.is-selected {
	border-color: var(--eww-accent);
	background: #f1f3f5;
	color: var(--eww-accent);
	font-weight: 600;
}

.eww-cart-widget button.eww-toggle-chip.is-selected::before {
	content: "\2713\00a0";
}

@supports (background: color-mix(in srgb, red 8%, #fff)) {
	.eww-cart-widget button.eww-toggle-chip.is-selected {
		background: color-mix(in srgb, var(--eww-accent) 8%, #fff);
	}
}

.eww-widget-summary {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px dashed var(--eww-border);
	font-weight: 600;
}

.eww-cart-widget.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

@media (max-width: 480px) {
	.eww-period-btn {
		min-width: 72px;
		padding: 6px 8px;
	}
	.eww-layout-tiles .eww-periods {
		grid-template-columns: 1fr;
	}
	.eww-layout-classic .eww-periods {
		grid-template-columns: repeat(2, 1fr);
	}
	.eww-layout-radio .eww-periods {
		grid-template-columns: 1fr;
	}
	.eww-plans-grid {
		grid-template-columns: 1fr;
	}
}

/* ------ Configurable card border (eww_border_style) ------
   Border width/style/color/radius flow through CSS variables emitted by
   EWW_Templates::get_inline_css(); these rules handle the two styles that
   need more than a variable: "gradient" (border-image) and "none" (subtle
   button background so the picker stays visible). Kept last so they win. */

/* Gradient border: painted via border-image (green→cyan, like the source
   icon). border-image ignores border-radius, so corners render square. */
.eww-warranty-box.eww-border-gradient,
.eww-cart-widget.eww-border-gradient,
.multibay.eww-border-gradient.multibay-boxed {
	border-image: linear-gradient(135deg, #0df47d, #06d8ed) 1;
}

/* No border: with no seasonal skin the period buttons need a subtle
   background so the picker doesn't disappear (eww-skin-minimal/card/banner =
   skin "none" with the layout-named class). */
.eww-skin-minimal.eww-border-none .eww-period-btn,
.eww-skin-card.eww-border-none .eww-period-btn,
.eww-skin-banner.eww-border-none .eww-period-btn,
.eww-skin-segmented.eww-border-none .eww-period-btn,
.eww-skin-list.eww-border-none .eww-period-btn,
.eww-skin-dropdown.eww-border-none .eww-period-btn,
.eww-skin-tiles.eww-border-none .eww-period-btn,
.eww-skin-glass.eww-border-none .eww-period-btn,
.eww-skin-classic.eww-border-none .eww-period-btn,
.eww-skin-radio.eww-border-none .eww-period-btn,
.eww-skin-plans.eww-border-none .eww-period-btn {
	background: #f3f5f7;
}

/* Dark layout needs a dark replacement background instead */
.eww-skin-dark.eww-border-none .eww-period-btn {
	background: #1f2730;
}

.eww-skin-segmented.eww-border-none .eww-period-btn.is-active,
.eww-skin-classic.eww-border-none .eww-period-btn.is-active {
	background: var(--eww-accent);
}

/* Selection must stay visible even when the button background is subtle. */
.eww-border-none .eww-period-btn.is-active {
	border-color: var(--eww-accent);
}