/* Pond Dye Dosage Calculator — frontend styles */

/*
 * Themeable variables. Override any of these in your theme's Additional
 * CSS / Elementor Custom CSS — no need to edit this file:
 *
 *   :root {
 *     --pddc-accent: #fe8b10;        Buy Now, active toggle, selected card
 *     --pddc-accent-text: #fff;
 *     --pddc-secondary-bg: #ececec;  Add to Cart, View Product, Keep items
 *   }
 *
 * To follow Elementor's global accent colour instead:
 *   :root { --pddc-accent: var( --e-global-color-accent ); }
 *   (set it on body / .elementor-kit-N if :root doesn't pick it up)
 *
 * Buttons INSIDE the modal are styled by the plugin (with !important),
 * because theme/Elementor and WooCommerce button rules fight each other
 * and left unreadable text (e.g. dark text on orange). The "Calculate
 * Required Quantity" trigger on the product page still uses the theme.
 */
:root {
	--pddc-accent: #fe8b10;
	--pddc-accent-hover: #e67a05;
	--pddc-accent-text: #fff;

	--pddc-secondary-bg: #ececec;
	--pddc-secondary-hover-bg: #dedede;
	--pddc-secondary-text: #333;

	--pddc-toggle-track: #f0f0f0;
	--pddc-toggle-text: #444;

	--pddc-panel-bg: #f7f8f6;
	--pddc-panel-border: #e2e5df;
	--pddc-radius: 6px;

	--pddc-upsell-bg: #fff7e6;
	--pddc-upsell-border: #f0c36d;
	--pddc-upsell-heading-color: #7a5c00;

	--pddc-error-bg: #fbeaea;
	--pddc-error-border: #e3a9a9;
	--pddc-error-text: #b32d2e;

	--pddc-muted-text: #555;

	/* Round variation buttons (selected state uses --pddc-accent). */
	--pddc-swatch-size: 54px;
	--pddc-swatch-bg: #f5f7f6;
	--pddc-swatch-border: #dce3df;
	--pddc-swatch-text: #183f34;

	/* Pick a size cards (selected state uses --pddc-accent). */
	--pddc-card-bg: #fff;
	--pddc-card-border: #e2e5df;
	--pddc-card-selected-bg: #fff8f0;
	--pddc-card-image-bg: #f7f8f6;
}

.pddc-trigger-wrap {
	margin: 12px 0;
}

.pddc-open-modal-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pddc-open-modal-icon {
	flex: 0 0 auto;
	display: block;
}

.pddc-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.pddc-modal {
	background: #fff;
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	border-radius: 8px;
	padding: 28px;
	position: relative;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
	transition: max-width 0.2s ease;
}

.pddc-confirm-modal {
	max-width: 420px;
}

.pddc-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var( --pddc-muted-text ) !important;
	padding: 4px;
}

.pddc-modal-close:hover {
	color: #000 !important;
}

.pddc-modal h2,
.pddc-modal h3 {
	margin-top: 0;
	margin-bottom: 18px;
	font-size: 1.25em;
	padding-right: 30px;
}

.pddc-field-row {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.pddc-field {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-bottom: 14px;
}

.pddc-field-row .pddc-field {
	margin-bottom: 0;
}

.pddc-field label {
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 0.9em;
}

.pddc-field input[type="number"] {
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	width: 100%;
	box-sizing: border-box;
}

.pddc-toggle-row {
	margin: 4px 0 14px;
	font-weight: 500;
}

.pddc-toggle-row input[type="checkbox"] {
	margin-right: 6px;
}

.pddc-helper-link {
	margin: 0 0 18px;
	font-size: 0.9em;
}

.pddc-result-box {
	background: var( --pddc-panel-bg );
	border: 1px solid var( --pddc-panel-border );
	border-radius: var( --pddc-radius );
	padding: 16px;
	margin-bottom: 16px;
}

.pddc-total-litres {
	margin: 0;
	font-size: 1em;
}

.pddc-total-litres strong {
	font-size: 1.15em;
}

.pddc-upsell-alert {
	display: none; /* toggled to flex by JS when shown */
	align-items: flex-start;
	gap: 14px;
	background: var( --pddc-upsell-bg );
	border: 1px solid var( --pddc-upsell-border );
	border-radius: var( --pddc-radius );
	padding: 14px;
	margin-bottom: 16px;
}

.pddc-upsell-thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	background: #fff;
}

.pddc-upsell-content {
	flex: 1 1 auto;
	min-width: 0;
}

.pddc-upsell-heading {
	font-weight: 700;
	margin: 0 0 4px;
	color: var( --pddc-upsell-heading-color );
}

.pddc-upsell-body {
	margin: 0 0 10px;
}

.pddc-upsell-btn {
	display: inline-block;
}

.pddc-options-box {
	background: var( --pddc-panel-bg );
	border: 1px solid var( --pddc-panel-border );
	border-radius: var( --pddc-radius );
	padding: 16px;
	margin-bottom: 16px;
}

.pddc-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}

.pddc-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	cursor: pointer;
}

.pddc-option input[type="radio"] {
	accent-color: var( --pddc-accent );
}

.pddc-price-total {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var( --pddc-panel-border );
	font-size: 1.05em;
}

.pddc-price-total strong {
	font-size: 1.2em;
}

.pddc-error-message {
	color: var( --pddc-error-text );
	background: var( --pddc-error-bg );
	border: 1px solid var( --pddc-error-border );
	border-radius: 4px;
	padding: 8px 10px;
	margin-bottom: 14px;
	font-size: 0.9em;
}

/* ------------------------------------------------------------------
 * Modal buttons: Buy Now / Replace (.button.alt) = solid accent call to
 * action; Add to Cart / View Product / Keep (.button) = quiet grey.
 * !important is needed to beat theme + WooCommerce button colours.
 * ------------------------------------------------------------------ */
.pddc-modal-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pddc-modal-actions .button {
	flex: 1;
	text-align: center;
}

.pddc-modal .button {
	background: var( --pddc-secondary-bg ) !important;
	background-image: none !important;
	color: var( --pddc-secondary-text ) !important;
	border: 1px solid transparent !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.pddc-modal .button:hover,
.pddc-modal .button:focus-visible {
	background: var( --pddc-secondary-hover-bg ) !important;
	color: var( --pddc-secondary-text ) !important;
}

.pddc-modal .button.alt {
	background: var( --pddc-accent ) !important;
	color: var( --pddc-accent-text ) !important;
	font-weight: 700;
}

.pddc-modal .button.alt:hover,
.pddc-modal .button.alt:focus-visible {
	background: var( --pddc-accent-hover ) !important;
	color: var( --pddc-accent-text ) !important;
}

.pddc-modal .button:disabled,
.pddc-modal .button[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.pddc-modal .pddc-confirm-cancel {
	flex: 0 0 auto !important;
	background: transparent !important;
	color: var( --pddc-muted-text ) !important;
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Pick a size / Enter measurements: segmented toggle.
 * A grey track with the active option as a solid accent "thumb".
 * Plugin-styled with !important so theme button rules can't bleed in.
 * ------------------------------------------------------------------ */
.pddc-mode-panel[hidden] {
	display: none !important;
}

.pddc-mode-toggle {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 18px;
	background: var( --pddc-toggle-track );
	border-radius: 999px;
}

.pddc-mode-toggle .pddc-mode-tab {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 !important;
	padding: 10px 14px !important;
	min-height: 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: var( --pddc-toggle-text ) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 0.95em !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	white-space: normal;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pddc-mode-toggle .pddc-mode-tab:hover {
	background: rgba( 0, 0, 0, 0.05 ) !important;
	color: #111 !important;
}

.pddc-mode-toggle .pddc-mode-tab.is-active,
.pddc-mode-toggle .pddc-mode-tab[aria-selected="true"] {
	background: var( --pddc-accent ) !important;
	color: var( --pddc-accent-text ) !important;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.18 ) !important;
	cursor: default;
}

.pddc-mode-toggle .pddc-mode-tab:focus-visible {
	outline: 2px solid var( --pddc-accent );
	outline-offset: 2px;
}

.pddc-mode-icon {
	flex: 0 0 auto;
	fill: currentColor;
}

.pddc-visual-intro {
	margin: 0 0 10px;
	font-weight: 600;
	font-size: 0.95em;
}

.pddc-preset-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 10px;
	margin-bottom: 8px;
}

/* 2 or 4 cards read better as a 2-column grid than 3 + 1 (narrow modal). */
.pddc-preset-grid.pddc-count-2,
.pddc-preset-grid.pddc-count-4 {
	grid-template-columns: repeat( 2, 1fr );
}

.pddc-preset-grid.pddc-count-1 {
	grid-template-columns: minmax( 0, 220px );
}

.pddc-preset-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px;
	background: var( --pddc-card-bg );
	border: 2px solid var( --pddc-card-border );
	border-radius: var( --pddc-radius );
	cursor: pointer;
	font-size: 0.85em;
	line-height: 1.3;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pddc-preset-card:hover {
	border-color: var( --pddc-accent );
}

.pddc-preset-card.is-selected,
.pddc-preset-card:has( .pddc-preset-radio:checked ) {
	border-color: var( --pddc-accent );
	background: var( --pddc-card-selected-bg );
}

/* Visually hidden but still focusable/keyboard operable. */
.pddc-preset-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.pddc-preset-card:focus-within {
	outline: 2px solid var( --pddc-accent );
	outline-offset: 2px;
}

.pddc-preset-image {
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: 4px;
	background: var( --pddc-card-image-bg );
	border-radius: 4px;
	overflow: hidden;
}

.pddc-preset-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pddc-preset-label {
	font-weight: 700;
}

.pddc-preset-hint {
	color: var( --pddc-muted-text );
}

.pddc-preset-volume {
	margin-top: auto;
	padding-top: 2px;
	font-weight: 600;
}

.pddc-preset-note {
	margin: 0 0 16px;
	font-size: 0.85em;
	color: var( --pddc-muted-text );
}

/* "Treats {litres} litres" line under the price. */
.pddc-treats-line {
	margin: 0 0 16px;
}

.pddc-treats-line[hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------
 * Round variation buttons on the product page (Variation dropdowns =
 * "Round buttons"). The form gets .pddc-has-swatches from the JS.
 * ------------------------------------------------------------------ */
form.pddc-has-swatches table.variations {
	width: 100%;
	margin: 0 0 18px !important;
	border: 0 !important;
	border-collapse: collapse;
	background: none !important;
}

form.pddc-has-swatches table.variations tbody,
form.pddc-has-swatches table.variations tr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	background: none !important;
}

form.pddc-has-swatches table.variations th,
form.pddc-has-swatches table.variations td {
	display: block;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	line-height: 1.2;
}

form.pddc-has-swatches table.variations th.label label {
	margin: 0;
	color: var( --pddc-muted-text );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

form.pddc-has-swatches table.variations td.value {
	position: relative;
}

.pddc-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

form .pddc-swatches .pddc-swatch {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: var( --pddc-swatch-size ) !important;
	height: var( --pddc-swatch-size ) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 4px !important;
	background: var( --pddc-swatch-bg ) !important;
	background-image: none !important;
	color: var( --pddc-swatch-text ) !important;
	border: 2px solid var( --pddc-swatch-border ) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

form .pddc-swatches .pddc-swatch:hover:not(:disabled) {
	border-color: var( --pddc-accent ) !important;
	color: var( --pddc-swatch-text ) !important;
	background: var( --pddc-swatch-bg ) !important;
}

form .pddc-swatches .pddc-swatch.is-selected,
form .pddc-swatches .pddc-swatch.is-selected:hover {
	background: var( --pddc-accent ) !important;
	border-color: var( --pddc-accent ) !important;
	color: var( --pddc-accent-text ) !important;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.15 ) !important;
}

form .pddc-swatches .pddc-swatch:focus-visible {
	outline: 2px solid var( --pddc-accent ) !important;
	outline-offset: 3px;
}

form .pddc-swatches .pddc-swatch:disabled,
form .pddc-swatches .pddc-swatch.is-disabled {
	opacity: 0.35;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Strength panel ("Round buttons + strength panel"):
   [ STRENGTH  (15) (50) (100) | 💧 50,000 litres  ▰▰▱  per 300ml bottle · Ideal for … ] */
/* Grid (not flex) so a width:100% on the table from WooCommerce/theme CSS
   can't squeeze the stats column to nothing. */
.pddc-strength-panel {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	align-items: stretch;
	margin: 0 0 18px;
	background: var( --pddc-card-bg );
	border: 1px solid var( --pddc-panel-border );
	border-radius: 14px;
	overflow: hidden;
}

form.pddc-has-swatches .pddc-strength-panel table.variations,
.woocommerce div.product form.cart.pddc-has-swatches .pddc-strength-panel table.variations {
	display: block;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 12px 14px;
	background: var( --pddc-panel-bg ) !important;
	border-right: 1px solid var( --pddc-panel-border ) !important;
}

form.pddc-has-swatches .pddc-strength-panel table.variations tbody,
form.pddc-has-swatches .pddc-strength-panel table.variations tr {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.pddc-strength-panel .pddc-swatches {
	gap: 8px;
	flex-wrap: nowrap;
}

.pddc-strength-panel {
	--pddc-swatch-size: 48px;
}

.pddc-strength-stats {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	padding: 12px 16px;
}

.pddc-strength-litres {
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.2;
}

.pddc-strength-litres strong {
	color: var( --pddc-swatch-text );
	font-size: 19px;
	font-weight: 700;
}

.pddc-strength-drop {
	flex: 0 0 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var( --pddc-meter-bg-soft, #e8f5fb );
}

.pddc-strength-drop svg {
	fill: var( --pddc-meter-to, #2a8fc1 );
}

.pddc-strength-meter {
	display: flex;
	gap: 4px;
}

.pddc-strength-meter i {
	flex: 1 1 0;
	height: 7px;
	border-radius: 4px;
	background: var( --pddc-panel-border );
	transition: background-color 0.2s ease;
}

.pddc-strength-meter i.is-filled {
	background: linear-gradient( 90deg, var( --pddc-meter-from, #70c4e9 ), var( --pddc-meter-to, #2a8fc1 ) );
}

.pddc-strength-sub {
	color: var( --pddc-muted-text );
	font-size: 12.5px;
	line-height: 1.4;
}

.pddc-strength-panel.is-empty .pddc-strength-litres strong {
	color: var( --pddc-muted-text );
	font-size: 15px;
	font-weight: 600;
}

/* Live litres: brief bump when the figure changes. */
.pddc-strength-litres strong.is-bumped {
	animation: pddc-bump 0.35s ease;
}

@keyframes pddc-bump {
	0% { transform: scale( 1 ); }
	40% { transform: scale( 1.08 ); color: var( --pddc-meter-to, #2a8fc1 ); }
	100% { transform: scale( 1 ); }
}

.pddc-strength-litres strong {
	display: inline-block;
	transform-origin: left center;
}

/* Better-value tip under the strength panel / buttons. */
.pddc-value-nudge {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -8px 0 18px;
	padding: 9px 10px 9px 12px;
	background: var( --pddc-nudge-bg, #fff7ed );
	border: 1px solid var( --pddc-nudge-border, #fed7aa );
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var( --pddc-nudge-text, #7c2d12 );
}

.pddc-value-nudge[hidden] {
	display: none !important;
}

.pddc-value-nudge-icon {
	flex: 0 0 auto;
	font-size: 16px;
	line-height: 1;
}

.pddc-value-nudge-text {
	flex: 1 1 auto;
	min-width: 0;
}

.pddc-value-nudge-text i {
	font-style: normal;
	font-weight: 700;
}

form .pddc-value-nudge .pddc-value-nudge-btn {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 7px 14px !important;
	min-height: 0 !important;
	background: var( --pddc-accent ) !important;
	color: var( --pddc-accent-text ) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	cursor: pointer;
}

/* Upgrade tip: blue (bigger product), vs. orange value tip. */
.pddc-upgrade-nudge {
	background: var( --pddc-upgrade-bg, #eef8fd );
	border-color: var( --pddc-upgrade-border, #bfe3f4 );
	color: var( --pddc-upgrade-text, #0c4a6e );
}

.pddc-upgrade-thumb {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	background: #fff;
}

form .pddc-value-nudge a.pddc-value-nudge-btn {
	display: inline-block;
	text-decoration: none !important;
	white-space: nowrap;
}

form .pddc-value-nudge .pddc-value-nudge-btn:hover,
form .pddc-value-nudge .pddc-value-nudge-btn:focus-visible {
	background: var( --pddc-accent-hover ) !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.pddc-strength-litres strong.is-bumped {
		animation: none;
	}
}

/* Narrow cards / phones: buttons on top, stats underneath. */
@media ( max-width: 480px ) {
	.pddc-strength-panel {
		grid-template-columns: minmax( 0, 1fr );
	}

	form.pddc-has-swatches .pddc-strength-panel table.variations,
	.woocommerce div.product form.cart.pddc-has-swatches .pddc-strength-panel table.variations {
		border-right: 0 !important;
		border-bottom: 1px solid var( --pddc-panel-border ) !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pddc-strength-meter i {
		transition: none;
	}

	form .pddc-swatches .pddc-swatch {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Responsive widths.
 *   < 600px   : phone layout (stacked, 2-up cards).
 *   600–959px : the original ~480px modal.
 *   >= 960px  : wide modal (960px with size cards, 640px without), all
 *               cards on one row, results and options side by side.
 * ------------------------------------------------------------------ */
@media ( min-width: 960px ) {
	.pddc-main-modal {
		max-width: 640px;
	}

	.pddc-main-modal.pddc-has-presets {
		max-width: 960px;
		padding: 32px 36px;
	}

	.pddc-has-presets .pddc-mode-toggle {
		max-width: 520px;
	}

	.pddc-has-presets .pddc-preset-grid,
	.pddc-has-presets .pddc-preset-grid.pddc-count-4 {
		grid-template-columns: repeat( 4, 1fr );
		gap: 14px;
	}

	.pddc-has-presets .pddc-preset-grid.pddc-count-2 {
		grid-template-columns: repeat( 2, minmax( 0, 260px ) );
	}

	.pddc-has-presets .pddc-preset-grid.pddc-count-3 {
		grid-template-columns: repeat( 3, minmax( 0, 260px ) );
	}

	.pddc-has-presets .pddc-preset-card {
		font-size: 0.9em;
		padding: 10px;
	}

	/* Total litres + upsell on the left, dose options + price on the right. */
	.pddc-main-modal .pddc-results-layout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
		align-items: start;
	}

	.pddc-main-modal .pddc-results-layout .pddc-result-box {
		grid-column: 1;
	}

	.pddc-main-modal .pddc-results-layout .pddc-upsell-alert {
		grid-column: 1;
	}

	.pddc-main-modal .pddc-results-layout .pddc-options-box {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	/* Keep the action buttons under the options/price column. */
	.pddc-main-modal .pddc-modal-actions {
		margin-left: calc( 50% + 8px );
	}
}

@media ( max-width: 599px ) {
	.pddc-field-row {
		flex-direction: column;
	}

	.pddc-modal {
		padding: 20px;
	}

	.pddc-preset-grid,
	.pddc-preset-grid.pddc-count-4 {
		grid-template-columns: repeat( 2, 1fr );
	}

	.pddc-mode-toggle .pddc-mode-tab {
		padding: 9px 10px !important;
		font-size: 0.9em !important;
		gap: 6px;
	}
}