/* Future Notifier — frontend styles */

/* Hide the original WooCommerce selects and raw radio inputs */
table.variations select {
	display: none !important;
}
.custom-variation-radios input[type="radio"] {
	display: none !important;
}

.custom-variation-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Fallback look for themes that do not style .ux-swatch themselves (the class
   comes from Flatsome/UX Builder). Two safeguards: the .fd-swatch-fallback
   class is only added by the script when the swatches are measured to have no
   theme styling at all, and :where() keeps these rules at ZERO specificity so
   any theme rule, however weak, still wins. */
:where(.fd-swatch-fallback .custom-variation-radios .ux-swatch) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #ffffff;
	color: #1e293b;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:where(.fd-swatch-fallback .custom-variation-radios .ux-swatch:hover) {
	border-color: #94a3b8;
}
:where(.fd-swatch-fallback .custom-variation-radios .ux-swatch.selected) {
	border-color: #3b82f6;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

/* Combination the shop never created — not sold out, simply not purchasable.
   Hidden rather than crossed out, so customers only see real options.

   The fade uses `animation` rather than `transition` on purpose: themes style
   .ux-swatch with their own transition (hover borders and the like) and a
   transition here would replace theirs. Animations sit on a separate property. */
/* The slot is kept, not collapsed: removing the box would make every swatch
   after it slide sideways, so the row jumps around while the customer is
   still choosing. Hidden this way, nothing else moves a pixel. */
.custom-variation-radios .is-unavailable {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
.custom-variation-radios .fd-swatch-out {
	animation: fdSwatchOut 180ms ease forwards;
	pointer-events: none;
}
.custom-variation-radios .fd-swatch-in {
	animation: fdSwatchIn 200ms ease;
}
@keyframes fdSwatchOut {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(0.82); }
}
@keyframes fdSwatchIn {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.custom-variation-radios .fd-swatch-out,
	.custom-variation-radios .fd-swatch-in {
		animation: none;
	}
}

/* Out-of-stock swatch state */
.custom-variation-radios .is-out-of-stock {
	opacity: 1 !important;
	cursor: pointer !important;
	position: relative !important;
	overflow: hidden !important;
	border-color: #fca5a5 !important;
	background-color: #fef2f2 !important;
	transition: all 0.2s ease;
}
.custom-variation-radios .is-out-of-stock:hover {
	border-color: #ef4444 !important;
	box-shadow: 0 0 8px rgba(239, 68, 68, 0.3) !important;
	opacity: 1 !important;
}
/* Chosen out-of-stock swatch — clearly highlighted, consistent for every one */
.custom-variation-radios .is-out-of-stock.selected,
.custom-variation-radios .is-out-of-stock.active {
	border-color: #3b82f6 !important;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35) !important;
	opacity: 1 !important;
}
.custom-variation-radios .is-out-of-stock::before,
.custom-variation-radios .is-out-of-stock::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120%;
	height: 1px; /* thinner X */
	background-color: #ef4444;
	z-index: 10;
	pointer-events: none;
}
.custom-variation-radios .is-out-of-stock::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.custom-variation-radios .is-out-of-stock::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
/* Variation name looks exactly like the in-stock ones */
.custom-variation-radios .is-out-of-stock .ux-swatch__text {
	filter: none !important;
	color: inherit !important;
	opacity: 1 !important;
}

/* Hint shown when attributes are still missing for a waitlist request */
#fd_restock_hint {
	display: none;
	direction: rtl;
	text-align: center;
	margin-top: 15px;
	padding: 9px 14px;
	border: 1px solid #fed7aa;
	border-radius: 10px;
	background: #fff7ed;
	color: #c2410c;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}

/* "Stock Notifier" toggle button */
#fd_restock_toggle {
	display: none;
	margin-top: 15px;
	width: 100%;
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	color: #ffffff;
	border: none;
	padding: 8px 18px; /* reduced height, full width kept */
	border-radius: 10px;
	font-weight: 800;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.1s ease;
	box-shadow: 0 3px 8px rgba(59, 130, 246, 0.35);
}
#fd_restock_toggle:hover {
	box-shadow: 0 5px 14px rgba(59, 130, 246, 0.45);
}
#fd_restock_toggle:active {
	transform: translateY(1px);
}
#fd_restock_toggle .fd-restock-bell {
	font-size: 17px;
}

/* Restock notifier form (RTL) */
#fd-restock-notifier-wrapper {
	direction: rtl;
	text-align: right;
	margin-top: 12px;
	padding: 18px;
	border: 1px solid #e4e7eb;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}
#fd-restock-notifier-wrapper .fd-restock-header {
	font-size: 15px;
	font-weight: 800;
	color: #1e293b;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	direction: ltr;      /* header sits on the LEFT (English title) */
	justify-content: flex-start;
	gap: 8px;
	text-align: left;
}
#fd-restock-notifier-wrapper .fd-restock-bell {
	font-size: 18px;
}
#fd-restock-notifier-wrapper .fd-restock-fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
#fd-restock-notifier-wrapper input[type="text"]:not(.fd-hp-field),
#fd-restock-notifier-wrapper input[type="email"],
#fd-restock-notifier-wrapper input[type="tel"] {
	width: 100%;
	border-radius: 10px;
	border: 1px solid #e4e7eb;
	padding: 10px 14px;
	background: #f8fafc;
	font-size: 14px;
	color: #1e293b;
	box-sizing: border-box;
}
#fd-restock-notifier-wrapper input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
#fd-restock-notifier-wrapper .fd-restock-phone-row {
	display: flex;
	direction: ltr; /* +20 badge is the first child → renders on the LEFT */
	gap: 8px;
	align-items: stretch; /* badge and input always the same height */
}
#fd-restock-notifier-wrapper .fd-restock-phone-row input[type="tel"] {
	flex: 1;
	text-align: left;
	margin: 0;
}
#fd-restock-notifier-wrapper .fd-restock-cc {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	margin: 0;
	max-width: 130px;
	background: #eff6ff;
	border-radius: 10px;
	border: 1px solid #bfdbfe;
	font-weight: bold;
	color: #1d4ed8;
	font-size: 14px;
	line-height: 1;
	box-sizing: border-box;
	white-space: nowrap;
	height: auto; /* stretches with the row to match the input */
}
#fd-restock-notifier-wrapper select.fd-restock-cc {
	cursor: pointer;
}
#fd-restock-notifier-wrapper select.fd-restock-cc:focus {
	outline: none;
	border-color: #3b82f6;
}
#fd-restock-notifier-wrapper input[type="email"] {
	text-align: left;
}

/* Searchable country picker (the native select stays as the value holder) */
#fd-restock-notifier-wrapper .fd-cc-picker {
	position: relative;
	direction: ltr;
	flex: 0 0 auto;
}
#fd-restock-notifier-wrapper .fd-cc-picker select.fd-restock-cc[aria-hidden="true"] {
	display: none;
}
#fd-restock-notifier-wrapper .fd-cc-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	min-height: 42px;
	padding: 0 12px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 10px;
	color: #1d4ed8;
	font-weight: bold;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}
#fd-restock-notifier-wrapper .fd-cc-caret {
	font-size: 10px;
	opacity: 0.7;
}
#fd-restock-notifier-wrapper .fd-cc-panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	width: 280px;
	max-width: 78vw;
	background: #fff;
	border: 1px solid #e4e7eb;
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
	padding: 8px;
}
#fd-restock-notifier-wrapper .fd-cc-search {
	width: 100%;
	border: 1px solid #e4e7eb;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 14px;
	margin-bottom: 6px;
	direction: ltr;
	text-align: left;
}
#fd-restock-notifier-wrapper .fd-cc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 230px;
	overflow-y: auto;
}
#fd-restock-notifier-wrapper .fd-cc-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #1e293b;
}
#fd-restock-notifier-wrapper .fd-cc-list li:hover,
#fd-restock-notifier-wrapper .fd-cc-list li[aria-selected="true"] {
	background: #eff6ff;
}
#fd-restock-notifier-wrapper .fd-cc-flag {
	font-size: 17px;
}
#fd-restock-notifier-wrapper .fd-cc-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#fd-restock-notifier-wrapper .fd-cc-dial {
	color: #64748b;
	font-size: 13px;
}
#fd_restock_submit {
	align-self: center; /* centered within the form */
	width: auto;
	min-width: 45%;
	margin: 0 auto;
	background-color: #3b82f6;
	color: #ffffff;
	border: none;
	padding: 9px 28px; /* smaller button */
	border-radius: 10px;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
#fd_restock_submit:hover:not(:disabled) {
	background-color: #2563eb;
}
#fd_restock_submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}
#fd_restock_msg {
	display: none;
	font-size: 13px;
	font-weight: bold;
	margin-top: 5px;
	text-align: center;
}

/* Honeypot field — visually hidden but not display:none (bots skip those) */
.fd-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Expected restock date */
#fd-restock-notifier-wrapper .fd-eta {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1d4ed8;
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 12px 0;
}

/* Social proof line */
#fd-restock-notifier-wrapper .fd-social {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #c2410c;
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 13px;
	text-align: center;
	margin: 0 0 12px 0;
}
#fd-restock-notifier-wrapper .fd-social b {
	font-weight: 800;
}