/*
 * SG Catalog Import – module "sg-name-addon".
 * Everything is scoped to .sgci-name-addon so the theme's other fields are never affected.
 * RTL is forced here (not inherited): the block must stay RTL even inside an LTR container,
 * a Woodmart quick-view modal, or a page builder section with direction overrides.
 */

.sgci-name-addon {
	box-sizing: border-box;
	flex: 0 0 100%;          /* own row inside flex add-to-cart containers (Woodmart) */
	width: 100%;
	max-width: 100%;
	margin-block: 0 16px;
	direction: rtl;
	text-align: right;
}

/* Let the flex row wrap so qty + button sit below the field */
.woocommerce-variation-add-to-cart:has(.sgci-name-addon),
form.cart:has(> .sgci-name-addon) {
	flex-wrap: wrap;
}

/* --- Optional mode: checkbox reveals the panel (pure CSS, works without JS) --- */
.sgci-name-addon .sgci-name-addon__toggle {
	margin: 0;
	margin-inline-end: 8px;
	vertical-align: middle;
	inline-size: 18px;
	block-size: 18px;
}

.sgci-name-addon .sgci-name-addon__toggle-label {
	display: inline;
	font-weight: 600;
	cursor: pointer;
	vertical-align: middle;
	direction: rtl;
	unicode-bidi: isolate;   /* "(+25 ₪)" keeps its order next to the checkbox */
	text-align: right;
}

.sgci-name-addon--optional .sgci-name-addon__panel {
	display: none;
	margin-block-start: 10px;
}

.sgci-name-addon--optional .sgci-name-addon__toggle:checked ~ .sgci-name-addon__panel {
	display: block;
}

/* --- Fields --- */
.sgci-name-addon .sgci-name-addon__field + .sgci-name-addon__field {
	margin-block-start: 12px;
}

.sgci-name-addon .sgci-name-addon__label {
	display: block;
	margin-block-end: 6px;
	font-weight: 600;
	direction: rtl;
	text-align: right;
}

/* !important: Woodmart / WooCommerce form styles use higher-specificity selectors for inputs */
.sgci-name-addon input.sgci-name-addon__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	font-size: 16px;         /* ≥16px prevents iOS Safari zoom on focus */
	direction: rtl !important;
	text-align: right !important;
}

.sgci-name-addon input.sgci-name-addon__house {
	max-width: 160px;
}

/* Placeholder: right-aligned, direction from its own first strong character.
   !important: themes style ::placeholder with higher specificity (caught in the 1.1.1 browser test).
   Separate rules per vendor prefix - an unknown selector would invalidate a combined list. */
.sgci-name-addon input.sgci-name-addon__input::placeholder {
	direction: rtl !important;
	text-align: right !important;
	unicode-bidi: plaintext !important;
	opacity: .65;
}
.sgci-name-addon input.sgci-name-addon__input::-webkit-input-placeholder {
	direction: rtl !important;
	text-align: right !important;
	unicode-bidi: plaintext !important;
}

.sgci-name-addon .sgci-name-addon__field.is-invalid input.sgci-name-addon__input {
	border-color: #c0392b;
	box-shadow: 0 0 0 1px #c0392b;
}

.sgci-name-addon .sgci-name-addon__error {
	margin-block: 6px 0;
	color: #c0392b;
	font-size: 14px;
	line-height: 1.4;
	direction: rtl;
	text-align: right;
	unicode-bidi: plaintext;
}

.sgci-name-addon .sgci-name-addon__error[hidden] {
	display: none !important;
}