/**
 * ThemeFour Shamsi — [shamsi_converter] widget.
 *
 * A three-way date converter (Jalali, Gregorian, Hijri) for the front end,
 * mirroring the converter in the plugin's control panel. Gregorian is the hub:
 * every side converts through it, so the three columns can never disagree.
 *
 * Self-contained. Colors come from inline CSS variables set by the shortcode
 * and default to the brand palette. Uses logical properties throughout so it
 * stays correct in RTL, and a size container so it adapts to the space it is
 * given rather than to the viewport.
 */

.tfv-conv {
	--tfv-accent: #0e9c9c;
	--tfv-accent-2: #12b7b0;
	--tfv-radius: 16px;
	--tfv-ink: #1f2a30;
	--tfv-muted: #7c8a92;
	--tfv-line: #e7eeee;
	--tfv-soft: #f5f9f9;
	--tfv-paper: #ffffff;
	--tfv-cols: 3;

	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 760px;
	margin-inline: auto;
	padding: 20px 18px;
	border: 1px solid var(--tfv-line);
	border-radius: var(--tfv-radius);
	background: linear-gradient(180deg, #fff 0%, #fbfdfd 100%);
	box-shadow:
		0 1px 2px rgba(7, 64, 63, 0.05),
		0 18px 40px -20px rgba(7, 64, 63, 0.16);
	color: var(--tfv-ink);
	font-family: inherit;
	line-height: 1.5;
	direction: rtl;

	container-type: inline-size;
	container-name: tfv;
}

.tfv-conv *,
.tfv-conv *::before,
.tfv-conv *::after {
	box-sizing: border-box;
}

.tfv-title {
	margin: 0 0 4px;
	font-size: 1.15em;
	font-weight: 800;
	line-height: 1.3;
	color: var(--tfv-ink);
}

.tfv-sub {
	margin: 0 0 16px;
	font-size: 0.86em;
	color: var(--tfv-muted);
}

/* ---------- Columns ---------- */
.tfv-grid {
	display: grid;
	/* One column per calendar, with a swap glyph between each pair. */
	grid-template-columns: repeat(var(--tfv-cols), minmax(0, 1fr));
	align-items: end;
	gap: 10px;
}

.tfv-grid.tfv-has-swap {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.tfv-grid.tfv-has-swap.tfv-cols-2 {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.tfv-side {
	min-inline-size: 0;
	margin: 0;
	padding: 12px 12px 14px;
	border: 1px solid var(--tfv-line);
	border-radius: 12px;
	background: var(--tfv-soft);
}

.tfv-side legend {
	padding: 2px 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--tfv-accent) 0%, var(--tfv-accent-2) 100%);
	color: #fff;
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.6;
}

.tfv-fields {
	display: grid;
	grid-template-columns: 1.25fr 1.6fr 1fr;
	gap: 6px;
	margin-block-start: 8px;
}

.tfv-in {
    inline-size: 100%;
    min-inline-size: 0;
    padding: 8px 8px !important;
    border: 1px solid var(--tfv-line);
    border-radius: 9px !important;
    background: var(--tfv-paper) !important;
    color: var(--tfv-ink) !important;
    font-family: inherit;
    font-size: 0.92em !important;
    line-height: 1.3 !important;
    text-align: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.tfv-in:focus {
	outline: none;
	border-color: var(--tfv-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tfv-accent) 18%, transparent);
}

/* The year/day boxes are numeric; keep the spinners out of the way so the
   three fields stay the same height in every browser. */
.tfv-in[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

.tfv-in[type="number"]::-webkit-outer-spin-button,
.tfv-in[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* ---------- Step buttons ----------
   Hiding the native spinners above kept the boxes aligned but left no way to
   change a value with the mouse. These replace them: always visible, sized
   for a finger rather than the 12px native arrows, and identical across
   engines. */
.tfv-num {
	position: relative;
	min-inline-size: 0;
}

/* The input has to make room for the buttons on its trailing edge. The value
   stays centred in what is left, so the three boxes still read as a row. */
.tfv-num .tfv-in {
	padding-inline-end: 22px !important;
}

.tfv-spin {
	position: absolute;
	inset-block: 3px;
	inset-inline-end: 3px;
	inline-size: 17px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tfv-step {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 5px !important;
	background: var(--tfv-soft) !important;
	color: var(--tfv-muted) !important;
	cursor: pointer;
	line-height: 0 !important;
	min-block-size: 0;
	box-shadow: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tfv-step svg {
	inline-size: 11px;
	block-size: 11px;
	display: block;
}

.tfv-step:hover {
	background: color-mix(in srgb, var(--tfv-accent) 16%, transparent) !important;
	color: var(--tfv-accent) !important;
}

.tfv-step:active {
	background: color-mix(in srgb, var(--tfv-accent) 28%, transparent) !important;
}

/* Below roughly 380px of container the boxes are too narrow to give up 22px,
   so the buttons move under the field as a single full-width row. */
@container tfv (max-width: 380px) {
	.tfv-num .tfv-in {
		padding-inline-end: 8px !important;
	}

	.tfv-spin {
		position: static;
		inline-size: 100%;
		flex-direction: row-reverse;
		margin-block-start: 4px;
	}

	.tfv-step {
		block-size: 22px;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 480px) {
		.tfv-num .tfv-in {
			padding-inline-end: 8px !important;
		}

		.tfv-spin {
			position: static;
			inline-size: 100%;
			flex-direction: row-reverse;
			margin-block-start: 4px;
		}

		.tfv-step {
			block-size: 22px;
		}
	}
}

.tfv-swap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block-end: 14px;
	color: color-mix(in srgb, var(--tfv-accent) 55%, var(--tfv-muted));
}

.tfv-swap svg {
	inline-size: 18px;
	block-size: 18px;
	display: block;
}

/* ---------- Result + note ---------- */
.tfv-result {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--tfv-accent) 20%, var(--tfv-line));
	background: color-mix(in srgb, var(--tfv-accent) 7%, #fff);
	font-size: 0.98em;
	font-weight: 700;
	text-align: center;
	color: color-mix(in srgb, var(--tfv-accent) 78%, #000);
}

.tfv-result:empty {
	display: none;
}

.tfv-note {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 12px 0 0;
	font-size: 0.8em;
	line-height: 1.6;
	color: var(--tfv-muted);
}

.tfv-note svg {
	flex: 0 0 auto;
	inline-size: 15px;
	block-size: 15px;
	margin-block-start: 2px;
}

/* ---------- Fallbacks / a11y ---------- */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.tfv-result {
		background: #f2fafa;
		color: #0a6e6e;
	}
	.tfv-swap {
		color: #7c8a92;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tfv-in {
		transition: none;
	}
}

/* ---------- Responsive ----------
   Below the breakpoint the calendars stack, and the swap glyphs are dropped
   because "between two columns" stops meaning anything once they are rows. */
@container tfv (max-width: 560px) {
	.tfv-grid,
	.tfv-grid.tfv-has-swap,
	.tfv-grid.tfv-has-swap.tfv-cols-2 {
		grid-template-columns: minmax(0, 1fr);
	}
	.tfv-swap {
		display: none;
	}
	.tfv-conv {
		padding: 16px 12px;
	}
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (max-width: 560px) {
		.tfv-grid,
		.tfv-grid.tfv-has-swap,
		.tfv-grid.tfv-has-swap.tfv-cols-2 {
			grid-template-columns: minmax(0, 1fr);
		}
		.tfv-swap {
			display: none;
		}
		.tfv-conv {
			padding: 16px 12px;
		}
	}
}