/* ==========================================================================
   Form Components — Button, Input, Textarea, Dropdown, Select, Checkbox,
   Radio, Switch, Upload, Search
   Extends the `.btn` / `.field` primitives already in components.css —
   same BEM naming, same design tokens (theme.css / variables.css), RTL-
   first via logical properties (inset-inline-*, margin-inline-*).
   ========================================================================== */

/* ---- Button (additional variants; .btn/.btn--gold/.btn--ghost/.btn--sm/
   .btn--block/.btn__spinner already live in components.css) -------------- */

.btn--outline {
	color: var(--color-gold);
	background: transparent;
	border: 1px solid var(--color-gold);
}

.btn--outline:hover {
	color: var(--color-on-gold);
	background: var(--color-gold);
}

.btn--danger {
	color: var(--color-white);
	background: var(--color-error);
}

.btn--danger:hover {
	box-shadow: 0 14px 45px -10px rgba(217, 128, 128, 0.55);
}

.btn--lg {
	padding: 1.1em 2.6em;
	font-size: var(--fs-body);
}

.btn--icon {
	padding: 0.85em;
	border-radius: 50%;
	aspect-ratio: 1;
}

.btn:disabled,
.btn.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* ---- Input / Textarea (extends .field from components.css) ------------- */

.field__label {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--fs-small);
	color: var(--color-gray);
}

.field__required {
	color: var(--color-error);
}

.field__control {
	position: relative;
	display: flex;
	align-items: center;
}

.field__icon {
	position: absolute;
	inset-inline-start: 1em;
	color: var(--color-gray-dim);
	pointer-events: none;
}

.field__control:has(.field__icon) input {
	padding-inline-start: 2.6em;
}

.field textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.6;
}

.field__hint {
	font-size: var(--fs-xs);
	color: var(--color-gray-dim);
}

.field--sm input,
.field--sm select,
.field--sm textarea {
	padding: 0.55em 0.8em;
	font-size: var(--fs-small);
}

.field.is-disabled input,
.field.is-disabled select,
.field.is-disabled textarea {
	opacity: 0.5;
	pointer-events: none;
}

.field.is-valid input {
	border-color: var(--color-success);
}

/* ---- Dropdown (menu; distinct from <select>) ---------------------------- */

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}

.dropdown__trigger svg {
	transition: transform var(--dur-fast) var(--ease-soft);
}

.dropdown.is-open .dropdown__trigger svg {
	transform: rotate(180deg);
}

.dropdown__menu {
	position: absolute;
	top: calc(100% + 0.5em);
	inset-inline-start: 0;
	min-width: 200px;
	z-index: var(--z-nav);
	padding: 0.5em;
	border-radius: var(--radius-md);
	background: var(--color-bg-elevated);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-soft);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--dur-fast) var(--ease-out-expo, var(--ease-soft)),
		transform var(--dur-fast) var(--ease-out-expo, var(--ease-soft)),
		visibility var(--dur-fast);
}

.dropdown.is-open .dropdown__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown__item {
	display: flex;
	align-items: center;
	gap: 0.6em;
	width: 100%;
	padding: 0.65em 0.9em;
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
	color: var(--color-white);
	text-align: start;
	transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}

.dropdown__item:hover,
.dropdown__item:focus-visible {
	background: var(--glass-bg-strong);
	color: var(--color-gold-light);
}

.dropdown__item.is-danger {
	color: var(--color-error);
}

.dropdown__divider {
	height: 1px;
	margin: 0.4em 0;
	background: var(--glass-border);
}

/* ---- Select (native <select>, styled via .field select in components.css;
   this adds the custom chevron + option coloring) ------------------------- */

.field__control:has(select)::after {
	content: '';
	position: absolute;
	inset-inline-end: 1.1em;
	width: 9px;
	height: 9px;
	border-inline-end: 1.5px solid var(--color-gray-dim);
	border-block-end: 1.5px solid var(--color-gray-dim);
	transform: rotate(45deg) translateY(-4px);
	pointer-events: none;
}

.field select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 2.6em;
	width: 100%;
}

/* Global fix — the CLOSED <select> takes dark theme colors fine, but its
   OPEN native dropdown popup is chrome the browser renders itself; on
   Windows/Chromium that popup defaults to a light background regardless
   of the select's own styling, so options inheriting a light page-text
   color render near-invisible (confirmed on the doctor weekly-schedule
   form's weekday select). Fixed once here for every <select> this
   stylesheet reaches, instead of re-patching it per page. */
select option {
	color: #111111;
	background: #ffffff;
}

/* ---- Checkbox ------------------------------------------------------------ */

.checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	cursor: pointer;
	user-select: none;
}

.checkbox__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.checkbox__box {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1.5px solid var(--glass-border);
	background: rgba(247, 247, 247, 0.03);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}

.checkbox__box svg {
	width: 12px;
	height: 12px;
	opacity: 0;
	transform: scale(0.6);
	color: var(--color-on-gold);
	transition: opacity var(--dur-fast) var(--ease-spring, var(--ease-soft)),
		transform var(--dur-fast) var(--ease-spring, var(--ease-soft));
}

.checkbox__input:checked ~ .checkbox__box {
	background: var(--gradient-gold);
	border-color: var(--color-gold);
}

.checkbox__input:checked ~ .checkbox__box svg {
	opacity: 1;
	transform: scale(1);
}

.checkbox__input:focus-visible ~ .checkbox__box {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

.checkbox__label {
	font-size: var(--fs-small);
	color: var(--color-white);
}

/* ---- Radio ---------------------------------------------------------------- */

.radio {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	cursor: pointer;
	user-select: none;
}

.radio__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.radio__dot {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid var(--glass-border);
	background: rgba(247, 247, 247, 0.03);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--dur-fast) var(--ease-soft);
}

.radio__dot::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gradient-gold);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity var(--dur-fast) var(--ease-spring, var(--ease-soft)),
		transform var(--dur-fast) var(--ease-spring, var(--ease-soft));
}

.radio__input:checked ~ .radio__dot {
	border-color: var(--color-gold);
}

.radio__input:checked ~ .radio__dot::after {
	opacity: 1;
	transform: scale(1);
}

.radio__input:focus-visible ~ .radio__dot {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

.radio__label {
	font-size: var(--fs-small);
	color: var(--color-white);
}

/* ---- Switch ----------------------------------------------------------------- */

.switch {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	cursor: pointer;
	user-select: none;
}

.switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.switch__track {
	flex-shrink: 0;
	width: 42px;
	height: 24px;
	border-radius: var(--radius-pill);
	background: rgba(247, 247, 247, 0.08);
	border: 1px solid var(--glass-border);
	position: relative;
	transition: background var(--dur-fast) var(--ease-soft);
}

.switch__thumb {
	position: absolute;
	top: 2px;
	inset-inline-start: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-white);
	transform: translateX(0);
	transition: transform var(--dur-fast) var(--ease-spring, var(--ease-soft));
}

.switch__input:checked ~ .switch__track {
	background: var(--gradient-gold);
	border-color: var(--color-gold);
}

.switch__input:checked ~ .switch__track .switch__thumb {
	transform: translateX(18px);
}

[dir="rtl"] .switch__input:checked ~ .switch__track .switch__thumb {
	transform: translateX(-18px);
}

.switch__input:focus-visible ~ .switch__track {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

/* ---- Upload ------------------------------------------------------------------- */

.upload__dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-md);
	border: 1.5px dashed var(--glass-border);
	background: var(--glass-bg);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}

.upload__dropzone:hover,
.upload__dropzone.is-dragover {
	border-color: var(--color-gold);
	background: var(--glass-bg-strong);
}

.upload__icon {
	color: var(--color-gold);
}

.upload__title {
	font-size: var(--fs-small);
	color: var(--color-white);
}

.upload__hint {
	font-size: var(--fs-xs);
	color: var(--color-gray-dim);
}

.upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.upload__preview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.upload__thumb {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid var(--glass-border);
}

.upload__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.upload__thumb-remove {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(13, 13, 13, 0.75);
	color: var(--color-white);
}

.upload__progress {
	height: 3px;
	border-radius: var(--radius-pill);
	background: rgba(247, 247, 247, 0.1);
	overflow: hidden;
	margin-top: var(--space-2);
}

.upload__progress-bar {
	height: 100%;
	width: var(--progress, 0%);
	background: var(--gradient-gold);
	transition: width var(--dur-mid) var(--ease-soft);
}

/* ---- Search ------------------------------------------------------------------- */

.search {
	position: relative;
	display: flex;
	align-items: center;
}

.search__icon {
	position: absolute;
	inset-inline-start: 1em;
	color: var(--color-gray-dim);
	pointer-events: none;
}

.search__input {
	width: 100%;
	padding: 0.85em 1em;
	padding-inline-start: 2.6em;
	padding-inline-end: 2.6em;
	border-radius: var(--radius-pill);
	border: 1px solid var(--glass-border);
	background: rgba(247, 247, 247, 0.03);
	color: var(--color-white);
	transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}

.search__input:focus {
	border-color: var(--color-gold);
	background: rgba(247, 247, 247, 0.05);
}

.search__input::placeholder {
	color: var(--color-gray-dim);
}

.search__clear {
	position: absolute;
	inset-inline-end: 0.9em;
	color: var(--color-gray-dim);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-fast) var(--ease-soft);
}

.search__input:not(:placeholder-shown) ~ .search__clear {
	opacity: 1;
	pointer-events: all;
}

.search__clear:hover {
	color: var(--color-gold);
}